@valtimo/process-management 13.43.0 → 13.45.0

package/fesm2022/valtimo-process-management.mjs

@@ -86,6 +86,24 @@ const PROCESS_MANAGEMENT_LIST_TEST_IDS = {
     uploadButton: 'processManagementUploadButton',
     createProcessButton: 'processManagementCreateProcessButton',
 };
+const PROCESS_MANAGEMENT_UPLOAD_TEST_IDS = {
+    fileUploader: 'processManagementUploadFileUploader',
+    cancelButton: 'processManagementUploadCancelButton',
+    submitButton: 'processManagementUploadSubmitButton',
+    backButton: 'processManagementUploadBackButton',
+    importButton: 'processManagementUploadImportButton',
+    closeButton: 'processManagementUploadCloseButton',
+};
+/**
+ * The "Process link" group the Valtimo properties provider adds to the bpmn-js
+ * properties panel. The surrounding panel is rendered by bpmn-js itself and
+ * cannot carry test ids — only this group is ours.
+ */
+const PROCESS_LINK_PANEL_TEST_IDS = {
+    createButton: 'processLinkPanelCreateButton',
+    editButton: 'processLinkPanelEditButton',
+    unlinkButton: 'processLinkPanelUnlinkButton',
+};
 const PROCESS_MANAGEMENT_BUILDER_TEST_IDS = {
     draftToggle: 'processManagementBuilderDraftToggle',
     startsCaseToggle: 'processManagementBuilderStartsCaseToggle',
@@ -93,6 +111,12 @@ const PROCESS_MANAGEMENT_BUILDER_TEST_IDS = {
     deployButton: 'processManagementBuilderDeployButton',
     exportOption: 'processManagementBuilderExportOption',
     markersVisibilityToggle: 'processManagementBuilderMarkersVisibilityToggle',
+    versionDropdown: 'processManagementBuilderVersionDropdown',
+    validateButton: 'processManagementBuilderValidateButton',
+    moreButton: 'processManagementBuilderMoreButton',
+    readOnlyTag: 'processManagementBuilderReadOnlyTag',
+    systemProcessTag: 'processManagementBuilderSystemProcessTag',
+    validationErrors: 'processManagementBuilderValidationErrors',
 };
 
 /*
@@ -206,6 +230,12 @@ class ProcessManagementEditorService {
     getAutofillForActivity(activityId) {
         return this._autofilledElements$.getValue().find(e => e.activityId === activityId);
     }
+    get editingAllowed() {
+        return this._editingAllowed$.getValue();
+    }
+    setEditingAllowed(editingAllowed) {
+        this._editingAllowed$.next(editingAllowed);
+    }
     constructor(processLinkService, formService) {
         this.processLinkService = processLinkService;
         this.formService = formService;
@@ -220,6 +250,7 @@ class ProcessManagementEditorService {
         this._dismissedAutofills$ = new BehaviorSubject(new Set());
         this._autofillDismissed$ = new Subject();
         this._autofilledElements$ = new BehaviorSubject([]);
+        this._editingAllowed$ = new BehaviorSubject(true);
         this._updatingBpmnView = false;
         this._activityIdBusinessIdMap = {};
         this._subscriptions = new Subscription();
@@ -743,6 +774,10 @@ const DisableBpmnWriteModule = {
     ],
     move: ['value', null],
     resizeHandles: ['value', { addResizer: () => { }, removeResizers: () => { } }],
+    bendpoints: ['value', {}],
+    bendpointMove: ['value', { start: () => { } }],
+    bendpointMovePreview: ['value', {}],
+    connectionSegmentMove: ['value', { start: () => { } }],
 };
 const disableCommands = (editor) => {
     const commandStack = editor.get('commandStack');
@@ -939,13 +974,16 @@ class ValtimoPropertiesProvider {
                 is(element, 'bpmn:IntermediateThrowEvent') ||
                 is(element, 'bpmn:IntermediateCatchEvent') ||
                 is(element, 'bpmn:CallActivity')) {
-                const customGroup = {
-                    id: 'customRootGroup',
-                    label: 'Process link',
-                    entries: [this.createCustomRootElement(element, processLink)],
-                    groupType: 'root',
-                };
-                this.addAsSecondOrFirst(groups, customGroup);
+                const editingAllowed = this.processManagementEditorService.editingAllowed;
+                if (editingAllowed || processLink) {
+                    const customGroup = {
+                        id: 'customRootGroup',
+                        label: 'Process link',
+                        entries: [this.createCustomRootElement(element, processLink, editingAllowed)],
+                        groupType: 'root',
+                    };
+                    this.addAsSecondOrFirst(groups, customGroup);
+                }
             }
             return groups;
         };
@@ -960,7 +998,7 @@ class ValtimoPropertiesProvider {
         };
         return groupMapping[modificationType] || 'general';
     }
-    createCustomRootElement(element, processLink) {
+    createCustomRootElement(element, processLink, editingAllowed) {
         return {
             translateService: this.translateService,
             processManagementEditorService: this.processManagementEditorService,
@@ -968,18 +1006,20 @@ class ValtimoPropertiesProvider {
             id: 'customRootElement',
             processLink,
             element,
+            editingAllowed,
             component: CustomRootElement,
             isEdited: (node) => node && !!node.value,
         };
     }
 }
 const CustomRootElement = (props) => {
-    const { element, processLink, translateService, processManagementEditorService, pluginTranslationService, } = props;
+    const { element, processLink, translateService, processManagementEditorService, pluginTranslationService, editingAllowed, } = props;
     const modeling = useService('modeling');
     const elementRegistry = useService('elementRegistry');
     const editProcessLinkText = translateService.instant('interface.edit');
     const unlinkText = translateService.instant('processLink.unlink');
     const createText = translateService.instant('processLink.create');
+    const viewText = translateService.instant('interface.view');
     const getModalParams = () => {
         const currentElement = elementRegistry.get(element.id) || element;
         return {
@@ -1020,24 +1060,26 @@ const CustomRootElement = (props) => {
     };
     const processLinkFormDefinitionId = processLink?.formDefinitionId;
     const processLinkFormDefinitionName = processManagementEditorService.formDefinitionOptions.find(option => option.id === processLinkFormDefinitionId)?.name;
-    const hiddenInput = html `<input type="hidden" class="bio-properties-panel-input" value=${processLink ? 'configured' : ''} />`;
+    const hiddenInput = html `<input
+    type="hidden"
+    class="bio-properties-panel-input"
+    value=${processLink ? 'configured' : ''}
+  />`;
     const wrapEntry = (content) => html `<div data-entry-id=${props.id}>${hiddenInput}${content}</div>`;
-    if (processLinkFormDefinitionName) {
-        return wrapEntry(html `<div class="process-link-properties-panel">
-      <div class="process-link-properties-panel__header">
-        <span class="process-link-properties-panel__title">${processLinkFormDefinitionName}</span>
-
-        <cds-tag
-          class="cds--tag cds--tag--blue cds--tag--md cds--layout--size-md  cds-tag--no-margin"
-          ><span class="cds--tag__label">
-            ${translateService.instant('processLinkType.form')}
-          </span>
-        </cds-tag>
-      </div>
-
-      <div class="process-link-properties-panel__buttons">
+    const linkedButtons = !editingAllowed
+        ? html `<div class="process-link-properties-panel__buttons">
+        <button
+          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+          data-test-id=${PROCESS_LINK_PANEL_TEST_IDS.editButton}
+          onClick=${handleEditClick}
+        >
+          ${viewText}
+        </button>
+      </div>`
+        : html `<div class="process-link-properties-panel__buttons">
         <button
           class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
+          data-test-id=${PROCESS_LINK_PANEL_TEST_IDS.unlinkButton}
           onClick=${handleUnlinkClick}
         >
           ${unlinkText}
@@ -1045,169 +1087,115 @@ const CustomRootElement = (props) => {
 
         <button
           class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+          data-test-id=${PROCESS_LINK_PANEL_TEST_IDS.editButton}
           onClick=${handleEditClick}
         >
           ${editProcessLinkText}
         </button>
-      </div>
-    </div>`);
+      </div>`;
+    if (processLinkFormDefinitionName) {
+        return wrapEntry(html `<div class="process-link-properties-panel">
+        <div class="process-link-properties-panel__header">
+          <span class="process-link-properties-panel__title">${processLinkFormDefinitionName}</span>
+
+          <cds-tag
+            class="cds--tag cds--tag--blue cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+            ><span class="cds--tag__label">
+              ${translateService.instant('processLinkType.form')}
+            </span>
+          </cds-tag>
+        </div>
+
+        ${linkedButtons}
+      </div>`);
     }
     const processLinkFormFlowDefinitionKey = processLink?.formFlowDefinitionKey;
     if (processLinkFormFlowDefinitionKey) {
         return wrapEntry(html `<div class="process-link-properties-panel">
-      <div class="process-link-properties-panel__header">
-        <span class="process-link-properties-panel__title"
-          >${processLinkFormFlowDefinitionKey}</span
-        >
-
-        <cds-tag
-          class="cds--tag cds--tag--teal cds--tag--md cds--layout--size-md  cds-tag--no-margin"
-          ><span class="cds--tag__label">
-            ${translateService.instant('processLinkType.form-flow')}
-          </span>
-        </cds-tag>
-      </div>
+        <div class="process-link-properties-panel__header">
+          <span class="process-link-properties-panel__title"
+            >${processLinkFormFlowDefinitionKey}</span
+          >
 
-      <div class="process-link-properties-panel__buttons">
-        <button
-          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
-          onClick=${handleUnlinkClick}
-        >
-          ${unlinkText}
-        </button>
+          <cds-tag
+            class="cds--tag cds--tag--teal cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+            ><span class="cds--tag__label">
+              ${translateService.instant('processLinkType.form-flow')}
+            </span>
+          </cds-tag>
+        </div>
 
-        <button
-          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
-          onClick=${handleEditClick}
-        >
-          ${editProcessLinkText}
-        </button>
-      </div>
-    </div>`);
+        ${linkedButtons}
+      </div>`);
     }
     const buildingBlockDefinitionKey = processLink?.buildingBlockDefinitionKey;
     const buildingBlockDefinitionVersion = processLink?.buildingBlockDefinitionVersionTag;
     if (buildingBlockDefinitionKey) {
         return wrapEntry(html `<div class="process-link-properties-panel">
-      <div class="process-link-properties-panel__header">
-        <span class="process-link-properties-panel__title"
-          >${buildingBlockDefinitionKey} (${buildingBlockDefinitionVersion})</span
-        >
+        <div class="process-link-properties-panel__header">
+          <span class="process-link-properties-panel__title"
+            >${buildingBlockDefinitionKey} (${buildingBlockDefinitionVersion})</span
+          >
 
-        <cds-tag
-          class="cds--tag cds--tag--green cds--tag--md cds--layout--size-md  cds-tag--no-margin"
-          ><span class="cds--tag__label">
-            ${translateService.instant('processLinkType.building-block')}
-          </span>
-        </cds-tag>
-      </div>
-
-      <div class="process-link-properties-panel__buttons">
-        <button
-          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
-          onClick=${handleUnlinkClick}
-        >
-          ${unlinkText}
-        </button>
+          <cds-tag
+            class="cds--tag cds--tag--green cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+            ><span class="cds--tag__label">
+              ${translateService.instant('processLinkType.building-block')}
+            </span>
+          </cds-tag>
+        </div>
 
-        <button
-          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
-          onClick=${handleEditClick}
-        >
-          ${editProcessLinkText}
-        </button>
-      </div>
-    </div>`);
+        ${linkedButtons}
+      </div>`);
     }
     const pluginActionKey = processLink?.pluginActionDefinitionKey;
     const pluginActionTranslation = pluginTranslationService.instantByPluginActionKey(pluginActionKey);
     const pluginTitleTranslation = pluginTranslationService.instantPluginTitleByPluginActionKey(pluginActionKey);
     if (pluginActionKey) {
         return wrapEntry(html `<div class="process-link-properties-panel">
-      <div class="process-link-properties-panel__header">
-        <span class="process-link-properties-panel__title-container">
-          <span class="process-link-properties-panel__title">${pluginTitleTranslation}</span>
-
-          <span class="process-link-properties-panel__title">${pluginActionTranslation}</span>
-        </span>
+        <div class="process-link-properties-panel__header">
+          <span class="process-link-properties-panel__title-container">
+            <span class="process-link-properties-panel__title">${pluginTitleTranslation}</span>
 
-        <cds-tag
-          class="cds--tag cds--tag--purple cds--tag--md cds--layout--size-md  cds-tag--no-margin"
-          ><span class="cds--tag__label">
-            ${translateService.instant('processLinkType.plugin')}
+            <span class="process-link-properties-panel__title">${pluginActionTranslation}</span>
           </span>
-        </cds-tag>
-      </div>
 
-      <div class="process-link-properties-panel__buttons">
-        <button
-          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
-          onClick=${handleUnlinkClick}
-        >
-          ${unlinkText}
-        </button>
+          <cds-tag
+            class="cds--tag cds--tag--purple cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+            ><span class="cds--tag__label">
+              ${translateService.instant('processLinkType.plugin')}
+            </span>
+          </cds-tag>
+        </div>
 
-        <button
-          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
-          onClick=${handleEditClick}
-        >
-          ${editProcessLinkText}
-        </button>
-      </div>
-    </div>`);
+        ${linkedButtons}
+      </div>`);
     }
     const uiComponentKey = processLink?.componentKey;
     if (uiComponentKey) {
         return wrapEntry(html `<div class="process-link-properties-panel">
-      <div class="process-link-properties-panel__header">
-        <span class="process-link-properties-panel__title">${uiComponentKey}</span>
+        <div class="process-link-properties-panel__header">
+          <span class="process-link-properties-panel__title">${uiComponentKey}</span>
 
-        <cds-tag
-          class="cds--tag cds--tag--magenta cds--tag--md cds--layout--size-md  cds-tag--no-margin"
-          ><span class="cds--tag__label">
-            ${translateService.instant('processLinkType.ui-component')}
-          </span>
-        </cds-tag>
-      </div>
-
-      <div class="process-link-properties-panel__buttons">
-        <button
-          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
-          onClick=${handleUnlinkClick}
-        >
-          ${unlinkText}
-        </button>
+          <cds-tag
+            class="cds--tag cds--tag--magenta cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+            ><span class="cds--tag__label">
+              ${translateService.instant('processLinkType.ui-component')}
+            </span>
+          </cds-tag>
+        </div>
 
-        <button
-          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
-          onClick=${handleEditClick}
-        >
-          ${editProcessLinkText}
-        </button>
-      </div>
-    </div>`);
+        ${linkedButtons}
+      </div>`);
     }
     const genericLinkedPanel = html `<div class="process-link-properties-panel">
-    <div class="process-link-properties-panel__buttons">
-      <button
-        class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
-        onClick=${handleUnlinkClick}
-      >
-        ${unlinkText}
-      </button>
-
-      <button
-        class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
-        onClick=${handleEditClick}
-      >
-        ${editProcessLinkText}
-      </button>
-    </div>
+    ${linkedButtons}
   </div>`;
     const genericCreatePanel = html `<div class="process-link-properties-panel">
     <div class="process-link-properties-panel__buttons">
       <button
         class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+        data-test-id=${PROCESS_LINK_PANEL_TEST_IDS.createButton}
         onClick=${handleCreateClick}
       >
         ${createText}
@@ -1220,7 +1208,9 @@ const ValidationErrorsElement = (props) => {
     const getErrorMessage = (error) => {
         if (error.errorCode) {
             const translationKey = `processManagement.validationErrorCodes.${error.errorCode}`;
-            const translated = props.translateService.instant(translationKey, { expression: error.expression ?? '' });
+            const translated = props.translateService.instant(translationKey, {
+                expression: error.expression ?? '',
+            });
             if (translated !== translationKey) {
                 return translated;
             }
@@ -1228,9 +1218,17 @@ const ValidationErrorsElement = (props) => {
         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>
+    ${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>`;
 };
@@ -1260,6 +1258,87 @@ const ValtimoPropertiesProviderModule = {
     customPropertiesProvider: ['type', ValtimoPropertiesProvider],
 };
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const READ_ONLY_PRIORITY = 1;
+const removeEditActions = (node) => {
+    if (!node || typeof node !== 'object')
+        return;
+    if (node.add)
+        node.add = null;
+    if (node.remove)
+        node.remove = null;
+    if (Array.isArray(node.entries)) {
+        node.entries.forEach((entry) => removeEditActions(entry));
+    }
+    if (Array.isArray(node.items)) {
+        node.items.forEach((item) => removeEditActions(item));
+    }
+};
+class ReadOnlyPropertiesProvider {
+    static { this.$inject = ['propertiesPanel']; }
+    constructor(propertiesPanel) {
+        propertiesPanel.registerProvider(READ_ONLY_PRIORITY, this);
+    }
+    getGroups() {
+        return (groups) => {
+            groups.forEach(group => removeEditActions(group));
+            return groups;
+        };
+    }
+}
+const ENTRY = '.bio-properties-panel-entry';
+const READ_ONLY_INPUT_TYPES = ['email', 'number', 'password', 'search', 'tel', 'text', 'url'];
+const makeControlsReadOnly = (container) => {
+    container.querySelectorAll(`${ENTRY} input`).forEach(input => {
+        if (READ_ONLY_INPUT_TYPES.includes(input.type)) {
+            input.readOnly = true;
+        }
+        else {
+            input.disabled = true;
+        }
+    });
+    container
+        .querySelectorAll(`${ENTRY} textarea`)
+        .forEach(textarea => (textarea.readOnly = true));
+    container
+        .querySelectorAll(`${ENTRY} select, ${ENTRY} button`)
+        .forEach(control => (control.disabled = true));
+    container
+        .querySelectorAll(`${ENTRY} [contenteditable="true"]`)
+        .forEach(editor => editor.setAttribute('contenteditable', 'false'));
+};
+class ReadOnlyPropertiesPanel {
+    static { this.$inject = ['config.propertiesPanel', 'eventBus']; }
+    constructor(config, eventBus) {
+        this._observer = null;
+        const parent = config?.parent;
+        if (!parent)
+            return;
+        this._observer = new MutationObserver(() => makeControlsReadOnly(parent));
+        this._observer.observe(parent, { childList: true, subtree: true });
+        eventBus.on('diagram.destroy', () => this._observer?.disconnect());
+    }
+}
+const ReadOnlyPropertiesPanelModule = {
+    __init__: ['readOnlyPropertiesProvider', 'readOnlyPropertiesPanel'],
+    readOnlyPropertiesProvider: ['type', ReadOnlyPropertiesProvider],
+    readOnlyPropertiesPanel: ['type', ReadOnlyPropertiesPanel],
+};
+
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
@@ -1884,6 +1963,12 @@ const ExpressionAutocompleteModule = {
  * limitations under the License.
  */
 class ProcessManagementBuilderComponent {
+    get activeEditor() {
+        return this._viewerActive ? this._bpmnViewer : this._bpmnModeler;
+    }
+    get loadedEditors() {
+        return [this._bpmnModeler, this._bpmnViewer].filter(editor => !!editor);
+    }
     constructor(breadcrumbService, iconService, logger, modalService, notificationService, pageHeaderService, pageTitleService, processLinkService, processLinkStateService, processManagementEditorService, processManagementService, processService, route, router, translateService, pluginTranslationService, editPermissionsService, processLinkBuildingBlockApiService, processBeanService) {
         this.breadcrumbService = breadcrumbService;
         this.iconService = iconService;
@@ -1916,6 +2001,7 @@ class ProcessManagementBuilderComponent {
         this._activityMarkerUpdateTimeout = null;
         this._autofilledElements = [];
         this._autofilledElementIds = [];
+        this._viewerActive = false;
         this.isReadOnlyProcess$ = new BehaviorSubject(false);
         this.isSystemProcess$ = new BehaviorSubject(false);
         this.draft$ = new BehaviorSubject(false);
@@ -1961,6 +2047,10 @@ class ProcessManagementBuilderComponent {
             }
             return this.managementParams$.pipe(switchMap(params => this.editPermissionsService.hasPermissionsToEditBasedOnContext(params, context)));
         }));
+        this.viewerActive$ = combineLatest([
+            this.isReadOnlyProcess$,
+            this.hasEditPermissions$,
+        ]).pipe(map$1(([isReadOnlyProcess, hasEditPermissions]) => isReadOnlyProcess || !hasEditPermissions), distinctUntilChanged());
         this._reload$ = new Subject();
         this.processDefinitionVersions$ = combineLatest([this.editParam$, this.context$, this._reload$.pipe(startWith(null))]).pipe(switchMap(([editParam, context]) => context === 'independent'
             ? this.processManagementService.getUnlinkedProcessDefinitionsByKey(editParam)
@@ -2019,6 +2109,7 @@ class ProcessManagementBuilderComponent {
         this.subscribeToProcessLinkCreateEvents();
         this.subscribeToProcessLinkDeleteEvents();
         this.subscribeToAutofillDismissEvents();
+        this.subscribeToViewerActive();
         this.initEditing();
     }
     ngOnDestroy() {
@@ -2351,7 +2442,7 @@ class ProcessManagementBuilderComponent {
     highlightValidationErrors(errors) {
         this.clearValidationErrors();
         this.processManagementEditorService.setValidationErrors(errors);
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const modeler = this.activeEditor;
         const canvas = modeler.get('canvas');
         const overlays = modeler.get('overlays');
         const errorElementIds = new Set();
@@ -2507,7 +2598,7 @@ class ProcessManagementBuilderComponent {
         }, 50);
     }
     clearValidationErrors() {
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const modeler = this.activeEditor;
         if (!modeler)
             return;
         this.processManagementEditorService.setValidationErrors([]);
@@ -2558,7 +2649,7 @@ class ProcessManagementBuilderComponent {
         this.clearAutofilledHighlights();
         if (!this._autofilledElements?.length)
             return;
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const modeler = this.activeEditor;
         if (!modeler)
             return;
         const overlays = modeler.get('overlays');
@@ -2577,7 +2668,7 @@ class ProcessManagementBuilderComponent {
         }
     }
     clearAutofilledHighlights() {
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const modeler = this.activeEditor;
         if (!modeler)
             return;
         const overlays = modeler.get('overlays');
@@ -2631,7 +2722,7 @@ class ProcessManagementBuilderComponent {
         this.clearActivityMarkers();
         if (!this.$markersVisible())
             return;
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const modeler = this.activeEditor;
         if (!modeler)
             return;
         const overlays = modeler.get('overlays');
@@ -2736,7 +2827,7 @@ class ProcessManagementBuilderComponent {
         return badge;
     }
     clearActivityMarkers() {
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const modeler = this.activeEditor;
         if (!modeler)
             return;
         const overlays = modeler.get('overlays');
@@ -2814,7 +2905,10 @@ class ProcessManagementBuilderComponent {
             additionalModules: [
                 DisableBpmnWriteModule,
                 BpmnPropertiesPanelModule,
+                BpmnPropertiesProviderModule,
+                CamundaPlatformPropertiesProviderModule,
                 ValtimoPropertiesProviderModule,
+                ReadOnlyPropertiesPanelModule,
             ],
             moddleExtensions: { camunda: CamundaBpmnModdle },
             propertiesPanel: { parent: this.viewerPanelElementRef.nativeElement },
@@ -2836,6 +2930,7 @@ class ProcessManagementBuilderComponent {
         this.processLinkStateService.setModalParams(event?.modalParams);
         this.processLinkStateService.setElementName(event?.modalParams?.element?.name ?? '');
         this.processLinkStateService.selectProcessLink(event.processLink);
+        this.processLinkStateService.setReadOnly(!this.processManagementEditorService.editingAllowed);
         this.processLinkStateService.showModal();
     }
     handleCreateEvent(event) {
@@ -2893,13 +2988,21 @@ class ProcessManagementBuilderComponent {
             this.unsetCalledElementForBuildingBlockProcessLink(event.activityId);
         }));
     }
+    subscribeToViewerActive() {
+        this._subscriptions.add(this.viewerActive$.subscribe(viewerActive => {
+            this._viewerActive = viewerActive;
+            this.updateActivityMarkers();
+            this.highlightAutofilledElements();
+        }));
+        this._subscriptions.add(this.hasEditPermissions$.subscribe(hasEditPermissions => this.processManagementEditorService.setEditingAllowed(hasEditPermissions)));
+    }
     subscribeToAutofillDismissEvents() {
         this._subscriptions.add(this.processManagementEditorService.autofillDismissed$.subscribe(activityId => {
             this.removeAutofillOverlay(activityId);
         }));
     }
     removeAutofillOverlay(activityId) {
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const modeler = this.activeEditor;
         if (!modeler)
             return;
         const overlays = modeler.get('overlays');
@@ -3010,8 +3113,8 @@ class ProcessManagementBuilderComponent {
             .subscribe();
     }
     setCalledElementForBuildingBlockProcessLink(activityId, buildingBlockDefinitionKey, buildingBlockDefinitionVersionTag) {
-        const editor = this._bpmnModeler || this._bpmnViewer;
-        if (!editor) {
+        const editors = this.loadedEditors;
+        if (!editors.length) {
             return;
         }
         this.processLinkBuildingBlockApiService
@@ -3019,19 +3122,15 @@ class ProcessManagementBuilderComponent {
             .subscribe({
             next: (mainProcessDefinitionKey) => {
                 const versionTag = `BB:${buildingBlockDefinitionKey}:${buildingBlockDefinitionVersionTag}`;
-                applyBuildingBlockCalledElement(editor, activityId, mainProcessDefinitionKey, versionTag);
+                editors.forEach(editor => applyBuildingBlockCalledElement(editor, activityId, mainProcessDefinitionKey, versionTag));
             },
         });
     }
     unsetCalledElementForBuildingBlockProcessLink(activityId) {
-        const editor = this._bpmnModeler || this._bpmnViewer;
-        if (!editor) {
-            return;
-        }
-        clearBuildingBlockCalledElement(editor, activityId);
+        this.loadedEditors.forEach(editor => clearBuildingBlockCalledElement(editor, activityId));
     }
     onValidationErrorClick(elementId) {
-        const modeler = this.isReadOnlyProcess$.getValue() ? this._bpmnViewer : this._bpmnModeler;
+        const modeler = this.activeEditor;
         const canvas = modeler.get('canvas');
         const selection = modeler.get('selection');
         const elementRegistry = modeler.get('elementRegistry');
@@ -3073,7 +3172,7 @@ class ProcessManagementBuilderComponent {
             ProcessLinkStateService,
             ProcessLinkStepService,
             ProcessLinkButtonService,
-        ], viewQueries: [{ propertyName: "modelerElementRef", first: true, predicate: ["modeler"], descendants: true }, { propertyName: "modelerPanelElementRef", first: true, predicate: ["modelerPanel"], descendants: true }, { propertyName: "viewerElementRef", first: true, predicate: ["viewer"], descendants: true }, { propertyName: "viewerPanelElementRef", first: true, predicate: ["viewerPanel"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [disableOverflow]=\"true\"\n  *ngIf=\"{\n    processDefinitionVersions: processDefinitionVersions$ | async,\n    selectedProcessDefinitionXml: selectedProcessDefinitionXml$ | async,\n    loading: loading$ | async,\n    isReadOnlyProcess: isReadOnlyProcess$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n  data-carbon-theme=\"g10\"\n  class=\"bpmn__container\"\n>\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'none' : 'flex'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #modeler>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{ ($markersVisible() ? 'processManagement.markers.hide' : 'processManagement.markers.show') | translate }}\n          </span>\n        </button>\n      </cds-tooltip>\n\n      <div\n        class=\"validation-errors-list\"\n        *ngIf=\"validationErrors$ | async as validationErrors\"\n        [style.display]=\"validationErrors.length > 0 ? '' : 'none'\"\n      >\n        <details open>\n          <summary class=\"validation-errors-list__header\">\n            <span>{{\n              'processManagement.validationErrorsCount'\n                | translate: {count: validationErrors.length}\n            }}</span>\n            <svg\n              class=\"validation-errors-list__arrow\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z\"\n              />\n            </svg>\n          </summary>\n\n          <div class=\"validation-errors-list__items\">\n            <button\n              *ngFor=\"let error of validationErrors\"\n              class=\"validation-errors-list__item\"\n              [class.warning]=\"error.severity === 'WARNING'\"\n              (click)=\"onValidationErrorClick(error.elementId)\"\n            >\n              <span\n                class=\"validation-errors-list__icon\"\n                [class.warning]=\"error.severity === 'WARNING'\"\n                >{{ error.severity === 'WARNING' ? '!' : '!' }}</span\n              >\n\n              <span class=\"validation-errors-list__details\">\n                <span class=\"validation-errors-list__element\">{{\n                  error.elementName || error.elementId\n                }}</span>\n\n                <span\n                  class=\"validation-errors-list__reason\"\n                  [class.warning]=\"error.severity === 'WARNING'\"\n                  >{{ getValidationErrorMessage(error) }}</span\n                >\n              </span>\n            </button>\n          </div>\n        </details>\n      </div>\n    </div>\n\n    <div class=\"bpmn__modeler-panel\" #modelerPanel></div>\n  </div>\n\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'flex' : 'none'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #viewer>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{ ($markersVisible() ? 'processManagement.markers.hide' : 'processManagement.markers.show') | translate }}\n          </span>\n        </button>\n      </cds-tooltip>\n    </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            *ngIf=\"actionsObs.context !== 'case'\"\n            [disabled]=\"actionsObs.loading\"\n            [attr.data-test-id]=\"testIds.exportOption\"\n            (selected)=\"export()\"\n            >{{ 'interface.export' | translate }}\n          </v-overflow-menu-option>\n\n          <v-overflow-menu-option\n            [disabled]=\"actionsObs.loading\"\n            (selected)=\"exportBpmn(actionsObs.isReadOnlyProcess)\"\n            >{{ 'processManagement.exportBpmn' | translate }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"tertiary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          {{ 'interface.back' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"return\" size=\"16\"></svg>\n        </button>\n\n        <button\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [disabled]=\"actionsObs.loading\"\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-canvas .markers-visibility-toggle-wrapper{position:absolute;bottom:55px;right:15px;z-index:100}.bpmn__modeler-canvas .markers-visibility-toggle{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:none;border-radius:2px;background-color:var(--cds-layer);cursor:pointer;color:var(--cds-text-secondary);transition:background-color .15s,color .15s}.bpmn__modeler-canvas .markers-visibility-toggle:hover{background-color:var(--cds-layer-hover);color:var(--cds-text-primary)}.bpmn__modeler-canvas .markers-visibility-toggle:focus{outline:2px solid var(--cds-focus);outline-offset:-2px}.bpmn__modeler-canvas .markers-visibility-toggle__label{font-size:12px;white-space:nowrap}.bpmn__modeler-panel{width:481px;padding-left:1px;box-shadow:inset 1px 0 0 0 var(--cds-border-subtle);box-sizing:border-box}.bpmn__loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--cds-background-selected)}.page-header-actions{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px}.page-header-actions__left-container{display:flex;gap:16px;align-items:center}.page-header-actions__tags{display:flex;gap:8px;align-items:center}.page-header-actions__version-dropdown{width:150px}.page-header-actions__toggles{display:flex;gap:16px;align-items:center}.page-header-actions__toggles ::ng-deep cds-toggle{display:inline-flex;align-items:center}.page-header-actions__toggles ::ng-deep .cds--toggle__label-text{display:none}.page-header-actions__buttons{display:flex;gap:16px;align-items:center;flex-shrink:0}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}.validation-errors-list{position:absolute;top:8px;right:8px;z-index:10;width:320px;max-height:250px;overflow-y:auto;border:1px solid var(--cds-border-subtle);background-color:var(--cds-layer);border-radius:4px;box-shadow:0 2px 6px #00000026}.validation-errors-list details[open]>summary .validation-errors-list__arrow{transform:rotate(90deg)}.validation-errors-list__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:600;color:var(--cds-support-error, #da1e28);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.validation-errors-list__header::-webkit-details-marker{display:none}.validation-errors-list__arrow{display:inline-flex;width:16px;height:16px;fill:currentColor;transition:transform .15s ease;flex-shrink:0}.validation-errors-list__items{display:flex;flex-direction:column;border-top:1px solid var(--cds-border-subtle)}.validation-errors-list__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border:none;border-bottom:1px solid var(--cds-border-subtle);border-left:3px solid var(--cds-support-error, #da1e28);background-color:var(--cds-notification-error-background, #fff1f1);text-align:left;cursor:pointer;font-family:inherit}.validation-errors-list__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}.validation-errors-list__item:last-child{border-bottom:none}.validation-errors-list__item:hover{filter:brightness(.97)}.validation-errors-list__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin-top:1px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}.validation-errors-list__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}.validation-errors-list__details{display:flex;flex-direction:column;gap:2px}.validation-errors-list__element{font-size:13px;font-weight:600;color:var(--cds-text-primary)}.validation-errors-list__reason{font-size:13px;color:var(--cds-text-primary)}::ng-deep .highlight-overlay-error:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-error, #da1e28)!important}::ng-deep .highlight-overlay-warning:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-warning, #f1c21b)!important}::ng-deep .djs-overlay-validation-error{overflow:visible!important;pointer-events:all!important}::ng-deep .validation-error-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-error-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-error-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-error, #da1e28);color:var(--cds-support-error, #da1e28);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-error-overlay:hover ::ng-deep .validation-error-overlay__text,::ng-deep .validation-error-overlay--active ::ng-deep .validation-error-overlay__text{display:block}::ng-deep .validation-warning-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-warning-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-warning-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-warning-overlay:hover ::ng-deep .validation-warning-overlay__text,::ng-deep .validation-warning-overlay--active ::ng-deep .validation-warning-overlay__text{display:block}::ng-deep .djs-overlay-activity-marker{overflow:visible!important;pointer-events:all!important}::ng-deep .activity-marker-overlay{display:flex;gap:2px}::ng-deep .activity-marker-badge{position:relative;cursor:pointer;pointer-events:all}::ng-deep .activity-marker-badge__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:14px;font-weight:700;line-height:0}::ng-deep .activity-marker-badge__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .activity-marker-badge:hover ::ng-deep .activity-marker-badge__text,::ng-deep .activity-marker-badge--active ::ng-deep .activity-marker-badge__text{display:block}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-purple-60, #8a3ffc);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-purple-60, #8a3ffc);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-teal-50, #009d9a);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-teal-50, #009d9a);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .validation-errors-panel{padding:8px 12px;display:flex;flex-direction:column;gap:8px}::ng-deep .validation-errors-panel__item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background-color:var(--cds-notification-error-background, #fff1f1);border-left:3px solid var(--cds-support-error, #da1e28)}::ng-deep .validation-errors-panel__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}::ng-deep .validation-errors-panel__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}::ng-deep .validation-errors-panel__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}::ng-deep .validation-errors-panel__reason{color:var(--cds-text-primary, #161616);font-size:13px;line-height:18px}::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-input,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-textfield,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-feel-editor-container{border:2px solid var(--cds-support-error, #da1e28)!important;background-color:var(--cds-notification-error-background, #fff1f1)!important}::ng-deep .expression-editor-param input.validation-error-param,::ng-deep input.expression-editor-input.validation-error-param,::ng-deep .expression-editor-technical input.validation-error-param,::ng-deep .expression-editor-technical textarea.validation-error-param{border:2px solid #da1e28!important;background-color:#fff1f1!important;border-color:#da1e28!important}::ng-deep .process-link-properties-panel{padding:8px 12px 16px;width:100%;display:flex;flex-direction:column;gap:16px}::ng-deep .process-link-properties-panel__buttons,::ng-deep .process-link-properties-panel__header{width:100%;display:flex;gap:16px}::ng-deep .process-link-properties-panel__header{align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--cds-border-subtle-00);padding-bottom:8px;padding-left:8px;padding-right:8px}::ng-deep .process-link-properties-panel__title{color:var(--cds-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:auto 0}::ng-deep .process-link-properties-panel__title-container{display:flex;flex-direction:column;gap:4px}::ng-deep .process-link-properties-panel__title-container :last-child{color:var(--cds-text-helper);font-style:italic}::ng-deep .process-link-properties-panel .cds--tag{margin:0}::ng-deep .process-link-properties-panel .cds--btn{flex-shrink:1;width:100%;display:flex;align-items:center}::ng-deep .djs-overlay-autofilled-indicator{overflow:visible!important;pointer-events:all!important}::ng-deep .autofilled-indicator-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-tooltip{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .autofilled-indicator-overlay:hover .autofilled-indicator-tooltip{display:block}::ng-deep .autofilled-notification-panel{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--cds-layer-02, #f4f4f4);border-left:3px solid var(--cds-support-info, #0043ce);margin-bottom:8px}::ng-deep .autofilled-notification-panel__icon{display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700}::ng-deep .autofilled-notification-panel__message{flex:1;font-size:12px;color:var(--cds-text-primary, #161616)}::ng-deep .autofilled-notification-panel__dismiss{background:none;border:none;cursor:pointer;padding:2px 6px;font-size:16px;color:var(--cds-text-secondary, #525252);line-height:1}::ng-deep .autofilled-notification-panel__dismiss:hover{color:var(--cds-text-primary, #161616)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "directive", type: FitPageDirective, selector: "[fitPage]", inputs: ["spaceAdjustment", "fitPageDisabled", "disableOverflow", "bottomMargin"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "directive", type: RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ProcessLinkModule }, { kind: "component", type: i5.ProcessLinkModalComponent, selector: "valtimo-process-link-modal" }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2$2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: i2$2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "ngmodule", type: OverflowMenuModule }, { kind: "component", type: i1$1.OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: i1$1.OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: i1$1.OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact", "label"] }] }); }
+        ], viewQueries: [{ propertyName: "modelerElementRef", first: true, predicate: ["modeler"], descendants: true }, { propertyName: "modelerPanelElementRef", first: true, predicate: ["modelerPanel"], descendants: true }, { propertyName: "viewerElementRef", first: true, predicate: ["viewer"], descendants: true }, { propertyName: "viewerPanelElementRef", first: true, predicate: ["viewerPanel"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [disableOverflow]=\"true\"\n  *ngIf=\"{\n    processDefinitionVersions: processDefinitionVersions$ | async,\n    selectedProcessDefinitionXml: selectedProcessDefinitionXml$ | async,\n    loading: loading$ | async,\n    isReadOnlyProcess: isReadOnlyProcess$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n  data-carbon-theme=\"g10\"\n  class=\"bpmn__container\"\n>\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'none' : 'flex'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #modeler>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{\n              ($markersVisible()\n                ? 'processManagement.markers.hide'\n                : 'processManagement.markers.show'\n              ) | translate\n            }}\n          </span>\n        </button>\n      </cds-tooltip>\n\n      <div\n        class=\"validation-errors-list\"\n        *ngIf=\"validationErrors$ | async as validationErrors\"\n        [style.display]=\"validationErrors.length > 0 ? '' : 'none'\"\n        [attr.data-test-id]=\"testIds.validationErrors\"\n      >\n        <details open>\n          <summary class=\"validation-errors-list__header\">\n            <span>{{\n              'processManagement.validationErrorsCount'\n                | translate: {count: validationErrors.length}\n            }}</span>\n            <svg\n              class=\"validation-errors-list__arrow\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z\"\n              />\n            </svg>\n          </summary>\n\n          <div class=\"validation-errors-list__items\">\n            <button\n              *ngFor=\"let error of validationErrors\"\n              class=\"validation-errors-list__item\"\n              [class.warning]=\"error.severity === 'WARNING'\"\n              (click)=\"onValidationErrorClick(error.elementId)\"\n            >\n              <span\n                class=\"validation-errors-list__icon\"\n                [class.warning]=\"error.severity === 'WARNING'\"\n                >{{ error.severity === 'WARNING' ? '!' : '!' }}</span\n              >\n\n              <span class=\"validation-errors-list__details\">\n                <span class=\"validation-errors-list__element\">{{\n                  error.elementName || error.elementId\n                }}</span>\n\n                <span\n                  class=\"validation-errors-list__reason\"\n                  [class.warning]=\"error.severity === 'WARNING'\"\n                  >{{ getValidationErrorMessage(error) }}</span\n                >\n              </span>\n            </button>\n          </div>\n        </details>\n      </div>\n    </div>\n\n    <div class=\"bpmn__modeler-panel\" #modelerPanel></div>\n  </div>\n\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'flex' : 'none'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #viewer>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{\n              ($markersVisible()\n                ? 'processManagement.markers.hide'\n                : 'processManagement.markers.show'\n              ) | translate\n            }}\n          </span>\n        </button>\n      </cds-tooltip>\n    </div>\n\n    <div class=\"bpmn__modeler-panel bpmn__modeler-panel--read-only\" #viewerPanel></div>\n  </div>\n</div>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showWarningConfirmationModal$\"\n  [titleTranslationKey]=\"'processManagement.warningConfirmation.title'\"\n  [contentTranslationKey]=\"'processManagement.warningConfirmation.content'\"\n  [confirmButtonTextTranslationKey]=\"'processManagement.warningConfirmation.confirm'\"\n  [cancelButtonTextTranslationKey]=\"'interface.cancel'\"\n  (confirmEvent)=\"onWarningConfirmationConfirm()\"\n  (cancelEvent)=\"onWarningConfirmationCancel()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"page-header-actions\"\n      *ngIf=\"{\n        processDefinitionVersionsListItems: processDefinitionVersionsListItems$ | async,\n        loading: loading$ | async,\n        changesPending: changesPending$ | async,\n        isReadOnlyProcess: isReadOnlyProcess$ | async,\n        isSystemProcess: isSystemProcess$ | async,\n        compactMode: compactMode$ | async,\n        creatingNewProcess: creatingNewProcess$ | async,\n        context: context$ | async,\n        hasEditPermissions: hasEditPermissions$ | async,\n        draft: draft$ | async,\n        canInitializeDocument: canInitializeDocument$ | async,\n        startableByUser: startableByUser$ | async,\n        updatingProcessDefinitionCaseDefinition: updatingProcessDefinitionCaseDefinition$ | async,\n      } as actionsObs\"\n    >\n      <div class=\"page-header-actions__left-container\">\n        <cds-dropdown\n          *ngIf=\"!actionsObs.creatingNewProcess && actionsObs?.context === 'independent'\"\n          class=\"page-header-actions__version-dropdown\"\n          [attr.data-test-id]=\"testIds.versionDropdown\"\n          (selected)=\"selectedVersionChange($event)\"\n          [disabled]=\"\n            actionsObs.loading ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 0 ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 1\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n        >\n          <cds-dropdown-list\n            [items]=\"actionsObs.processDefinitionVersionsListItems || []\"\n          ></cds-dropdown-list>\n        </cds-dropdown>\n\n        <div\n          class=\"page-header-actions__tags\"\n          *ngIf=\"\n            actionsObs.isReadOnlyProcess ||\n            !actionsObs.hasEditPermissions ||\n            actionsObs.isSystemProcess\n          \"\n        >\n          <cds-tag\n            *ngIf=\"actionsObs.isReadOnlyProcess || !actionsObs.hasEditPermissions\"\n            type=\"blue\"\n            [attr.data-test-id]=\"testIds.readOnlyTag\"\n            >{{ 'processManagement.readOnly' | translate }}</cds-tag\n          >\n\n          <cds-tag\n            *ngIf=\"actionsObs.isSystemProcess\"\n            type=\"blue\"\n            [attr.data-test-id]=\"testIds.systemProcessTag\"\n          >{{ 'processManagement.systemProcess' | translate }}</cds-tag\n          >\n        </div>\n\n        <div class=\"page-header-actions__toggles\">\n          <cds-tooltip\n            align=\"bottom-left\"\n            [autoAlign]=\"true\"\n            [description]=\"'processManagement.draftTooltip' | translate\"\n          >\n            <cds-toggle\n              size=\"sm\"\n              [onText]=\"'processManagement.draft' | translate\"\n              [offText]=\"'processManagement.draft' | translate\"\n              [checked]=\"actionsObs.draft\"\n              [disabled]=\"actionsObs.loading || !actionsObs.hasEditPermissions\"\n              (checkedChange)=\"onProcessToggleChange('draft', $event)\"\n              [attr.data-test-id]=\"testIds.draftToggle\"\n            ></cds-toggle>\n          </cds-tooltip>\n\n          @if (actionsObs.context === 'case') {\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.processCreatesCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.canInitializeDocument' | translate\"\n                [offText]=\"'processManagement.canInitializeDocument' | translate\"\n                [checked]=\"actionsObs.canInitializeDocument\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('canInitializeDocument', $event)\"\n                [attr.data-test-id]=\"testIds.startsCaseToggle\"\n              ></cds-toggle>\n            </cds-tooltip>\n\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.startableWithinCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.startableByUser' | translate\"\n                [offText]=\"'processManagement.startableByUser' | translate\"\n                [checked]=\"actionsObs.startableByUser\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('startableByUser', $event)\"\n                [attr.data-test-id]=\"testIds.startableByUserToggle\"\n              ></cds-toggle\n            ></cds-tooltip>\n          }\n        </div>\n      </div>\n\n      <div class=\"page-header-actions__buttons\">\n        <v-overflow-menu class=\"overflow-button\" placement=\"bottom-end\">\n          <v-overflow-menu-trigger\n            overflowTrigger\n            [attr.data-test-id]=\"testIds.moreButton\"\n          ></v-overflow-menu-trigger>\n          <v-overflow-menu-option\n            *ngIf=\"actionsObs.context !== 'case'\"\n            [disabled]=\"actionsObs.loading\"\n            [attr.data-test-id]=\"testIds.exportOption\"\n            (selected)=\"export()\"\n            >{{ 'interface.export' | translate }}\n          </v-overflow-menu-option>\n\n          <v-overflow-menu-option\n            [disabled]=\"actionsObs.loading\"\n            (selected)=\"exportBpmn(actionsObs.isReadOnlyProcess)\"\n            >{{ 'processManagement.exportBpmn' | translate }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"tertiary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          {{ 'interface.back' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"return\" size=\"16\"></svg>\n        </button>\n\n        <button\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [disabled]=\"actionsObs.loading || !actionsObs.hasEditPermissions\"\n          [attr.data-test-id]=\"testIds.validateButton\"\n          (click)=\"validateProcessDefinition(actionsObs.isReadOnlyProcess)\"\n        >\n          {{ 'processManagement.validate' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"list--checked\" size=\"16\"></svg>\n        </button>\n\n        <button\n          [disabled]=\"!actionsObs.changesPending || !actionsObs.hasEditPermissions\"\n          cdsButton=\"primary\"\n          (click)=\"\n            !actionsObs.creatingNewProcess\n              ? deployChanges(actionsObs.isReadOnlyProcess)\n              : deployNewProcessDefinition()\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [attr.data-test-id]=\"testIds.deployButton\"\n        >\n          {{ 'processManagement.deploy' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"deploy\" size=\"16\"></svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.bpmn__container{position:relative;background-color:var(--cds-layer);width:100%}.bpmn__modeler{width:100%;height:100%;flex-direction:row;padding:1px;box-sizing:border-box;outline:1px solid var(--cds-border-subtle);outline-offset:-1px}.bpmn__modeler ::ng-deep .djs-container>svg{outline:none!important}.bpmn__modeler-canvas{width:100%;position:relative}.bpmn__modeler-canvas .markers-visibility-toggle-wrapper{position:absolute;bottom:55px;right:15px;z-index:100}.bpmn__modeler-canvas .markers-visibility-toggle{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:none;border-radius:2px;background-color:var(--cds-layer);cursor:pointer;color:var(--cds-text-secondary);transition:background-color .15s,color .15s}.bpmn__modeler-canvas .markers-visibility-toggle:hover{background-color:var(--cds-layer-hover);color:var(--cds-text-primary)}.bpmn__modeler-canvas .markers-visibility-toggle:focus{outline:2px solid var(--cds-focus);outline-offset:-2px}.bpmn__modeler-canvas .markers-visibility-toggle__label{font-size:12px;white-space:nowrap}.bpmn__modeler-panel{width:481px;padding-left:1px;box-shadow:inset 1px 0 0 0 var(--cds-border-subtle);box-sizing:border-box}.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry input,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry select,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry textarea,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry .bio-properties-panel-feel-editor-container{opacity:.65}.bpmn__loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--cds-background-selected)}.page-header-actions{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px}.page-header-actions__left-container{display:flex;gap:16px;align-items:center}.page-header-actions__tags{display:flex;gap:8px;align-items:center}.page-header-actions__version-dropdown{width:150px}.page-header-actions__toggles{display:flex;gap:16px;align-items:center}.page-header-actions__toggles ::ng-deep cds-toggle{display:inline-flex;align-items:center}.page-header-actions__toggles ::ng-deep .cds--toggle__label-text{display:none}.page-header-actions__buttons{display:flex;gap:16px;align-items:center;flex-shrink:0}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}.validation-errors-list{position:absolute;top:8px;right:8px;z-index:10;width:320px;max-height:250px;overflow-y:auto;border:1px solid var(--cds-border-subtle);background-color:var(--cds-layer);border-radius:4px;box-shadow:0 2px 6px #00000026}.validation-errors-list details[open]>summary .validation-errors-list__arrow{transform:rotate(90deg)}.validation-errors-list__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:600;color:var(--cds-support-error, #da1e28);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.validation-errors-list__header::-webkit-details-marker{display:none}.validation-errors-list__arrow{display:inline-flex;width:16px;height:16px;fill:currentColor;transition:transform .15s ease;flex-shrink:0}.validation-errors-list__items{display:flex;flex-direction:column;border-top:1px solid var(--cds-border-subtle)}.validation-errors-list__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border:none;border-bottom:1px solid var(--cds-border-subtle);border-left:3px solid var(--cds-support-error, #da1e28);background-color:var(--cds-notification-error-background, #fff1f1);text-align:left;cursor:pointer;font-family:inherit}.validation-errors-list__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}.validation-errors-list__item:last-child{border-bottom:none}.validation-errors-list__item:hover{filter:brightness(.97)}.validation-errors-list__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin-top:1px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}.validation-errors-list__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}.validation-errors-list__details{display:flex;flex-direction:column;gap:2px}.validation-errors-list__element{font-size:13px;font-weight:600;color:var(--cds-text-primary)}.validation-errors-list__reason{font-size:13px;color:var(--cds-text-primary)}::ng-deep .highlight-overlay-error:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-error, #da1e28)!important}::ng-deep .highlight-overlay-warning:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-warning, #f1c21b)!important}::ng-deep .djs-overlay-validation-error{overflow:visible!important;pointer-events:all!important}::ng-deep .validation-error-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-error-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-error-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-error, #da1e28);color:var(--cds-support-error, #da1e28);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-error-overlay:hover ::ng-deep .validation-error-overlay__text,::ng-deep .validation-error-overlay--active ::ng-deep .validation-error-overlay__text{display:block}::ng-deep .validation-warning-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-warning-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-warning-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-warning-overlay:hover ::ng-deep .validation-warning-overlay__text,::ng-deep .validation-warning-overlay--active ::ng-deep .validation-warning-overlay__text{display:block}::ng-deep .djs-overlay-activity-marker{overflow:visible!important;pointer-events:all!important}::ng-deep .activity-marker-overlay{display:flex;gap:2px}::ng-deep .activity-marker-badge{position:relative;cursor:pointer;pointer-events:all}::ng-deep .activity-marker-badge__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:14px;font-weight:700;line-height:0}::ng-deep .activity-marker-badge__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .activity-marker-badge:hover ::ng-deep .activity-marker-badge__text,::ng-deep .activity-marker-badge--active ::ng-deep .activity-marker-badge__text{display:block}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-purple-60, #8a3ffc);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-purple-60, #8a3ffc);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-teal-50, #009d9a);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-teal-50, #009d9a);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .validation-errors-panel{padding:8px 12px;display:flex;flex-direction:column;gap:8px}::ng-deep .validation-errors-panel__item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background-color:var(--cds-notification-error-background, #fff1f1);border-left:3px solid var(--cds-support-error, #da1e28)}::ng-deep .validation-errors-panel__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}::ng-deep .validation-errors-panel__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}::ng-deep .validation-errors-panel__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}::ng-deep .validation-errors-panel__reason{color:var(--cds-text-primary, #161616);font-size:13px;line-height:18px}::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-input,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-textfield,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-feel-editor-container{border:2px solid var(--cds-support-error, #da1e28)!important;background-color:var(--cds-notification-error-background, #fff1f1)!important}::ng-deep .expression-editor-param input.validation-error-param,::ng-deep input.expression-editor-input.validation-error-param,::ng-deep .expression-editor-technical input.validation-error-param,::ng-deep .expression-editor-technical textarea.validation-error-param{border:2px solid #da1e28!important;background-color:#fff1f1!important;border-color:#da1e28!important}::ng-deep .process-link-properties-panel{padding:8px 12px 16px;width:100%;display:flex;flex-direction:column;gap:16px}::ng-deep .process-link-properties-panel__buttons,::ng-deep .process-link-properties-panel__header{width:100%;display:flex;gap:16px}::ng-deep .process-link-properties-panel__header{align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--cds-border-subtle-00);padding-bottom:8px;padding-left:8px;padding-right:8px}::ng-deep .process-link-properties-panel__title{color:var(--cds-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:auto 0}::ng-deep .process-link-properties-panel__title-container{display:flex;flex-direction:column;gap:4px}::ng-deep .process-link-properties-panel__title-container :last-child{color:var(--cds-text-helper);font-style:italic}::ng-deep .process-link-properties-panel .cds--tag{margin:0}::ng-deep .process-link-properties-panel .cds--btn{flex-shrink:1;width:100%;display:flex;align-items:center}::ng-deep .djs-overlay-autofilled-indicator{overflow:visible!important;pointer-events:all!important}::ng-deep .autofilled-indicator-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-tooltip{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .autofilled-indicator-overlay:hover .autofilled-indicator-tooltip{display:block}::ng-deep .autofilled-notification-panel{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--cds-layer-02, #f4f4f4);border-left:3px solid var(--cds-support-info, #0043ce);margin-bottom:8px}::ng-deep .autofilled-notification-panel__icon{display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700}::ng-deep .autofilled-notification-panel__message{flex:1;font-size:12px;color:var(--cds-text-primary, #161616)}::ng-deep .autofilled-notification-panel__dismiss{background:none;border:none;cursor:pointer;padding:2px 6px;font-size:16px;color:var(--cds-text-secondary, #525252);line-height:1}::ng-deep .autofilled-notification-panel__dismiss:hover{color:var(--cds-text-primary, #161616)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "directive", type: FitPageDirective, selector: "[fitPage]", inputs: ["spaceAdjustment", "fitPageDisabled", "disableOverflow", "bottomMargin"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "directive", type: RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ProcessLinkModule }, { kind: "component", type: i5.ProcessLinkModalComponent, selector: "valtimo-process-link-modal" }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2$2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: i2$2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "ngmodule", type: OverflowMenuModule }, { kind: "component", type: i1$1.OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: i1$1.OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: i1$1.OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact", "label"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementBuilderComponent, decorators: [{
             type: Component,
@@ -3099,7 +3198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         ProcessLinkStateService,
                         ProcessLinkStepService,
                         ProcessLinkButtonService,
-                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [disableOverflow]=\"true\"\n  *ngIf=\"{\n    processDefinitionVersions: processDefinitionVersions$ | async,\n    selectedProcessDefinitionXml: selectedProcessDefinitionXml$ | async,\n    loading: loading$ | async,\n    isReadOnlyProcess: isReadOnlyProcess$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n  data-carbon-theme=\"g10\"\n  class=\"bpmn__container\"\n>\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'none' : 'flex'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #modeler>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{ ($markersVisible() ? 'processManagement.markers.hide' : 'processManagement.markers.show') | translate }}\n          </span>\n        </button>\n      </cds-tooltip>\n\n      <div\n        class=\"validation-errors-list\"\n        *ngIf=\"validationErrors$ | async as validationErrors\"\n        [style.display]=\"validationErrors.length > 0 ? '' : 'none'\"\n      >\n        <details open>\n          <summary class=\"validation-errors-list__header\">\n            <span>{{\n              'processManagement.validationErrorsCount'\n                | translate: {count: validationErrors.length}\n            }}</span>\n            <svg\n              class=\"validation-errors-list__arrow\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z\"\n              />\n            </svg>\n          </summary>\n\n          <div class=\"validation-errors-list__items\">\n            <button\n              *ngFor=\"let error of validationErrors\"\n              class=\"validation-errors-list__item\"\n              [class.warning]=\"error.severity === 'WARNING'\"\n              (click)=\"onValidationErrorClick(error.elementId)\"\n            >\n              <span\n                class=\"validation-errors-list__icon\"\n                [class.warning]=\"error.severity === 'WARNING'\"\n                >{{ error.severity === 'WARNING' ? '!' : '!' }}</span\n              >\n\n              <span class=\"validation-errors-list__details\">\n                <span class=\"validation-errors-list__element\">{{\n                  error.elementName || error.elementId\n                }}</span>\n\n                <span\n                  class=\"validation-errors-list__reason\"\n                  [class.warning]=\"error.severity === 'WARNING'\"\n                  >{{ getValidationErrorMessage(error) }}</span\n                >\n              </span>\n            </button>\n          </div>\n        </details>\n      </div>\n    </div>\n\n    <div class=\"bpmn__modeler-panel\" #modelerPanel></div>\n  </div>\n\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'flex' : 'none'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #viewer>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{ ($markersVisible() ? 'processManagement.markers.hide' : 'processManagement.markers.show') | translate }}\n          </span>\n        </button>\n      </cds-tooltip>\n    </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            *ngIf=\"actionsObs.context !== 'case'\"\n            [disabled]=\"actionsObs.loading\"\n            [attr.data-test-id]=\"testIds.exportOption\"\n            (selected)=\"export()\"\n            >{{ 'interface.export' | translate }}\n          </v-overflow-menu-option>\n\n          <v-overflow-menu-option\n            [disabled]=\"actionsObs.loading\"\n            (selected)=\"exportBpmn(actionsObs.isReadOnlyProcess)\"\n            >{{ 'processManagement.exportBpmn' | translate }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"tertiary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          {{ 'interface.back' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"return\" size=\"16\"></svg>\n        </button>\n\n        <button\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [disabled]=\"actionsObs.loading\"\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-canvas .markers-visibility-toggle-wrapper{position:absolute;bottom:55px;right:15px;z-index:100}.bpmn__modeler-canvas .markers-visibility-toggle{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:none;border-radius:2px;background-color:var(--cds-layer);cursor:pointer;color:var(--cds-text-secondary);transition:background-color .15s,color .15s}.bpmn__modeler-canvas .markers-visibility-toggle:hover{background-color:var(--cds-layer-hover);color:var(--cds-text-primary)}.bpmn__modeler-canvas .markers-visibility-toggle:focus{outline:2px solid var(--cds-focus);outline-offset:-2px}.bpmn__modeler-canvas .markers-visibility-toggle__label{font-size:12px;white-space:nowrap}.bpmn__modeler-panel{width:481px;padding-left:1px;box-shadow:inset 1px 0 0 0 var(--cds-border-subtle);box-sizing:border-box}.bpmn__loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--cds-background-selected)}.page-header-actions{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px}.page-header-actions__left-container{display:flex;gap:16px;align-items:center}.page-header-actions__tags{display:flex;gap:8px;align-items:center}.page-header-actions__version-dropdown{width:150px}.page-header-actions__toggles{display:flex;gap:16px;align-items:center}.page-header-actions__toggles ::ng-deep cds-toggle{display:inline-flex;align-items:center}.page-header-actions__toggles ::ng-deep .cds--toggle__label-text{display:none}.page-header-actions__buttons{display:flex;gap:16px;align-items:center;flex-shrink:0}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}.validation-errors-list{position:absolute;top:8px;right:8px;z-index:10;width:320px;max-height:250px;overflow-y:auto;border:1px solid var(--cds-border-subtle);background-color:var(--cds-layer);border-radius:4px;box-shadow:0 2px 6px #00000026}.validation-errors-list details[open]>summary .validation-errors-list__arrow{transform:rotate(90deg)}.validation-errors-list__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:600;color:var(--cds-support-error, #da1e28);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.validation-errors-list__header::-webkit-details-marker{display:none}.validation-errors-list__arrow{display:inline-flex;width:16px;height:16px;fill:currentColor;transition:transform .15s ease;flex-shrink:0}.validation-errors-list__items{display:flex;flex-direction:column;border-top:1px solid var(--cds-border-subtle)}.validation-errors-list__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border:none;border-bottom:1px solid var(--cds-border-subtle);border-left:3px solid var(--cds-support-error, #da1e28);background-color:var(--cds-notification-error-background, #fff1f1);text-align:left;cursor:pointer;font-family:inherit}.validation-errors-list__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}.validation-errors-list__item:last-child{border-bottom:none}.validation-errors-list__item:hover{filter:brightness(.97)}.validation-errors-list__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin-top:1px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}.validation-errors-list__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}.validation-errors-list__details{display:flex;flex-direction:column;gap:2px}.validation-errors-list__element{font-size:13px;font-weight:600;color:var(--cds-text-primary)}.validation-errors-list__reason{font-size:13px;color:var(--cds-text-primary)}::ng-deep .highlight-overlay-error:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-error, #da1e28)!important}::ng-deep .highlight-overlay-warning:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-warning, #f1c21b)!important}::ng-deep .djs-overlay-validation-error{overflow:visible!important;pointer-events:all!important}::ng-deep .validation-error-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-error-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-error-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-error, #da1e28);color:var(--cds-support-error, #da1e28);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-error-overlay:hover ::ng-deep .validation-error-overlay__text,::ng-deep .validation-error-overlay--active ::ng-deep .validation-error-overlay__text{display:block}::ng-deep .validation-warning-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-warning-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-warning-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-warning-overlay:hover ::ng-deep .validation-warning-overlay__text,::ng-deep .validation-warning-overlay--active ::ng-deep .validation-warning-overlay__text{display:block}::ng-deep .djs-overlay-activity-marker{overflow:visible!important;pointer-events:all!important}::ng-deep .activity-marker-overlay{display:flex;gap:2px}::ng-deep .activity-marker-badge{position:relative;cursor:pointer;pointer-events:all}::ng-deep .activity-marker-badge__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:14px;font-weight:700;line-height:0}::ng-deep .activity-marker-badge__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .activity-marker-badge:hover ::ng-deep .activity-marker-badge__text,::ng-deep .activity-marker-badge--active ::ng-deep .activity-marker-badge__text{display:block}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-purple-60, #8a3ffc);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-purple-60, #8a3ffc);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-teal-50, #009d9a);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-teal-50, #009d9a);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .validation-errors-panel{padding:8px 12px;display:flex;flex-direction:column;gap:8px}::ng-deep .validation-errors-panel__item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background-color:var(--cds-notification-error-background, #fff1f1);border-left:3px solid var(--cds-support-error, #da1e28)}::ng-deep .validation-errors-panel__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}::ng-deep .validation-errors-panel__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}::ng-deep .validation-errors-panel__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}::ng-deep .validation-errors-panel__reason{color:var(--cds-text-primary, #161616);font-size:13px;line-height:18px}::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-input,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-textfield,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-feel-editor-container{border:2px solid var(--cds-support-error, #da1e28)!important;background-color:var(--cds-notification-error-background, #fff1f1)!important}::ng-deep .expression-editor-param input.validation-error-param,::ng-deep input.expression-editor-input.validation-error-param,::ng-deep .expression-editor-technical input.validation-error-param,::ng-deep .expression-editor-technical textarea.validation-error-param{border:2px solid #da1e28!important;background-color:#fff1f1!important;border-color:#da1e28!important}::ng-deep .process-link-properties-panel{padding:8px 12px 16px;width:100%;display:flex;flex-direction:column;gap:16px}::ng-deep .process-link-properties-panel__buttons,::ng-deep .process-link-properties-panel__header{width:100%;display:flex;gap:16px}::ng-deep .process-link-properties-panel__header{align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--cds-border-subtle-00);padding-bottom:8px;padding-left:8px;padding-right:8px}::ng-deep .process-link-properties-panel__title{color:var(--cds-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:auto 0}::ng-deep .process-link-properties-panel__title-container{display:flex;flex-direction:column;gap:4px}::ng-deep .process-link-properties-panel__title-container :last-child{color:var(--cds-text-helper);font-style:italic}::ng-deep .process-link-properties-panel .cds--tag{margin:0}::ng-deep .process-link-properties-panel .cds--btn{flex-shrink:1;width:100%;display:flex;align-items:center}::ng-deep .djs-overlay-autofilled-indicator{overflow:visible!important;pointer-events:all!important}::ng-deep .autofilled-indicator-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-tooltip{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .autofilled-indicator-overlay:hover .autofilled-indicator-tooltip{display:block}::ng-deep .autofilled-notification-panel{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--cds-layer-02, #f4f4f4);border-left:3px solid var(--cds-support-info, #0043ce);margin-bottom:8px}::ng-deep .autofilled-notification-panel__icon{display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700}::ng-deep .autofilled-notification-panel__message{flex:1;font-size:12px;color:var(--cds-text-primary, #161616)}::ng-deep .autofilled-notification-panel__dismiss{background:none;border:none;cursor:pointer;padding:2px 6px;font-size:16px;color:var(--cds-text-secondary, #525252);line-height:1}::ng-deep .autofilled-notification-panel__dismiss:hover{color:var(--cds-text-primary, #161616)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [disableOverflow]=\"true\"\n  *ngIf=\"{\n    processDefinitionVersions: processDefinitionVersions$ | async,\n    selectedProcessDefinitionXml: selectedProcessDefinitionXml$ | async,\n    loading: loading$ | async,\n    isReadOnlyProcess: isReadOnlyProcess$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n  data-carbon-theme=\"g10\"\n  class=\"bpmn__container\"\n>\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'none' : 'flex'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #modeler>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{\n              ($markersVisible()\n                ? 'processManagement.markers.hide'\n                : 'processManagement.markers.show'\n              ) | translate\n            }}\n          </span>\n        </button>\n      </cds-tooltip>\n\n      <div\n        class=\"validation-errors-list\"\n        *ngIf=\"validationErrors$ | async as validationErrors\"\n        [style.display]=\"validationErrors.length > 0 ? '' : 'none'\"\n        [attr.data-test-id]=\"testIds.validationErrors\"\n      >\n        <details open>\n          <summary class=\"validation-errors-list__header\">\n            <span>{{\n              'processManagement.validationErrorsCount'\n                | translate: {count: validationErrors.length}\n            }}</span>\n            <svg\n              class=\"validation-errors-list__arrow\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z\"\n              />\n            </svg>\n          </summary>\n\n          <div class=\"validation-errors-list__items\">\n            <button\n              *ngFor=\"let error of validationErrors\"\n              class=\"validation-errors-list__item\"\n              [class.warning]=\"error.severity === 'WARNING'\"\n              (click)=\"onValidationErrorClick(error.elementId)\"\n            >\n              <span\n                class=\"validation-errors-list__icon\"\n                [class.warning]=\"error.severity === 'WARNING'\"\n                >{{ error.severity === 'WARNING' ? '!' : '!' }}</span\n              >\n\n              <span class=\"validation-errors-list__details\">\n                <span class=\"validation-errors-list__element\">{{\n                  error.elementName || error.elementId\n                }}</span>\n\n                <span\n                  class=\"validation-errors-list__reason\"\n                  [class.warning]=\"error.severity === 'WARNING'\"\n                  >{{ getValidationErrorMessage(error) }}</span\n                >\n              </span>\n            </button>\n          </div>\n        </details>\n      </div>\n    </div>\n\n    <div class=\"bpmn__modeler-panel\" #modelerPanel></div>\n  </div>\n\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'flex' : 'none'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #viewer>\n      <cds-tooltip\n        align=\"top-right\"\n        [autoAlign]=\"true\"\n        [description]=\"'processManagement.markers.toggleTooltip' | translate\"\n        class=\"markers-visibility-toggle-wrapper\"\n      >\n        <button\n          type=\"button\"\n          class=\"markers-visibility-toggle\"\n          (click)=\"toggleMarkerVisibility()\"\n          [attr.data-test-id]=\"testIds.markersVisibilityToggle\"\n        >\n          <svg cdsIcon=\"view\" *ngIf=\"$markersVisible()\" size=\"16\"></svg>\n          <svg cdsIcon=\"view--off\" *ngIf=\"!$markersVisible()\" size=\"16\"></svg>\n          <span class=\"markers-visibility-toggle__label\">\n            {{\n              ($markersVisible()\n                ? 'processManagement.markers.hide'\n                : 'processManagement.markers.show'\n              ) | translate\n            }}\n          </span>\n        </button>\n      </cds-tooltip>\n    </div>\n\n    <div class=\"bpmn__modeler-panel bpmn__modeler-panel--read-only\" #viewerPanel></div>\n  </div>\n</div>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showWarningConfirmationModal$\"\n  [titleTranslationKey]=\"'processManagement.warningConfirmation.title'\"\n  [contentTranslationKey]=\"'processManagement.warningConfirmation.content'\"\n  [confirmButtonTextTranslationKey]=\"'processManagement.warningConfirmation.confirm'\"\n  [cancelButtonTextTranslationKey]=\"'interface.cancel'\"\n  (confirmEvent)=\"onWarningConfirmationConfirm()\"\n  (cancelEvent)=\"onWarningConfirmationCancel()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"page-header-actions\"\n      *ngIf=\"{\n        processDefinitionVersionsListItems: processDefinitionVersionsListItems$ | async,\n        loading: loading$ | async,\n        changesPending: changesPending$ | async,\n        isReadOnlyProcess: isReadOnlyProcess$ | async,\n        isSystemProcess: isSystemProcess$ | async,\n        compactMode: compactMode$ | async,\n        creatingNewProcess: creatingNewProcess$ | async,\n        context: context$ | async,\n        hasEditPermissions: hasEditPermissions$ | async,\n        draft: draft$ | async,\n        canInitializeDocument: canInitializeDocument$ | async,\n        startableByUser: startableByUser$ | async,\n        updatingProcessDefinitionCaseDefinition: updatingProcessDefinitionCaseDefinition$ | async,\n      } as actionsObs\"\n    >\n      <div class=\"page-header-actions__left-container\">\n        <cds-dropdown\n          *ngIf=\"!actionsObs.creatingNewProcess && actionsObs?.context === 'independent'\"\n          class=\"page-header-actions__version-dropdown\"\n          [attr.data-test-id]=\"testIds.versionDropdown\"\n          (selected)=\"selectedVersionChange($event)\"\n          [disabled]=\"\n            actionsObs.loading ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 0 ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 1\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n        >\n          <cds-dropdown-list\n            [items]=\"actionsObs.processDefinitionVersionsListItems || []\"\n          ></cds-dropdown-list>\n        </cds-dropdown>\n\n        <div\n          class=\"page-header-actions__tags\"\n          *ngIf=\"\n            actionsObs.isReadOnlyProcess ||\n            !actionsObs.hasEditPermissions ||\n            actionsObs.isSystemProcess\n          \"\n        >\n          <cds-tag\n            *ngIf=\"actionsObs.isReadOnlyProcess || !actionsObs.hasEditPermissions\"\n            type=\"blue\"\n            [attr.data-test-id]=\"testIds.readOnlyTag\"\n            >{{ 'processManagement.readOnly' | translate }}</cds-tag\n          >\n\n          <cds-tag\n            *ngIf=\"actionsObs.isSystemProcess\"\n            type=\"blue\"\n            [attr.data-test-id]=\"testIds.systemProcessTag\"\n          >{{ 'processManagement.systemProcess' | translate }}</cds-tag\n          >\n        </div>\n\n        <div class=\"page-header-actions__toggles\">\n          <cds-tooltip\n            align=\"bottom-left\"\n            [autoAlign]=\"true\"\n            [description]=\"'processManagement.draftTooltip' | translate\"\n          >\n            <cds-toggle\n              size=\"sm\"\n              [onText]=\"'processManagement.draft' | translate\"\n              [offText]=\"'processManagement.draft' | translate\"\n              [checked]=\"actionsObs.draft\"\n              [disabled]=\"actionsObs.loading || !actionsObs.hasEditPermissions\"\n              (checkedChange)=\"onProcessToggleChange('draft', $event)\"\n              [attr.data-test-id]=\"testIds.draftToggle\"\n            ></cds-toggle>\n          </cds-tooltip>\n\n          @if (actionsObs.context === 'case') {\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.processCreatesCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.canInitializeDocument' | translate\"\n                [offText]=\"'processManagement.canInitializeDocument' | translate\"\n                [checked]=\"actionsObs.canInitializeDocument\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('canInitializeDocument', $event)\"\n                [attr.data-test-id]=\"testIds.startsCaseToggle\"\n              ></cds-toggle>\n            </cds-tooltip>\n\n            <cds-tooltip\n              align=\"bottom-left\"\n              [autoAlign]=\"true\"\n              [description]=\"'processCaseConnection.startableWithinCaseTooltip' | translate\"\n            >\n              <cds-toggle\n                size=\"sm\"\n                [onText]=\"'processManagement.startableByUser' | translate\"\n                [offText]=\"'processManagement.startableByUser' | translate\"\n                [checked]=\"actionsObs.startableByUser\"\n                [disabled]=\"\n                  actionsObs.loading ||\n                  actionsObs.updatingProcessDefinitionCaseDefinition ||\n                  !actionsObs.hasEditPermissions\n                \"\n                (checkedChange)=\"onProcessToggleChange('startableByUser', $event)\"\n                [attr.data-test-id]=\"testIds.startableByUserToggle\"\n              ></cds-toggle\n            ></cds-tooltip>\n          }\n        </div>\n      </div>\n\n      <div class=\"page-header-actions__buttons\">\n        <v-overflow-menu class=\"overflow-button\" placement=\"bottom-end\">\n          <v-overflow-menu-trigger\n            overflowTrigger\n            [attr.data-test-id]=\"testIds.moreButton\"\n          ></v-overflow-menu-trigger>\n          <v-overflow-menu-option\n            *ngIf=\"actionsObs.context !== 'case'\"\n            [disabled]=\"actionsObs.loading\"\n            [attr.data-test-id]=\"testIds.exportOption\"\n            (selected)=\"export()\"\n            >{{ 'interface.export' | translate }}\n          </v-overflow-menu-option>\n\n          <v-overflow-menu-option\n            [disabled]=\"actionsObs.loading\"\n            (selected)=\"exportBpmn(actionsObs.isReadOnlyProcess)\"\n            >{{ 'processManagement.exportBpmn' | translate }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"tertiary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          {{ 'interface.back' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"return\" size=\"16\"></svg>\n        </button>\n\n        <button\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [disabled]=\"actionsObs.loading || !actionsObs.hasEditPermissions\"\n          [attr.data-test-id]=\"testIds.validateButton\"\n          (click)=\"validateProcessDefinition(actionsObs.isReadOnlyProcess)\"\n        >\n          {{ 'processManagement.validate' | translate }}\n          <svg class=\"cds--btn__icon\" cdsIcon=\"list--checked\" size=\"16\"></svg>\n        </button>\n\n        <button\n          [disabled]=\"!actionsObs.changesPending || !actionsObs.hasEditPermissions\"\n          cdsButton=\"primary\"\n          (click)=\"\n            !actionsObs.creatingNewProcess\n              ? deployChanges(actionsObs.isReadOnlyProcess)\n              : deployNewProcessDefinition()\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          [attr.data-test-id]=\"testIds.deployButton\"\n        >\n          {{ 'processManagement.deploy' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"deploy\" size=\"16\"></svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.bpmn__container{position:relative;background-color:var(--cds-layer);width:100%}.bpmn__modeler{width:100%;height:100%;flex-direction:row;padding:1px;box-sizing:border-box;outline:1px solid var(--cds-border-subtle);outline-offset:-1px}.bpmn__modeler ::ng-deep .djs-container>svg{outline:none!important}.bpmn__modeler-canvas{width:100%;position:relative}.bpmn__modeler-canvas .markers-visibility-toggle-wrapper{position:absolute;bottom:55px;right:15px;z-index:100}.bpmn__modeler-canvas .markers-visibility-toggle{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:none;border-radius:2px;background-color:var(--cds-layer);cursor:pointer;color:var(--cds-text-secondary);transition:background-color .15s,color .15s}.bpmn__modeler-canvas .markers-visibility-toggle:hover{background-color:var(--cds-layer-hover);color:var(--cds-text-primary)}.bpmn__modeler-canvas .markers-visibility-toggle:focus{outline:2px solid var(--cds-focus);outline-offset:-2px}.bpmn__modeler-canvas .markers-visibility-toggle__label{font-size:12px;white-space:nowrap}.bpmn__modeler-panel{width:481px;padding-left:1px;box-shadow:inset 1px 0 0 0 var(--cds-border-subtle);box-sizing:border-box}.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry input,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry select,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry textarea,.bpmn__modeler-panel--read-only ::ng-deep .bio-properties-panel-entry .bio-properties-panel-feel-editor-container{opacity:.65}.bpmn__loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--cds-background-selected)}.page-header-actions{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px}.page-header-actions__left-container{display:flex;gap:16px;align-items:center}.page-header-actions__tags{display:flex;gap:8px;align-items:center}.page-header-actions__version-dropdown{width:150px}.page-header-actions__toggles{display:flex;gap:16px;align-items:center}.page-header-actions__toggles ::ng-deep cds-toggle{display:inline-flex;align-items:center}.page-header-actions__toggles ::ng-deep .cds--toggle__label-text{display:none}.page-header-actions__buttons{display:flex;gap:16px;align-items:center;flex-shrink:0}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}.validation-errors-list{position:absolute;top:8px;right:8px;z-index:10;width:320px;max-height:250px;overflow-y:auto;border:1px solid var(--cds-border-subtle);background-color:var(--cds-layer);border-radius:4px;box-shadow:0 2px 6px #00000026}.validation-errors-list details[open]>summary .validation-errors-list__arrow{transform:rotate(90deg)}.validation-errors-list__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:600;color:var(--cds-support-error, #da1e28);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.validation-errors-list__header::-webkit-details-marker{display:none}.validation-errors-list__arrow{display:inline-flex;width:16px;height:16px;fill:currentColor;transition:transform .15s ease;flex-shrink:0}.validation-errors-list__items{display:flex;flex-direction:column;border-top:1px solid var(--cds-border-subtle)}.validation-errors-list__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border:none;border-bottom:1px solid var(--cds-border-subtle);border-left:3px solid var(--cds-support-error, #da1e28);background-color:var(--cds-notification-error-background, #fff1f1);text-align:left;cursor:pointer;font-family:inherit}.validation-errors-list__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}.validation-errors-list__item:last-child{border-bottom:none}.validation-errors-list__item:hover{filter:brightness(.97)}.validation-errors-list__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin-top:1px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}.validation-errors-list__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}.validation-errors-list__details{display:flex;flex-direction:column;gap:2px}.validation-errors-list__element{font-size:13px;font-weight:600;color:var(--cds-text-primary)}.validation-errors-list__reason{font-size:13px;color:var(--cds-text-primary)}::ng-deep .highlight-overlay-error:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-error, #da1e28)!important}::ng-deep .highlight-overlay-warning:not(.djs-connection) .djs-visual>:nth-child(1){stroke:var(--cds-support-warning, #f1c21b)!important}::ng-deep .djs-overlay-validation-error{overflow:visible!important;pointer-events:all!important}::ng-deep .validation-error-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-error-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-error-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-error, #da1e28);color:var(--cds-support-error, #da1e28);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-error-overlay:hover ::ng-deep .validation-error-overlay__text,::ng-deep .validation-error-overlay--active ::ng-deep .validation-error-overlay__text{display:block}::ng-deep .validation-warning-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .validation-warning-overlay__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);font-size:14px;font-weight:700;line-height:0}::ng-deep .validation-warning-overlay__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .validation-warning-overlay:hover ::ng-deep .validation-warning-overlay__text,::ng-deep .validation-warning-overlay--active ::ng-deep .validation-warning-overlay__text{display:block}::ng-deep .djs-overlay-activity-marker{overflow:visible!important;pointer-events:all!important}::ng-deep .activity-marker-overlay{display:flex;gap:2px}::ng-deep .activity-marker-badge{position:relative;cursor:pointer;pointer-events:all}::ng-deep .activity-marker-badge__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:14px;font-weight:700;line-height:0}::ng-deep .activity-marker-badge__text{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .activity-marker-badge:hover ::ng-deep .activity-marker-badge__text,::ng-deep .activity-marker-badge--active ::ng-deep .activity-marker-badge__text{display:block}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--process-link ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-purple-60, #8a3ffc);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--execution-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-purple-60, #8a3ffc);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__icon{background-color:var(--cds-teal-50, #009d9a);color:var(--cds-text-on-color, #ffffff)}::ng-deep .activity-marker-badge--task-listener ::ng-deep .activity-marker-badge__text{border:1px solid var(--cds-teal-50, #009d9a);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff)}::ng-deep .validation-errors-panel{padding:8px 12px;display:flex;flex-direction:column;gap:8px}::ng-deep .validation-errors-panel__item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background-color:var(--cds-notification-error-background, #fff1f1);border-left:3px solid var(--cds-support-error, #da1e28)}::ng-deep .validation-errors-panel__item.warning{background-color:var(--cds-notification-warning-background, #fdf6dd);border-left-color:var(--cds-support-warning, #f1c21b)}::ng-deep .validation-errors-panel__icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background-color:var(--cds-support-error, #da1e28);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700;line-height:0}::ng-deep .validation-errors-panel__icon.warning{background-color:var(--cds-support-warning, #f1c21b);color:var(--cds-text-primary, #161616)}::ng-deep .validation-errors-panel__reason{color:var(--cds-text-primary, #161616);font-size:13px;line-height:18px}::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-input,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-textfield,::ng-deep .bio-properties-panel-entry.validation-error-field .bio-properties-panel-feel-editor-container{border:2px solid var(--cds-support-error, #da1e28)!important;background-color:var(--cds-notification-error-background, #fff1f1)!important}::ng-deep .expression-editor-param input.validation-error-param,::ng-deep input.expression-editor-input.validation-error-param,::ng-deep .expression-editor-technical input.validation-error-param,::ng-deep .expression-editor-technical textarea.validation-error-param{border:2px solid #da1e28!important;background-color:#fff1f1!important;border-color:#da1e28!important}::ng-deep .process-link-properties-panel{padding:8px 12px 16px;width:100%;display:flex;flex-direction:column;gap:16px}::ng-deep .process-link-properties-panel__buttons,::ng-deep .process-link-properties-panel__header{width:100%;display:flex;gap:16px}::ng-deep .process-link-properties-panel__header{align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--cds-border-subtle-00);padding-bottom:8px;padding-left:8px;padding-right:8px}::ng-deep .process-link-properties-panel__title{color:var(--cds-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:auto 0}::ng-deep .process-link-properties-panel__title-container{display:flex;flex-direction:column;gap:4px}::ng-deep .process-link-properties-panel__title-container :last-child{color:var(--cds-text-helper);font-style:italic}::ng-deep .process-link-properties-panel .cds--tag{margin:0}::ng-deep .process-link-properties-panel .cds--btn{flex-shrink:1;width:100%;display:flex;align-items:center}::ng-deep .djs-overlay-autofilled-indicator{overflow:visible!important;pointer-events:all!important}::ng-deep .autofilled-indicator-overlay{position:relative;cursor:pointer;pointer-events:all}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:14px;font-weight:700;line-height:0}::ng-deep .autofilled-indicator-overlay .autofilled-indicator-tooltip{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;border:1px solid var(--cds-support-info, #0043ce);color:var(--cds-text-primary, #161616);background-color:var(--cds-layer, #ffffff);padding:4px 8px;border-radius:2px;font-size:14px;white-space:nowrap;max-width:350px;overflow:hidden;text-overflow:ellipsis;z-index:10}::ng-deep .autofilled-indicator-overlay:hover .autofilled-indicator-tooltip{display:block}::ng-deep .autofilled-notification-panel{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--cds-layer-02, #f4f4f4);border-left:3px solid var(--cds-support-info, #0043ce);margin-bottom:8px}::ng-deep .autofilled-notification-panel__icon{display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;background-color:var(--cds-support-info, #0043ce);color:var(--cds-text-on-color, #ffffff);font-size:12px;font-weight:700}::ng-deep .autofilled-notification-panel__message{flex:1;font-size:12px;color:var(--cds-text-primary, #161616)}::ng-deep .autofilled-notification-panel__dismiss{background:none;border:none;cursor:pointer;padding:2px 6px;font-size:16px;color:var(--cds-text-secondary, #525252);line-height:1}::ng-deep .autofilled-notification-panel__dismiss:hover{color:var(--cds-text-primary, #161616)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1$1.BreadcrumbService }, { type: i2$2.IconService }, { type: i3.NGXLogger }, { type: i1$1.ModalService }, { type: i2.GlobalNotificationService }, { type: i1$1.PageHeaderService }, { type: i1$1.PageTitleService }, { type: i5.ProcessLinkService }, { type: i5.ProcessLinkStateService }, { type: ProcessManagementEditorService }, { type: ProcessManagementService }, { type: i7.ProcessService }, { type: i8.ActivatedRoute }, { type: i8.Router }, { type: i9.TranslateService }, { type: i10.PluginTranslationService }, { type: i2.EditPermissionsService }, { type: i5.ProcessLinkBuildingBlockApiService }, { type: ProcessBeanService }], propDecorators: { modelerElementRef: [{
                 type: ViewChild,
                 args: ['modeler', { static: false }]
@@ -3157,8 +3256,11 @@ class ProcessManagementListComponent {
             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' });
+            if (def.processDefinition?.systemProcess) {
+                tags.push({
+                    content: this.translateService.instant('processManagement.systemProcess'),
+                    type: 'blue',
+                });
             }
             return { ...def, statusTags: tags };
         })));
@@ -3275,6 +3377,7 @@ class ProcessManagementUploadComponent {
         // matches a dropped file on its dot-prefixed extension
         this.ACCEPTED_FILES = ['.bpmn', '.zip'];
         this.UPLOAD_STEP = UPLOAD_STEP;
+        this.testIds = PROCESS_MANAGEMENT_UPLOAD_TEST_IDS;
         this.form = this.formBuilder.group({
             file: this.formBuilder.control(new Set(), [Validators.required]),
         });
@@ -3550,7 +3653,7 @@ class ProcessManagementUploadComponent {
         return this.translateService.instant('processManagement.upload.replaceContent');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementUploadComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.GlobalNotificationService }, { token: ProcessManagementService }, { token: ProcessManagementStateService }, { token: i5.ProcessLinkService }, { token: i9.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ProcessManagementUploadComponent, isStandalone: true, selector: "valtimo-process-management-upload", viewQueries: [{ propertyName: "_pluginConfigurationMapping", first: true, predicate: PluginConfigurationMappingComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"modalOpen$ | async\" size=\"sm\" (close)=\"closeModal()\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'processManagement.upload.modalTitle' | translate }}</h3>\n  </cds-modal-header>\n\n  <ng-container\n    *ngIf=\"{\n      activeStep: activeStep$ | async,\n      preview: preview$ | async,\n      missingReferences: missingReferences$ | async,\n      importing: importing$ | async,\n    } as obs\"\n  >\n    <section cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\" [ngSwitch]=\"obs.activeStep\">\n      <cds-file-uploader\n        *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\"\n        [accept]=\"ACCEPTED_FILES\"\n        [buttonText]=\"'processManagement.upload.buttonText' | translate\"\n        [description]=\"'processManagement.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'processManagement.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n      >\n      </cds-file-uploader>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.REVIEW\" class=\"process-management-upload__review\">\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type:\n                group.type === 'SUB_PROCESS' || group.type === 'DECISION_DEFINITION'\n                  ? 'warning'\n                  : 'error',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container\n          *ngFor=\"let group of getReplacedElementGroups(obs.preview?.elementsToReplace ?? [])\"\n        >\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title: 'processManagement.upload.willBeReplaced.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.willBeReplaced.' + group.type + '.message' | translate) +\n                ' ' +\n                group.keys.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container *ngIf=\"obs.preview?.pluginConfigurations?.length\">\n          <p class=\"process-management-upload__description\">\n            {{ 'processManagement.upload.pluginsDescription' | translate }}\n          </p>\n\n          <valtimo-plugin-configuration-mapping\n            [pluginConfigurations]=\"obs.preview.pluginConfigurations\"\n          ></valtimo-plugin-configuration-mapping>\n        </ng-container>\n      </div>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.SUMMARY\" class=\"process-management-upload__review\">\n        <cds-inline-notification\n          [notificationObj]=\"{\n            type: 'success',\n            title: 'processManagement.upload.success' | translate,\n            message: 'processManagement.upload.summaryDescription' | translate,\n            showClose: false,\n            lowContrast: true,\n          }\"\n        ></cds-inline-notification>\n\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n      </div>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.FILE_SELECT\">\n        <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n          {{ 'interface.cancel' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"(fileSelected$ | async) === false || obs.importing\"\n          (click)=\"uploadProcessBpmn()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.REVIEW\">\n        <button cdsButton=\"secondary\" (click)=\"onBackClick()\">\n          {{ 'interface.back' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"obs.preview?.canImport === false || obs.importing\"\n          (click)=\"importProcessPackage()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <button\n        *ngIf=\"obs.activeStep === UPLOAD_STEP.SUMMARY\"\n        cdsButton=\"primary\"\n        (click)=\"closeModal()\"\n      >\n        {{ 'interface.close' | translate }}\n      </button>\n    </cds-modal-footer>\n  </ng-container>\n</cds-modal>\n\n<valtimo-render-in-body>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"processManagement.upload.replaceConfirm\"\n    confirmButtonType=\"danger\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    [content]=\"replaceModalContent\"\n    [showModalSubject$]=\"showReplaceConfirmationModal$\"\n    titleTranslationKey=\"processManagement.upload.replaceTitle\"\n    (confirmEvent)=\"confirmReplace()\"\n    (cancelEvent)=\"clearReplaceModal()\"\n  ></valtimo-confirmation-modal>\n</valtimo-render-in-body>\n", styles: [".process-management-upload__review{display:flex;flex-direction:column;gap:16px}.process-management-upload__description{font-size:.875rem;line-height:1.25rem;color:var(--cds-text-secondary)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FileUploaderModule }, { kind: "component", type: i2$2.FileUploader, selector: "cds-file-uploader, ibm-file-uploader", inputs: ["buttonText", "buttonType", "title", "description", "accept", "multiple", "skeleton", "size", "fileItemSize", "drop", "dropText", "fileUploaderId", "files", "disabled"], outputs: ["filesChange"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: RenderInBodyComponent, selector: "valtimo-render-in-body" }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2$2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "component", type: PluginConfigurationMappingComponent, selector: "valtimo-plugin-configuration-mapping", inputs: ["pluginConfigurations"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ProcessManagementUploadComponent, isStandalone: true, selector: "valtimo-process-management-upload", viewQueries: [{ propertyName: "_pluginConfigurationMapping", first: true, predicate: PluginConfigurationMappingComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"modalOpen$ | async\" size=\"sm\" (close)=\"closeModal()\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'processManagement.upload.modalTitle' | translate }}</h3>\n  </cds-modal-header>\n\n  <ng-container\n    *ngIf=\"{\n      activeStep: activeStep$ | async,\n      preview: preview$ | async,\n      missingReferences: missingReferences$ | async,\n      importing: importing$ | async,\n    } as obs\"\n  >\n    <section cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\" [ngSwitch]=\"obs.activeStep\">\n      <cds-file-uploader\n        *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\"\n        [accept]=\"ACCEPTED_FILES\"\n        [buttonText]=\"'processManagement.upload.buttonText' | translate\"\n        [description]=\"'processManagement.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'processManagement.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n        [attr.data-test-id]=\"testIds.fileUploader\"\n      >\n      </cds-file-uploader>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.REVIEW\" class=\"process-management-upload__review\">\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type:\n                group.type === 'SUB_PROCESS' || group.type === 'DECISION_DEFINITION'\n                  ? 'warning'\n                  : 'error',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container\n          *ngFor=\"let group of getReplacedElementGroups(obs.preview?.elementsToReplace ?? [])\"\n        >\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title: 'processManagement.upload.willBeReplaced.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.willBeReplaced.' + group.type + '.message' | translate) +\n                ' ' +\n                group.keys.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container *ngIf=\"obs.preview?.pluginConfigurations?.length\">\n          <p class=\"process-management-upload__description\">\n            {{ 'processManagement.upload.pluginsDescription' | translate }}\n          </p>\n\n          <valtimo-plugin-configuration-mapping\n            [pluginConfigurations]=\"obs.preview.pluginConfigurations\"\n          ></valtimo-plugin-configuration-mapping>\n        </ng-container>\n      </div>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.SUMMARY\" class=\"process-management-upload__review\">\n        <cds-inline-notification\n          [notificationObj]=\"{\n            type: 'success',\n            title: 'processManagement.upload.success' | translate,\n            message: 'processManagement.upload.summaryDescription' | translate,\n            showClose: false,\n            lowContrast: true,\n          }\"\n        ></cds-inline-notification>\n\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n      </div>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.FILE_SELECT\">\n        <button\n          cdsButton=\"secondary\"\n          [attr.data-test-id]=\"testIds.cancelButton\"\n          (click)=\"closeModal()\"\n        >\n          {{ 'interface.cancel' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"(fileSelected$ | async) === false || obs.importing\"\n          [attr.data-test-id]=\"testIds.submitButton\"\n          (click)=\"uploadProcessBpmn()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.REVIEW\">\n        <button\n          cdsButton=\"secondary\"\n          [attr.data-test-id]=\"testIds.backButton\"\n          (click)=\"onBackClick()\"\n        >\n          {{ 'interface.back' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"obs.preview?.canImport === false || obs.importing\"\n          [attr.data-test-id]=\"testIds.importButton\"\n          (click)=\"importProcessPackage()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <button\n        *ngIf=\"obs.activeStep === UPLOAD_STEP.SUMMARY\"\n        cdsButton=\"primary\"\n        [attr.data-test-id]=\"testIds.closeButton\"\n        (click)=\"closeModal()\"\n      >\n        {{ 'interface.close' | translate }}\n      </button>\n    </cds-modal-footer>\n  </ng-container>\n</cds-modal>\n\n<valtimo-render-in-body>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"processManagement.upload.replaceConfirm\"\n    confirmButtonType=\"danger\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    [content]=\"replaceModalContent\"\n    [showModalSubject$]=\"showReplaceConfirmationModal$\"\n    titleTranslationKey=\"processManagement.upload.replaceTitle\"\n    (confirmEvent)=\"confirmReplace()\"\n    (cancelEvent)=\"clearReplaceModal()\"\n  ></valtimo-confirmation-modal>\n</valtimo-render-in-body>\n", styles: [".process-management-upload__review{display:flex;flex-direction:column;gap:16px}.process-management-upload__description{font-size:.875rem;line-height:1.25rem;color:var(--cds-text-secondary)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FileUploaderModule }, { kind: "component", type: i2$2.FileUploader, selector: "cds-file-uploader, ibm-file-uploader", inputs: ["buttonText", "buttonType", "title", "description", "accept", "multiple", "skeleton", "size", "fileItemSize", "drop", "dropText", "fileUploaderId", "files", "disabled"], outputs: ["filesChange"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: RenderInBodyComponent, selector: "valtimo-render-in-body" }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2$2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "component", type: PluginConfigurationMappingComponent, selector: "valtimo-plugin-configuration-mapping", inputs: ["pluginConfigurations"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessManagementUploadComponent, decorators: [{
             type: Component,
@@ -3567,7 +3670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         ValtimoCdsModalDirective,
                         NotificationModule,
                         PluginConfigurationMappingComponent,
-                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"modalOpen$ | async\" size=\"sm\" (close)=\"closeModal()\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'processManagement.upload.modalTitle' | translate }}</h3>\n  </cds-modal-header>\n\n  <ng-container\n    *ngIf=\"{\n      activeStep: activeStep$ | async,\n      preview: preview$ | async,\n      missingReferences: missingReferences$ | async,\n      importing: importing$ | async,\n    } as obs\"\n  >\n    <section cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\" [ngSwitch]=\"obs.activeStep\">\n      <cds-file-uploader\n        *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\"\n        [accept]=\"ACCEPTED_FILES\"\n        [buttonText]=\"'processManagement.upload.buttonText' | translate\"\n        [description]=\"'processManagement.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'processManagement.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n      >\n      </cds-file-uploader>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.REVIEW\" class=\"process-management-upload__review\">\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type:\n                group.type === 'SUB_PROCESS' || group.type === 'DECISION_DEFINITION'\n                  ? 'warning'\n                  : 'error',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container\n          *ngFor=\"let group of getReplacedElementGroups(obs.preview?.elementsToReplace ?? [])\"\n        >\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title: 'processManagement.upload.willBeReplaced.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.willBeReplaced.' + group.type + '.message' | translate) +\n                ' ' +\n                group.keys.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container *ngIf=\"obs.preview?.pluginConfigurations?.length\">\n          <p class=\"process-management-upload__description\">\n            {{ 'processManagement.upload.pluginsDescription' | translate }}\n          </p>\n\n          <valtimo-plugin-configuration-mapping\n            [pluginConfigurations]=\"obs.preview.pluginConfigurations\"\n          ></valtimo-plugin-configuration-mapping>\n        </ng-container>\n      </div>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.SUMMARY\" class=\"process-management-upload__review\">\n        <cds-inline-notification\n          [notificationObj]=\"{\n            type: 'success',\n            title: 'processManagement.upload.success' | translate,\n            message: 'processManagement.upload.summaryDescription' | translate,\n            showClose: false,\n            lowContrast: true,\n          }\"\n        ></cds-inline-notification>\n\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n      </div>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.FILE_SELECT\">\n        <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n          {{ 'interface.cancel' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"(fileSelected$ | async) === false || obs.importing\"\n          (click)=\"uploadProcessBpmn()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.REVIEW\">\n        <button cdsButton=\"secondary\" (click)=\"onBackClick()\">\n          {{ 'interface.back' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"obs.preview?.canImport === false || obs.importing\"\n          (click)=\"importProcessPackage()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <button\n        *ngIf=\"obs.activeStep === UPLOAD_STEP.SUMMARY\"\n        cdsButton=\"primary\"\n        (click)=\"closeModal()\"\n      >\n        {{ 'interface.close' | translate }}\n      </button>\n    </cds-modal-footer>\n  </ng-container>\n</cds-modal>\n\n<valtimo-render-in-body>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"processManagement.upload.replaceConfirm\"\n    confirmButtonType=\"danger\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    [content]=\"replaceModalContent\"\n    [showModalSubject$]=\"showReplaceConfirmationModal$\"\n    titleTranslationKey=\"processManagement.upload.replaceTitle\"\n    (confirmEvent)=\"confirmReplace()\"\n    (cancelEvent)=\"clearReplaceModal()\"\n  ></valtimo-confirmation-modal>\n</valtimo-render-in-body>\n", styles: [".process-management-upload__review{display:flex;flex-direction:column;gap:16px}.process-management-upload__description{font-size:.875rem;line-height:1.25rem;color:var(--cds-text-secondary)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"modalOpen$ | async\" size=\"sm\" (close)=\"closeModal()\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'processManagement.upload.modalTitle' | translate }}</h3>\n  </cds-modal-header>\n\n  <ng-container\n    *ngIf=\"{\n      activeStep: activeStep$ | async,\n      preview: preview$ | async,\n      missingReferences: missingReferences$ | async,\n      importing: importing$ | async,\n    } as obs\"\n  >\n    <section cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\" [ngSwitch]=\"obs.activeStep\">\n      <cds-file-uploader\n        *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\"\n        [accept]=\"ACCEPTED_FILES\"\n        [buttonText]=\"'processManagement.upload.buttonText' | translate\"\n        [description]=\"'processManagement.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'processManagement.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n        [attr.data-test-id]=\"testIds.fileUploader\"\n      >\n      </cds-file-uploader>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.REVIEW\" class=\"process-management-upload__review\">\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type:\n                group.type === 'SUB_PROCESS' || group.type === 'DECISION_DEFINITION'\n                  ? 'warning'\n                  : 'error',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container\n          *ngFor=\"let group of getReplacedElementGroups(obs.preview?.elementsToReplace ?? [])\"\n        >\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title: 'processManagement.upload.willBeReplaced.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.willBeReplaced.' + group.type + '.message' | translate) +\n                ' ' +\n                group.keys.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n\n        <ng-container *ngIf=\"obs.preview?.pluginConfigurations?.length\">\n          <p class=\"process-management-upload__description\">\n            {{ 'processManagement.upload.pluginsDescription' | translate }}\n          </p>\n\n          <valtimo-plugin-configuration-mapping\n            [pluginConfigurations]=\"obs.preview.pluginConfigurations\"\n          ></valtimo-plugin-configuration-mapping>\n        </ng-container>\n      </div>\n\n      <div *ngSwitchCase=\"UPLOAD_STEP.SUMMARY\" class=\"process-management-upload__review\">\n        <cds-inline-notification\n          [notificationObj]=\"{\n            type: 'success',\n            title: 'processManagement.upload.success' | translate,\n            message: 'processManagement.upload.summaryDescription' | translate,\n            showClose: false,\n            lowContrast: true,\n          }\"\n        ></cds-inline-notification>\n\n        <ng-container *ngFor=\"let group of getMissingReferenceGroups(obs.missingReferences)\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title:\n                'processManagement.upload.missingReference.' + group.type + '.title' | translate,\n              message:\n                ('processManagement.upload.missingReference.' + group.type + '.message'\n                  | translate) +\n                ' ' +\n                group.references.join(', '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </ng-container>\n      </div>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.FILE_SELECT\">\n        <button\n          cdsButton=\"secondary\"\n          [attr.data-test-id]=\"testIds.cancelButton\"\n          (click)=\"closeModal()\"\n        >\n          {{ 'interface.cancel' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"(fileSelected$ | async) === false || obs.importing\"\n          [attr.data-test-id]=\"testIds.submitButton\"\n          (click)=\"uploadProcessBpmn()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.activeStep === UPLOAD_STEP.REVIEW\">\n        <button\n          cdsButton=\"secondary\"\n          [attr.data-test-id]=\"testIds.backButton\"\n          (click)=\"onBackClick()\"\n        >\n          {{ 'interface.back' | translate }}\n        </button>\n\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"obs.preview?.canImport === false || obs.importing\"\n          [attr.data-test-id]=\"testIds.importButton\"\n          (click)=\"importProcessPackage()\"\n        >\n          {{ 'interface.upload' | translate }}\n        </button>\n      </ng-container>\n\n      <button\n        *ngIf=\"obs.activeStep === UPLOAD_STEP.SUMMARY\"\n        cdsButton=\"primary\"\n        [attr.data-test-id]=\"testIds.closeButton\"\n        (click)=\"closeModal()\"\n      >\n        {{ 'interface.close' | translate }}\n      </button>\n    </cds-modal-footer>\n  </ng-container>\n</cds-modal>\n\n<valtimo-render-in-body>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"processManagement.upload.replaceConfirm\"\n    confirmButtonType=\"danger\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    [content]=\"replaceModalContent\"\n    [showModalSubject$]=\"showReplaceConfirmationModal$\"\n    titleTranslationKey=\"processManagement.upload.replaceTitle\"\n    (confirmEvent)=\"confirmReplace()\"\n    (cancelEvent)=\"clearReplaceModal()\"\n  ></valtimo-confirmation-modal>\n</valtimo-render-in-body>\n", styles: [".process-management-upload__review{display:flex;flex-direction:column;gap:16px}.process-management-upload__description{font-size:.875rem;line-height:1.25rem;color:var(--cds-text-secondary)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2.GlobalNotificationService }, { type: ProcessManagementService }, { type: ProcessManagementStateService }, { type: i5.ProcessLinkService }, { type: i9.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { _pluginConfigurationMapping: [{
                 type: ViewChild,
                 args: [PluginConfigurationMappingComponent]
@@ -3822,5 +3925,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { PROCESS_MANAGEMENT_BUILDER_TEST_IDS, PROCESS_MANAGEMENT_ENDPOINTS, PROCESS_MANAGEMENT_LIST_TEST_IDS, ProcessManagementBuilderComponent, ProcessManagementComponent, ProcessManagementModule, ProcessManagementStateService };
+export { PROCESS_LINK_PANEL_TEST_IDS, PROCESS_MANAGEMENT_BUILDER_TEST_IDS, PROCESS_MANAGEMENT_ENDPOINTS, PROCESS_MANAGEMENT_LIST_TEST_IDS, PROCESS_MANAGEMENT_UPLOAD_TEST_IDS, ProcessManagementBuilderComponent, ProcessManagementComponent, ProcessManagementModule, ProcessManagementStateService };
 //# sourceMappingURL=valtimo-process-management.mjs.map