@valtimo/process-management 13.34.0 → 13.36.0

package/fesm2022/valtimo-process-management.mjs

@@ -1,19 +1,20 @@
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, signal, computed, ViewChild, Component, EventEmitter, Output, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, signal, ViewChild, Component, EventEmitter, Output, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 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, ViewType, CarbonListModule, ConfirmationModalModule, CARBON_CONSTANTS, RenderInBodyComponent, WidgetModule } from '@valtimo/components';
+import { FitPageDirective, RenderInPageHeaderDirective, OverflowMenuComponent, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, ConfirmationModalModule, ViewType, CarbonListModule, CARBON_CONSTANTS, RenderInBodyComponent, 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 { useService, BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, CamundaPlatformPropertiesProviderModule } from 'bpmn-js-properties-panel';
@@ -32,7 +33,6 @@ import * as i7 from '@valtimo/process';
 import * as i8 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i10 from '@valtimo/plugin';
-import { Upload16 } from '@carbon/icons';
 import { AuthGuardService } from '@valtimo/security';
 
 /*
@@ -86,6 +86,7 @@ const PROCESS_MANAGEMENT_LIST_TEST_IDS = {
     createProcessButton: 'processManagementCreateProcessButton',
 };
 const PROCESS_MANAGEMENT_BUILDER_TEST_IDS = {
+    draftToggle: 'processManagementBuilderDraftToggle',
     startsCaseToggle: 'processManagementBuilderStartsCaseToggle',
     startableByUserToggle: 'processManagementBuilderStartableByUserToggle',
     deployButton: 'processManagementBuilderDeployButton',
@@ -147,6 +148,12 @@ class ProcessManagementEditorService {
     get formDefinitionOptions() {
         return this._formDefinitionOptions$.getValue();
     }
+    get validationErrors() {
+        return this._validationErrors$.getValue();
+    }
+    setValidationErrors(errors) {
+        this._validationErrors$.next(errors);
+    }
     constructor(processLinkService, formService) {
         this.processLinkService = processLinkService;
         this.formService = formService;
@@ -156,6 +163,8 @@ class ProcessManagementEditorService {
         this._deleteProcessLinkEvents$ = new Subject();
         this._managementRouteParams$ = new BehaviorSubject(null);
         this._formDefinitionOptions$ = new BehaviorSubject([]);
+        this._validationErrors$ = new BehaviorSubject([]);
+        this.validationErrors$ = this._validationErrors$.asObservable();
         this._updatingBpmnView = false;
         this._activityIdBusinessIdMap = {};
         this._subscriptions = new Subscription();
@@ -466,6 +475,9 @@ 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);
     }
+    validateProcessDefinition(request) {
+        return this.httpClient.post(this.getApiUrl('/management/v1/process-definition/validate'), request);
+    }
     getProcesses(definitionName, versionTag) {
         return this.httpClient.get(this.getApiUrl(`${PROCESS_MANAGEMENT_ENDPOINTS[this._$context()]}/${definitionName}/version/${versionTag}/process-definition`));
     }
@@ -761,7 +773,28 @@ 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);
         return (groups) => {
+            const generalGroup = groups.find((g) => g.id === 'general');
+            if (generalGroup) {
+                generalGroup.entries = generalGroup.entries.filter((entry) => entry.id !== 'isExecutable');
+            }
+            if (elementErrors.length > 0) {
+                const errorGroup = {
+                    id: 'validationErrorsGroup',
+                    label: this.translateService.instant('processManagement.validationErrors'),
+                    entries: [
+                        {
+                            id: 'validationErrorsEntry',
+                            errors: elementErrors,
+                            translateService: this.translateService,
+                            component: ValidationErrorsElement,
+                        },
+                    ],
+                    shouldOpen: true,
+                };
+                groups.unshift(errorGroup);
+            }
             if (is(element, 'bpmn:UserTask') ||
                 is(element, 'bpmn:StartEvent') ||
                 is(element, 'bpmn:ServiceTask') ||
@@ -1035,6 +1068,24 @@ const CustomRootElement = (props) => {
   </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);
+            if (translated !== translationKey) {
+                return error.expression ? `${translated}: '${error.expression}'` : 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' : ''}">
+          <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],
@@ -1057,7 +1108,7 @@ const ValtimoPropertiesProviderModule = {
  */
 
 /*
- * 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.
@@ -1093,10 +1144,15 @@ class ProcessManagementBuilderComponent {
         this.processLinkBuildingBlockApiService = processLinkBuildingBlockApiService;
         this._selectedProcess$ = new BehaviorSubject(null);
         this.loading$ = new BehaviorSubject(true);
+        this._validationErrorElementIds = [];
+        this._validationHoverHandler = null;
+        this._validationOutHandler = null;
         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.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);
@@ -1105,6 +1161,7 @@ class ProcessManagementBuilderComponent {
             this.cleanUpListenersOnModeler();
             this._bpmnModeler?.importXML(result.bpmn20Xml);
             this._bpmnViewer?.importXML(result.bpmn20Xml);
+            this.draft$.next(this.parseDraftFromXml(result.bpmn20Xml));
             this.isReadOnlyProcess$.next(result.readOnly);
             this.isSystemProcess$.next(result.systemProcess);
             this.loading$.next(false);
@@ -1150,8 +1207,9 @@ class ProcessManagementBuilderComponent {
             .sort((a, b) => b.id - a.id)));
         this.compactMode$ = this.pageHeaderService.compactMode$;
         this.creatingNewProcess$ = new BehaviorSubject(false);
-        this.$spaceAdjustment = computed(() => this.processManagementService.$context() === 'case' ? 0 : 0);
         this.updatingProcessDefinitionCaseDefinition$ = new BehaviorSubject(false);
+        this.showWarningConfirmationModal$ = new BehaviorSubject(false);
+        this._pendingDeployAction = null;
         this._subscriptions = new Subscription();
         this.shapeAddedHandler = (event) => {
             this.logger.debug('Shape added:', event);
@@ -1171,10 +1229,12 @@ class ProcessManagementBuilderComponent {
                 return;
             this.processManagementEditorService.updateProcessLinksOnIdChange(activityId, businessId);
         };
+        this.iconService.registerAll([Deploy16, ListChecked16, Return16]);
         this.setProcessManagementWindow();
     }
     ngAfterViewInit() {
         this.pageTitleService.disableReset();
+        this.pageHeaderService.enableTitleAsBreadcrumb();
         this.openParamsAndContextSubscription();
         this.initModeler();
         this.initViewer();
@@ -1185,10 +1245,12 @@ class ProcessManagementBuilderComponent {
         this.initEditing();
     }
     ngOnDestroy() {
+        this.clearValidationErrors();
         this._bpmnModeler?.destroy();
         this._bpmnViewer?.destroy();
         this._subscriptions.unsubscribe();
         this.pageTitleService.enableReset();
+        this.pageHeaderService.disableTitleAsBreadcrumb();
         this.pageTitleService.clearPageActionsViewContainerRef();
         this.breadcrumbService.clearThirdBreadcrumb();
         this.breadcrumbService.clearFourthBreadcrumb();
@@ -1206,7 +1268,37 @@ class ProcessManagementBuilderComponent {
             link.remove();
         });
     }
+    validateProcessDefinition(isReadOnlyProcess) {
+        combineLatest([
+            from(isReadOnlyProcess ? this._bpmnViewer.saveXML() : this._bpmnModeler.saveXML()),
+            this.processManagementEditorService.processLinksForSelectedDefinition$,
+        ])
+            .pipe(take(1), switchMap(([result, processLinks]) => {
+            const xml = this.applyDraftState(result?.xml ?? '') ?? '';
+            return this.processManagementService.validateProcessDefinition({
+                bpmnXml: xml,
+                processLinks: processLinks.map(link => ({
+                    ...link,
+                    processDefinitionId: '-',
+                })),
+            });
+        }))
+            .subscribe({
+            next: validationResult => {
+                this.highlightValidationErrors(validationResult.errors);
+                if (validationResult.isValid && !validationResult.hasWarnings) {
+                    this.showNotification('validationSuccess');
+                }
+            },
+            error: () => {
+                this.showNotification('error');
+            },
+        });
+    }
     deployChanges(isReadOnlyProcess) {
+        this.validateAndDeploy(isReadOnlyProcess, () => this.executeDeployChanges(isReadOnlyProcess));
+    }
+    executeDeployChanges(isReadOnlyProcess) {
         combineLatest([
             from(isReadOnlyProcess ? this._bpmnViewer.saveXML() : this._bpmnModeler.saveXML()),
             this.processManagementEditorService.processLinksForSelectedDefinition$,
@@ -1215,18 +1307,20 @@ class ProcessManagementBuilderComponent {
             this.managementParams$.pipe(startWith(null)),
         ])
             .pipe(take(1), switchMap(([result, processLinks, selectedProcessDefinition, context, params]) => {
+            const xml = !isReadOnlyProcess ? this.applyDraftState(result?.xml ?? '') : null;
             if (context === 'case') {
                 const caseManagementParams = params;
-                return this.processLinkService.updateProcessDefinitionForCase(processLinks, selectedProcessDefinition.id, !isReadOnlyProcess ? (result?.xml ?? '') : null, caseManagementParams?.caseDefinitionKey ?? '', caseManagementParams?.caseDefinitionVersionTag ?? '', this.canInitializeDocument$.getValue(), this.startableByUser$.getValue());
+                return this.processLinkService.updateProcessDefinitionForCase(processLinks, selectedProcessDefinition.id, xml, caseManagementParams?.caseDefinitionKey ?? '', caseManagementParams?.caseDefinitionVersionTag ?? '', this.canInitializeDocument$.getValue(), this.startableByUser$.getValue());
             }
             if (context === 'buildingBlock') {
                 const buildingBlockManagementParams = params;
-                return this.processLinkService.updateProcessDefinitionForBuildingBlock(processLinks, selectedProcessDefinition.id, result?.xml, buildingBlockManagementParams.buildingBlockDefinitionKey, buildingBlockManagementParams.buildingBlockDefinitionVersionTag);
+                return this.processLinkService.updateProcessDefinitionForBuildingBlock(processLinks, selectedProcessDefinition.id, this.applyDraftState(result?.xml), buildingBlockManagementParams.buildingBlockDefinitionKey, buildingBlockManagementParams.buildingBlockDefinitionVersionTag);
             }
-            return this.processLinkService.updateProcessDefinition(processLinks, selectedProcessDefinition.id, !isReadOnlyProcess ? (result?.xml ?? '') : null);
+            return this.processLinkService.updateProcessDefinition(processLinks, selectedProcessDefinition.id, xml);
         }), switchMap(() => this.context$))
             .subscribe({
             next: context => {
+                this.clearValidationErrors();
                 if (context === 'independent') {
                     this.reload();
                     this.showNotification('success');
@@ -1235,12 +1329,20 @@ class ProcessManagementBuilderComponent {
                     this.navigateBack('success');
                 }
             },
-            error: () => {
-                this.showNotification('error');
+            error: (error) => {
+                if (this.isValidationError(error)) {
+                    this.highlightValidationErrors(error.error.errors);
+                }
+                else {
+                    this.showNotification('error');
+                }
             },
         });
     }
     deployNewProcessDefinition() {
+        this.validateAndDeploy(false, () => this.executeDeployNewProcessDefinition());
+    }
+    executeDeployNewProcessDefinition() {
         combineLatest([
             from(this._bpmnModeler.saveXML()),
             this.processManagementEditorService.processLinksForSelectedDefinition$,
@@ -1248,29 +1350,34 @@ class ProcessManagementBuilderComponent {
             this.managementParams$.pipe(startWith(null)),
         ])
             .pipe(take(1), switchMap(([result, processLinks, context, params]) => {
+            const xml = this.applyDraftState(result.xml ?? '');
             const mappedProcessLinks = processLinks.map(link => ({
                 ...link,
                 processDefinitionId: '-',
             }));
             switch (context) {
                 case 'independent':
-                    return this.processLinkService.createProcessDefinition(mappedProcessLinks, result.xml ?? '');
+                    return this.processLinkService.createProcessDefinition(mappedProcessLinks, xml);
                 case 'buildingBlock':
                     const buildingBlockParams = params;
-                    return this.processLinkService.createProcessDefinitionForBuildingBlock(mappedProcessLinks, result.xml ?? '', buildingBlockParams.buildingBlockDefinitionKey, buildingBlockParams.buildingBlockDefinitionVersionTag);
+                    return this.processLinkService.createProcessDefinitionForBuildingBlock(mappedProcessLinks, xml, buildingBlockParams.buildingBlockDefinitionKey, buildingBlockParams.buildingBlockDefinitionVersionTag);
                 case 'case':
                     const caseManagementParams = params;
-                    return this.processLinkService.createProcessDefinitionForCase(mappedProcessLinks, result.xml ?? '', caseManagementParams.caseDefinitionKey, caseManagementParams.caseDefinitionVersionTag, this.canInitializeDocument$.getValue(), this.startableByUser$.getValue());
+                    return this.processLinkService.createProcessDefinitionForCase(mappedProcessLinks, xml, caseManagementParams.caseDefinitionKey, caseManagementParams.caseDefinitionVersionTag, this.canInitializeDocument$.getValue(), this.startableByUser$.getValue());
             }
         }))
             .subscribe({
             next: () => {
+                this.clearValidationErrors();
                 this.navigateBack('success');
             },
             error: (error) => {
                 if (this.isProcessDefinitionAlreadyExistsError(error)) {
                     this.showNotification('alreadyExists');
                 }
+                else if (this.isValidationError(error)) {
+                    this.highlightValidationErrors(error.error.errors);
+                }
                 else {
                     this.showNotification('error');
                 }
@@ -1293,13 +1400,88 @@ 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);
         if (field === 'canInitializeDocument')
             this.canInitializeDocument$.next(value);
         if (field === 'startableByUser')
             this.startableByUser$.next(value);
         this.changesPending$.next(true);
     }
+    onWarningConfirmationConfirm() {
+        if (this._pendingDeployAction) {
+            this._pendingDeployAction();
+            this._pendingDeployAction = null;
+        }
+    }
+    onWarningConfirmationCancel() {
+        this._pendingDeployAction = null;
+    }
+    validateAndDeploy(isReadOnlyProcess, deployAction) {
+        // Skip validation for draft processes
+        if (this.draft$.getValue()) {
+            deployAction();
+            return;
+        }
+        combineLatest([
+            from(isReadOnlyProcess ? this._bpmnViewer.saveXML() : this._bpmnModeler.saveXML()),
+            this.processManagementEditorService.processLinksForSelectedDefinition$,
+        ])
+            .pipe(take(1), switchMap(([result, processLinks]) => {
+            const xml = this.applyDraftState(result?.xml ?? '') ?? '';
+            return this.processManagementService.validateProcessDefinition({
+                bpmnXml: xml,
+                processLinks: processLinks.map(link => ({
+                    ...link,
+                    processDefinitionId: '-',
+                })),
+            });
+        }))
+            .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();
+            },
+        });
+    }
     setProcessManagementWindow() {
         const processManagementWindow = window;
         if (!processManagementWindow)
@@ -1309,7 +1491,20 @@ class ProcessManagementBuilderComponent {
         processManagementWindow.pluginTranslationService = this.pluginTranslationService;
     }
     showNotification(notification) {
-        const type = notification === 'alreadyExists' ? 'error' : notification;
+        if (!notification)
+            return;
+        let type;
+        if (notification === 'alreadyExists' ||
+            notification === 'validationError' ||
+            notification === 'error') {
+            type = 'error';
+        }
+        else if (notification === 'validationWarning') {
+            type = 'warning';
+        }
+        else {
+            type = 'success';
+        }
         this.notificationService.showToast({
             caption: this.translateService.instant(`processManagement.${notification}Notification`),
             type,
@@ -1323,7 +1518,148 @@ class ProcessManagementBuilderComponent {
         if (body?.processDefinitionId)
             return true;
         const bbBody = body;
-        return Array.isArray(bbBody?.duplicateProcessDefinitions) && bbBody.duplicateProcessDefinitions.length > 0;
+        return (Array.isArray(bbBody?.duplicateProcessDefinitions) &&
+            bbBody.duplicateProcessDefinitions.length > 0);
+    }
+    applyDraftState(xml) {
+        if (!xml)
+            return null;
+        const doc = new DOMParser().parseFromString(xml, 'application/xml');
+        if (doc.getElementsByTagName('parsererror').length > 0)
+            return xml;
+        const executableValue = this.draft$.getValue() ? 'false' : 'true';
+        const processes = doc.getElementsByTagNameNS('*', 'process');
+        for (let i = 0; i < processes.length; i++) {
+            processes[i].setAttribute('isExecutable', executableValue);
+        }
+        return new XMLSerializer().serializeToString(doc);
+    }
+    parseDraftFromXml(xml) {
+        if (!xml)
+            return false;
+        const doc = new DOMParser().parseFromString(xml, 'application/xml');
+        if (doc.getElementsByTagName('parsererror').length > 0)
+            return false;
+        const processes = doc.getElementsByTagNameNS('*', 'process');
+        if (processes.length === 0)
+            return false;
+        for (let i = 0; i < processes.length; i++) {
+            if (processes[i].getAttribute('isExecutable') === 'true')
+                return false;
+        }
+        return true;
+    }
+    isValidationError(error) {
+        return (error instanceof HttpErrorResponse &&
+            error.status === 422 &&
+            Array.isArray(error.error?.errors));
+    }
+    highlightValidationErrors(errors) {
+        this.clearValidationErrors();
+        this.processManagementEditorService.setValidationErrors(errors);
+        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const canvas = modeler.get('canvas');
+        const overlays = modeler.get('overlays');
+        const errorElementIds = new Set();
+        const elementHasError = new Map();
+        const elementFirstIssue = new Map();
+        for (const error of errors) {
+            if (error.elementType === 'Process')
+                continue;
+            const hasErrorAlready = elementHasError.get(error.elementId) ?? false;
+            const isError = error.severity !== 'WARNING';
+            if (!elementFirstIssue.has(error.elementId)) {
+                elementFirstIssue.set(error.elementId, error);
+            }
+            else if (isError && !hasErrorAlready) {
+                elementFirstIssue.set(error.elementId, error);
+            }
+            if (isError) {
+                elementHasError.set(error.elementId, true);
+            }
+            else if (!hasErrorAlready) {
+                elementHasError.set(error.elementId, false);
+            }
+        }
+        for (const [elementId, issue] of elementFirstIssue) {
+            try {
+                const hasError = elementHasError.get(elementId) ?? false;
+                const markerClass = hasError ? 'highlight-overlay-error' : 'highlight-overlay-warning';
+                const overlayClass = hasError ? 'validation-error-overlay' : 'validation-warning-overlay';
+                this._validationErrorElementIds.push(elementId);
+                errorElementIds.add(elementId);
+                canvas.addMarker(elementId, markerClass);
+                const position = issue.elementType === 'Participant' ? { top: 5, left: 5 } : { top: -12, left: -12 };
+                overlays.add(elementId, 'validation-error', {
+                    position,
+                    html: this.buildOverlayElement(overlayClass, elementId, this.getValidationErrorMessage(issue)),
+                });
+            }
+            catch (e) {
+                // Element may not exist on the canvas
+            }
+        }
+        const eventBus = modeler.get('eventBus');
+        this._validationHoverHandler = (event) => {
+            const id = event.element?.id;
+            if (id && errorElementIds.has(id)) {
+                const errorOverlay = document.querySelector(`.validation-error-overlay[data-element-id="${id}"]`);
+                const warningOverlay = document.querySelector(`.validation-warning-overlay[data-element-id="${id}"]`);
+                errorOverlay?.classList.add('validation-error-overlay--active');
+                warningOverlay?.classList.add('validation-warning-overlay--active');
+            }
+        };
+        this._validationOutHandler = (event) => {
+            const id = event.element?.id;
+            if (id && errorElementIds.has(id)) {
+                const errorOverlay = document.querySelector(`.validation-error-overlay[data-element-id="${id}"]`);
+                const warningOverlay = document.querySelector(`.validation-warning-overlay[data-element-id="${id}"]`);
+                errorOverlay?.classList.remove('validation-error-overlay--active');
+                warningOverlay?.classList.remove('validation-warning-overlay--active');
+            }
+        };
+        eventBus.on('element.hover', this._validationHoverHandler);
+        eventBus.on('element.out', this._validationOutHandler);
+        const selection = modeler.get('selection');
+        const selected = selection.get();
+        if (selected?.length > 0) {
+            const current = selected[0];
+            selection.deselect(current);
+            selection.select(current);
+        }
+    }
+    clearValidationErrors() {
+        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        if (!modeler)
+            return;
+        this.processManagementEditorService.setValidationErrors([]);
+        const canvas = modeler.get('canvas');
+        const overlays = modeler.get('overlays');
+        const eventBus = modeler.get('eventBus');
+        if (this._validationHoverHandler) {
+            eventBus.off('element.hover', this._validationHoverHandler);
+            this._validationHoverHandler = null;
+        }
+        if (this._validationOutHandler) {
+            eventBus.off('element.out', this._validationOutHandler);
+            this._validationOutHandler = null;
+        }
+        for (const elementId of this._validationErrorElementIds) {
+            try {
+                canvas.removeMarker(elementId, 'highlight-overlay-error');
+                canvas.removeMarker(elementId, 'highlight-overlay-warning');
+            }
+            catch (e) {
+                // ignore
+            }
+        }
+        this._validationErrorElementIds = [];
+        try {
+            overlays.remove({ type: 'validation-error' });
+        }
+        catch (e) {
+            // ignore
+        }
     }
     setSelectedProcessDefinitionToLatest(processDefinitions) {
         const latest = getLatestProcessDefinition(processDefinitions);
@@ -1475,6 +1811,8 @@ class ProcessManagementBuilderComponent {
             this.cleanUpListenersOnModeler();
             this._bpmnModeler?.importXML(processDefinitionResult.bpmn20Xml);
             this._bpmnViewer?.importXML(processDefinitionResult.bpmn20Xml);
+            this.draft$.next(processDefinitionResult.draft ??
+                this.parseDraftFromXml(processDefinitionResult.bpmn20Xml));
             this.canInitializeDocument$.next(!!processDefinitionResult?.processCaseLink?.canInitializeDocument);
             this.startableByUser$.next(!!processDefinitionResult?.processCaseLink?.startableByUser);
             this.loading$.next(false);
@@ -1551,13 +1889,37 @@ class ProcessManagementBuilderComponent {
         }
         clearBuildingBlockCalledElement(editor, activityId);
     }
+    getValidationErrorMessage(error) {
+        if (error.errorCode) {
+            const translationKey = `processManagement.expressionErrors.${error.errorCode}`;
+            const translated = this.translateService.instant(translationKey);
+            if (translated !== translationKey) {
+                return error.expression ? `${translated}: '${error.expression}'` : translated;
+            }
+        }
+        return error.reason;
+    }
+    buildOverlayElement(overlayClass, elementId, message) {
+        const container = document.createElement('div');
+        container.className = overlayClass;
+        container.dataset.elementId = elementId;
+        const icon = document.createElement('span');
+        icon.className = `${overlayClass}__icon`;
+        icon.textContent = '!';
+        container.appendChild(icon);
+        const text = document.createElement('span');
+        text.className = `${overlayClass}__text`;
+        text.textContent = message;
+        container.appendChild(text);
+        return container;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [spaceAdjustment]=\"$spaceAdjustment()\"\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></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<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        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 class=\"page-header-actions__tags\">\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      </div>\n\n      <div class=\"page-header-actions__buttons\">\n        @if (actionsObs.context === 'case') {\n          <cds-tooltip\n            [description]=\"'processCaseConnection.processCreatesCaseTooltip' | translate\"\n          >\n            <cds-toggle\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            [description]=\"'processCaseConnection.startableWithinCaseTooltip' | translate\"\n          >\n            <cds-toggle\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\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"arrow--left\" size=\"16\"></svg>\n\n          <span>{{ 'interface.back' | translate }}</span>\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\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      </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%}.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}.page-header-actions__left-container{display:flex;gap:24px;align-items:flex-end}.page-header-actions__tags{display:flex;gap:8px;align-items:flex-end}.page-header-actions__version-dropdown{width:150px}.page-header-actions__buttons{display:flex;gap:16px;align-items:center}.page-header-actions__buttons cds-toggle{height:24px}.page-header-actions__buttons ::ng-deep .cds--toggle__label-text{display:none}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}::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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "directive", type: FitPageDirective, selector: "[fitPage]", inputs: ["spaceAdjustment", "fitPageDisabled", "disableOverflow"] }, { 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"] }] }); }
+        ], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProcessManagementBuilderComponent, decorators: [{
             type: Component,
@@ -1580,12 +1942,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         OverflowMenuTriggerComponent,
                         ToggleModule,
                         TooltipModule,
+                        ConfirmationModalModule,
                     ], providers: [
                         ProcessManagementEditorService,
                         ProcessLinkStateService,
                         ProcessLinkStepService,
                         ProcessLinkButtonService,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [spaceAdjustment]=\"$spaceAdjustment()\"\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></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<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        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 class=\"page-header-actions__tags\">\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      </div>\n\n      <div class=\"page-header-actions__buttons\">\n        @if (actionsObs.context === 'case') {\n          <cds-tooltip\n            [description]=\"'processCaseConnection.processCreatesCaseTooltip' | translate\"\n          >\n            <cds-toggle\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            [description]=\"'processCaseConnection.startableWithinCaseTooltip' | translate\"\n          >\n            <cds-toggle\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\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"arrow--left\" size=\"16\"></svg>\n\n          <span>{{ 'interface.back' | translate }}</span>\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\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      </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%}.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}.page-header-actions__left-container{display:flex;gap:24px;align-items:flex-end}.page-header-actions__tags{display:flex;gap:8px;align-items:flex-end}.page-header-actions__version-dropdown{width:150px}.page-header-actions__buttons{display:flex;gap:16px;align-items:center}.page-header-actions__buttons cds-toggle{height:24px}.page-header-actions__buttons ::ng-deep .cds--toggle__label-text{display:none}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}::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"] }]
+                    ], 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: [{
                 type: ViewChild,
                 args: ['modeler', { static: false }]
@@ -1635,7 +1998,19 @@ class ProcessManagementListComponent {
             { label: 'Delete', callback: this.onDeleteProcess.bind(this), type: 'danger' },
         ];
         this.context$ = getContextObservable(this.route);
-        this.processDefinitions$ = this.processManagementStateService.reloadDefinitions$.pipe(tap(() => this.loading$.next(true)), switchMap(() => this.processManagementService.processes$), tap(() => this.loading$.next(false)));
+        this.processDefinitions$ = combineLatest([
+            this.processManagementStateService.reloadDefinitions$.pipe(tap(() => this.loading$.next(true)), switchMap(() => this.processManagementService.processes$), tap(() => this.loading$.next(false))),
+            this.translateService.stream('key'),
+        ]).pipe(map$1(([definitions]) => definitions.map(def => {
+            const tags = [];
+            if (def.draft) {
+                tags.push({ content: this.translateService.instant('processManagement.draft'), type: 'red' });
+            }
+            if (def.processDefinition?.readOnly) {
+                tags.push({ content: this.translateService.instant('processManagement.readOnly'), type: 'gray' });
+            }
+            return { ...def, statusTags: tags };
+        })));
         this.hasEditPermissions$ = combineLatest([
             getCaseManagementRouteParams(this.route),
             this.context$,
@@ -1645,11 +2020,6 @@ class ProcessManagementListComponent {
         this.FIELDS = [
             { key: 'processDefinition.name', label: 'processManagement.name' },
             { key: 'processDefinition.key', label: 'processManagement.key' },
-            {
-                key: 'processDefinition.readOnly',
-                label: 'processManagement.readOnly',
-                viewType: ViewType.BOOLEAN,
-            },
             ...(this.processManagementService.$context() === 'case'
                 ? [
                     {
@@ -1657,10 +2027,6 @@ class ProcessManagementListComponent {
                         label: 'processManagement.canInitializeDocument',
                         viewType: ViewType.BOOLEAN,
                     },
-                ]
-                : []),
-            ...(this.processManagementService.$context() === 'case'
-                ? [
                     {
                         key: 'processCaseLink.startableByUser',
                         label: 'processManagement.startableByUser',
@@ -1668,6 +2034,12 @@ class ProcessManagementListComponent {
                     },
                 ]
                 : []),
+            {
+                key: 'statusTags',
+                label: 'processManagement.status',
+                viewType: ViewType.TAGS,
+                tagAmount: 2,
+            },
         ];
         this.iconService.registerAll([Upload16]);
     }