@valtimo/process-management 13.42.0 → 13.44.0

package/fesm2022/valtimo-process-management.mjs

@@ -7,16 +7,15 @@ import { ReactiveFormsModule, Validators, FormsModule } from '@angular/forms';
 import * as i9 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i1$1 from '@valtimo/components';
-import { FitPageDirective, RenderInPageHeaderDirective, OverflowMenuComponent, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, ConfirmationModalModule, ViewType, CarbonListModule, CARBON_CONSTANTS, RenderInBodyComponent, ValtimoCdsModalDirective, WidgetModule } from '@valtimo/components';
+import { FitPageDirective, RenderInPageHeaderDirective, ConfirmationModalModule, OverflowMenuModule, ViewType, CarbonListModule, CARBON_CONSTANTS, RenderInBodyComponent, ValtimoCdsModalDirective, WidgetModule } from '@valtimo/components';
 import * as i5 from '@valtimo/process-link';
 import { ProcessLinkModule, ProcessLinkStateService, ProcessLinkStepService, ProcessLinkButtonService } from '@valtimo/process-link';
 import * as i2$2 from 'carbon-components-angular';
 import { LoadingModule, DropdownModule, SelectModule, ButtonModule, IconModule, TagModule, ToggleModule, TooltipModule, FileUploaderModule, ModalModule, LayerModule, NotificationModule, RadioModule } from 'carbon-components-angular';
 import * as i1 from '@angular/common/http';
-import { HttpErrorResponse } from '@angular/common/http';
-import { Deploy16, ListChecked16, Return16, Upload16 } from '@carbon/icons';
-import * as i2$1 from '@valtimo/shared';
-import { BaseApiService, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams, ROLE_ADMIN } from '@valtimo/shared';
+import { HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import * as i2 from '@valtimo/shared';
+import { BaseApiService, InterceptorSkipHeader, InterceptorSkip, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams, ROLE_ADMIN } from '@valtimo/shared';
 import { useService, BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, CamundaPlatformPropertiesProviderModule } from 'bpmn-js-properties-panel';
 import Modeler from 'bpmn-js/lib/Modeler';
 import camundaPlatformBehaviors from 'camunda-bpmn-js-behaviors/lib/camunda-platform';
@@ -24,15 +23,17 @@ import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json';
 import { isEqual } from 'lodash';
 import { filter, BehaviorSubject, Subject, Subscription, combineLatest, switchMap, of, tap, map as map$1, startWith, from, take, merge } from 'rxjs';
 import { distinctUntilChanged, map, filter as filter$1 } from 'rxjs/operators';
-import * as i2 from '@valtimo/form';
+import * as i2$1 from '@valtimo/form';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { is } from 'bpmn-js/lib/util/ModelUtil';
 import { html } from 'htm/preact';
+import { View16, ViewOff16, Upload16 } from '@carbon/icons';
 import * as i3 from 'ngx-logger';
 import * as i7 from '@valtimo/process';
 import * as i8 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i10 from '@valtimo/plugin';
+import { PluginConfigurationMappingComponent } from '@valtimo/plugin';
 import { AuthGuardService } from '@valtimo/security';
 
 /*
@@ -85,11 +86,37 @@ const PROCESS_MANAGEMENT_LIST_TEST_IDS = {
     uploadButton: 'processManagementUploadButton',
     createProcessButton: 'processManagementCreateProcessButton',
 };
+const PROCESS_MANAGEMENT_UPLOAD_TEST_IDS = {
+    fileUploader: 'processManagementUploadFileUploader',
+    cancelButton: 'processManagementUploadCancelButton',
+    submitButton: 'processManagementUploadSubmitButton',
+    backButton: 'processManagementUploadBackButton',
+    importButton: 'processManagementUploadImportButton',
+    closeButton: 'processManagementUploadCloseButton',
+};
+/**
+ * The "Process link" group the Valtimo properties provider adds to the bpmn-js
+ * properties panel. The surrounding panel is rendered by bpmn-js itself and
+ * cannot carry test ids — only this group is ours.
+ */
+const PROCESS_LINK_PANEL_TEST_IDS = {
+    createButton: 'processLinkPanelCreateButton',
+    editButton: 'processLinkPanelEditButton',
+    unlinkButton: 'processLinkPanelUnlinkButton',
+};
 const PROCESS_MANAGEMENT_BUILDER_TEST_IDS = {
     draftToggle: 'processManagementBuilderDraftToggle',
     startsCaseToggle: 'processManagementBuilderStartsCaseToggle',
     startableByUserToggle: 'processManagementBuilderStartableByUserToggle',
     deployButton: 'processManagementBuilderDeployButton',
+    exportOption: 'processManagementBuilderExportOption',
+    markersVisibilityToggle: 'processManagementBuilderMarkersVisibilityToggle',
+    versionDropdown: 'processManagementBuilderVersionDropdown',
+    validateButton: 'processManagementBuilderValidateButton',
+    moreButton: 'processManagementBuilderMoreButton',
+    readOnlyTag: 'processManagementBuilderReadOnlyTag',
+    systemProcessTag: 'processManagementBuilderSystemProcessTag',
+    validationErrors: 'processManagementBuilderValidationErrors',
 };
 
 /*
@@ -108,8 +135,30 @@ const PROCESS_MANAGEMENT_BUILDER_TEST_IDS = {
  * limitations under the License.
  */
 
+class ProcessBeanService extends BaseApiService {
+    constructor(httpClient, configService) {
+        super(httpClient, configService);
+        this.httpClient = httpClient;
+        this.configService = configService;
+    }
+    getProcessBeans() {
+        return this.httpClient.get(this.getApiUrl('/management/v1/process-bean'));
+    }
+    getProcessBean(beanName) {
+        return this.httpClient.get(this.getApiUrl(`/management/v1/process-bean/${beanName}`));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessBeanService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessBeanService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessBeanService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
+
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -154,6 +203,39 @@ class ProcessManagementEditorService {
     setValidationErrors(errors) {
         this._validationErrors$.next(errors);
     }
+    get dismissedAutofills() {
+        return this._dismissedAutofills$.getValue();
+    }
+    get autofillDismissed$() {
+        return this._autofillDismissed$.asObservable();
+    }
+    dismissAutofill(activityId) {
+        const current = this._dismissedAutofills$.getValue();
+        current.add(activityId);
+        this._dismissedAutofills$.next(new Set(current));
+        this._autofillDismissed$.next(activityId);
+    }
+    clearDismissedAutofills() {
+        this._dismissedAutofills$.next(new Set());
+    }
+    isAutofillDismissed(activityId) {
+        return this._dismissedAutofills$.getValue().has(activityId);
+    }
+    get autofilledElements() {
+        return this._autofilledElements$.getValue();
+    }
+    setAutofilledElements(elements) {
+        this._autofilledElements$.next(elements);
+    }
+    getAutofillForActivity(activityId) {
+        return this._autofilledElements$.getValue().find(e => e.activityId === activityId);
+    }
+    get editingAllowed() {
+        return this._editingAllowed$.getValue();
+    }
+    setEditingAllowed(editingAllowed) {
+        this._editingAllowed$.next(editingAllowed);
+    }
     constructor(processLinkService, formService) {
         this.processLinkService = processLinkService;
         this.formService = formService;
@@ -165,6 +247,10 @@ class ProcessManagementEditorService {
         this._formDefinitionOptions$ = new BehaviorSubject([]);
         this._validationErrors$ = new BehaviorSubject([]);
         this.validationErrors$ = this._validationErrors$.asObservable();
+        this._dismissedAutofills$ = new BehaviorSubject(new Set());
+        this._autofillDismissed$ = new Subject();
+        this._autofilledElements$ = new BehaviorSubject([]);
+        this._editingAllowed$ = new BehaviorSubject(true);
         this._updatingBpmnView = false;
         this._activityIdBusinessIdMap = {};
         this._subscriptions = new Subscription();
@@ -275,12 +361,12 @@ class ProcessManagementEditorService {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementEditorService, deps: [{ token: i5.ProcessLinkService }, { token: i2.FormService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementEditorService, deps: [{ token: i5.ProcessLinkService }, { token: i2$1.FormService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementEditorService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementEditorService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i5.ProcessLinkService }, { type: i2.FormService }] });
+        }], ctorParameters: () => [{ type: i5.ProcessLinkService }, { type: i2$1.FormService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -326,7 +412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         }] });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -358,7 +444,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  */
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -378,7 +496,7 @@ const PROCESS_MANAGEMENT_ENDPOINTS = {
 };
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -409,6 +527,21 @@ const PROCESS_MANAGEMENT_ENDPOINTS = {
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 class ProcessManagementService extends BaseApiService {
     get caseDefinitionKey() {
         return this._definitionKey$.getValue() ?? '';
@@ -475,6 +608,18 @@ class ProcessManagementService extends BaseApiService {
     updateProcessDefinitionCaseDefinitionProperties(caseDefinitionKey, caseDefinitionVersionTag, processDefinitionId, body) {
         return this.httpClient.put(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionKey}/version/${caseDefinitionVersionTag}/process/${processDefinitionId}/properties`), body);
     }
+    exportProcessDefinition(processDefinitionId) {
+        return this.httpClient.get(this.getApiUrl(`/management/v1/process-definition/${processDefinitionId}/export`), { observe: 'response', responseType: 'blob', headers: InterceptorSkipHeader });
+    }
+    previewProcessDefinitionImport(file) {
+        return this.httpClient.post(this.getApiUrl('/management/v1/process-definition/import/preview'), file, { headers: new HttpHeaders().set(InterceptorSkip, '400') });
+    }
+    importProcessDefinition(file, pluginConfigurationMappings) {
+        if (pluginConfigurationMappings) {
+            file.set('pluginConfigurationMappings', new Blob([JSON.stringify(pluginConfigurationMappings)], { type: 'application/json' }));
+        }
+        return this.httpClient.post(this.getApiUrl('/management/v1/process-definition/import'), file, { headers: new HttpHeaders().set(InterceptorSkip, '400') });
+    }
     validateProcessDefinition(request) {
         return this.httpClient.post(this.getApiUrl('/management/v1/process-definition/validate'), request);
     }
@@ -499,7 +644,7 @@ class ProcessManagementService extends BaseApiService {
         }
         return object;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementService, decorators: [{
@@ -507,7 +652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -629,6 +774,10 @@ const DisableBpmnWriteModule = {
     ],
     move: ['value', null],
     resizeHandles: ['value', { addResizer: () => { }, removeResizers: () => { } }],
+    bendpoints: ['value', {}],
+    bendpointMove: ['value', { start: () => { } }],
+    bendpointMovePreview: ['value', {}],
+    connectionSegmentMove: ['value', { start: () => { } }],
 };
 const disableCommands = (editor) => {
     const commandStack = editor.get('commandStack');
@@ -759,6 +908,9 @@ class ValtimoPropertiesProvider {
     get pluginTranslationService() {
         return window.pluginTranslationService;
     }
+    get processLinkService() {
+        return window.processLinkService;
+    }
     constructor(propertiesPanel) {
         propertiesPanel.registerProvider(500, this);
     }
@@ -774,6 +926,8 @@ class ValtimoPropertiesProvider {
     getGroups(element) {
         const processLink = this.processManagementEditorService.processLinksForSelectedDefinition.find(processLink => processLink.activityId === element.id) || null;
         const elementErrors = this.processManagementEditorService.validationErrors.filter(error => error.elementId === element.id);
+        const autofillInfo = this.processManagementEditorService.getAutofillForActivity(element.id);
+        const isAutofillDismissed = this.processManagementEditorService.isAutofillDismissed(element.id);
         return (groups) => {
             const generalGroup = groups.find((g) => g.id === 'general');
             if (generalGroup) {
@@ -795,6 +949,23 @@ class ValtimoPropertiesProvider {
                 };
                 groups.unshift(errorGroup);
             }
+            if (autofillInfo && !isAutofillDismissed) {
+                const targetGroupId = this.getGroupIdForModificationType(autofillInfo.modificationType);
+                const targetGroup = groups.find((g) => g.id === targetGroupId);
+                if (targetGroup) {
+                    const notificationEntry = {
+                        id: 'autofilledNotificationEntry',
+                        activityId: element.id,
+                        element,
+                        translateService: this.translateService,
+                        processManagementEditorService: this.processManagementEditorService,
+                        processLinkService: this.processLinkService,
+                        component: AutofilledNotificationElement,
+                    };
+                    targetGroup.entries.unshift(notificationEntry);
+                    targetGroup.shouldOpen = true;
+                }
+            }
             if (is(element, 'bpmn:UserTask') ||
                 is(element, 'bpmn:StartEvent') ||
                 is(element, 'bpmn:ServiceTask') ||
@@ -803,18 +974,31 @@ class ValtimoPropertiesProvider {
                 is(element, 'bpmn:IntermediateThrowEvent') ||
                 is(element, 'bpmn:IntermediateCatchEvent') ||
                 is(element, 'bpmn:CallActivity')) {
-                const customGroup = {
-                    id: 'customRootGroup',
-                    label: 'Process link',
-                    entries: [this.createCustomRootElement(element, processLink)],
-                    groupType: 'root',
-                };
-                this.addAsSecondOrFirst(groups, customGroup);
+                const editingAllowed = this.processManagementEditorService.editingAllowed;
+                if (editingAllowed || processLink) {
+                    const customGroup = {
+                        id: 'customRootGroup',
+                        label: 'Process link',
+                        entries: [this.createCustomRootElement(element, processLink, editingAllowed)],
+                        groupType: 'root',
+                    };
+                    this.addAsSecondOrFirst(groups, customGroup);
+                }
             }
             return groups;
         };
     }
-    createCustomRootElement(element, processLink) {
+    getGroupIdForModificationType(modificationType) {
+        const groupMapping = {
+            SERVICE_TASK_EXPRESSION: 'CamundaPlatform__Implementation',
+            SEND_TASK_EXPRESSION: 'CamundaPlatform__Implementation',
+            MESSAGE_EVENT_EXPRESSION: 'message',
+            TIMER_DURATION: 'timer',
+            CALL_ACTIVITY_BUSINESS_KEY: 'CamundaPlatform__BusinessKey',
+        };
+        return groupMapping[modificationType] || 'general';
+    }
+    createCustomRootElement(element, processLink, editingAllowed) {
         return {
             translateService: this.translateService,
             processManagementEditorService: this.processManagementEditorService,
@@ -822,18 +1006,20 @@ class ValtimoPropertiesProvider {
             id: 'customRootElement',
             processLink,
             element,
+            editingAllowed,
             component: CustomRootElement,
-            isEdited: () => false,
+            isEdited: (node) => node && !!node.value,
         };
     }
 }
 const CustomRootElement = (props) => {
-    const { element, processLink, translateService, processManagementEditorService, pluginTranslationService, } = props;
+    const { element, processLink, translateService, processManagementEditorService, pluginTranslationService, editingAllowed, } = props;
     const modeling = useService('modeling');
     const elementRegistry = useService('elementRegistry');
     const editProcessLinkText = translateService.instant('interface.edit');
     const unlinkText = translateService.instant('processLink.unlink');
     const createText = translateService.instant('processLink.create');
+    const viewText = translateService.instant('interface.view');
     const getModalParams = () => {
         const currentElement = elementRegistry.get(element.id) || element;
         return {
@@ -874,55 +1060,26 @@ const CustomRootElement = (props) => {
     };
     const processLinkFormDefinitionId = processLink?.formDefinitionId;
     const processLinkFormDefinitionName = processManagementEditorService.formDefinitionOptions.find(option => option.id === processLinkFormDefinitionId)?.name;
-    if (processLinkFormDefinitionName) {
-        return html `<div class="process-link-properties-panel">
-      <div class="process-link-properties-panel__header">
-        <span class="process-link-properties-panel__title">${processLinkFormDefinitionName}</span>
-
-        <cds-tag
-          class="cds--tag cds--tag--blue cds--tag--md cds--layout--size-md  cds-tag--no-margin"
-          ><span class="cds--tag__label">
-            ${translateService.instant('processLinkType.form')}
-          </span>
-        </cds-tag>
-      </div>
-
-      <div class="process-link-properties-panel__buttons">
-        <button
-          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
-          onClick=${handleUnlinkClick}
-        >
-          ${unlinkText}
-        </button>
-
+    const hiddenInput = html `<input
+    type="hidden"
+    class="bio-properties-panel-input"
+    value=${processLink ? 'configured' : ''}
+  />`;
+    const wrapEntry = (content) => html `<div data-entry-id=${props.id}>${hiddenInput}${content}</div>`;
+    const linkedButtons = !editingAllowed
+        ? html `<div class="process-link-properties-panel__buttons">
         <button
           class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+          data-test-id=${PROCESS_LINK_PANEL_TEST_IDS.editButton}
           onClick=${handleEditClick}
         >
-          ${editProcessLinkText}
+          ${viewText}
         </button>
-      </div>
-    </div>`;
-    }
-    const processLinkFormFlowDefinitionKey = processLink?.formFlowDefinitionKey;
-    if (processLinkFormFlowDefinitionKey) {
-        return html `<div class="process-link-properties-panel">
-      <div class="process-link-properties-panel__header">
-        <span class="process-link-properties-panel__title"
-          >${processLinkFormFlowDefinitionKey}</span
-        >
-
-        <cds-tag
-          class="cds--tag cds--tag--teal cds--tag--md cds--layout--size-md  cds-tag--no-margin"
-          ><span class="cds--tag__label">
-            ${translateService.instant('processLinkType.form-flow')}
-          </span>
-        </cds-tag>
-      </div>
-
-      <div class="process-link-properties-panel__buttons">
+      </div>`
+        : html `<div class="process-link-properties-panel__buttons">
         <button
           class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
+          data-test-id=${PROCESS_LINK_PANEL_TEST_IDS.unlinkButton}
           onClick=${handleUnlinkClick}
         >
           ${unlinkText}
@@ -930,165 +1087,848 @@ const CustomRootElement = (props) => {
 
         <button
           class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+          data-test-id=${PROCESS_LINK_PANEL_TEST_IDS.editButton}
           onClick=${handleEditClick}
         >
           ${editProcessLinkText}
         </button>
-      </div>
-    </div>`;
+      </div>`;
+    if (processLinkFormDefinitionName) {
+        return wrapEntry(html `<div class="process-link-properties-panel">
+        <div class="process-link-properties-panel__header">
+          <span class="process-link-properties-panel__title">${processLinkFormDefinitionName}</span>
+
+          <cds-tag
+            class="cds--tag cds--tag--blue cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+            ><span class="cds--tag__label">
+              ${translateService.instant('processLinkType.form')}
+            </span>
+          </cds-tag>
+        </div>
+
+        ${linkedButtons}
+      </div>`);
+    }
+    const processLinkFormFlowDefinitionKey = processLink?.formFlowDefinitionKey;
+    if (processLinkFormFlowDefinitionKey) {
+        return wrapEntry(html `<div class="process-link-properties-panel">
+        <div class="process-link-properties-panel__header">
+          <span class="process-link-properties-panel__title"
+            >${processLinkFormFlowDefinitionKey}</span
+          >
+
+          <cds-tag
+            class="cds--tag cds--tag--teal cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+            ><span class="cds--tag__label">
+              ${translateService.instant('processLinkType.form-flow')}
+            </span>
+          </cds-tag>
+        </div>
+
+        ${linkedButtons}
+      </div>`);
     }
     const buildingBlockDefinitionKey = processLink?.buildingBlockDefinitionKey;
     const buildingBlockDefinitionVersion = processLink?.buildingBlockDefinitionVersionTag;
     if (buildingBlockDefinitionKey) {
-        return html `<div class="process-link-properties-panel">
-      <div class="process-link-properties-panel__header">
-        <span class="process-link-properties-panel__title"
-          >${buildingBlockDefinitionKey} (${buildingBlockDefinitionVersion})</span
-        >
+        return wrapEntry(html `<div class="process-link-properties-panel">
+        <div class="process-link-properties-panel__header">
+          <span class="process-link-properties-panel__title"
+            >${buildingBlockDefinitionKey} (${buildingBlockDefinitionVersion})</span
+          >
 
-        <cds-tag
-          class="cds--tag cds--tag--green cds--tag--md cds--layout--size-md  cds-tag--no-margin"
-          ><span class="cds--tag__label">
-            ${translateService.instant('processLinkType.building-block')}
-          </span>
-        </cds-tag>
-      </div>
+          <cds-tag
+            class="cds--tag cds--tag--green cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+            ><span class="cds--tag__label">
+              ${translateService.instant('processLinkType.building-block')}
+            </span>
+          </cds-tag>
+        </div>
 
-      <div class="process-link-properties-panel__buttons">
-        <button
-          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
-          onClick=${handleUnlinkClick}
-        >
-          ${unlinkText}
-        </button>
-
-        <button
-          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
-          onClick=${handleEditClick}
-        >
-          ${editProcessLinkText}
-        </button>
-      </div>
-    </div>`;
+        ${linkedButtons}
+      </div>`);
     }
     const pluginActionKey = processLink?.pluginActionDefinitionKey;
     const pluginActionTranslation = pluginTranslationService.instantByPluginActionKey(pluginActionKey);
     const pluginTitleTranslation = pluginTranslationService.instantPluginTitleByPluginActionKey(pluginActionKey);
     if (pluginActionKey) {
-        return html `<div class="process-link-properties-panel">
-      <div class="process-link-properties-panel__header">
-        <span class="process-link-properties-panel__title-container">
-          <span class="process-link-properties-panel__title">${pluginTitleTranslation}</span>
+        return wrapEntry(html `<div class="process-link-properties-panel">
+        <div class="process-link-properties-panel__header">
+          <span class="process-link-properties-panel__title-container">
+            <span class="process-link-properties-panel__title">${pluginTitleTranslation}</span>
 
-          <span class="process-link-properties-panel__title">${pluginActionTranslation}</span>
-        </span>
-
-        <cds-tag
-          class="cds--tag cds--tag--purple cds--tag--md cds--layout--size-md  cds-tag--no-margin"
-          ><span class="cds--tag__label">
-            ${translateService.instant('processLinkType.plugin')}
+            <span class="process-link-properties-panel__title">${pluginActionTranslation}</span>
           </span>
-        </cds-tag>
-      </div>
 
-      <div class="process-link-properties-panel__buttons">
-        <button
-          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
-          onClick=${handleUnlinkClick}
-        >
-          ${unlinkText}
-        </button>
+          <cds-tag
+            class="cds--tag cds--tag--purple cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+            ><span class="cds--tag__label">
+              ${translateService.instant('processLinkType.plugin')}
+            </span>
+          </cds-tag>
+        </div>
 
-        <button
-          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
-          onClick=${handleEditClick}
-        >
-          ${editProcessLinkText}
-        </button>
-      </div>
-    </div>`;
+        ${linkedButtons}
+      </div>`);
     }
     const uiComponentKey = processLink?.componentKey;
     if (uiComponentKey) {
-        return html `<div class="process-link-properties-panel">
-      <div class="process-link-properties-panel__header">
-        <span class="process-link-properties-panel__title">${uiComponentKey}</span>
+        return wrapEntry(html `<div class="process-link-properties-panel">
+        <div class="process-link-properties-panel__header">
+          <span class="process-link-properties-panel__title">${uiComponentKey}</span>
 
-        <cds-tag
-          class="cds--tag cds--tag--magenta cds--tag--md cds--layout--size-md  cds-tag--no-margin"
-          ><span class="cds--tag__label">
-            ${translateService.instant('processLinkType.ui-component')}
-          </span>
-        </cds-tag>
-      </div>
+          <cds-tag
+            class="cds--tag cds--tag--magenta cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+            ><span class="cds--tag__label">
+              ${translateService.instant('processLinkType.ui-component')}
+            </span>
+          </cds-tag>
+        </div>
 
-      <div class="process-link-properties-panel__buttons">
-        <button
-          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
-          onClick=${handleUnlinkClick}
+        ${linkedButtons}
+      </div>`);
+    }
+    const genericLinkedPanel = html `<div class="process-link-properties-panel">
+    ${linkedButtons}
+  </div>`;
+    const genericCreatePanel = html `<div class="process-link-properties-panel">
+    <div class="process-link-properties-panel__buttons">
+      <button
+        class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+        data-test-id=${PROCESS_LINK_PANEL_TEST_IDS.createButton}
+        onClick=${handleCreateClick}
+      >
+        ${createText}
+      </button>
+    </div>
+  </div>`;
+    return wrapEntry(processLink ? genericLinkedPanel : genericCreatePanel);
+};
+const ValidationErrorsElement = (props) => {
+    const getErrorMessage = (error) => {
+        if (error.errorCode) {
+            const translationKey = `processManagement.validationErrorCodes.${error.errorCode}`;
+            const translated = props.translateService.instant(translationKey, {
+                expression: error.expression ?? '',
+            });
+            if (translated !== translationKey) {
+                return translated;
+            }
+        }
+        return error.reason;
+    };
+    return html `<div class="validation-errors-panel">
+    ${props.errors.map(error => html `<div
+          class="validation-errors-panel__item${error.severity === 'WARNING' ? ' warning' : ''}"
         >
-          ${unlinkText}
-        </button>
+          <span
+            class="validation-errors-panel__icon${error.severity === 'WARNING' ? ' warning' : ''}"
+            >!</span
+          >
+          <span
+            class="validation-errors-panel__reason${error.severity === 'WARNING' ? ' warning' : ''}"
+            >${getErrorMessage(error)}</span
+          >
+        </div>`)}
+  </div>`;
+};
+const AutofilledNotificationElement = (props) => {
+    const handleDismiss = (event) => {
+        const processDefinitionId = props.processManagementEditorService.selectionProcessDefinition?.id;
+        if (processDefinitionId) {
+            props.processLinkService.deleteAutofill(processDefinitionId, props.activityId).subscribe();
+        }
+        props.processManagementEditorService.dismissAutofill(props.activityId);
+        const target = event.currentTarget;
+        const panel = target.closest('.autofilled-notification-panel');
+        if (panel) {
+            panel.style.display = 'none';
+        }
+    };
+    return html `<div class="autofilled-notification-panel">
+    <span class="autofilled-notification-panel__icon">!</span>
+    <span class="autofilled-notification-panel__message">
+      ${props.translateService.instant('processManagement.autofilled.sidebarMessage')}
+    </span>
+    <button class="autofilled-notification-panel__dismiss" onClick=${handleDismiss}>×</button>
+  </div>`;
+};
+const ValtimoPropertiesProviderModule = {
+    __init__: ['customPropertiesProvider'],
+    customPropertiesProvider: ['type', ValtimoPropertiesProvider],
+};
 
-        <button
-          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
-          onClick=${handleEditClick}
-        >
-          ${editProcessLinkText}
-        </button>
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const READ_ONLY_PRIORITY = 1;
+const removeEditActions = (node) => {
+    if (!node || typeof node !== 'object')
+        return;
+    if (node.add)
+        node.add = null;
+    if (node.remove)
+        node.remove = null;
+    if (Array.isArray(node.entries)) {
+        node.entries.forEach((entry) => removeEditActions(entry));
+    }
+    if (Array.isArray(node.items)) {
+        node.items.forEach((item) => removeEditActions(item));
+    }
+};
+class ReadOnlyPropertiesProvider {
+    static { this.$inject = ['propertiesPanel']; }
+    constructor(propertiesPanel) {
+        propertiesPanel.registerProvider(READ_ONLY_PRIORITY, this);
+    }
+    getGroups() {
+        return (groups) => {
+            groups.forEach(group => removeEditActions(group));
+            return groups;
+        };
+    }
+}
+const ENTRY = '.bio-properties-panel-entry';
+const READ_ONLY_INPUT_TYPES = ['email', 'number', 'password', 'search', 'tel', 'text', 'url'];
+const makeControlsReadOnly = (container) => {
+    container.querySelectorAll(`${ENTRY} input`).forEach(input => {
+        if (READ_ONLY_INPUT_TYPES.includes(input.type)) {
+            input.readOnly = true;
+        }
+        else {
+            input.disabled = true;
+        }
+    });
+    container
+        .querySelectorAll(`${ENTRY} textarea`)
+        .forEach(textarea => (textarea.readOnly = true));
+    container
+        .querySelectorAll(`${ENTRY} select, ${ENTRY} button`)
+        .forEach(control => (control.disabled = true));
+    container
+        .querySelectorAll(`${ENTRY} [contenteditable="true"]`)
+        .forEach(editor => editor.setAttribute('contenteditable', 'false'));
+};
+class ReadOnlyPropertiesPanel {
+    static { this.$inject = ['config.propertiesPanel', 'eventBus']; }
+    constructor(config, eventBus) {
+        this._observer = null;
+        const parent = config?.parent;
+        if (!parent)
+            return;
+        this._observer = new MutationObserver(() => makeControlsReadOnly(parent));
+        this._observer.observe(parent, { childList: true, subtree: true });
+        eventBus.on('diagram.destroy', () => this._observer?.disconnect());
+    }
+}
+const ReadOnlyPropertiesPanelModule = {
+    __init__: ['readOnlyPropertiesProvider', 'readOnlyPropertiesPanel'],
+    readOnlyPropertiesProvider: ['type', ReadOnlyPropertiesProvider],
+    readOnlyPropertiesPanel: ['type', ReadOnlyPropertiesPanel],
+};
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ExpressionAutocomplete {
+    static { this.$inject = ['eventBus']; }
+    constructor(eventBus) {
+        this.processBeans = [];
+        this.panelContainer = null;
+        this.stylesInjected = false;
+        this.observer = null;
+        this.documentClickHandlers = [];
+        this.injectStyles();
+        eventBus.on('diagram.destroy', () => {
+            this.dispose();
+        });
+    }
+    dispose() {
+        this.cleanupClickHandlers();
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+        this.panelContainer = null;
+    }
+    cleanupClickHandlers() {
+        for (const handler of this.documentClickHandlers) {
+            document.removeEventListener('click', handler);
+        }
+        this.documentClickHandlers = [];
+    }
+    setProcessBeans(beans) {
+        this.processBeans = beans;
+    }
+    setPanelContainer(container) {
+        this.panelContainer = container;
+        this.startObserving();
+        setTimeout(() => this.scanAndAttach(), 100);
+    }
+    startObserving() {
+        if (!this.panelContainer || this.observer)
+            return;
+        this.observer = new MutationObserver(() => {
+            this.scanAndAttach();
+        });
+        this.observer.observe(this.panelContainer, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    scanAndAttach() {
+        if (!this.panelContainer)
+            return;
+        const allInputs = this.panelContainer.querySelectorAll('input, textarea');
+        allInputs.forEach(input => {
+            if (input.dataset.autocompleteAttached)
+                return;
+            if (this.isExpressionField(input)) {
+                this.attachAutocomplete(input);
+                input.dataset.autocompleteAttached = 'true';
+            }
+        });
+    }
+    isExpressionField(input) {
+        const type = input.type?.toLowerCase();
+        if (input.tagName !== 'TEXTAREA' && !(input.tagName === 'INPUT' && (!type || type === 'text'))) {
+            return false;
+        }
+        if (input.closest('.expression-editor-simple')) {
+            return false;
+        }
+        const name = (input.name || input.id || '').toLowerCase();
+        if (name.includes('resultvariable') || name.includes('result-variable')) {
+            return false;
+        }
+        if (name.includes('expression') || name.includes('delegateexpression')) {
+            return true;
+        }
+        const entry = input.closest('.bio-properties-panel-entry');
+        if (entry) {
+            const entryId = (entry.getAttribute('data-entry-id') || '').toLowerCase();
+            if (entryId.includes('resultvariable') || entryId.includes('result-variable')) {
+                return false;
+            }
+            if (entryId.includes('expression')) {
+                return true;
+            }
+        }
+        const label = input.closest('.bio-properties-panel-entry')?.querySelector('label');
+        if (label) {
+            const labelText = label.textContent?.toLowerCase() || '';
+            if (labelText.includes('result variable') || labelText.includes('resultvariable')) {
+                return false;
+            }
+            if (labelText.includes('expression') || labelText.includes('delegate')) {
+                return true;
+            }
+        }
+        return false;
+    }
+    attachAutocomplete(input) {
+        this.wrapWithEditor(input);
+    }
+    // --- Expression Editor (Dropdown/Manual toggle) ---
+    wrapWithEditor(input) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'expression-editor-wrapper';
+        const parsed = this.parseExpression(input.value);
+        const canUseDropdown = !input.value || (parsed.beanName !== null && parsed.methodName !== null);
+        const initialMode = canUseDropdown ? 'simple' : 'technical';
+        wrapper.dataset.mode = initialMode;
+        input.parentNode?.insertBefore(wrapper, input);
+        const toggle = document.createElement('div');
+        toggle.className = 'expression-editor-toggle';
+        toggle.innerHTML = `
+      <button type="button" class="expression-editor-toggle__btn${initialMode === 'simple' ? ' active' : ''}" data-mode="simple">Dropdown</button>
+      <button type="button" class="expression-editor-toggle__btn${initialMode === 'technical' ? ' active' : ''}" data-mode="technical">Manual</button>
+    `;
+        const technicalContainer = document.createElement('div');
+        technicalContainer.className = 'expression-editor-technical';
+        technicalContainer.appendChild(input);
+        technicalContainer.style.display = initialMode === 'technical' ? 'block' : 'none';
+        const simpleContainer = document.createElement('div');
+        simpleContainer.className = 'expression-editor-simple';
+        simpleContainer.style.display = initialMode === 'simple' ? 'block' : 'none';
+        wrapper.appendChild(toggle);
+        wrapper.appendChild(technicalContainer);
+        wrapper.appendChild(simpleContainer);
+        toggle.querySelectorAll('button').forEach(btn => {
+            btn.addEventListener('click', e => {
+                e.preventDefault();
+                this.setEditorMode(wrapper, input, btn.dataset.mode || 'technical');
+            });
+        });
+        if (initialMode === 'simple') {
+            this.renderSimpleMode(simpleContainer, input);
+        }
+    }
+    setEditorMode(wrapper, input, mode) {
+        wrapper.dataset.mode = mode;
+        wrapper.querySelectorAll('.expression-editor-toggle__btn').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.mode === mode);
+        });
+        const technicalContainer = wrapper.querySelector('.expression-editor-technical');
+        const simpleContainer = wrapper.querySelector('.expression-editor-simple');
+        const invalidArgsStr = wrapper.dataset.invalidArgs;
+        const invalidArgs = invalidArgsStr ? JSON.parse(invalidArgsStr) : [];
+        if (mode === 'simple') {
+            technicalContainer.style.display = 'none';
+            simpleContainer.style.display = 'block';
+            input.classList.remove('validation-error-param');
+            this.renderSimpleMode(simpleContainer, input);
+            if (invalidArgs.length > 0) {
+                setTimeout(() => {
+                    for (const idx of invalidArgs) {
+                        const paramInput = simpleContainer.querySelector(`.expression-editor-param input[data-param-index="${idx}"]`);
+                        if (paramInput) {
+                            paramInput.classList.add('validation-error-param');
+                        }
+                    }
+                }, 0);
+            }
+        }
+        else {
+            technicalContainer.style.display = 'block';
+            simpleContainer.style.display = 'none';
+            if (invalidArgs.length > 0) {
+                input.classList.add('validation-error-param');
+            }
+            setTimeout(() => input.blur(), 0);
+        }
+    }
+    renderSimpleMode(container, input) {
+        this.cleanupClickHandlers();
+        const parsed = this.parseExpression(input.value);
+        container.innerHTML = `
+      <div class="expression-editor-field" data-container="bean">
+        <label>Service</label>
+      </div>
+      <div class="expression-editor-field" data-container="method"></div>
+      <div data-container="params"></div>
+    `;
+        const beanContainer = container.querySelector('[data-container="bean"]');
+        this.renderCustomSelect(beanContainer, this.processBeans.map(b => ({
+            value: b.name,
+            label: this.camelCaseToReadable(b.name),
+            description: b.description,
+        })), parsed.beanName, 'Select service...', 'bean', beanName => {
+            this.renderMethodDropdown(container, beanName, null, input);
+            this.renderParameterInputs(container, beanName, null, [], input);
+            this.buildAndSetExpression(container, input);
+        });
+        if (parsed.beanName) {
+            this.renderMethodDropdown(container, parsed.beanName, parsed.methodName, input);
+        }
+        if (parsed.beanName && parsed.methodName) {
+            this.renderParameterInputs(container, parsed.beanName, parsed.methodName, parsed.parameters, input);
+        }
+    }
+    renderCustomSelect(container, options, selectedValue, placeholder, dataField, onChange) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'expression-editor-custom-select';
+        wrapper.dataset.field = dataField;
+        wrapper.dataset.value = selectedValue || '';
+        const nativeSelect = document.createElement('select');
+        nativeSelect.className = 'bio-properties-panel-input';
+        nativeSelect.innerHTML =
+            `<option value="" disabled ${!selectedValue ? 'selected' : ''}>${this.escapeHtml(placeholder)}</option>` +
+                options
+                    .map(opt => `<option value="${this.escapeAttr(opt.value)}" ${opt.value === selectedValue ? 'selected' : ''}>${this.escapeHtml(opt.label)}</option>`)
+                    .join('');
+        const selectedOption = options.find(o => o.value === selectedValue);
+        if (selectedOption?.description) {
+            nativeSelect.title = selectedOption.description;
+        }
+        const dropdown = document.createElement('div');
+        dropdown.className = 'expression-editor-custom-select__dropdown';
+        dropdown.style.display = 'none';
+        let selectedIndex = options.findIndex(o => o.value === selectedValue);
+        if (selectedIndex < 0)
+            selectedIndex = 0;
+        const renderItems = () => {
+            dropdown.innerHTML = options
+                .map((opt, i) => `
+        <div class="expression-editor-custom-select__item${opt.value === selectedValue ? ' selected' : ''}" data-index="${i}" data-value="${this.escapeAttr(opt.value)}">
+          <div class="expression-editor-custom-select__label">${this.escapeHtml(opt.label)}</div>
+          ${opt.description ? `<div class="expression-editor-custom-select__desc">${this.escapeHtml(opt.description)}</div>` : ''}
+        </div>
+      `)
+                .join('');
+            dropdown.querySelectorAll('.expression-editor-custom-select__item').forEach(item => {
+                item.addEventListener('click', e => {
+                    e.stopPropagation();
+                    const value = item.dataset.value;
+                    const selected = options.find(o => o.value === value);
+                    wrapper.dataset.value = value;
+                    nativeSelect.value = value;
+                    nativeSelect.title = selected?.description || '';
+                    dropdown.style.display = 'none';
+                    onChange(value);
+                });
+            });
+        };
+        renderItems();
+        nativeSelect.addEventListener('mousedown', e => {
+            e.preventDefault();
+            nativeSelect.focus();
+            const isOpen = dropdown.style.display !== 'none';
+            dropdown.style.display = isOpen ? 'none' : 'block';
+        });
+        nativeSelect.addEventListener('keydown', e => {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                if (dropdown.style.display === 'none') {
+                    dropdown.style.display = 'block';
+                }
+                const delta = e.key === 'ArrowDown' ? 1 : -1;
+                selectedIndex = Math.max(0, Math.min(options.length - 1, selectedIndex + delta));
+                dropdown.querySelectorAll('.expression-editor-custom-select__item').forEach((item, i) => {
+                    item.classList.toggle('highlighted', i === selectedIndex);
+                });
+                dropdown.children[selectedIndex]?.scrollIntoView({ block: 'nearest' });
+            }
+            else if (e.key === 'Enter' && dropdown.style.display !== 'none') {
+                e.preventDefault();
+                const opt = options[selectedIndex];
+                if (opt) {
+                    wrapper.dataset.value = opt.value;
+                    nativeSelect.value = opt.value;
+                    nativeSelect.title = opt.description || '';
+                    dropdown.style.display = 'none';
+                    onChange(opt.value);
+                }
+            }
+            else if (e.key === 'Escape') {
+                dropdown.style.display = 'none';
+            }
+            else if (e.key === ' ' && dropdown.style.display === 'none') {
+                e.preventDefault();
+                dropdown.style.display = 'block';
+            }
+        });
+        const closeHandler = (e) => {
+            if (!wrapper.contains(e.target)) {
+                dropdown.style.display = 'none';
+            }
+        };
+        document.addEventListener('click', closeHandler);
+        this.documentClickHandlers.push(closeHandler);
+        wrapper.appendChild(nativeSelect);
+        wrapper.appendChild(dropdown);
+        container.appendChild(wrapper);
+    }
+    renderMethodDropdown(container, beanName, selectedMethod, input) {
+        const methodContainer = container.querySelector('[data-container="method"]');
+        if (!methodContainer)
+            return;
+        const bean = this.processBeans.find(b => b.name === beanName);
+        if (!bean) {
+            methodContainer.innerHTML = '';
+            return;
+        }
+        methodContainer.innerHTML = '<label>Method</label>';
+        this.renderCustomSelect(methodContainer, bean.methods.map(m => ({
+            value: m.name,
+            label: this.camelCaseToReadable(m.name),
+            description: m.description,
+        })), selectedMethod, 'Select method...', 'method', methodName => {
+            this.renderParameterInputs(container, beanName, methodName, [], input);
+            this.buildAndSetExpression(container, input);
+        });
+    }
+    renderParameterInputs(container, beanName, methodName, values, input) {
+        const paramsContainer = container.querySelector('[data-container="params"]');
+        if (!paramsContainer)
+            return;
+        if (!methodName) {
+            paramsContainer.innerHTML = '';
+            return;
+        }
+        const bean = this.processBeans.find(b => b.name === beanName);
+        const method = bean?.methods.find(m => m.name === methodName);
+        if (!method || method.parameters.length === 0) {
+            paramsContainer.innerHTML = '';
+            return;
+        }
+        paramsContainer.innerHTML = method.parameters
+            .map((p, i) => `
+      <div class="expression-editor-param">
+        <label>${this.escapeHtml(p.name)} <span class="type">(${this.escapeHtml(p.type)})</span></label>
+        <input type="text" class="expression-editor-input" data-param-index="${i}" value="${this.escapeAttr(values[i] || '')}">
       </div>
-    </div>`;
+    `)
+            .join('');
+        paramsContainer.querySelectorAll('input').forEach(paramInput => {
+            paramInput.addEventListener('input', () => {
+                this.buildAndSetExpression(container, input);
+            });
+        });
     }
-    const genericLinkedPanel = html `<div class="process-link-properties-panel">
-    <div class="process-link-properties-panel__buttons">
-      <button
-        class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
-        onClick=${handleUnlinkClick}
-      >
-        ${unlinkText}
-      </button>
-
-      <button
-        class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
-        onClick=${handleEditClick}
-      >
-        ${editProcessLinkText}
-      </button>
-    </div>
-  </div>`;
-    const genericCreatePanel = html `<div class="process-link-properties-panel">
-    <div class="process-link-properties-panel__buttons">
-      <button
-        class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
-        onClick=${handleCreateClick}
-      >
-        ${createText}
-      </button>
-    </div>
-  </div>`;
-    return processLink ? genericLinkedPanel : genericCreatePanel;
-};
-const ValidationErrorsElement = (props) => {
-    const getErrorMessage = (error) => {
-        if (error.errorCode) {
-            const translationKey = `processManagement.expressionErrors.${error.errorCode}`;
-            const translated = props.translateService.instant(translationKey, { expression: error.expression ? `'${error.expression}'` : '' });
-            if (translated !== translationKey) {
-                return translated;
+    buildAndSetExpression(simpleContainer, input) {
+        const beanSelect = simpleContainer.querySelector('[data-field="bean"]');
+        const methodSelect = simpleContainer.querySelector('[data-field="method"]');
+        const paramInputs = simpleContainer.querySelectorAll('[data-param-index]');
+        const bean = beanSelect?.dataset.value;
+        const method = methodSelect?.dataset.value;
+        if (!bean || !method) {
+            input.value = '';
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            return;
+        }
+        const params = Array.from(paramInputs).map(i => i.value);
+        input.value = `\${${bean}.${method}(${params.join(', ')})}`;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    parseExpression(expr) {
+        const match = expr.match(/^\$\{([a-zA-Z_]\w*)\.([a-zA-Z_]\w*)\((.*)\)\}$/);
+        if (!match)
+            return { beanName: null, methodName: null, parameters: [] };
+        return {
+            beanName: match[1],
+            methodName: match[2],
+            parameters: this.parseParameters(match[3]),
+        };
+    }
+    parseParameters(paramsStr) {
+        const params = [];
+        let current = '';
+        let depth = 0;
+        let inString = false;
+        let stringChar = '';
+        for (const char of paramsStr) {
+            if (!inString && (char === '"' || char === "'")) {
+                inString = true;
+                stringChar = char;
+                current += char;
+            }
+            else if (inString && char === stringChar) {
+                inString = false;
+                current += char;
+            }
+            else if (!inString && (char === '(' || char === '[')) {
+                depth++;
+                current += char;
+            }
+            else if (!inString && (char === ')' || char === ']')) {
+                depth--;
+                current += char;
+            }
+            else if (!inString && char === ',' && depth === 0) {
+                params.push(current.trim());
+                current = '';
+            }
+            else {
+                current += char;
             }
         }
-        return error.reason;
-    };
-    return html `<div class="validation-errors-panel">
-    ${props.errors.map(error => html `<div class="validation-errors-panel__item${error.severity === 'WARNING' ? ' warning' : ''}">
-          <span class="validation-errors-panel__icon${error.severity === 'WARNING' ? ' warning' : ''}">!</span>
-          <span class="validation-errors-panel__reason${error.severity === 'WARNING' ? ' warning' : ''}">${getErrorMessage(error)}</span>
-        </div>`)}
-  </div>`;
-};
-const ValtimoPropertiesProviderModule = {
-    __init__: ['customPropertiesProvider'],
-    customPropertiesProvider: ['type', ValtimoPropertiesProvider],
+        if (current.trim())
+            params.push(current.trim());
+        return params;
+    }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    escapeAttr(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    camelCaseToReadable(text) {
+        return text
+            .replace(/([a-z])([A-Z])/g, '$1 $2')
+            .replace(/^./, str => str.toUpperCase());
+    }
+    injectStyles() {
+        if (this.stylesInjected)
+            return;
+        this.stylesInjected = true;
+        const style = document.createElement('style');
+        style.textContent = `
+      /* Expression Editor Toggle UI */
+      .expression-editor-wrapper {
+        width: 100%;
+      }
+      .expression-editor-toggle {
+        display: flex;
+        gap: 0;
+        margin-bottom: 8px;
+      }
+      .expression-editor-toggle__btn {
+        flex: 1;
+        padding: 4px 8px;
+        border: 1px solid #ccc;
+        background: #fafafa;
+        color: #333;
+        cursor: pointer;
+        font-size: 13px;
+        font-family: inherit;
+      }
+      .expression-editor-toggle__btn:first-child {
+        border-radius: 2px 0 0 2px;
+      }
+      .expression-editor-toggle__btn:last-child {
+        border-radius: 0 2px 2px 0;
+        border-left: none;
+      }
+      .expression-editor-toggle__btn.active {
+        background: #2b79bd;
+        color: white;
+        border-color: #2b79bd;
+      }
+      .expression-editor-toggle__btn:hover:not(.active) {
+        background: #fff;
+      }
+      .expression-editor-simple {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .expression-editor-field label,
+      .expression-editor-param > label {
+        display: block;
+        font-size: var(--text-size-small, 12px);
+        color: var(--label-color, #666);
+        margin-bottom: 2px;
+      }
+      .expression-editor-field label .type,
+      .expression-editor-param label .type {
+        color: var(--description-color, #808080);
+      }
+      .expression-editor-select,
+      .expression-editor-input {
+        display: block;
+        width: 100%;
+        padding: 3px 6px 2px;
+        border: 1px solid #ccc;
+        border-radius: 2px;
+        font-size: 14px;
+        background-color: #fafafa;
+        font-family: inherit;
+        box-sizing: border-box;
+      }
+      .expression-editor-select:focus,
+      .expression-editor-input:focus {
+        outline: none;
+        background-color: hsl(205, 100%, 95%);
+        border-color: hsl(205, 100%, 50%);
+      }
+      /* Override bpmn-js input styles to prevent focus-within highlighting */
+      .expression-editor-technical input,
+      .expression-editor-technical textarea {
+        background-color: #fafafa !important;
+        border-color: #ccc !important;
+      }
+      /* Override native select and input styles in simple mode */
+      .expression-editor-simple select.bio-properties-panel-input,
+      .expression-editor-simple .expression-editor-input {
+        background-color: #fafafa !important;
+        border-color: #ccc !important;
+      }
+      .expression-editor-simple select.bio-properties-panel-input:focus,
+      .expression-editor-simple .expression-editor-input:focus {
+        background-color: hsl(205, 100%, 95%) !important;
+        border-color: hsl(205, 100%, 50%) !important;
+      }
+      .expression-editor-technical input:focus,
+      .expression-editor-technical textarea:focus {
+        background-color: hsl(205, 100%, 95%) !important;
+        border-color: hsl(205, 100%, 50%) !important;
+      }
+      .expression-editor-param {
+        padding-left: 8px;
+        border-left: 2px solid #ccc;
+        margin-top: 4px;
+      }
+      .expression-editor-description {
+        font-size: var(--text-size-small, 12px);
+        color: var(--description-color, #808080);
+        margin-top: 4px;
+        font-style: italic;
+      }
+
+      /* Custom Select (Listbox) */
+      .expression-editor-custom-select {
+        position: relative;
+        width: 100%;
+      }
+      .expression-editor-custom-select select {
+        width: 100%;
+      }
+      .expression-editor-custom-select__dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        max-height: 200px;
+        overflow-y: auto;
+        background: #fff;
+        border: 1px solid #ccc;
+        border-radius: 2px;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+        z-index: 1000;
+        margin-top: 2px;
+      }
+      .expression-editor-custom-select__item {
+        padding: 8px;
+        cursor: pointer;
+        border-bottom: 1px solid #eee;
+      }
+      .expression-editor-custom-select__item:last-child {
+        border-bottom: none;
+      }
+      .expression-editor-custom-select__item:hover,
+      .expression-editor-custom-select__item.selected,
+      .expression-editor-custom-select__item.highlighted {
+        background: hsl(205, 100%, 95%);
+      }
+      .expression-editor-custom-select__label {
+        font-weight: 500;
+        font-size: 14px;
+        color: #333;
+      }
+      .expression-editor-custom-select__desc {
+        font-size: 11px;
+        color: #666;
+        margin-top: 2px;
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+const ExpressionAutocompleteModule = {
+    __init__: ['expressionAutocomplete'],
+    expressionAutocomplete: ['type', ExpressionAutocomplete],
 };
 
 /*
@@ -1123,7 +1963,13 @@ const ValtimoPropertiesProviderModule = {
  * limitations under the License.
  */
 class ProcessManagementBuilderComponent {
-    constructor(breadcrumbService, iconService, logger, modalService, notificationService, pageHeaderService, pageTitleService, processLinkService, processLinkStateService, processManagementEditorService, processManagementService, processService, route, router, translateService, pluginTranslationService, editPermissionsService, processLinkBuildingBlockApiService) {
+    get activeEditor() {
+        return this._viewerActive ? this._bpmnViewer : this._bpmnModeler;
+    }
+    get loadedEditors() {
+        return [this._bpmnModeler, this._bpmnViewer].filter(editor => !!editor);
+    }
+    constructor(breadcrumbService, iconService, logger, modalService, notificationService, pageHeaderService, pageTitleService, processLinkService, processLinkStateService, processManagementEditorService, processManagementService, processService, route, router, translateService, pluginTranslationService, editPermissionsService, processLinkBuildingBlockApiService, processBeanService) {
         this.breadcrumbService = breadcrumbService;
         this.iconService = iconService;
         this.logger = logger;
@@ -1142,26 +1988,41 @@ class ProcessManagementBuilderComponent {
         this.pluginTranslationService = pluginTranslationService;
         this.editPermissionsService = editPermissionsService;
         this.processLinkBuildingBlockApiService = processLinkBuildingBlockApiService;
+        this.processBeanService = processBeanService;
         this._selectedProcess$ = new BehaviorSubject(null);
         this.loading$ = new BehaviorSubject(true);
         this._validationErrorElementIds = [];
         this._validationHoverHandler = null;
         this._validationOutHandler = null;
+        this._selectionChangedHandler = null;
+        this._fieldInputCleanupFns = [];
+        this._expressionAutocomplete = null;
+        this._activityMarkerElementIds = [];
+        this._activityMarkerUpdateTimeout = null;
+        this._autofilledElements = [];
+        this._autofilledElementIds = [];
+        this._viewerActive = false;
         this.isReadOnlyProcess$ = new BehaviorSubject(false);
         this.isSystemProcess$ = new BehaviorSubject(false);
         this.draft$ = new BehaviorSubject(false);
         this.canInitializeDocument$ = new BehaviorSubject(false);
         this.startableByUser$ = new BehaviorSubject(false);
         this.validationErrors$ = this.processManagementEditorService.validationErrors$;
+        this.$markersVisible = signal(true);
         this.testIds = PROCESS_MANAGEMENT_BUILDER_TEST_IDS;
         this.selectedProcessDefinitionXml$ = this.processManagementEditorService.selectionProcessDefinition$.pipe(filter(selectedProcessDefinition => !!selectedProcessDefinition?.id), distinctUntilChanged((previous, current) => isEqual(previous, current)), tap(selectedProcessDefinition => {
             this.loading$.next(true);
             this.pageTitleService.setCustomPageTitle(selectedProcessDefinition?.name || '-');
         }), switchMap(selectedProcessDefinition => this.processService.getProcessDefinitionXml(selectedProcessDefinition.id)), tap(result => {
             this.cleanUpListenersOnModeler();
-            this._bpmnModeler?.importXML(result.bpmn20Xml);
-            this._bpmnViewer?.importXML(result.bpmn20Xml);
-            this.draft$.next(this.parseDraftFromXml(result.bpmn20Xml));
+            this._autofilledElements = result.autofilledElements ?? [];
+            this.processManagementEditorService.setAutofilledElements(this._autofilledElements);
+            this._bpmnModeler?.importXML(result.bpmn20Xml).then(() => {
+                this.highlightAutofilledElements();
+            });
+            this._bpmnViewer?.importXML(result.bpmn20Xml).then(() => {
+                this.highlightAutofilledElements();
+            });
             this.isReadOnlyProcess$.next(result.readOnly);
             this.isSystemProcess$.next(result.systemProcess);
             this.loading$.next(false);
@@ -1186,6 +2047,10 @@ class ProcessManagementBuilderComponent {
             }
             return this.managementParams$.pipe(switchMap(params => this.editPermissionsService.hasPermissionsToEditBasedOnContext(params, context)));
         }));
+        this.viewerActive$ = combineLatest([
+            this.isReadOnlyProcess$,
+            this.hasEditPermissions$,
+        ]).pipe(map$1(([isReadOnlyProcess, hasEditPermissions]) => isReadOnlyProcess || !hasEditPermissions), distinctUntilChanged());
         this._reload$ = new Subject();
         this.processDefinitionVersions$ = combineLatest([this.editParam$, this.context$, this._reload$.pipe(startWith(null))]).pipe(switchMap(([editParam, context]) => context === 'independent'
             ? this.processManagementService.getUnlinkedProcessDefinitionsByKey(editParam)
@@ -1228,8 +2093,9 @@ class ProcessManagementBuilderComponent {
             if (!activityId || !businessId)
                 return;
             this.processManagementEditorService.updateProcessLinksOnIdChange(activityId, businessId);
+            this.scheduleActivityMarkerUpdate();
         };
-        this.iconService.registerAll([Deploy16, ListChecked16, Return16]);
+        this.iconService.registerAll([View16, ViewOff16]);
         this.setProcessManagementWindow();
     }
     ngAfterViewInit() {
@@ -1242,10 +2108,16 @@ class ProcessManagementBuilderComponent {
         this.subscribeToProcessLinkUpdateEvents();
         this.subscribeToProcessLinkCreateEvents();
         this.subscribeToProcessLinkDeleteEvents();
+        this.subscribeToAutofillDismissEvents();
+        this.subscribeToViewerActive();
         this.initEditing();
     }
     ngOnDestroy() {
         this.clearValidationErrors();
+        this.clearActivityMarkers();
+        if (this._activityMarkerUpdateTimeout) {
+            clearTimeout(this._activityMarkerUpdateTimeout);
+        }
         this._bpmnModeler?.destroy();
         this._bpmnViewer?.destroy();
         this._subscriptions.unsubscribe();
@@ -1255,19 +2127,50 @@ class ProcessManagementBuilderComponent {
         this.breadcrumbService.clearThirdBreadcrumb();
         this.breadcrumbService.clearFourthBreadcrumb();
     }
-    export(isReadOnlyProcess) {
+    exportBpmn(isReadOnlyProcess) {
         (isReadOnlyProcess ? from(this._bpmnViewer.saveXML()) : from(this._bpmnModeler.saveXML()))
             .pipe(take(1))
             .subscribe(result => {
             const file = new Blob([result.xml ?? ''], { type: 'text/xml' });
-            const link = document.createElement('a');
-            link.download = 'diagram.bpmn';
-            link.href = window.URL.createObjectURL(file);
-            link.click();
-            window.URL.revokeObjectURL(link.href);
-            link.remove();
+            const processDefinitionKey = this.processManagementEditorService.selectionProcessDefinition?.key;
+            this.downloadFile(file, processDefinitionKey ? `${processDefinitionKey}.bpmn` : 'diagram.bpmn');
+        });
+    }
+    export() {
+        const processDefinitionId = this.processManagementEditorService.selectionProcessDefinition?.id;
+        if (!processDefinitionId) {
+            this.showNotification('exportError');
+            return;
+        }
+        this.processManagementService
+            .exportProcessDefinition(processDefinitionId)
+            .pipe(take(1))
+            .subscribe({
+            next: response => {
+                const blob = response.body;
+                if (!blob) {
+                    this.showNotification('exportError');
+                    return;
+                }
+                this.downloadFile(blob, this.getFileName(response));
+            },
+            error: () => {
+                this.showNotification('exportError');
+            },
         });
     }
+    getFileName(response) {
+        const contentDisposition = response.headers.get('Content-Disposition') ?? '';
+        return contentDisposition.split('filename=')[1]?.replace(/"/g, '').trim() || 'process.zip';
+    }
+    downloadFile(file, fileName) {
+        const link = document.createElement('a');
+        link.download = fileName;
+        link.href = window.URL.createObjectURL(file);
+        link.click();
+        window.URL.revokeObjectURL(link.href);
+        link.remove();
+    }
     validateProcessDefinition(isReadOnlyProcess) {
         combineLatest([
             from(isReadOnlyProcess ? this._bpmnViewer.saveXML() : this._bpmnModeler.saveXML()),
@@ -1281,6 +2184,8 @@ class ProcessManagementBuilderComponent {
                     ...link,
                     processDefinitionId: '-',
                 })),
+                canInitializeDocument: this.canInitializeDocument$.getValue(),
+                startableByUser: this.startableByUser$.getValue(),
             });
         }))
             .subscribe({
@@ -1321,6 +2226,7 @@ class ProcessManagementBuilderComponent {
             .subscribe({
             next: context => {
                 this.clearValidationErrors();
+                this.processManagementEditorService.clearDismissedAutofills();
                 if (context === 'independent') {
                     this.reload();
                     this.showNotification('success');
@@ -1369,6 +2275,7 @@ class ProcessManagementBuilderComponent {
             .subscribe({
             next: () => {
                 this.clearValidationErrors();
+                this.processManagementEditorService.clearDismissedAutofills();
                 this.navigateBack('success');
             },
             error: (error) => {
@@ -1400,27 +2307,6 @@ class ProcessManagementBuilderComponent {
             return;
         this.showNotification(notification);
     }
-    onValidationErrorClick(elementId) {
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
-        const elementRegistry = modeler.get('elementRegistry');
-        const canvas = modeler.get('canvas');
-        const element = elementRegistry.get(elementId);
-        if (!element)
-            return;
-        try {
-            const selection = modeler.get('selection');
-            selection?.select?.(element);
-        }
-        catch {
-            // Viewer may not expose the selection service.
-        }
-        try {
-            canvas.scrollToElement(element);
-        }
-        catch {
-            // ignore
-        }
-    }
     onProcessToggleChange(field, value) {
         if (field === 'draft')
             this.draft$.next(value);
@@ -1440,7 +2326,6 @@ class ProcessManagementBuilderComponent {
         this._pendingDeployAction = null;
     }
     validateAndDeploy(isReadOnlyProcess, deployAction) {
-        // Skip validation for draft processes
         if (this.draft$.getValue()) {
             deployAction();
             return;
@@ -1457,27 +2342,25 @@ class ProcessManagementBuilderComponent {
                     ...link,
                     processDefinitionId: '-',
                 })),
+                canInitializeDocument: this.canInitializeDocument$.getValue(),
+                startableByUser: this.startableByUser$.getValue(),
             });
         }))
             .subscribe({
             next: validationResult => {
                 if (!validationResult.isValid) {
-                    // Has errors - show them and block deployment
                     this.highlightValidationErrors(validationResult.errors);
                 }
                 else if (validationResult.hasWarnings) {
-                    // Only warnings - show confirmation dialog
                     this.highlightValidationErrors(validationResult.errors);
                     this._pendingDeployAction = deployAction;
                     this.showWarningConfirmationModal$.next(true);
                 }
                 else {
-                    // No issues - proceed with deployment
                     deployAction();
                 }
             },
             error: () => {
-                // Validation endpoint failed - proceed with deployment anyway (server will validate again)
                 deployAction();
             },
         });
@@ -1489,6 +2372,7 @@ class ProcessManagementBuilderComponent {
         processManagementWindow.processManagementEditorService = this.processManagementEditorService;
         processManagementWindow.translateService = this.translateService;
         processManagementWindow.pluginTranslationService = this.pluginTranslationService;
+        processManagementWindow.processLinkService = this.processLinkService;
     }
     showNotification(notification) {
         if (!notification)
@@ -1496,6 +2380,7 @@ class ProcessManagementBuilderComponent {
         let type;
         if (notification === 'alreadyExists' ||
             notification === 'validationError' ||
+            notification === 'exportError' ||
             notification === 'error') {
             type = 'error';
         }
@@ -1557,7 +2442,7 @@ class ProcessManagementBuilderComponent {
     highlightValidationErrors(errors) {
         this.clearValidationErrors();
         this.processManagementEditorService.setValidationErrors(errors);
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const modeler = this.activeEditor;
         const canvas = modeler.get('canvas');
         const overlays = modeler.get('overlays');
         const errorElementIds = new Set();
@@ -1620,6 +2505,10 @@ class ProcessManagementBuilderComponent {
         };
         eventBus.on('element.hover', this._validationHoverHandler);
         eventBus.on('element.out', this._validationOutHandler);
+        this._selectionChangedHandler = (event) => {
+            this.highlightInvalidFieldsInPropertiesPanel(event.newSelection, errors);
+        };
+        eventBus.on('selection.changed', this._selectionChangedHandler);
         const selection = modeler.get('selection');
         const selected = selection.get();
         if (selected?.length > 0) {
@@ -1628,8 +2517,88 @@ class ProcessManagementBuilderComponent {
             selection.select(current);
         }
     }
+    highlightInvalidFieldsInPropertiesPanel(newSelection, errors) {
+        document.querySelectorAll('.validation-error-field').forEach(el => {
+            el.classList.remove('validation-error-field');
+        });
+        document.querySelectorAll('.validation-error-param').forEach(el => {
+            el.classList.remove('validation-error-param');
+        });
+        if (!newSelection?.length)
+            return;
+        const selectedId = newSelection[0]?.id;
+        if (!selectedId)
+            return;
+        const elementErrors = errors.filter(e => e.elementId === selectedId);
+        setTimeout(() => {
+            for (const error of elementErrors) {
+                const listenerEntryId = error.listenerType != null && error.listenerIndex != null
+                    ? `${selectedId}-${error.listenerType}-${error.listenerIndex}`
+                    : null;
+                if (error.invalidFields) {
+                    for (const fieldId of error.invalidFields) {
+                        let entry = null;
+                        if (listenerEntryId) {
+                            const listenerEntry = document.querySelector(`[data-entry-id="${listenerEntryId}"]`);
+                            if (listenerEntry) {
+                                entry = listenerEntry.querySelector(`[data-entry-id="${fieldId}"]`);
+                            }
+                        }
+                        if (!entry) {
+                            entry = document.querySelector(`[data-entry-id="${fieldId}"]`);
+                        }
+                        if (entry) {
+                            entry.classList.add('validation-error-field');
+                            const input = entry.querySelector('input, textarea, select');
+                            if (input) {
+                                const handler = () => {
+                                    entry.classList.remove('validation-error-field');
+                                    input.removeEventListener('input', handler);
+                                    input.removeEventListener('change', handler);
+                                };
+                                input.addEventListener('input', handler);
+                                input.addEventListener('change', handler);
+                                this._fieldInputCleanupFns.push(() => {
+                                    input.removeEventListener('input', handler);
+                                    input.removeEventListener('change', handler);
+                                });
+                            }
+                        }
+                    }
+                }
+                if (error.invalidArguments && error.invalidArguments.length > 0) {
+                    let scopeElement = null;
+                    if (listenerEntryId) {
+                        scopeElement = document.querySelector(`[data-entry-id="${listenerEntryId}"]`);
+                    }
+                    const wrapper = scopeElement
+                        ? scopeElement.querySelector('.expression-editor-wrapper')
+                        : document.querySelector('.expression-editor-wrapper');
+                    if (wrapper) {
+                        wrapper.dataset.invalidArgs = JSON.stringify(error.invalidArguments);
+                    }
+                    for (const idx of error.invalidArguments) {
+                        const paramInput = scopeElement
+                            ? scopeElement.querySelector(`.expression-editor-param input[data-param-index="${idx}"]`)
+                            : document.querySelector(`.expression-editor-param input[data-param-index="${idx}"]`);
+                        if (paramInput) {
+                            paramInput.classList.add('validation-error-param');
+                            const handler = () => {
+                                paramInput.classList.remove('validation-error-param');
+                                paramInput.removeEventListener('input', handler);
+                            };
+                            paramInput.addEventListener('input', handler);
+                            this._fieldInputCleanupFns.push(() => {
+                                paramInput.removeEventListener('input', handler);
+                            });
+                        }
+                    }
+                }
+            }
+        }, 50);
+    }
     clearValidationErrors() {
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const modeler = this.activeEditor;
         if (!modeler)
             return;
         this.processManagementEditorService.setValidationErrors([]);
@@ -1644,6 +2613,21 @@ class ProcessManagementBuilderComponent {
             eventBus.off('element.out', this._validationOutHandler);
             this._validationOutHandler = null;
         }
+        if (this._selectionChangedHandler) {
+            eventBus.off('selection.changed', this._selectionChangedHandler);
+            this._selectionChangedHandler = null;
+        }
+        this._fieldInputCleanupFns.forEach(fn => fn());
+        this._fieldInputCleanupFns = [];
+        document.querySelectorAll('.validation-error-field').forEach(el => {
+            el.classList.remove('validation-error-field');
+        });
+        document.querySelectorAll('.validation-error-param').forEach(el => {
+            el.classList.remove('validation-error-param');
+        });
+        document.querySelectorAll('.expression-editor-wrapper[data-invalid-args]').forEach(el => {
+            delete el.dataset.invalidArgs;
+        });
         for (const elementId of this._validationErrorElementIds) {
             try {
                 canvas.removeMarker(elementId, 'highlight-overlay-error');
@@ -1661,6 +2645,209 @@ class ProcessManagementBuilderComponent {
             // ignore
         }
     }
+    highlightAutofilledElements() {
+        this.clearAutofilledHighlights();
+        if (!this._autofilledElements?.length)
+            return;
+        const modeler = this.activeEditor;
+        if (!modeler)
+            return;
+        const overlays = modeler.get('overlays');
+        for (const element of this._autofilledElements) {
+            try {
+                this._autofilledElementIds.push(element.activityId);
+                const tooltipText = this.getAutofilledTooltip();
+                overlays.add(element.activityId, 'autofilled-indicator', {
+                    position: { top: -12, left: -12 },
+                    html: this.buildAutofilledOverlayElement(element.activityId, tooltipText),
+                });
+            }
+            catch (e) {
+                // Element may not exist on the canvas
+            }
+        }
+    }
+    clearAutofilledHighlights() {
+        const modeler = this.activeEditor;
+        if (!modeler)
+            return;
+        const overlays = modeler.get('overlays');
+        this._autofilledElementIds = [];
+        try {
+            overlays.remove({ type: 'autofilled-indicator' });
+        }
+        catch (e) {
+            // ignore
+        }
+    }
+    buildAutofilledOverlayElement(elementId, tooltipText) {
+        const container = document.createElement('div');
+        container.className = 'autofilled-indicator-overlay';
+        container.dataset.elementId = elementId;
+        const icon = document.createElement('span');
+        icon.className = 'autofilled-indicator-icon';
+        icon.innerHTML = '!';
+        container.appendChild(icon);
+        const tooltip = document.createElement('span');
+        tooltip.className = 'autofilled-indicator-tooltip';
+        tooltip.textContent = tooltipText;
+        container.appendChild(tooltip);
+        return container;
+    }
+    getAutofilledTooltip() {
+        return this.translateService.instant('processManagement.autofilled.generic');
+    }
+    getElementListeners(element) {
+        const extensionElements = element?.businessObject?.extensionElements;
+        const values = extensionElements?.values || [];
+        const executionListeners = values.filter((v) => v.$type === 'camunda:ExecutionListener');
+        const taskListeners = values.filter((v) => v.$type === 'camunda:TaskListener');
+        return {
+            hasExecutionListener: executionListeners.length > 0,
+            hasTaskListener: taskListeners.length > 0,
+            executionListenerCount: executionListeners.length,
+            taskListenerCount: taskListeners.length,
+        };
+    }
+    toggleMarkerVisibility() {
+        this.$markersVisible.update(v => !v);
+        if (this.$markersVisible()) {
+            this.updateActivityMarkers();
+        }
+        else {
+            this.clearActivityMarkers();
+        }
+    }
+    updateActivityMarkers() {
+        this.clearActivityMarkers();
+        if (!this.$markersVisible())
+            return;
+        const modeler = this.activeEditor;
+        if (!modeler)
+            return;
+        const overlays = modeler.get('overlays');
+        const elementRegistry = modeler.get('elementRegistry');
+        const processLinks = this.processManagementEditorService.processLinksForSelectedDefinition;
+        const processLinkActivityIds = new Set(processLinks.map(pl => pl.activityId));
+        const elementMarkers = new Map();
+        elementRegistry.forEach((element) => {
+            if (!element.id || element.type === 'label')
+                return;
+            const listeners = this.getElementListeners(element);
+            const hasProcessLink = processLinkActivityIds.has(element.id);
+            if (listeners.hasExecutionListener || listeners.hasTaskListener || hasProcessLink) {
+                elementMarkers.set(element.id, {
+                    hasExecutionListener: listeners.hasExecutionListener,
+                    hasTaskListener: listeners.hasTaskListener,
+                    hasProcessLink,
+                    executionListenerCount: listeners.executionListenerCount,
+                    taskListenerCount: listeners.taskListenerCount,
+                });
+            }
+        });
+        for (const [elementId, info] of elementMarkers) {
+            this._activityMarkerElementIds.push(elementId);
+            const badges = this.buildActivityMarkerBadges(info, elementId);
+            if (badges) {
+                try {
+                    const element = elementRegistry.get(elementId);
+                    const position = this.calculateMarkerPosition(element);
+                    overlays.add(elementId, 'activity-marker', {
+                        position,
+                        html: badges,
+                    });
+                }
+                catch (e) {
+                    // Element may not exist on canvas
+                }
+            }
+        }
+    }
+    calculateMarkerPosition(element) {
+        if (element?.waypoints?.length > 1) {
+            const waypoints = element.waypoints;
+            const lastPoint = waypoints[waypoints.length - 1];
+            const secondLastPoint = waypoints[waypoints.length - 2];
+            // Compute bounding box from waypoints (same as diagram-js getBBox)
+            const minX = Math.min(...waypoints.map((wp) => wp.x));
+            const minY = Math.min(...waypoints.map((wp) => wp.y));
+            // Direction of the final segment
+            const dx = lastPoint.x - secondLastPoint.x;
+            const dy = lastPoint.y - secondLastPoint.y;
+            const len = Math.sqrt(dx * dx + dy * dy);
+            // Offset back from arrow tip along the line
+            const backOffset = 30;
+            const backX = len > 0 ? (-dx / len) * backOffset : 0;
+            const backY = len > 0 ? (-dy / len) * backOffset : 0;
+            // Perpendicular offset: above for horizontal lines, right for vertical lines
+            const perpOffset = 20;
+            const isMoreHorizontal = Math.abs(dx) > Math.abs(dy);
+            const perpX = isMoreHorizontal ? 0 : perpOffset;
+            const perpY = isMoreHorizontal ? -perpOffset : 0;
+            return {
+                top: lastPoint.y - minY + backY + perpY - 11,
+                left: lastPoint.x - minX + backX + perpX - 11,
+            };
+        }
+        return { top: -12, right: 12 };
+    }
+    buildActivityMarkerBadges(info, elementId) {
+        const container = document.createElement('div');
+        container.className = 'activity-marker-overlay';
+        container.dataset.elementId = elementId;
+        if (info.hasProcessLink) {
+            const tooltip = this.translateService.instant('processManagement.markers.processLink');
+            container.appendChild(this.buildMarkerBadge('process-link', 'P', tooltip));
+        }
+        if (info.hasExecutionListener) {
+            const countSuffix = info.executionListenerCount > 1 ? ` (${info.executionListenerCount})` : '';
+            const tooltip = this.translateService.instant('processManagement.markers.executionListener') + countSuffix;
+            container.appendChild(this.buildMarkerBadge('execution-listener', 'E', tooltip));
+        }
+        if (info.hasTaskListener) {
+            const countSuffix = info.taskListenerCount > 1 ? ` (${info.taskListenerCount})` : '';
+            const tooltip = this.translateService.instant('processManagement.markers.taskListener') + countSuffix;
+            container.appendChild(this.buildMarkerBadge('task-listener', 'T', tooltip));
+        }
+        if (container.children.length === 0)
+            return null;
+        return container;
+    }
+    buildMarkerBadge(type, label, tooltip) {
+        const badge = document.createElement('div');
+        badge.className = `activity-marker-badge activity-marker-badge--${type}`;
+        const icon = document.createElement('span');
+        icon.className = 'activity-marker-badge__icon';
+        icon.textContent = label;
+        badge.appendChild(icon);
+        const text = document.createElement('span');
+        text.className = 'activity-marker-badge__text';
+        text.textContent = tooltip;
+        badge.appendChild(text);
+        return badge;
+    }
+    clearActivityMarkers() {
+        const modeler = this.activeEditor;
+        if (!modeler)
+            return;
+        const overlays = modeler.get('overlays');
+        this._activityMarkerElementIds = [];
+        try {
+            overlays.remove({ type: 'activity-marker' });
+        }
+        catch (e) {
+            // ignore
+        }
+    }
+    scheduleActivityMarkerUpdate() {
+        if (this._activityMarkerUpdateTimeout) {
+            clearTimeout(this._activityMarkerUpdateTimeout);
+        }
+        this._activityMarkerUpdateTimeout = setTimeout(() => {
+            this.updateActivityMarkers();
+            this._activityMarkerUpdateTimeout = null;
+        }, 300);
+    }
     setSelectedProcessDefinitionToLatest(processDefinitions) {
         const latest = getLatestProcessDefinition(processDefinitions);
         if (!latest)
@@ -1675,11 +2862,16 @@ class ProcessManagementBuilderComponent {
                 CamundaPlatformPropertiesProviderModule,
                 camundaPlatformBehaviors,
                 ValtimoPropertiesProviderModule,
+                ExpressionAutocompleteModule,
             ],
             moddleExtensions: { camunda: CamundaBpmnModdle },
             propertiesPanel: { parent: this.modelerPanelElementRef.nativeElement },
         });
         this._bpmnModeler?.attachTo(this.modelerElementRef.nativeElement);
+        // Initialize expression autocomplete
+        this._expressionAutocomplete = this._bpmnModeler.get('expressionAutocomplete');
+        this._expressionAutocomplete?.setPanelContainer(this.modelerPanelElementRef.nativeElement);
+        this.loadProcessBeansForAutocomplete();
         this._bpmnModeler.on('commandStack.changed', () => {
             this.changesPending$.next(true);
         });
@@ -1695,6 +2887,17 @@ class ProcessManagementBuilderComponent {
             });
             this.processManagementEditorService.setActivityIdBusinessIdMap(idMap);
             this.listenToActivityChangesOnModeler();
+            this.updateActivityMarkers();
+        });
+    }
+    loadProcessBeansForAutocomplete() {
+        this.processBeanService.getProcessBeans().subscribe({
+            next: beans => {
+                this._expressionAutocomplete?.setProcessBeans(beans);
+            },
+            error: err => {
+                this.logger.warn('Failed to load process beans for autocomplete', err);
+            },
         });
     }
     initViewer() {
@@ -1702,7 +2905,10 @@ class ProcessManagementBuilderComponent {
             additionalModules: [
                 DisableBpmnWriteModule,
                 BpmnPropertiesPanelModule,
+                BpmnPropertiesProviderModule,
+                CamundaPlatformPropertiesProviderModule,
                 ValtimoPropertiesProviderModule,
+                ReadOnlyPropertiesPanelModule,
             ],
             moddleExtensions: { camunda: CamundaBpmnModdle },
             propertiesPanel: { parent: this.viewerPanelElementRef.nativeElement },
@@ -1713,6 +2919,7 @@ class ProcessManagementBuilderComponent {
         });
         this._bpmnViewer.on('import.done', () => {
             disableCommands(this._bpmnViewer);
+            this.updateActivityMarkers();
         });
     }
     reload() {
@@ -1723,6 +2930,7 @@ class ProcessManagementBuilderComponent {
         this.processLinkStateService.setModalParams(event?.modalParams);
         this.processLinkStateService.setElementName(event?.modalParams?.element?.name ?? '');
         this.processLinkStateService.selectProcessLink(event.processLink);
+        this.processLinkStateService.setReadOnly(!this.processManagementEditorService.editingAllowed);
         this.processLinkStateService.showModal();
     }
     handleCreateEvent(event) {
@@ -1763,6 +2971,7 @@ class ProcessManagementBuilderComponent {
             this.processManagementEditorService.createProcessLink(event);
             this.processLinkStateService.stopSaving();
             this.processLinkStateService.closeModal();
+            this.updateActivityMarkers();
             const buildingBlockProcessLinkCreateDto = event;
             if (buildingBlockProcessLinkCreateDto.buildingBlockDefinitionKey &&
                 buildingBlockProcessLinkCreateDto.buildingBlockDefinitionVersionTag) {
@@ -1775,9 +2984,39 @@ class ProcessManagementBuilderComponent {
             this.processManagementEditorService.deleteProcessLink(event);
             this.processLinkStateService.stopSaving();
             this.processLinkStateService.closeModal();
+            this.updateActivityMarkers();
             this.unsetCalledElementForBuildingBlockProcessLink(event.activityId);
         }));
     }
+    subscribeToViewerActive() {
+        this._subscriptions.add(this.viewerActive$.subscribe(viewerActive => {
+            this._viewerActive = viewerActive;
+            this.updateActivityMarkers();
+            this.highlightAutofilledElements();
+        }));
+        this._subscriptions.add(this.hasEditPermissions$.subscribe(hasEditPermissions => this.processManagementEditorService.setEditingAllowed(hasEditPermissions)));
+    }
+    subscribeToAutofillDismissEvents() {
+        this._subscriptions.add(this.processManagementEditorService.autofillDismissed$.subscribe(activityId => {
+            this.removeAutofillOverlay(activityId);
+        }));
+    }
+    removeAutofillOverlay(activityId) {
+        const modeler = this.activeEditor;
+        if (!modeler)
+            return;
+        const overlays = modeler.get('overlays');
+        try {
+            overlays.remove({ element: activityId, type: 'autofilled-indicator' });
+        }
+        catch (e) {
+            // ignore
+        }
+        const idx = this._autofilledElementIds.indexOf(activityId);
+        if (idx > -1) {
+            this._autofilledElementIds.splice(idx, 1);
+        }
+    }
     initIfCreate() {
         if (this._selectedProcess$.getValue() !== 'create')
             return;
@@ -1809,12 +3048,17 @@ class ProcessManagementBuilderComponent {
             .subscribe(result => {
             const processDefinitionResult = result;
             this.cleanUpListenersOnModeler();
-            this._bpmnModeler?.importXML(processDefinitionResult.bpmn20Xml);
-            this._bpmnViewer?.importXML(processDefinitionResult.bpmn20Xml);
-            this.draft$.next(processDefinitionResult.draft ??
-                this.parseDraftFromXml(processDefinitionResult.bpmn20Xml));
+            this._autofilledElements = processDefinitionResult.autofilledElements ?? [];
+            this.processManagementEditorService.setAutofilledElements(this._autofilledElements);
+            this._bpmnModeler?.importXML(processDefinitionResult.bpmn20Xml).then(() => {
+                this.highlightAutofilledElements();
+            });
+            this._bpmnViewer?.importXML(processDefinitionResult.bpmn20Xml).then(() => {
+                this.highlightAutofilledElements();
+            });
             this.canInitializeDocument$.next(!!processDefinitionResult?.processCaseLink?.canInitializeDocument);
             this.startableByUser$.next(!!processDefinitionResult?.processCaseLink?.startableByUser);
+            this.draft$.next(!!processDefinitionResult?.draft);
             this.loading$.next(false);
         }));
     }
@@ -1869,8 +3113,8 @@ class ProcessManagementBuilderComponent {
             .subscribe();
     }
     setCalledElementForBuildingBlockProcessLink(activityId, buildingBlockDefinitionKey, buildingBlockDefinitionVersionTag) {
-        const editor = this._bpmnModeler || this._bpmnViewer;
-        if (!editor) {
+        const editors = this.loadedEditors;
+        if (!editors.length) {
             return;
         }
         this.processLinkBuildingBlockApiService
@@ -1878,22 +3122,29 @@ class ProcessManagementBuilderComponent {
             .subscribe({
             next: (mainProcessDefinitionKey) => {
                 const versionTag = `BB:${buildingBlockDefinitionKey}:${buildingBlockDefinitionVersionTag}`;
-                applyBuildingBlockCalledElement(editor, activityId, mainProcessDefinitionKey, versionTag);
+                editors.forEach(editor => applyBuildingBlockCalledElement(editor, activityId, mainProcessDefinitionKey, versionTag));
             },
         });
     }
     unsetCalledElementForBuildingBlockProcessLink(activityId) {
-        const editor = this._bpmnModeler || this._bpmnViewer;
-        if (!editor) {
+        this.loadedEditors.forEach(editor => clearBuildingBlockCalledElement(editor, activityId));
+    }
+    onValidationErrorClick(elementId) {
+        const modeler = this.activeEditor;
+        const canvas = modeler.get('canvas');
+        const selection = modeler.get('selection');
+        const elementRegistry = modeler.get('elementRegistry');
+        const element = elementRegistry.get(elementId);
+        if (!element)
             return;
-        }
-        clearBuildingBlockCalledElement(editor, activityId);
+        canvas.scrollToElement(element, { top: 100, bottom: 100, left: 100, right: 100 });
+        selection.select(element);
     }
     getValidationErrorMessage(error) {
         if (error.errorCode) {
-            const translationKey = `processManagement.expressionErrors.${error.errorCode}`;
+            const translationKey = `processManagement.validationErrorCodes.${error.errorCode}`;
             const translated = this.translateService.instant(translationKey, {
-                expression: error.expression ? `'${error.expression}'` : '',
+                expression: error.expression ?? '',
             });
             if (translated !== translationKey) {
                 return translated;
@@ -1915,13 +3166,13 @@ class ProcessManagementBuilderComponent {
         container.appendChild(text);
         return container;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementBuilderComponent, deps: [{ token: i1$1.BreadcrumbService }, { token: i2$2.IconService }, { token: i3.NGXLogger }, { token: i1$1.ModalService }, { token: i2$1.GlobalNotificationService }, { token: i1$1.PageHeaderService }, { token: i1$1.PageTitleService }, { token: i5.ProcessLinkService }, { token: i5.ProcessLinkStateService }, { token: ProcessManagementEditorService }, { token: ProcessManagementService }, { token: i7.ProcessService }, { token: i8.ActivatedRoute }, { token: i8.Router }, { token: i9.TranslateService }, { token: i10.PluginTranslationService }, { token: i2$1.EditPermissionsService }, { token: i5.ProcessLinkBuildingBlockApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementBuilderComponent, deps: [{ token: i1$1.BreadcrumbService }, { token: i2$2.IconService }, { token: i3.NGXLogger }, { token: i1$1.ModalService }, { token: i2.GlobalNotificationService }, { token: i1$1.PageHeaderService }, { token: i1$1.PageTitleService }, { token: i5.ProcessLinkService }, { token: i5.ProcessLinkStateService }, { token: ProcessManagementEditorService }, { token: ProcessManagementService }, { token: i7.ProcessService }, { token: i8.ActivatedRoute }, { token: i8.Router }, { token: i9.TranslateService }, { token: i10.PluginTranslationService }, { token: i2.EditPermissionsService }, { token: i5.ProcessLinkBuildingBlockApiService }, { token: ProcessBeanService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ProcessManagementBuilderComponent, isStandalone: true, selector: "valtimo-process-management-builder", providers: [
             ProcessManagementEditorService,
             ProcessLinkStateService,
             ProcessLinkStepService,
             ProcessLinkButtonService,
-        ], viewQueries: [{ propertyName: "modelerElementRef", first: true, predicate: ["modeler"], descendants: true }, { propertyName: "modelerPanelElementRef", first: true, predicate: ["modelerPanel"], descendants: true }, { propertyName: "viewerElementRef", first: true, predicate: ["viewer"], descendants: true }, { propertyName: "viewerPanelElementRef", first: true, predicate: ["viewerPanel"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [disableOverflow]=\"true\"\n  *ngIf=\"{\n    processDefinitionVersions: processDefinitionVersions$ | async,\n    selectedProcessDefinitionXml: selectedProcessDefinitionXml$ | async,\n    loading: loading$ | async,\n    isReadOnlyProcess: isReadOnlyProcess$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n  data-carbon-theme=\"g10\"\n  class=\"bpmn__container\"\n>\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'none' : 'flex'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #modeler>\n      <div\n        class=\"validation-errors-list\"\n        *ngIf=\"validationErrors$ | async as validationErrors\"\n        [style.display]=\"validationErrors.length > 0 ? '' : 'none'\"\n      >\n        <details open>\n          <summary class=\"validation-errors-list__header\">\n            <span>{{\n              'processManagement.validationErrorsCount'\n                | translate: {count: validationErrors.length}\n            }}</span>\n            <svg\n              class=\"validation-errors-list__arrow\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z\"\n              />\n            </svg>\n          </summary>\n\n          <div class=\"validation-errors-list__items\">\n            <button\n              *ngFor=\"let error of validationErrors\"\n              class=\"validation-errors-list__item\"\n              [class.warning]=\"error.severity === 'WARNING'\"\n              (click)=\"onValidationErrorClick(error.elementId)\"\n            >\n              <span\n                class=\"validation-errors-list__icon\"\n                [class.warning]=\"error.severity === 'WARNING'\"\n                >{{ error.severity === 'WARNING' ? '!' : '!' }}</span\n              >\n\n              <span class=\"validation-errors-list__details\">\n                <span class=\"validation-errors-list__element\">{{\n                  error.elementName || error.elementId\n                }}</span>\n\n                <span\n                  class=\"validation-errors-list__reason\"\n                  [class.warning]=\"error.severity === 'WARNING'\"\n                  >{{ getValidationErrorMessage(error) }}</span\n                >\n              </span>\n            </button>\n          </div>\n        </details>\n      </div>\n    </div>\n\n    <div class=\"bpmn__modeler-panel\" #modelerPanel></div>\n  </div>\n\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'flex' : 'none'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #viewer></div>\n\n    <div class=\"bpmn__modeler-panel\" #viewerPanel></div>\n  </div>\n</div>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showWarningConfirmationModal$\"\n  [titleTranslationKey]=\"'processManagement.warningConfirmation.title'\"\n  [contentTranslationKey]=\"'processManagement.warningConfirmation.content'\"\n  [confirmButtonTextTranslationKey]=\"'processManagement.warningConfirmation.confirm'\"\n  [cancelButtonTextTranslationKey]=\"'interface.cancel'\"\n  (confirmEvent)=\"onWarningConfirmationConfirm()\"\n  (cancelEvent)=\"onWarningConfirmationCancel()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"page-header-actions\"\n      *ngIf=\"{\n        processDefinitionVersionsListItems: processDefinitionVersionsListItems$ | async,\n        loading: loading$ | async,\n        changesPending: changesPending$ | async,\n        isReadOnlyProcess: isReadOnlyProcess$ | async,\n        isSystemProcess: isSystemProcess$ | async,\n        compactMode: compactMode$ | async,\n        creatingNewProcess: creatingNewProcess$ | async,\n        context: context$ | async,\n        hasEditPermissions: hasEditPermissions$ | async,\n        draft: draft$ | async,\n        canInitializeDocument: canInitializeDocument$ | async,\n        startableByUser: startableByUser$ | async,\n        updatingProcessDefinitionCaseDefinition: updatingProcessDefinitionCaseDefinition$ | async,\n      } as actionsObs\"\n    >\n      <div class=\"page-header-actions__left-container\">\n        <cds-dropdown\n          *ngIf=\"!actionsObs.creatingNewProcess && actionsObs?.context === 'independent'\"\n          class=\"page-header-actions__version-dropdown\"\n          (selected)=\"selectedVersionChange($event)\"\n          [disabled]=\"\n            actionsObs.loading ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 0 ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 1\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n        >\n          <cds-dropdown-list\n            [items]=\"actionsObs.processDefinitionVersionsListItems || []\"\n          ></cds-dropdown-list>\n        </cds-dropdown>\n\n        <div\n          class=\"page-header-actions__tags\"\n          *ngIf=\"\n            actionsObs.isReadOnlyProcess ||\n            !actionsObs.hasEditPermissions ||\n            actionsObs.isSystemProcess\n          \"\n        >\n          <cds-tag\n            *ngIf=\"actionsObs.isReadOnlyProcess || !actionsObs.hasEditPermissions\"\n            type=\"blue\"\n            >{{ 'processManagement.readOnly' | translate }}</cds-tag\n          >\n\n          <cds-tag *ngIf=\"actionsObs.isSystemProcess\" type=\"red\">{{\n            'processManagement.systemProcess' | translate\n          }}</cds-tag>\n        </div>\n\n        <div class=\"page-header-actions__toggles\">\n          <cds-tooltip\n            align=\"bottom-left\"\n            [autoAlign]=\"true\"\n            [description]=\"'processManagement.draftTooltip' | translate\"\n          >\n            <cds-toggle\n              size=\"sm\"\n              [onText]=\"'processManagement.draft' | translate\"\n              [offText]=\"'processManagement.draft' | translate\"\n              [checked]=\"actionsObs.draft\"\n              [disabled]=\"actionsObs.loading || !actionsObs.hasEditPermissions\"\n              (checkedChange)=\"onProcessToggleChange('draft', $event)\"\n              [attr.data-test-id]=\"testIds.draftToggle\"\n            ></cds-toggle>\n          </cds-tooltip>\n\n          @if (actionsObs.context === 'case') {\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.processCreatesCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.canInitializeDocument' | translate\"\n                [offText]=\"'processManagement.canInitializeDocument' | translate\"\n                [checked]=\"actionsObs.canInitializeDocument\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('canInitializeDocument', $event)\"\n                [attr.data-test-id]=\"testIds.startsCaseToggle\"\n              ></cds-toggle>\n            </cds-tooltip>\n\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.startableWithinCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.startableByUser' | translate\"\n                [offText]=\"'processManagement.startableByUser' | translate\"\n                [checked]=\"actionsObs.startableByUser\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('startableByUser', $event)\"\n                [attr.data-test-id]=\"testIds.startableByUserToggle\"\n              ></cds-toggle\n            ></cds-tooltip>\n          }\n        </div>\n      </div>\n\n      <div class=\"page-header-actions__buttons\">\n        <v-overflow-menu class=\"overflow-button\" placement=\"bottom-end\">\n          <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n          <v-overflow-menu-option\n            [disabled]=\"actionsObs.loading\"\n            (selected)=\"export(actionsObs.isReadOnlyProcess)\"\n            >{{ 'interface.export' | translate }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"tertiary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          {{ 'interface.back' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"return\" size=\"16\"></svg>\n        </button>\n\n        <button\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [disabled]=\"actionsObs.loading\"\n          (click)=\"validateProcessDefinition(actionsObs.isReadOnlyProcess)\"\n        >\n          {{ 'processManagement.validate' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"list--checked\" size=\"16\"></svg>\n        </button>\n\n        <button\n          [disabled]=\"!actionsObs.changesPending\"\n          cdsButton=\"primary\"\n          (click)=\"\n            !actionsObs.creatingNewProcess\n              ? deployChanges(actionsObs.isReadOnlyProcess)\n              : deployNewProcessDefinition()\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [attr.data-test-id]=\"testIds.deployButton\"\n        >\n          {{ 'processManagement.deploy' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"deploy\" size=\"16\"></svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.bpmn__container{position:relative;background-color:var(--cds-layer);width:100%}.bpmn__modeler{width:100%;height:100%;flex-direction:row;padding:1px;box-sizing:border-box;outline:1px solid var(--cds-border-subtle);outline-offset:-1px}.bpmn__modeler ::ng-deep .djs-container>svg{outline:none!important}.bpmn__modeler-canvas{width:100%;position:relative}.bpmn__modeler-panel{width:481px;padding-left:1px;box-shadow:inset 1px 0 0 0 var(--cds-border-subtle);box-sizing:border-box}.bpmn__loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--cds-background-selected)}.page-header-actions{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px}.page-header-actions__left-container{display:flex;gap:16px;align-items:center}.page-header-actions__tags{display:flex;gap:8px;align-items:center}.page-header-actions__version-dropdown{width:150px}.page-header-actions__toggles{display:flex;gap:16px;align-items:center}.page-header-actions__toggles ::ng-deep cds-toggle{display:inline-flex;align-items:center}.page-header-actions__toggles ::ng-deep .cds--toggle__label-text{display:none}.page-header-actions__buttons{display:flex;gap:16px;align-items:center;flex-shrink:0}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}.validation-errors-list{position:absolute;top:8px;right:8px;z-index:10;width:320px;max-height:250px;overflow-y:auto;border:1px solid var(--cds-border-subtle);background-color:var(--cds-layer);border-radius:4px;box-shadow:0 2px 6px #00000026}.validation-errors-list details[open]>summary .validation-errors-list__arrow{transform:rotate(90deg)}.validation-errors-list__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:600;color:var(--cds-support-error, #da1e28);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.validation-errors-list__header::-webkit-details-marker{display:none}.validation-errors-list__arrow{display:inline-flex;width:16px;height:16px;fill:currentColor;transition:transform .15s ease;flex-shrink:0}.validation-errors-list__items{display:flex;flex-direction:column;border-top:1px solid var(--cds-border-subtle)}.validation-errors-list__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border:none;border-bottom:1px solid var(--cds-border-subtle);border-left:3px solid var(--cds-support-error, #da1e28);background-color:var(--cds-notification-error-background, #fff1f1);text-align:left;cursor:pointer;font-family:inherit}.validation-errors-list__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}.validation-errors-list__item:last-child{border-bottom:none}.validation-errors-list__item:hover{filter:brightness(.97)}.validation-errors-list__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin-top:1px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}.validation-errors-list__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}.validation-errors-list__details{display:flex;flex-direction:column;gap:2px}.validation-errors-list__element{font-size:13px;font-weight:600;color:var(--cds-text-primary)}.validation-errors-list__reason{font-size:13px;color:var(--cds-text-primary)}::ng-deep .highlight-overlay-error:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-error, #da1e28)!important}::ng-deep .highlight-overlay-warning:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-warning, #f1c21b)!important}::ng-deep .djs-overlay-validation-error{overflow:visible!important;pointer-events:all!important}::ng-deep .validation-error-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-error-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-error-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-error, #da1e28);color:var(--cds-support-error, #da1e28);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-error-overlay:hover ::ng-deep .validation-error-overlay__text,::ng-deep .validation-error-overlay--active ::ng-deep .validation-error-overlay__text{display:block}::ng-deep .validation-warning-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-warning-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-warning-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-warning-overlay:hover ::ng-deep .validation-warning-overlay__text,::ng-deep .validation-warning-overlay--active ::ng-deep .validation-warning-overlay__text{display:block}::ng-deep .validation-errors-panel{padding:8px 12px;display:flex;flex-direction:column;gap:8px}::ng-deep .validation-errors-panel__item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background-color:var(--cds-notification-error-background, #fff1f1);border-left:3px solid var(--cds-support-error, #da1e28)}::ng-deep .validation-errors-panel__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}::ng-deep .validation-errors-panel__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}::ng-deep .validation-errors-panel__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}::ng-deep .validation-errors-panel__reason{color:var(--cds-text-primary, #161616);font-size:13px;line-height:18px}::ng-deep .process-link-properties-panel{padding:8px 12px 16px;width:100%;display:flex;flex-direction:column;gap:16px}::ng-deep .process-link-properties-panel__buttons,::ng-deep .process-link-properties-panel__header{width:100%;display:flex;gap:16px}::ng-deep .process-link-properties-panel__header{align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--cds-border-subtle-00);padding-bottom:8px;padding-left:8px;padding-right:8px}::ng-deep .process-link-properties-panel__title{color:var(--cds-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:auto 0}::ng-deep .process-link-properties-panel__title-container{display:flex;flex-direction:column;gap:4px}::ng-deep .process-link-properties-panel__title-container :last-child{color:var(--cds-text-helper);font-style:italic}::ng-deep .process-link-properties-panel .cds--tag{margin:0}::ng-deep .process-link-properties-panel .cds--btn{flex-shrink:1;width:100%;display:flex;align-items:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "directive", type: FitPageDirective, selector: "[fitPage]", inputs: ["spaceAdjustment", "fitPageDisabled", "disableOverflow", "bottomMargin"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "directive", type: RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ProcessLinkModule }, { kind: "component", type: i5.ProcessLinkModalComponent, selector: "valtimo-process-link-modal" }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2$2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: i2$2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }] }); }
+        ], viewQueries: [{ propertyName: "modelerElementRef", first: true, predicate: ["modeler"], descendants: true }, { propertyName: "modelerPanelElementRef", first: true, predicate: ["modelerPanel"], descendants: true }, { propertyName: "viewerElementRef", first: true, predicate: ["viewer"], descendants: true }, { propertyName: "viewerPanelElementRef", first: true, predicate: ["viewerPanel"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [disableOverflow]=\"true\"\n  *ngIf=\"{\n    processDefinitionVersions: processDefinitionVersions$ | async,\n    selectedProcessDefinitionXml: selectedProcessDefinitionXml$ | async,\n    loading: loading$ | async,\n    isReadOnlyProcess: isReadOnlyProcess$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n  data-carbon-theme=\"g10\"\n  class=\"bpmn__container\"\n>\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'none' : 'flex'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #modeler>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{\n              ($markersVisible()\n                ? 'processManagement.markers.hide'\n                : 'processManagement.markers.show'\n              ) | translate\n            }}\n          </span>\n        </button>\n      </cds-tooltip>\n\n      <div\n        class=\"validation-errors-list\"\n        *ngIf=\"validationErrors$ | async as validationErrors\"\n        [style.display]=\"validationErrors.length > 0 ? '' : 'none'\"\n        [attr.data-test-id]=\"testIds.validationErrors\"\n      >\n        <details open>\n          <summary class=\"validation-errors-list__header\">\n            <span>{{\n              'processManagement.validationErrorsCount'\n                | translate: {count: validationErrors.length}\n            }}</span>\n            <svg\n              class=\"validation-errors-list__arrow\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z\"\n              />\n            </svg>\n          </summary>\n\n          <div class=\"validation-errors-list__items\">\n            <button\n              *ngFor=\"let error of validationErrors\"\n              class=\"validation-errors-list__item\"\n              [class.warning]=\"error.severity === 'WARNING'\"\n              (click)=\"onValidationErrorClick(error.elementId)\"\n            >\n              <span\n                class=\"validation-errors-list__icon\"\n                [class.warning]=\"error.severity === 'WARNING'\"\n                >{{ error.severity === 'WARNING' ? '!' : '!' }}</span\n              >\n\n              <span class=\"validation-errors-list__details\">\n                <span class=\"validation-errors-list__element\">{{\n                  error.elementName || error.elementId\n                }}</span>\n\n                <span\n                  class=\"validation-errors-list__reason\"\n                  [class.warning]=\"error.severity === 'WARNING'\"\n                  >{{ getValidationErrorMessage(error) }}</span\n                >\n              </span>\n            </button>\n          </div>\n        </details>\n      </div>\n    </div>\n\n    <div class=\"bpmn__modeler-panel\" #modelerPanel></div>\n  </div>\n\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'flex' : 'none'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #viewer>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{\n              ($markersVisible()\n                ? 'processManagement.markers.hide'\n                : 'processManagement.markers.show'\n              ) | translate\n            }}\n          </span>\n        </button>\n      </cds-tooltip>\n    </div>\n\n    <div class=\"bpmn__modeler-panel bpmn__modeler-panel--read-only\" #viewerPanel></div>\n  </div>\n</div>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showWarningConfirmationModal$\"\n  [titleTranslationKey]=\"'processManagement.warningConfirmation.title'\"\n  [contentTranslationKey]=\"'processManagement.warningConfirmation.content'\"\n  [confirmButtonTextTranslationKey]=\"'processManagement.warningConfirmation.confirm'\"\n  [cancelButtonTextTranslationKey]=\"'interface.cancel'\"\n  (confirmEvent)=\"onWarningConfirmationConfirm()\"\n  (cancelEvent)=\"onWarningConfirmationCancel()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"page-header-actions\"\n      *ngIf=\"{\n        processDefinitionVersionsListItems: processDefinitionVersionsListItems$ | async,\n        loading: loading$ | async,\n        changesPending: changesPending$ | async,\n        isReadOnlyProcess: isReadOnlyProcess$ | async,\n        isSystemProcess: isSystemProcess$ | async,\n        compactMode: compactMode$ | async,\n        creatingNewProcess: creatingNewProcess$ | async,\n        context: context$ | async,\n        hasEditPermissions: hasEditPermissions$ | async,\n        draft: draft$ | async,\n        canInitializeDocument: canInitializeDocument$ | async,\n        startableByUser: startableByUser$ | async,\n        updatingProcessDefinitionCaseDefinition: updatingProcessDefinitionCaseDefinition$ | async,\n      } as actionsObs\"\n    >\n      <div class=\"page-header-actions__left-container\">\n        <cds-dropdown\n          *ngIf=\"!actionsObs.creatingNewProcess && actionsObs?.context === 'independent'\"\n          class=\"page-header-actions__version-dropdown\"\n          [attr.data-test-id]=\"testIds.versionDropdown\"\n          (selected)=\"selectedVersionChange($event)\"\n          [disabled]=\"\n            actionsObs.loading ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 0 ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 1\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n        >\n          <cds-dropdown-list\n            [items]=\"actionsObs.processDefinitionVersionsListItems || []\"\n          ></cds-dropdown-list>\n        </cds-dropdown>\n\n        <div\n          class=\"page-header-actions__tags\"\n          *ngIf=\"\n            actionsObs.isReadOnlyProcess ||\n            !actionsObs.hasEditPermissions ||\n            actionsObs.isSystemProcess\n          \"\n        >\n          <cds-tag\n            *ngIf=\"actionsObs.isReadOnlyProcess || !actionsObs.hasEditPermissions\"\n            type=\"blue\"\n            [attr.data-test-id]=\"testIds.readOnlyTag\"\n            >{{ 'processManagement.readOnly' | translate }}</cds-tag\n          >\n\n          <cds-tag\n            *ngIf=\"actionsObs.isSystemProcess\"\n            type=\"red\"\n            [attr.data-test-id]=\"testIds.systemProcessTag\"\n            >{{ 'processManagement.systemProcess' | translate }}</cds-tag\n          >\n        </div>\n\n        <div class=\"page-header-actions__toggles\">\n          <cds-tooltip\n            align=\"bottom-left\"\n            [autoAlign]=\"true\"\n            [description]=\"'processManagement.draftTooltip' | translate\"\n          >\n            <cds-toggle\n              size=\"sm\"\n              [onText]=\"'processManagement.draft' | translate\"\n              [offText]=\"'processManagement.draft' | translate\"\n              [checked]=\"actionsObs.draft\"\n              [disabled]=\"actionsObs.loading || !actionsObs.hasEditPermissions\"\n              (checkedChange)=\"onProcessToggleChange('draft', $event)\"\n              [attr.data-test-id]=\"testIds.draftToggle\"\n            ></cds-toggle>\n          </cds-tooltip>\n\n          @if (actionsObs.context === 'case') {\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.processCreatesCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.canInitializeDocument' | translate\"\n                [offText]=\"'processManagement.canInitializeDocument' | translate\"\n                [checked]=\"actionsObs.canInitializeDocument\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('canInitializeDocument', $event)\"\n                [attr.data-test-id]=\"testIds.startsCaseToggle\"\n              ></cds-toggle>\n            </cds-tooltip>\n\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.startableWithinCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.startableByUser' | translate\"\n                [offText]=\"'processManagement.startableByUser' | translate\"\n                [checked]=\"actionsObs.startableByUser\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('startableByUser', $event)\"\n                [attr.data-test-id]=\"testIds.startableByUserToggle\"\n              ></cds-toggle\n            ></cds-tooltip>\n          }\n        </div>\n      </div>\n\n      <div class=\"page-header-actions__buttons\">\n        <v-overflow-menu class=\"overflow-button\" placement=\"bottom-end\">\n          <v-overflow-menu-trigger\n            overflowTrigger\n            [attr.data-test-id]=\"testIds.moreButton\"\n          ></v-overflow-menu-trigger>\n          <v-overflow-menu-option\n            *ngIf=\"actionsObs.context !== 'case'\"\n            [disabled]=\"actionsObs.loading\"\n            [attr.data-test-id]=\"testIds.exportOption\"\n            (selected)=\"export()\"\n            >{{ 'interface.export' | translate }}\n          </v-overflow-menu-option>\n\n          <v-overflow-menu-option\n            [disabled]=\"actionsObs.loading\"\n            (selected)=\"exportBpmn(actionsObs.isReadOnlyProcess)\"\n            >{{ 'processManagement.exportBpmn' | translate }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"tertiary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          {{ 'interface.back' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"return\" size=\"16\"></svg>\n        </button>\n\n        <button\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [disabled]=\"actionsObs.loading || !actionsObs.hasEditPermissions\"\n          [attr.data-test-id]=\"testIds.validateButton\"\n          (click)=\"validateProcessDefinition(actionsObs.isReadOnlyProcess)\"\n        >\n          {{ 'processManagement.validate' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"list--checked\" size=\"16\"></svg>\n        </button>\n\n        <button\n          [disabled]=\"!actionsObs.changesPending || !actionsObs.hasEditPermissions\"\n          cdsButton=\"primary\"\n          (click)=\"\n            !actionsObs.creatingNewProcess\n              ? deployChanges(actionsObs.isReadOnlyProcess)\n              : deployNewProcessDefinition()\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [attr.data-test-id]=\"testIds.deployButton\"\n        >\n          {{ 'processManagement.deploy' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"deploy\" size=\"16\"></svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.bpmn__container{position:relative;background-color:var(--cds-layer);width:100%}.bpmn__modeler{width:100%;height:100%;flex-direction:row;padding:1px;box-sizing:border-box;outline:1px solid var(--cds-border-subtle);outline-offset:-1px}.bpmn__modeler ::ng-deep .djs-container>svg{outline:none!important}.bpmn__modeler-canvas{width:100%;position:relative}.bpmn__modeler-canvas .markers-visibility-toggle-wrapper{position:absolute;bottom:55px;right:15px;z-index:100}.bpmn__modeler-canvas .markers-visibility-toggle{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:none;border-radius:2px;background-color:var(--cds-layer);cursor:pointer;color:var(--cds-text-secondary);transition:background-color .15s,color .15s}.bpmn__modeler-canvas .markers-visibility-toggle:hover{background-color:var(--cds-layer-hover);color:var(--cds-text-primary)}.bpmn__modeler-canvas .markers-visibility-toggle:focus{outline:2px solid var(--cds-focus);outline-offset:-2px}.bpmn__modeler-canvas .markers-visibility-toggle__label{font-size:12px;white-space:nowrap}.bpmn__modeler-panel{width:481px;padding-left:1px;box-shadow:inset 1px 0 0 0 var(--cds-border-subtle);box-sizing:border-box}.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry input,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry select,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry textarea,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry .bio-properties-panel-feel-editor-container{opacity:.65}.bpmn__loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--cds-background-selected)}.page-header-actions{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px}.page-header-actions__left-container{display:flex;gap:16px;align-items:center}.page-header-actions__tags{display:flex;gap:8px;align-items:center}.page-header-actions__version-dropdown{width:150px}.page-header-actions__toggles{display:flex;gap:16px;align-items:center}.page-header-actions__toggles ::ng-deep cds-toggle{display:inline-flex;align-items:center}.page-header-actions__toggles ::ng-deep .cds--toggle__label-text{display:none}.page-header-actions__buttons{display:flex;gap:16px;align-items:center;flex-shrink:0}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}.validation-errors-list{position:absolute;top:8px;right:8px;z-index:10;width:320px;max-height:250px;overflow-y:auto;border:1px solid var(--cds-border-subtle);background-color:var(--cds-layer);border-radius:4px;box-shadow:0 2px 6px #00000026}.validation-errors-list details[open]>summary .validation-errors-list__arrow{transform:rotate(90deg)}.validation-errors-list__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:600;color:var(--cds-support-error, #da1e28);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.validation-errors-list__header::-webkit-details-marker{display:none}.validation-errors-list__arrow{display:inline-flex;width:16px;height:16px;fill:currentColor;transition:transform .15s ease;flex-shrink:0}.validation-errors-list__items{display:flex;flex-direction:column;border-top:1px solid var(--cds-border-subtle)}.validation-errors-list__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border:none;border-bottom:1px solid var(--cds-border-subtle);border-left:3px solid var(--cds-support-error, #da1e28);background-color:var(--cds-notification-error-background, #fff1f1);text-align:left;cursor:pointer;font-family:inherit}.validation-errors-list__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}.validation-errors-list__item:last-child{border-bottom:none}.validation-errors-list__item:hover{filter:brightness(.97)}.validation-errors-list__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin-top:1px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}.validation-errors-list__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}.validation-errors-list__details{display:flex;flex-direction:column;gap:2px}.validation-errors-list__element{font-size:13px;font-weight:600;color:var(--cds-text-primary)}.validation-errors-list__reason{font-size:13px;color:var(--cds-text-primary)}::ng-deep .highlight-overlay-error:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-error, #da1e28)!important}::ng-deep .highlight-overlay-warning:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-warning, #f1c21b)!important}::ng-deep .djs-overlay-validation-error{overflow:visible!important;pointer-events:all!important}::ng-deep .validation-error-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-error-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-error-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-error, #da1e28);color:var(--cds-support-error, #da1e28);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-error-overlay:hover ::ng-deep .validation-error-overlay__text,::ng-deep .validation-error-overlay--active ::ng-deep .validation-error-overlay__text{display:block}::ng-deep .validation-warning-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-warning-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-warning-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-warning-overlay:hover ::ng-deep .validation-warning-overlay__text,::ng-deep .validation-warning-overlay--active ::ng-deep .validation-warning-overlay__text{display:block}::ng-deep .djs-overlay-activity-marker{overflow:visible!important;pointer-events:all!important}::ng-deep .activity-marker-overlay{display:flex;gap:2px}::ng-deep .activity-marker-badge{position:relative;cursor:pointer;pointer-events:all}::ng-deep .activity-marker-badge__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:14px;font-weight:700;line-height:0}::ng-deep .activity-marker-badge__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .activity-marker-badge:hover ::ng-deep .activity-marker-badge__text,::ng-deep .activity-marker-badge--active ::ng-deep .activity-marker-badge__text{display:block}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-purple-60, #8a3ffc);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-purple-60, #8a3ffc);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-teal-50, #009d9a);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-teal-50, #009d9a);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .validation-errors-panel{padding:8px 12px;display:flex;flex-direction:column;gap:8px}::ng-deep .validation-errors-panel__item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background-color:var(--cds-notification-error-background, #fff1f1);border-left:3px solid var(--cds-support-error, #da1e28)}::ng-deep .validation-errors-panel__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}::ng-deep .validation-errors-panel__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}::ng-deep .validation-errors-panel__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}::ng-deep .validation-errors-panel__reason{color:var(--cds-text-primary, #161616);font-size:13px;line-height:18px}::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-input,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-textfield,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-feel-editor-container{border:2px solid var(--cds-support-error, #da1e28)!important;background-color:var(--cds-notification-error-background, #fff1f1)!important}::ng-deep .expression-editor-param input.validation-error-param,::ng-deep input.expression-editor-input.validation-error-param,::ng-deep .expression-editor-technical input.validation-error-param,::ng-deep .expression-editor-technical textarea.validation-error-param{border:2px solid #da1e28!important;background-color:#fff1f1!important;border-color:#da1e28!important}::ng-deep .process-link-properties-panel{padding:8px 12px 16px;width:100%;display:flex;flex-direction:column;gap:16px}::ng-deep .process-link-properties-panel__buttons,::ng-deep .process-link-properties-panel__header{width:100%;display:flex;gap:16px}::ng-deep .process-link-properties-panel__header{align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--cds-border-subtle-00);padding-bottom:8px;padding-left:8px;padding-right:8px}::ng-deep .process-link-properties-panel__title{color:var(--cds-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:auto 0}::ng-deep .process-link-properties-panel__title-container{display:flex;flex-direction:column;gap:4px}::ng-deep .process-link-properties-panel__title-container :last-child{color:var(--cds-text-helper);font-style:italic}::ng-deep .process-link-properties-panel .cds--tag{margin:0}::ng-deep .process-link-properties-panel .cds--btn{flex-shrink:1;width:100%;display:flex;align-items:center}::ng-deep .djs-overlay-autofilled-indicator{overflow:visible!important;pointer-events:all!important}::ng-deep .autofilled-indicator-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-tooltip{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .autofilled-indicator-overlay:hover .autofilled-indicator-tooltip{display:block}::ng-deep .autofilled-notification-panel{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--cds-layer-02, #f4f4f4);border-left:3px solid var(--cds-support-info, #0043ce);margin-bottom:8px}::ng-deep .autofilled-notification-panel__icon{display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700}::ng-deep .autofilled-notification-panel__message{flex:1;font-size:12px;color:var(--cds-text-primary, #161616)}::ng-deep .autofilled-notification-panel__dismiss{background:none;border:none;cursor:pointer;padding:2px 6px;font-size:16px;color:var(--cds-text-secondary, #525252);line-height:1}::ng-deep .autofilled-notification-panel__dismiss:hover{color:var(--cds-text-primary, #161616)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "directive", type: FitPageDirective, selector: "[fitPage]", inputs: ["spaceAdjustment", "fitPageDisabled", "disableOverflow", "bottomMargin"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "directive", type: RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ProcessLinkModule }, { kind: "component", type: i5.ProcessLinkModalComponent, selector: "valtimo-process-link-modal" }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2$2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: i2$2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "ngmodule", type: OverflowMenuModule }, { kind: "component", type: i1$1.OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: i1$1.OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: i1$1.OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact", "label"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementBuilderComponent, decorators: [{
             type: Component,
@@ -1938,20 +3189,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         TranslateModule,
                         TagModule,
                         ProcessLinkModule,
-                        ProcessLinkModule,
-                        OverflowMenuComponent,
-                        OverflowMenuOptionComponent,
-                        OverflowMenuTriggerComponent,
                         ToggleModule,
                         TooltipModule,
                         ConfirmationModalModule,
+                        OverflowMenuModule,
                     ], providers: [
                         ProcessManagementEditorService,
                         ProcessLinkStateService,
                         ProcessLinkStepService,
                         ProcessLinkButtonService,
-                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [disableOverflow]=\"true\"\n  *ngIf=\"{\n    processDefinitionVersions: processDefinitionVersions$ | async,\n    selectedProcessDefinitionXml: selectedProcessDefinitionXml$ | async,\n    loading: loading$ | async,\n    isReadOnlyProcess: isReadOnlyProcess$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n  data-carbon-theme=\"g10\"\n  class=\"bpmn__container\"\n>\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'none' : 'flex'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #modeler>\n      <div\n        class=\"validation-errors-list\"\n        *ngIf=\"validationErrors$ | async as validationErrors\"\n        [style.display]=\"validationErrors.length > 0 ? '' : 'none'\"\n      >\n        <details open>\n          <summary class=\"validation-errors-list__header\">\n            <span>{{\n              'processManagement.validationErrorsCount'\n                | translate: {count: validationErrors.length}\n            }}</span>\n            <svg\n              class=\"validation-errors-list__arrow\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z\"\n              />\n            </svg>\n          </summary>\n\n          <div class=\"validation-errors-list__items\">\n            <button\n              *ngFor=\"let error of validationErrors\"\n              class=\"validation-errors-list__item\"\n              [class.warning]=\"error.severity === 'WARNING'\"\n              (click)=\"onValidationErrorClick(error.elementId)\"\n            >\n              <span\n                class=\"validation-errors-list__icon\"\n                [class.warning]=\"error.severity === 'WARNING'\"\n                >{{ error.severity === 'WARNING' ? '!' : '!' }}</span\n              >\n\n              <span class=\"validation-errors-list__details\">\n                <span class=\"validation-errors-list__element\">{{\n                  error.elementName || error.elementId\n                }}</span>\n\n                <span\n                  class=\"validation-errors-list__reason\"\n                  [class.warning]=\"error.severity === 'WARNING'\"\n                  >{{ getValidationErrorMessage(error) }}</span\n                >\n              </span>\n            </button>\n          </div>\n        </details>\n      </div>\n    </div>\n\n    <div class=\"bpmn__modeler-panel\" #modelerPanel></div>\n  </div>\n\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'flex' : 'none'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #viewer></div>\n\n    <div class=\"bpmn__modeler-panel\" #viewerPanel></div>\n  </div>\n</div>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showWarningConfirmationModal$\"\n  [titleTranslationKey]=\"'processManagement.warningConfirmation.title'\"\n  [contentTranslationKey]=\"'processManagement.warningConfirmation.content'\"\n  [confirmButtonTextTranslationKey]=\"'processManagement.warningConfirmation.confirm'\"\n  [cancelButtonTextTranslationKey]=\"'interface.cancel'\"\n  (confirmEvent)=\"onWarningConfirmationConfirm()\"\n  (cancelEvent)=\"onWarningConfirmationCancel()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"page-header-actions\"\n      *ngIf=\"{\n        processDefinitionVersionsListItems: processDefinitionVersionsListItems$ | async,\n        loading: loading$ | async,\n        changesPending: changesPending$ | async,\n        isReadOnlyProcess: isReadOnlyProcess$ | async,\n        isSystemProcess: isSystemProcess$ | async,\n        compactMode: compactMode$ | async,\n        creatingNewProcess: creatingNewProcess$ | async,\n        context: context$ | async,\n        hasEditPermissions: hasEditPermissions$ | async,\n        draft: draft$ | async,\n        canInitializeDocument: canInitializeDocument$ | async,\n        startableByUser: startableByUser$ | async,\n        updatingProcessDefinitionCaseDefinition: updatingProcessDefinitionCaseDefinition$ | async,\n      } as actionsObs\"\n    >\n      <div class=\"page-header-actions__left-container\">\n        <cds-dropdown\n          *ngIf=\"!actionsObs.creatingNewProcess && actionsObs?.context === 'independent'\"\n          class=\"page-header-actions__version-dropdown\"\n          (selected)=\"selectedVersionChange($event)\"\n          [disabled]=\"\n            actionsObs.loading ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 0 ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 1\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n        >\n          <cds-dropdown-list\n            [items]=\"actionsObs.processDefinitionVersionsListItems || []\"\n          ></cds-dropdown-list>\n        </cds-dropdown>\n\n        <div\n          class=\"page-header-actions__tags\"\n          *ngIf=\"\n            actionsObs.isReadOnlyProcess ||\n            !actionsObs.hasEditPermissions ||\n            actionsObs.isSystemProcess\n          \"\n        >\n          <cds-tag\n            *ngIf=\"actionsObs.isReadOnlyProcess || !actionsObs.hasEditPermissions\"\n            type=\"blue\"\n            >{{ 'processManagement.readOnly' | translate }}</cds-tag\n          >\n\n          <cds-tag *ngIf=\"actionsObs.isSystemProcess\" type=\"red\">{{\n            'processManagement.systemProcess' | translate\n          }}</cds-tag>\n        </div>\n\n        <div class=\"page-header-actions__toggles\">\n          <cds-tooltip\n            align=\"bottom-left\"\n            [autoAlign]=\"true\"\n            [description]=\"'processManagement.draftTooltip' | translate\"\n          >\n            <cds-toggle\n              size=\"sm\"\n              [onText]=\"'processManagement.draft' | translate\"\n              [offText]=\"'processManagement.draft' | translate\"\n              [checked]=\"actionsObs.draft\"\n              [disabled]=\"actionsObs.loading || !actionsObs.hasEditPermissions\"\n              (checkedChange)=\"onProcessToggleChange('draft', $event)\"\n              [attr.data-test-id]=\"testIds.draftToggle\"\n            ></cds-toggle>\n          </cds-tooltip>\n\n          @if (actionsObs.context === 'case') {\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.processCreatesCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.canInitializeDocument' | translate\"\n                [offText]=\"'processManagement.canInitializeDocument' | translate\"\n                [checked]=\"actionsObs.canInitializeDocument\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('canInitializeDocument', $event)\"\n                [attr.data-test-id]=\"testIds.startsCaseToggle\"\n              ></cds-toggle>\n            </cds-tooltip>\n\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.startableWithinCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.startableByUser' | translate\"\n                [offText]=\"'processManagement.startableByUser' | translate\"\n                [checked]=\"actionsObs.startableByUser\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('startableByUser', $event)\"\n                [attr.data-test-id]=\"testIds.startableByUserToggle\"\n              ></cds-toggle\n            ></cds-tooltip>\n          }\n        </div>\n      </div>\n\n      <div class=\"page-header-actions__buttons\">\n        <v-overflow-menu class=\"overflow-button\" placement=\"bottom-end\">\n          <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n          <v-overflow-menu-option\n            [disabled]=\"actionsObs.loading\"\n            (selected)=\"export(actionsObs.isReadOnlyProcess)\"\n            >{{ 'interface.export' | translate }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"tertiary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          {{ 'interface.back' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"return\" size=\"16\"></svg>\n        </button>\n\n        <button\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [disabled]=\"actionsObs.loading\"\n          (click)=\"validateProcessDefinition(actionsObs.isReadOnlyProcess)\"\n        >\n          {{ 'processManagement.validate' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"list--checked\" size=\"16\"></svg>\n        </button>\n\n        <button\n          [disabled]=\"!actionsObs.changesPending\"\n          cdsButton=\"primary\"\n          (click)=\"\n            !actionsObs.creatingNewProcess\n              ? deployChanges(actionsObs.isReadOnlyProcess)\n              : deployNewProcessDefinition()\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [attr.data-test-id]=\"testIds.deployButton\"\n        >\n          {{ 'processManagement.deploy' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"deploy\" size=\"16\"></svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.bpmn__container{position:relative;background-color:var(--cds-layer);width:100%}.bpmn__modeler{width:100%;height:100%;flex-direction:row;padding:1px;box-sizing:border-box;outline:1px solid var(--cds-border-subtle);outline-offset:-1px}.bpmn__modeler ::ng-deep .djs-container>svg{outline:none!important}.bpmn__modeler-canvas{width:100%;position:relative}.bpmn__modeler-panel{width:481px;padding-left:1px;box-shadow:inset 1px 0 0 0 var(--cds-border-subtle);box-sizing:border-box}.bpmn__loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--cds-background-selected)}.page-header-actions{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px}.page-header-actions__left-container{display:flex;gap:16px;align-items:center}.page-header-actions__tags{display:flex;gap:8px;align-items:center}.page-header-actions__version-dropdown{width:150px}.page-header-actions__toggles{display:flex;gap:16px;align-items:center}.page-header-actions__toggles ::ng-deep cds-toggle{display:inline-flex;align-items:center}.page-header-actions__toggles ::ng-deep .cds--toggle__label-text{display:none}.page-header-actions__buttons{display:flex;gap:16px;align-items:center;flex-shrink:0}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}.validation-errors-list{position:absolute;top:8px;right:8px;z-index:10;width:320px;max-height:250px;overflow-y:auto;border:1px solid var(--cds-border-subtle);background-color:var(--cds-layer);border-radius:4px;box-shadow:0 2px 6px #00000026}.validation-errors-list details[open]>summary .validation-errors-list__arrow{transform:rotate(90deg)}.validation-errors-list__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:600;color:var(--cds-support-error, #da1e28);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.validation-errors-list__header::-webkit-details-marker{display:none}.validation-errors-list__arrow{display:inline-flex;width:16px;height:16px;fill:currentColor;transition:transform .15s ease;flex-shrink:0}.validation-errors-list__items{display:flex;flex-direction:column;border-top:1px solid var(--cds-border-subtle)}.validation-errors-list__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border:none;border-bottom:1px solid var(--cds-border-subtle);border-left:3px solid var(--cds-support-error, #da1e28);background-color:var(--cds-notification-error-background, #fff1f1);text-align:left;cursor:pointer;font-family:inherit}.validation-errors-list__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}.validation-errors-list__item:last-child{border-bottom:none}.validation-errors-list__item:hover{filter:brightness(.97)}.validation-errors-list__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin-top:1px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}.validation-errors-list__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}.validation-errors-list__details{display:flex;flex-direction:column;gap:2px}.validation-errors-list__element{font-size:13px;font-weight:600;color:var(--cds-text-primary)}.validation-errors-list__reason{font-size:13px;color:var(--cds-text-primary)}::ng-deep .highlight-overlay-error:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-error, #da1e28)!important}::ng-deep .highlight-overlay-warning:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-warning, #f1c21b)!important}::ng-deep .djs-overlay-validation-error{overflow:visible!important;pointer-events:all!important}::ng-deep .validation-error-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-error-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-error-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-error, #da1e28);color:var(--cds-support-error, #da1e28);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-error-overlay:hover ::ng-deep .validation-error-overlay__text,::ng-deep .validation-error-overlay--active ::ng-deep .validation-error-overlay__text{display:block}::ng-deep .validation-warning-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-warning-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-warning-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-warning-overlay:hover ::ng-deep .validation-warning-overlay__text,::ng-deep .validation-warning-overlay--active ::ng-deep .validation-warning-overlay__text{display:block}::ng-deep .validation-errors-panel{padding:8px 12px;display:flex;flex-direction:column;gap:8px}::ng-deep .validation-errors-panel__item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background-color:var(--cds-notification-error-background, #fff1f1);border-left:3px solid var(--cds-support-error, #da1e28)}::ng-deep .validation-errors-panel__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}::ng-deep .validation-errors-panel__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}::ng-deep .validation-errors-panel__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}::ng-deep .validation-errors-panel__reason{color:var(--cds-text-primary, #161616);font-size:13px;line-height:18px}::ng-deep .process-link-properties-panel{padding:8px 12px 16px;width:100%;display:flex;flex-direction:column;gap:16px}::ng-deep .process-link-properties-panel__buttons,::ng-deep .process-link-properties-panel__header{width:100%;display:flex;gap:16px}::ng-deep .process-link-properties-panel__header{align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--cds-border-subtle-00);padding-bottom:8px;padding-left:8px;padding-right:8px}::ng-deep .process-link-properties-panel__title{color:var(--cds-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:auto 0}::ng-deep .process-link-properties-panel__title-container{display:flex;flex-direction:column;gap:4px}::ng-deep .process-link-properties-panel__title-container :last-child{color:var(--cds-text-helper);font-style:italic}::ng-deep .process-link-properties-panel .cds--tag{margin:0}::ng-deep .process-link-properties-panel .cds--btn{flex-shrink:1;width:100%;display:flex;align-items:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.BreadcrumbService }, { type: i2$2.IconService }, { type: i3.NGXLogger }, { type: i1$1.ModalService }, { type: i2$1.GlobalNotificationService }, { type: i1$1.PageHeaderService }, { type: i1$1.PageTitleService }, { type: i5.ProcessLinkService }, { type: i5.ProcessLinkStateService }, { type: ProcessManagementEditorService }, { type: ProcessManagementService }, { type: i7.ProcessService }, { type: i8.ActivatedRoute }, { type: i8.Router }, { type: i9.TranslateService }, { type: i10.PluginTranslationService }, { type: i2$1.EditPermissionsService }, { type: i5.ProcessLinkBuildingBlockApiService }], propDecorators: { modelerElementRef: [{
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [disableOverflow]=\"true\"\n  *ngIf=\"{\n    processDefinitionVersions: processDefinitionVersions$ | async,\n    selectedProcessDefinitionXml: selectedProcessDefinitionXml$ | async,\n    loading: loading$ | async,\n    isReadOnlyProcess: isReadOnlyProcess$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n  data-carbon-theme=\"g10\"\n  class=\"bpmn__container\"\n>\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'none' : 'flex'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #modeler>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{\n              ($markersVisible()\n                ? 'processManagement.markers.hide'\n                : 'processManagement.markers.show'\n              ) | translate\n            }}\n          </span>\n        </button>\n      </cds-tooltip>\n\n      <div\n        class=\"validation-errors-list\"\n        *ngIf=\"validationErrors$ | async as validationErrors\"\n        [style.display]=\"validationErrors.length > 0 ? '' : 'none'\"\n        [attr.data-test-id]=\"testIds.validationErrors\"\n      >\n        <details open>\n          <summary class=\"validation-errors-list__header\">\n            <span>{{\n              'processManagement.validationErrorsCount'\n                | translate: {count: validationErrors.length}\n            }}</span>\n            <svg\n              class=\"validation-errors-list__arrow\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z\"\n              />\n            </svg>\n          </summary>\n\n          <div class=\"validation-errors-list__items\">\n            <button\n              *ngFor=\"let error of validationErrors\"\n              class=\"validation-errors-list__item\"\n              [class.warning]=\"error.severity === 'WARNING'\"\n              (click)=\"onValidationErrorClick(error.elementId)\"\n            >\n              <span\n                class=\"validation-errors-list__icon\"\n                [class.warning]=\"error.severity === 'WARNING'\"\n                >{{ error.severity === 'WARNING' ? '!' : '!' }}</span\n              >\n\n              <span class=\"validation-errors-list__details\">\n                <span class=\"validation-errors-list__element\">{{\n                  error.elementName || error.elementId\n                }}</span>\n\n                <span\n                  class=\"validation-errors-list__reason\"\n                  [class.warning]=\"error.severity === 'WARNING'\"\n                  >{{ getValidationErrorMessage(error) }}</span\n                >\n              </span>\n            </button>\n          </div>\n        </details>\n      </div>\n    </div>\n\n    <div class=\"bpmn__modeler-panel\" #modelerPanel></div>\n  </div>\n\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'flex' : 'none'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #viewer>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{\n              ($markersVisible()\n                ? 'processManagement.markers.hide'\n                : 'processManagement.markers.show'\n              ) | translate\n            }}\n          </span>\n        </button>\n      </cds-tooltip>\n    </div>\n\n    <div class=\"bpmn__modeler-panel bpmn__modeler-panel--read-only\" #viewerPanel></div>\n  </div>\n</div>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showWarningConfirmationModal$\"\n  [titleTranslationKey]=\"'processManagement.warningConfirmation.title'\"\n  [contentTranslationKey]=\"'processManagement.warningConfirmation.content'\"\n  [confirmButtonTextTranslationKey]=\"'processManagement.warningConfirmation.confirm'\"\n  [cancelButtonTextTranslationKey]=\"'interface.cancel'\"\n  (confirmEvent)=\"onWarningConfirmationConfirm()\"\n  (cancelEvent)=\"onWarningConfirmationCancel()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"page-header-actions\"\n      *ngIf=\"{\n        processDefinitionVersionsListItems: processDefinitionVersionsListItems$ | async,\n        loading: loading$ | async,\n        changesPending: changesPending$ | async,\n        isReadOnlyProcess: isReadOnlyProcess$ | async,\n        isSystemProcess: isSystemProcess$ | async,\n        compactMode: compactMode$ | async,\n        creatingNewProcess: creatingNewProcess$ | async,\n        context: context$ | async,\n        hasEditPermissions: hasEditPermissions$ | async,\n        draft: draft$ | async,\n        canInitializeDocument: canInitializeDocument$ | async,\n        startableByUser: startableByUser$ | async,\n        updatingProcessDefinitionCaseDefinition: updatingProcessDefinitionCaseDefinition$ | async,\n      } as actionsObs\"\n    >\n      <div class=\"page-header-actions__left-container\">\n        <cds-dropdown\n          *ngIf=\"!actionsObs.creatingNewProcess && actionsObs?.context === 'independent'\"\n          class=\"page-header-actions__version-dropdown\"\n          [attr.data-test-id]=\"testIds.versionDropdown\"\n          (selected)=\"selectedVersionChange($event)\"\n          [disabled]=\"\n            actionsObs.loading ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 0 ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 1\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n        >\n          <cds-dropdown-list\n            [items]=\"actionsObs.processDefinitionVersionsListItems || []\"\n          ></cds-dropdown-list>\n        </cds-dropdown>\n\n        <div\n          class=\"page-header-actions__tags\"\n          *ngIf=\"\n            actionsObs.isReadOnlyProcess ||\n            !actionsObs.hasEditPermissions ||\n            actionsObs.isSystemProcess\n          \"\n        >\n          <cds-tag\n            *ngIf=\"actionsObs.isReadOnlyProcess || !actionsObs.hasEditPermissions\"\n            type=\"blue\"\n            [attr.data-test-id]=\"testIds.readOnlyTag\"\n            >{{ 'processManagement.readOnly' | translate }}</cds-tag\n          >\n\n          <cds-tag\n            *ngIf=\"actionsObs.isSystemProcess\"\n            type=\"red\"\n            [attr.data-test-id]=\"testIds.systemProcessTag\"\n            >{{ 'processManagement.systemProcess' | translate }}</cds-tag\n          >\n        </div>\n\n        <div class=\"page-header-actions__toggles\">\n          <cds-tooltip\n            align=\"bottom-left\"\n            [autoAlign]=\"true\"\n            [description]=\"'processManagement.draftTooltip' | translate\"\n          >\n            <cds-toggle\n              size=\"sm\"\n              [onText]=\"'processManagement.draft' | translate\"\n              [offText]=\"'processManagement.draft' | translate\"\n              [checked]=\"actionsObs.draft\"\n              [disabled]=\"actionsObs.loading || !actionsObs.hasEditPermissions\"\n              (checkedChange)=\"onProcessToggleChange('draft', $event)\"\n              [attr.data-test-id]=\"testIds.draftToggle\"\n            ></cds-toggle>\n          </cds-tooltip>\n\n          @if (actionsObs.context === 'case') {\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.processCreatesCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.canInitializeDocument' | translate\"\n                [offText]=\"'processManagement.canInitializeDocument' | translate\"\n                [checked]=\"actionsObs.canInitializeDocument\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('canInitializeDocument', $event)\"\n                [attr.data-test-id]=\"testIds.startsCaseToggle\"\n              ></cds-toggle>\n            </cds-tooltip>\n\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.startableWithinCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.startableByUser' | translate\"\n                [offText]=\"'processManagement.startableByUser' | translate\"\n                [checked]=\"actionsObs.startableByUser\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('startableByUser', $event)\"\n                [attr.data-test-id]=\"testIds.startableByUserToggle\"\n              ></cds-toggle\n            ></cds-tooltip>\n          }\n        </div>\n      </div>\n\n      <div class=\"page-header-actions__buttons\">\n        <v-overflow-menu class=\"overflow-button\" placement=\"bottom-end\">\n          <v-overflow-menu-trigger\n            overflowTrigger\n            [attr.data-test-id]=\"testIds.moreButton\"\n          ></v-overflow-menu-trigger>\n          <v-overflow-menu-option\n            *ngIf=\"actionsObs.context !== 'case'\"\n            [disabled]=\"actionsObs.loading\"\n            [attr.data-test-id]=\"testIds.exportOption\"\n            (selected)=\"export()\"\n            >{{ 'interface.export' | translate }}\n          </v-overflow-menu-option>\n\n          <v-overflow-menu-option\n            [disabled]=\"actionsObs.loading\"\n            (selected)=\"exportBpmn(actionsObs.isReadOnlyProcess)\"\n            >{{ 'processManagement.exportBpmn' | translate }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"tertiary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          {{ 'interface.back' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"return\" size=\"16\"></svg>\n        </button>\n\n        <button\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [disabled]=\"actionsObs.loading || !actionsObs.hasEditPermissions\"\n          [attr.data-test-id]=\"testIds.validateButton\"\n          (click)=\"validateProcessDefinition(actionsObs.isReadOnlyProcess)\"\n        >\n          {{ 'processManagement.validate' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"list--checked\" size=\"16\"></svg>\n        </button>\n\n        <button\n          [disabled]=\"!actionsObs.changesPending || !actionsObs.hasEditPermissions\"\n          cdsButton=\"primary\"\n          (click)=\"\n            !actionsObs.creatingNewProcess\n              ? deployChanges(actionsObs.isReadOnlyProcess)\n              : deployNewProcessDefinition()\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [attr.data-test-id]=\"testIds.deployButton\"\n        >\n          {{ 'processManagement.deploy' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"deploy\" size=\"16\"></svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.bpmn__container{position:relative;background-color:var(--cds-layer);width:100%}.bpmn__modeler{width:100%;height:100%;flex-direction:row;padding:1px;box-sizing:border-box;outline:1px solid var(--cds-border-subtle);outline-offset:-1px}.bpmn__modeler ::ng-deep .djs-container>svg{outline:none!important}.bpmn__modeler-canvas{width:100%;position:relative}.bpmn__modeler-canvas .markers-visibility-toggle-wrapper{position:absolute;bottom:55px;right:15px;z-index:100}.bpmn__modeler-canvas .markers-visibility-toggle{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:none;border-radius:2px;background-color:var(--cds-layer);cursor:pointer;color:var(--cds-text-secondary);transition:background-color .15s,color .15s}.bpmn__modeler-canvas .markers-visibility-toggle:hover{background-color:var(--cds-layer-hover);color:var(--cds-text-primary)}.bpmn__modeler-canvas .markers-visibility-toggle:focus{outline:2px solid var(--cds-focus);outline-offset:-2px}.bpmn__modeler-canvas .markers-visibility-toggle__label{font-size:12px;white-space:nowrap}.bpmn__modeler-panel{width:481px;padding-left:1px;box-shadow:inset 1px 0 0 0 var(--cds-border-subtle);box-sizing:border-box}.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry input,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry select,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry textarea,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry .bio-properties-panel-feel-editor-container{opacity:.65}.bpmn__loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--cds-background-selected)}.page-header-actions{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px}.page-header-actions__left-container{display:flex;gap:16px;align-items:center}.page-header-actions__tags{display:flex;gap:8px;align-items:center}.page-header-actions__version-dropdown{width:150px}.page-header-actions__toggles{display:flex;gap:16px;align-items:center}.page-header-actions__toggles ::ng-deep cds-toggle{display:inline-flex;align-items:center}.page-header-actions__toggles ::ng-deep .cds--toggle__label-text{display:none}.page-header-actions__buttons{display:flex;gap:16px;align-items:center;flex-shrink:0}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}.validation-errors-list{position:absolute;top:8px;right:8px;z-index:10;width:320px;max-height:250px;overflow-y:auto;border:1px solid var(--cds-border-subtle);background-color:var(--cds-layer);border-radius:4px;box-shadow:0 2px 6px #00000026}.validation-errors-list details[open]>summary .validation-errors-list__arrow{transform:rotate(90deg)}.validation-errors-list__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:600;color:var(--cds-support-error, #da1e28);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.validation-errors-list__header::-webkit-details-marker{display:none}.validation-errors-list__arrow{display:inline-flex;width:16px;height:16px;fill:currentColor;transition:transform .15s ease;flex-shrink:0}.validation-errors-list__items{display:flex;flex-direction:column;border-top:1px solid var(--cds-border-subtle)}.validation-errors-list__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border:none;border-bottom:1px solid var(--cds-border-subtle);border-left:3px solid var(--cds-support-error, #da1e28);background-color:var(--cds-notification-error-background, #fff1f1);text-align:left;cursor:pointer;font-family:inherit}.validation-errors-list__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}.validation-errors-list__item:last-child{border-bottom:none}.validation-errors-list__item:hover{filter:brightness(.97)}.validation-errors-list__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin-top:1px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}.validation-errors-list__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}.validation-errors-list__details{display:flex;flex-direction:column;gap:2px}.validation-errors-list__element{font-size:13px;font-weight:600;color:var(--cds-text-primary)}.validation-errors-list__reason{font-size:13px;color:var(--cds-text-primary)}::ng-deep .highlight-overlay-error:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-error, #da1e28)!important}::ng-deep .highlight-overlay-warning:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-warning, #f1c21b)!important}::ng-deep .djs-overlay-validation-error{overflow:visible!important;pointer-events:all!important}::ng-deep .validation-error-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-error-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-error-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-error, #da1e28);color:var(--cds-support-error, #da1e28);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-error-overlay:hover ::ng-deep .validation-error-overlay__text,::ng-deep .validation-error-overlay--active ::ng-deep .validation-error-overlay__text{display:block}::ng-deep .validation-warning-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-warning-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-warning-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-warning-overlay:hover ::ng-deep .validation-warning-overlay__text,::ng-deep .validation-warning-overlay--active ::ng-deep .validation-warning-overlay__text{display:block}::ng-deep .djs-overlay-activity-marker{overflow:visible!important;pointer-events:all!important}::ng-deep .activity-marker-overlay{display:flex;gap:2px}::ng-deep .activity-marker-badge{position:relative;cursor:pointer;pointer-events:all}::ng-deep .activity-marker-badge__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:14px;font-weight:700;line-height:0}::ng-deep .activity-marker-badge__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .activity-marker-badge:hover ::ng-deep .activity-marker-badge__text,::ng-deep .activity-marker-badge--active ::ng-deep .activity-marker-badge__text{display:block}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-purple-60, #8a3ffc);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-purple-60, #8a3ffc);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-teal-50, #009d9a);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-teal-50, #009d9a);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .validation-errors-panel{padding:8px 12px;display:flex;flex-direction:column;gap:8px}::ng-deep .validation-errors-panel__item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background-color:var(--cds-notification-error-background, #fff1f1);border-left:3px solid var(--cds-support-error, #da1e28)}::ng-deep .validation-errors-panel__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}::ng-deep .validation-errors-panel__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}::ng-deep .validation-errors-panel__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}::ng-deep .validation-errors-panel__reason{color:var(--cds-text-primary, #161616);font-size:13px;line-height:18px}::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-input,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-textfield,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-feel-editor-container{border:2px solid var(--cds-support-error, #da1e28)!important;background-color:var(--cds-notification-error-background, #fff1f1)!important}::ng-deep .expression-editor-param input.validation-error-param,::ng-deep input.expression-editor-input.validation-error-param,::ng-deep .expression-editor-technical input.validation-error-param,::ng-deep .expression-editor-technical textarea.validation-error-param{border:2px solid #da1e28!important;background-color:#fff1f1!important;border-color:#da1e28!important}::ng-deep .process-link-properties-panel{padding:8px 12px 16px;width:100%;display:flex;flex-direction:column;gap:16px}::ng-deep .process-link-properties-panel__buttons,::ng-deep .process-link-properties-panel__header{width:100%;display:flex;gap:16px}::ng-deep .process-link-properties-panel__header{align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--cds-border-subtle-00);padding-bottom:8px;padding-left:8px;padding-right:8px}::ng-deep .process-link-properties-panel__title{color:var(--cds-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:auto 0}::ng-deep .process-link-properties-panel__title-container{display:flex;flex-direction:column;gap:4px}::ng-deep .process-link-properties-panel__title-container :last-child{color:var(--cds-text-helper);font-style:italic}::ng-deep .process-link-properties-panel .cds--tag{margin:0}::ng-deep .process-link-properties-panel .cds--btn{flex-shrink:1;width:100%;display:flex;align-items:center}::ng-deep .djs-overlay-autofilled-indicator{overflow:visible!important;pointer-events:all!important}::ng-deep .autofilled-indicator-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-tooltip{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .autofilled-indicator-overlay:hover .autofilled-indicator-tooltip{display:block}::ng-deep .autofilled-notification-panel{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--cds-layer-02, #f4f4f4);border-left:3px solid var(--cds-support-info, #0043ce);margin-bottom:8px}::ng-deep .autofilled-notification-panel__icon{display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700}::ng-deep .autofilled-notification-panel__message{flex:1;font-size:12px;color:var(--cds-text-primary, #161616)}::ng-deep .autofilled-notification-panel__dismiss{background:none;border:none;cursor:pointer;padding:2px 6px;font-size:16px;color:var(--cds-text-secondary, #525252);line-height:1}::ng-deep .autofilled-notification-panel__dismiss:hover{color:var(--cds-text-primary, #161616)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.BreadcrumbService }, { type: i2$2.IconService }, { type: i3.NGXLogger }, { type: i1$1.ModalService }, { type: i2.GlobalNotificationService }, { type: i1$1.PageHeaderService }, { type: i1$1.PageTitleService }, { type: i5.ProcessLinkService }, { type: i5.ProcessLinkStateService }, { type: ProcessManagementEditorService }, { type: ProcessManagementService }, { type: i7.ProcessService }, { type: i8.ActivatedRoute }, { type: i8.Router }, { type: i9.TranslateService }, { type: i10.PluginTranslationService }, { type: i2.EditPermissionsService }, { type: i5.ProcessLinkBuildingBlockApiService }, { type: ProcessBeanService }], propDecorators: { modelerElementRef: [{
                 type: ViewChild,
                 args: ['modeler', { static: false }]
             }], modelerPanelElementRef: [{
@@ -2070,7 +3318,7 @@ class ProcessManagementListComponent {
         this.processToDelete$.next(process.processDefinition);
         this.showDeleteModal$.next(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementListComponent, deps: [{ token: i2$2.IconService }, { token: i2$1.GlobalNotificationService }, { token: ProcessManagementService }, { token: ProcessManagementStateService }, { token: i9.TranslateService }, { token: i2$1.EnvironmentService }, { token: i8.ActivatedRoute }, { token: i2$1.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementListComponent, deps: [{ token: i2$2.IconService }, { token: i2.GlobalNotificationService }, { token: ProcessManagementService }, { token: ProcessManagementStateService }, { token: i9.TranslateService }, { token: i2.EnvironmentService }, { token: i8.ActivatedRoute }, { token: i2.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ProcessManagementListComponent, isStandalone: true, selector: "valtimo-process-management-list", outputs: { processSelected: "processSelected" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"ACTION_ITEMS\"\n  [showActionItems]=\"hasEditPermissions$ | async\"\n  [fields]=\"FIELDS\"\n  [header]=\"false\"\n  [items]=\"processDefinitions$ | async\"\n  [loading]=\"loading$ | async\"\n  (rowClicked)=\"editProcessDefinition($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <button\n      *ngIf=\"hasEditPermissions$ | async\"\n      cdsButton=\"ghost\"\n      iconOnly=\"true\"\n      [attr.data-test-id]=\"testIds.uploadButton\"\n      (click)=\"openModal()\"\n    >\n      <svg cdsIcon=\"upload\" size=\"16\"></svg>\n    </button>\n\n    <ng-container [ngTemplateOutlet]=\"createProcess\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"createProcess\"\n    [title]=\"'processManagement.noResults.title' | translate\"\n    [description]=\"'processManagement.noResults.' + $context() + 'Description' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"processManagement.deleteModal.content\"\n  [outputOnConfirm]=\"processToDelete$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"processManagement.deleteModal.title\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #createProcess>\n  <button *ngIf=\"hasEditPermissions$ | async\" cdsButton=\"primary\" [attr.data-test-id]=\"testIds.createProcessButton\" (click)=\"onCreateProcess()\">\n    {{ 'processManagement.createProcess' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementListComponent, decorators: [{
@@ -2084,7 +3332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         TranslateModule,
                         ConfirmationModalModule,
                     ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"ACTION_ITEMS\"\n  [showActionItems]=\"hasEditPermissions$ | async\"\n  [fields]=\"FIELDS\"\n  [header]=\"false\"\n  [items]=\"processDefinitions$ | async\"\n  [loading]=\"loading$ | async\"\n  (rowClicked)=\"editProcessDefinition($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <button\n      *ngIf=\"hasEditPermissions$ | async\"\n      cdsButton=\"ghost\"\n      iconOnly=\"true\"\n      [attr.data-test-id]=\"testIds.uploadButton\"\n      (click)=\"openModal()\"\n    >\n      <svg cdsIcon=\"upload\" size=\"16\"></svg>\n    </button>\n\n    <ng-container [ngTemplateOutlet]=\"createProcess\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"createProcess\"\n    [title]=\"'processManagement.noResults.title' | translate\"\n    [description]=\"'processManagement.noResults.' + $context() + 'Description' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"processManagement.deleteModal.content\"\n  [outputOnConfirm]=\"processToDelete$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"processManagement.deleteModal.title\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #createProcess>\n  <button *ngIf=\"hasEditPermissions$ | async\" cdsButton=\"primary\" [attr.data-test-id]=\"testIds.createProcessButton\" (click)=\"onCreateProcess()\">\n    {{ 'processManagement.createProcess' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i2$2.IconService }, { type: i2$1.GlobalNotificationService }, { type: ProcessManagementService }, { type: ProcessManagementStateService }, { type: i9.TranslateService }, { type: i2$1.EnvironmentService }, { type: i8.ActivatedRoute }, { type: i2$1.EditPermissionsService }], propDecorators: { processSelected: [{
+        }], ctorParameters: () => [{ type: i2$2.IconService }, { type: i2.GlobalNotificationService }, { type: ProcessManagementService }, { type: ProcessManagementStateService }, { type: i9.TranslateService }, { type: i2.EnvironmentService }, { type: i8.ActivatedRoute }, { type: i2.EditPermissionsService }], propDecorators: { processSelected: [{
                 type: Output
             }] } });
 
@@ -2103,45 +3351,206 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var UPLOAD_STEP;
+(function (UPLOAD_STEP) {
+    UPLOAD_STEP["FILE_SELECT"] = "fileSelect";
+    UPLOAD_STEP["REVIEW"] = "review";
+    UPLOAD_STEP["SUMMARY"] = "summary";
+})(UPLOAD_STEP || (UPLOAD_STEP = {}));
 class ProcessManagementUploadComponent {
-    constructor(formBuilder, notificationService, processManagementService, processManagementStateService, processLinkService, translateService) {
+    constructor(formBuilder, notificationService, processManagementService, processManagementStateService, processLinkService, translateService, changeDetectorRef) {
         this.formBuilder = formBuilder;
         this.notificationService = notificationService;
         this.processManagementService = processManagementService;
         this.processManagementStateService = processManagementStateService;
         this.processLinkService = processLinkService;
         this.translateService = translateService;
+        this.changeDetectorRef = changeDetectorRef;
         this.modalOpen$ = this.processManagementStateService.openModal$;
         this.showReplaceConfirmationModal$ = new BehaviorSubject(false);
         this.replaceModalContent = '';
         this._conflictingProcessDefinitionId = null;
-        this.ACCEPTED_FILES = ['bpmn'];
+        // Extensions need a leading dot: the file dialog only filters on valid accept tokens, and Carbon
+        // matches a dropped file on its dot-prefixed extension
+        this.ACCEPTED_FILES = ['.bpmn', '.zip'];
+        this.UPLOAD_STEP = UPLOAD_STEP;
+        this.testIds = PROCESS_MANAGEMENT_UPLOAD_TEST_IDS;
         this.form = this.formBuilder.group({
             file: this.formBuilder.control(new Set(), [Validators.required]),
         });
-        this.fileSelected$ = this.form.get('file')?.valueChanges.pipe(startWith(null), map$1(value => !!(value instanceof Set && value.size > 0)));
+        // The current control value is read instead of the emitted one, so this also reports the selection
+        // correctly when the footer is re-created after going back to the file select step
+        this.fileSelected$ = this.form.get('file')?.valueChanges.pipe(startWith(null), map$1(() => {
+            const value = this.form.get('file')?.value;
+            return !!(value instanceof Set && value.size > 0);
+        }));
+        this.activeStep$ = new BehaviorSubject(UPLOAD_STEP.FILE_SELECT);
+        this.preview$ = new BehaviorSubject(null);
+        this.missingReferences$ = new BehaviorSubject([]);
+        this.importing$ = new BehaviorSubject(false);
+        /**
+         * Leaving the file select step destroys cds-file-uploader, which empties the form control: every
+         * cds-file emits (remove) from its own ngOnDestroy. So the selection is kept here to import it
+         * afterwards, and to restore it when the user goes back.
+         */
+        this._selectedFile = null;
+        this._selectedFileItems = null;
     }
     closeModal() {
         this.processManagementStateService.closeModal();
         setTimeout(() => {
             this.form.reset();
+            this.activeStep$.next(UPLOAD_STEP.FILE_SELECT);
+            this.preview$.next(null);
+            this.missingReferences$.next([]);
+            this.importing$.next(false);
+            this._selectedFile = null;
+            this._selectedFileItems = null;
         }, CARBON_CONSTANTS.modalAnimationMs);
     }
     uploadProcessBpmn() {
-        const bpmnFile = this.form.value?.file?.values()?.next()?.value?.file;
-        if (!bpmnFile)
+        const file = this.form.value?.file?.values()?.next()?.value?.file;
+        if (!file)
             return;
+        // A package of an earlier selection must not be imported when another file is uploaded
+        this._selectedFile = null;
+        this._selectedFileItems = null;
+        if (this.isZip(file)) {
+            this.previewProcessPackage(file);
+            return;
+        }
         if (this.processManagementService.$context() === 'case') {
-            this.uploadForCase(bpmnFile);
+            this.uploadForCase(file);
         }
         else {
-            this.uploadIndependent(bpmnFile);
+            this.uploadIndependent(file);
+        }
+    }
+    importProcessPackage() {
+        const existingProcessDefinitionKeys = this.preview$.value?.existingProcessDefinitionKeys ?? [];
+        // Ask before replacing, the same way uploading a single bpmn file does
+        if (existingProcessDefinitionKeys.length > 0) {
+            this.showReplaceConfirmation(this.translateService.instant('processManagement.upload.replaceContentWithDuplicates', {
+                duplicates: existingProcessDefinitionKeys.join(', '),
+            }));
+            return;
+        }
+        this.executeImportProcessPackage();
+    }
+    showReplaceConfirmation(content) {
+        this.replaceModalContent = content;
+        // The content is bound from a plain field, so this OnPush component has to be checked again.
+        // The bpmn flow sets it from an http error callback, which does not mark this view dirty itself.
+        this.changeDetectorRef.markForCheck();
+        this.showReplaceConfirmationModal$.next(true);
+    }
+    executeImportProcessPackage() {
+        const file = this._selectedFile;
+        if (!file)
+            return;
+        this.importing$.next(true);
+        this.processManagementService
+            .importProcessDefinition(this.toFormData(file), this._pluginConfigurationMapping?.getMappings())
+            .pipe(take(1))
+            .subscribe({
+            next: result => {
+                this.importing$.next(false);
+                this.processManagementStateService.reloadDefinitions();
+                if (result.missingReferences.length > 0) {
+                    // Keep the summary on screen: a toast disappears before it can be read
+                    this.missingReferences$.next(result.missingReferences);
+                    this.activeStep$.next(UPLOAD_STEP.SUMMARY);
+                    return;
+                }
+                this.notificationService.showNotification({
+                    type: 'success',
+                    title: this.translateService.instant('processManagement.upload.success'),
+                });
+                this.closeModal();
+            },
+            error: () => {
+                this.importing$.next(false);
+                this.notificationService.showNotification({
+                    type: 'error',
+                    title: this.translateService.instant('processManagement.upload.failure'),
+                });
+            },
+        });
+    }
+    onBackClick() {
+        this.activeStep$.next(UPLOAD_STEP.FILE_SELECT);
+        // Restore the selection the file uploader dropped when it was destroyed
+        if (this._selectedFileItems) {
+            this.form.get('file')?.setValue(this._selectedFileItems);
         }
     }
+    getMissingReferenceGroups(missingReferences) {
+        return missingReferences.reduce((groups, missingReference) => {
+            const group = groups.find(({ type }) => type === missingReference.type);
+            if (group) {
+                group.references = [...new Set([...group.references, missingReference.reference])];
+                return groups;
+            }
+            return [...groups, { type: missingReference.type, references: [missingReference.reference] }];
+        }, []);
+    }
+    getReplacedElementGroups(elementsToReplace) {
+        return (elementsToReplace ?? []).reduce((groups, element) => {
+            const group = groups.find(({ type }) => type === element.type);
+            if (group) {
+                group.keys = [...new Set([...group.keys, element.key])];
+                return groups;
+            }
+            return [...groups, { type: element.type, keys: [element.key] }];
+        }, []);
+    }
+    previewProcessPackage(file) {
+        const fileItem = this.form.value?.file?.values()?.next()?.value;
+        this.processManagementService
+            .previewProcessDefinitionImport(this.toFormData(file))
+            .pipe(take(1))
+            .subscribe({
+            next: preview => {
+                this._selectedFile = file;
+                this._selectedFileItems = this.form.value?.file ?? null;
+                this.preview$.next(preview);
+                this.missingReferences$.next(preview.missingReferences);
+                // Nothing to review, so the package can be imported straight away. Elements that will be
+                // replaced are shown in the review step first, so the replacement is a conscious choice.
+                if (preview.pluginConfigurations.length === 0 &&
+                    preview.missingReferences.length === 0 &&
+                    preview.elementsToReplace.length === 0) {
+                    this.importProcessPackage();
+                    return;
+                }
+                this.activeStep$.next(UPLOAD_STEP.REVIEW);
+            },
+            error: () => {
+                if (fileItem) {
+                    fileItem.invalid = true;
+                    fileItem.invalidTitle = this.translateService.instant('processManagement.upload.invalidZip.title');
+                    fileItem.invalidText = this.translateService.instant('processManagement.upload.invalidZip.text');
+                }
+            },
+        });
+    }
+    isZip(file) {
+        return file.name.toLowerCase().endsWith('.zip');
+    }
+    toFormData(file) {
+        const formData = new FormData();
+        formData.append('file', file, file.name);
+        return formData;
+    }
     confirmReplace() {
         const processDefinitionId = this._conflictingProcessDefinitionId;
         this.replaceModalContent = '';
         this._conflictingProcessDefinitionId = null;
+        // A selected package is only set while importing a zip, which replaces through the import itself
+        if (this._selectedFile) {
+            this.executeImportProcessPackage();
+            return;
+        }
         if (!processDefinitionId) {
             this.notificationService.showNotification({
                 type: 'error',
@@ -2192,11 +3601,9 @@ class ProcessManagementUploadComponent {
             error: (error) => {
                 const isConflict = error instanceof HttpErrorResponse && error.status === 409;
                 if (isConflict) {
-                    const body = error
-                        .error;
+                    const body = error.error;
                     this._conflictingProcessDefinitionId = body?.processDefinitionId ?? null;
-                    this.replaceModalContent = this.buildReplaceModalContent(body);
-                    this.showReplaceConfirmationModal$.next(true);
+                    this.showReplaceConfirmation(this.buildReplaceModalContent(body));
                     return;
                 }
                 this.notificationService.showNotification({
@@ -2221,11 +3628,9 @@ class ProcessManagementUploadComponent {
             error: (error) => {
                 const isConflict = error instanceof HttpErrorResponse && error.status === 409;
                 if (isConflict) {
-                    const body = error
-                        .error;
+                    const body = error.error;
                     this._conflictingProcessDefinitionId = body?.processDefinitionId ?? null;
-                    this.replaceModalContent = this.buildReplaceModalContent(body);
-                    this.showReplaceConfirmationModal$.next(true);
+                    this.showReplaceConfirmation(this.buildReplaceModalContent(body));
                     return;
                 }
                 this.notificationService.showNotification({
@@ -2244,8 +3649,8 @@ class ProcessManagementUploadComponent {
         }
         return this.translateService.instant('processManagement.upload.replaceContent');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementUploadComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.GlobalNotificationService }, { token: ProcessManagementService }, { token: ProcessManagementStateService }, { token: i5.ProcessLinkService }, { token: i9.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ProcessManagementUploadComponent, isStandalone: true, selector: "valtimo-process-management-upload", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"modalOpen$ | async\" size=\"sm\" (close)=\"closeModal()\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'processManagement.upload.modalTitle' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\">\n    <cds-file-uploader\n      [accept]=\"ACCEPTED_FILES\"\n      [buttonText]=\"'processManagement.upload.buttonText' | translate\"\n      [description]=\"'processManagement.upload.description' | translate\"\n      [multiple]=\"false\"\n      [title]=\"'processManagement.upload.title' | translate\"\n      buttonType=\"primary\"\n      formControlName=\"file\"\n    >\n    </cds-file-uploader>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"(fileSelected$ | async) === false\"\n      (click)=\"uploadProcessBpmn()\"\n    >\n      {{ 'interface.upload' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n\n<valtimo-render-in-body>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"processManagement.upload.replaceConfirm\"\n    confirmButtonType=\"danger\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    [content]=\"replaceModalContent\"\n    [showModalSubject$]=\"showReplaceConfirmationModal$\"\n    titleTranslationKey=\"processManagement.upload.replaceTitle\"\n    (confirmEvent)=\"confirmReplace()\"\n    (cancelEvent)=\"clearReplaceModal()\"\n  ></valtimo-confirmation-modal>\n</valtimo-render-in-body>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FileUploaderModule }, { kind: "component", type: i2$2.FileUploader, selector: "cds-file-uploader, ibm-file-uploader", inputs: ["buttonText", "buttonType", "title", "description", "accept", "multiple", "skeleton", "size", "fileItemSize", "drop", "dropText", "fileUploaderId", "files", "disabled"], outputs: ["filesChange"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: RenderInBodyComponent, selector: "valtimo-render-in-body" }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementUploadComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.GlobalNotificationService }, { token: ProcessManagementService }, { token: ProcessManagementStateService }, { token: i5.ProcessLinkService }, { token: i9.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ProcessManagementUploadComponent, isStandalone: true, selector: "valtimo-process-management-upload", viewQueries: [{ propertyName: "_pluginConfigurationMapping", first: true, predicate: PluginConfigurationMappingComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"modalOpen$ | async\" size=\"sm\" (close)=\"closeModal()\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'processManagement.upload.modalTitle' | translate }}</h3>\n  </cds-modal-header>\n\n  <ng-container\n    *ngIf=\"{\n      activeStep: activeStep$ | async,\n      preview: preview$ | async,\n      missingReferences: missingReferences$ | async,\n      importing: importing$ | async,\n    } as obs\"\n  >\n    <section cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\" [ngSwitch]=\"obs.activeStep\">\n      <cds-file-uploader\n        *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\"\n        [accept]=\"ACCEPTED_FILES\"\n        [buttonText]=\"'processManagement.upload.buttonText' | translate\"\n        [description]=\"'processManagement.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'processManagement.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n        [attr.data-test-id]=\"testIds.fileUploader\"\n      >\n      </cds-file-uploader>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.REVIEW\" class=\"process-management-upload__review\">\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type:\n                group.type === 'SUB_PROCESS' || group.type === 'DECISION_DEFINITION'\n                  ? 'warning'\n                  : 'error',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container\n          *ngFor=\"let group of getReplacedElementGroups(obs.preview?.elementsToReplace ?? [])\"\n        >\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title: 'processManagement.upload.willBeReplaced.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.willBeReplaced.' + group.type + '.message' | translate) +\n                ' ' +\n                group.keys.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container *ngIf=\"obs.preview?.pluginConfigurations?.length\">\n          <p class=\"process-management-upload__description\">\n            {{ 'processManagement.upload.pluginsDescription' | translate }}\n          </p>\n\n          <valtimo-plugin-configuration-mapping\n            [pluginConfigurations]=\"obs.preview.pluginConfigurations\"\n          ></valtimo-plugin-configuration-mapping>\n        </ng-container>\n      </div>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.SUMMARY\" class=\"process-management-upload__review\">\n        <cds-inline-notification\n          [notificationObj]=\"{\n            type: 'success',\n            title: 'processManagement.upload.success' | translate,\n            message: 'processManagement.upload.summaryDescription' | translate,\n            showClose: false,\n            lowContrast: true,\n          }\"\n        ></cds-inline-notification>\n\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n      </div>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.FILE_SELECT\">\n        <button\n          cdsButton=\"secondary\"\n          [attr.data-test-id]=\"testIds.cancelButton\"\n          (click)=\"closeModal()\"\n        >\n          {{ 'interface.cancel' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"(fileSelected$ | async) === false || obs.importing\"\n          [attr.data-test-id]=\"testIds.submitButton\"\n          (click)=\"uploadProcessBpmn()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.REVIEW\">\n        <button\n          cdsButton=\"secondary\"\n          [attr.data-test-id]=\"testIds.backButton\"\n          (click)=\"onBackClick()\"\n        >\n          {{ 'interface.back' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"obs.preview?.canImport === false || obs.importing\"\n          [attr.data-test-id]=\"testIds.importButton\"\n          (click)=\"importProcessPackage()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <button\n        *ngIf=\"obs.activeStep === UPLOAD_STEP.SUMMARY\"\n        cdsButton=\"primary\"\n        [attr.data-test-id]=\"testIds.closeButton\"\n        (click)=\"closeModal()\"\n      >\n        {{ 'interface.close' | translate }}\n      </button>\n    </cds-modal-footer>\n  </ng-container>\n</cds-modal>\n\n<valtimo-render-in-body>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"processManagement.upload.replaceConfirm\"\n    confirmButtonType=\"danger\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    [content]=\"replaceModalContent\"\n    [showModalSubject$]=\"showReplaceConfirmationModal$\"\n    titleTranslationKey=\"processManagement.upload.replaceTitle\"\n    (confirmEvent)=\"confirmReplace()\"\n    (cancelEvent)=\"clearReplaceModal()\"\n  ></valtimo-confirmation-modal>\n</valtimo-render-in-body>\n", styles: [".process-management-upload__review{display:flex;flex-direction:column;gap:16px}.process-management-upload__description{font-size:.875rem;line-height:1.25rem;color:var(--cds-text-secondary)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FileUploaderModule }, { kind: "component", type: i2$2.FileUploader, selector: "cds-file-uploader, ibm-file-uploader", inputs: ["buttonText", "buttonType", "title", "description", "accept", "multiple", "skeleton", "size", "fileItemSize", "drop", "dropText", "fileUploaderId", "files", "disabled"], outputs: ["filesChange"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: RenderInBodyComponent, selector: "valtimo-render-in-body" }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2$2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "component", type: PluginConfigurationMappingComponent, selector: "valtimo-plugin-configuration-mapping", inputs: ["pluginConfigurations"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementUploadComponent, decorators: [{
             type: Component,
@@ -2260,8 +3665,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         ConfirmationModalModule,
                         RenderInBodyComponent,
                         ValtimoCdsModalDirective,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"modalOpen$ | async\" size=\"sm\" (close)=\"closeModal()\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'processManagement.upload.modalTitle' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\">\n    <cds-file-uploader\n      [accept]=\"ACCEPTED_FILES\"\n      [buttonText]=\"'processManagement.upload.buttonText' | translate\"\n      [description]=\"'processManagement.upload.description' | translate\"\n      [multiple]=\"false\"\n      [title]=\"'processManagement.upload.title' | translate\"\n      buttonType=\"primary\"\n      formControlName=\"file\"\n    >\n    </cds-file-uploader>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"(fileSelected$ | async) === false\"\n      (click)=\"uploadProcessBpmn()\"\n    >\n      {{ 'interface.upload' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n\n<valtimo-render-in-body>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"processManagement.upload.replaceConfirm\"\n    confirmButtonType=\"danger\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    [content]=\"replaceModalContent\"\n    [showModalSubject$]=\"showReplaceConfirmationModal$\"\n    titleTranslationKey=\"processManagement.upload.replaceTitle\"\n    (confirmEvent)=\"confirmReplace()\"\n    (cancelEvent)=\"clearReplaceModal()\"\n  ></valtimo-confirmation-modal>\n</valtimo-render-in-body>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.GlobalNotificationService }, { type: ProcessManagementService }, { type: ProcessManagementStateService }, { type: i5.ProcessLinkService }, { type: i9.TranslateService }] });
+                        NotificationModule,
+                        PluginConfigurationMappingComponent,
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"modalOpen$ | async\" size=\"sm\" (close)=\"closeModal()\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'processManagement.upload.modalTitle' | translate }}</h3>\n  </cds-modal-header>\n\n  <ng-container\n    *ngIf=\"{\n      activeStep: activeStep$ | async,\n      preview: preview$ | async,\n      missingReferences: missingReferences$ | async,\n      importing: importing$ | async,\n    } as obs\"\n  >\n    <section cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\" [ngSwitch]=\"obs.activeStep\">\n      <cds-file-uploader\n        *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\"\n        [accept]=\"ACCEPTED_FILES\"\n        [buttonText]=\"'processManagement.upload.buttonText' | translate\"\n        [description]=\"'processManagement.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'processManagement.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n        [attr.data-test-id]=\"testIds.fileUploader\"\n      >\n      </cds-file-uploader>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.REVIEW\" class=\"process-management-upload__review\">\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type:\n                group.type === 'SUB_PROCESS' || group.type === 'DECISION_DEFINITION'\n                  ? 'warning'\n                  : 'error',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container\n          *ngFor=\"let group of getReplacedElementGroups(obs.preview?.elementsToReplace ?? [])\"\n        >\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title: 'processManagement.upload.willBeReplaced.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.willBeReplaced.' + group.type + '.message' | translate) +\n                ' ' +\n                group.keys.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container *ngIf=\"obs.preview?.pluginConfigurations?.length\">\n          <p class=\"process-management-upload__description\">\n            {{ 'processManagement.upload.pluginsDescription' | translate }}\n          </p>\n\n          <valtimo-plugin-configuration-mapping\n            [pluginConfigurations]=\"obs.preview.pluginConfigurations\"\n          ></valtimo-plugin-configuration-mapping>\n        </ng-container>\n      </div>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.SUMMARY\" class=\"process-management-upload__review\">\n        <cds-inline-notification\n          [notificationObj]=\"{\n            type: 'success',\n            title: 'processManagement.upload.success' | translate,\n            message: 'processManagement.upload.summaryDescription' | translate,\n            showClose: false,\n            lowContrast: true,\n          }\"\n        ></cds-inline-notification>\n\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n      </div>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.FILE_SELECT\">\n        <button\n          cdsButton=\"secondary\"\n          [attr.data-test-id]=\"testIds.cancelButton\"\n          (click)=\"closeModal()\"\n        >\n          {{ 'interface.cancel' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"(fileSelected$ | async) === false || obs.importing\"\n          [attr.data-test-id]=\"testIds.submitButton\"\n          (click)=\"uploadProcessBpmn()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.REVIEW\">\n        <button\n          cdsButton=\"secondary\"\n          [attr.data-test-id]=\"testIds.backButton\"\n          (click)=\"onBackClick()\"\n        >\n          {{ 'interface.back' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"obs.preview?.canImport === false || obs.importing\"\n          [attr.data-test-id]=\"testIds.importButton\"\n          (click)=\"importProcessPackage()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <button\n        *ngIf=\"obs.activeStep === UPLOAD_STEP.SUMMARY\"\n        cdsButton=\"primary\"\n        [attr.data-test-id]=\"testIds.closeButton\"\n        (click)=\"closeModal()\"\n      >\n        {{ 'interface.close' | translate }}\n      </button>\n    </cds-modal-footer>\n  </ng-container>\n</cds-modal>\n\n<valtimo-render-in-body>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"processManagement.upload.replaceConfirm\"\n    confirmButtonType=\"danger\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    [content]=\"replaceModalContent\"\n    [showModalSubject$]=\"showReplaceConfirmationModal$\"\n    titleTranslationKey=\"processManagement.upload.replaceTitle\"\n    (confirmEvent)=\"confirmReplace()\"\n    (cancelEvent)=\"clearReplaceModal()\"\n  ></valtimo-confirmation-modal>\n</valtimo-render-in-body>\n", styles: [".process-management-upload__review{display:flex;flex-direction:column;gap:16px}.process-management-upload__description{font-size:.875rem;line-height:1.25rem;color:var(--cds-text-secondary)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2.GlobalNotificationService }, { type: ProcessManagementService }, { type: ProcessManagementStateService }, { type: i5.ProcessLinkService }, { type: i9.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { _pluginConfigurationMapping: [{
+                type: ViewChild,
+                args: [PluginConfigurationMappingComponent]
+            }] } });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -2512,5 +3922,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { PROCESS_MANAGEMENT_BUILDER_TEST_IDS, PROCESS_MANAGEMENT_ENDPOINTS, PROCESS_MANAGEMENT_LIST_TEST_IDS, ProcessManagementBuilderComponent, ProcessManagementComponent, ProcessManagementModule, ProcessManagementStateService };
+export { PROCESS_LINK_PANEL_TEST_IDS, PROCESS_MANAGEMENT_BUILDER_TEST_IDS, PROCESS_MANAGEMENT_ENDPOINTS, PROCESS_MANAGEMENT_LIST_TEST_IDS, PROCESS_MANAGEMENT_UPLOAD_TEST_IDS, ProcessManagementBuilderComponent, ProcessManagementComponent, ProcessManagementModule, ProcessManagementStateService };
 //# sourceMappingURL=valtimo-process-management.mjs.map