@valtimo/process-management 12.14.1 → 13.0.1

package/fesm2022/valtimo-process-management.mjs

@@ -1,31 +1,41 @@
-import * as i0 from '@angular/core';
-import { Component, Injectable, EventEmitter, ViewChild, Output, ViewEncapsulation, NgModule } from '@angular/core';
-import * as i5 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i1 from '@valtimo/process';
-import * as i4 from '@valtimo/components';
-import { WidgetModule, ListModule } from '@valtimo/components';
-import * as i4$1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import * as i1$1 from '@valtimo/config';
-import { ROLE_ADMIN } from '@valtimo/config';
-import * as i2 from '@angular/common/http';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { AuthGuardService } from '@valtimo/security';
-import { BehaviorSubject, forkJoin } from 'rxjs';
+import * as i0 from '@angular/core';
+import { Injectable, signal, computed, ViewChild, Component, EventEmitter, Output, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i1$2 from '@angular/forms';
+import { ReactiveFormsModule, Validators, FormsModule } from '@angular/forms';
+import * as i4 from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import * as i1$1 from '@valtimo/components';
+import { PendingChangesComponent, FitPageDirective, RenderInPageHeaderDirective, ViewType, CarbonListModule, ConfirmationModalModule, CARBON_CONSTANTS, pendingChangesGuard, WidgetModule } from '@valtimo/components';
+import * as i5 from '@valtimo/process-link';
+import { ProcessLinkEditMode, ProcessLinkModule, ProcessLinkStateService, ProcessLinkStepService, ProcessLinkButtonService } from '@valtimo/process-link';
+import * as i2$2 from 'carbon-components-angular';
+import { LoadingModule, DropdownModule, SelectModule, ButtonModule, IconModule, TagModule, DialogModule, ToggleModule, TooltipModule, FileUploaderModule, ModalModule, LayerModule, NotificationModule, RadioModule } from 'carbon-components-angular';
+import * as i2$1 from '@valtimo/shared';
+import { BaseApiService, getCaseManagementRouteParams, getCaseManagementRouteParamsAndContext, ROLE_ADMIN } from '@valtimo/shared';
+import { useService, BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, CamundaPlatformPropertiesProviderModule } from 'bpmn-js-properties-panel';
 import Modeler from 'bpmn-js/lib/Modeler';
-import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
-import PropertiesPanelModule from 'bpmn-js-properties-panel';
-import PropertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
-import CamundaExtensionModule from 'camunda-bpmn-moddle/lib';
-import CamundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
-import * as i3 from '@valtimo/layout';
-import * as i7 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import camundaPlatformBehaviors from 'camunda-bpmn-js-behaviors/lib/camunda-platform';
+import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json';
+import { isEqual } from 'lodash';
+import { filter, BehaviorSubject, Subscription, Subject, combineLatest, switchMap, of, tap, map as map$1, startWith, from, take } from 'rxjs';
+import { distinctUntilChanged, map, filter as filter$1 } from 'rxjs/operators';
+import * as i2 from '@valtimo/form';
+import { toObservable } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/common/http';
+import { html } from 'htm/preact';
+import { is } from 'bpmn-js/lib/util/ModelUtil';
+import * as i3 from 'ngx-logger';
+import * as i7 from '@valtimo/process';
+import * as i8 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i10 from '@valtimo/plugin';
+import { Upload16 } from '@carbon/icons';
+import { AuthGuardService } from '@valtimo/security';
 
 /*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -39,38 +49,189 @@ import { FormsModule } from '@angular/forms';
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class ProcessManagementListComponent {
-    constructor(processService, router) {
-        this.processService = processService;
-        this.router = router;
-        this.processDefinitions = [];
-        this.fields = [
-            { key: 'key', label: 'Key' },
-            { key: 'name', label: 'Name' },
-            { key: 'readOnly', label: 'Read-only' },
-        ];
+const EMPTY_BPMN = `
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" targetNamespace="http://bpmn.io/schema/bpmn" id="Definitions_1">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:startEvent id="StartEvent_1"/>
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+        <dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>
+`;
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ProcessManagementEditorService {
+    get selectionProcessDefinition$() {
+        return this._selectionProcessDefinitionSubject$.pipe(filter(selectedProcessDefinition => !!selectedProcessDefinition?.id), distinctUntilChanged((previous, current) => isEqual(previous, current)));
     }
-    ngOnInit() {
-        this.loadProcessDefinitions();
+    get selectionProcessDefinition() {
+        return this._selectionProcessDefinitionSubject$.getValue();
+    }
+    get processLinksForSelectedDefinition$() {
+        return this._processLinksForSelectedDefinition$.asObservable();
+    }
+    get processLinksForSelectedDefinition() {
+        return this._processLinksForSelectedDefinition$.getValue();
+    }
+    get openProcessLinkModalEvents$() {
+        return this._openProcessLinkModalEvents$.asObservable();
+    }
+    setSelectedProcessDefinition(definition) {
+        this._selectionProcessDefinitionSubject$.next(definition);
+    }
+    get formDefinitionOptions() {
+        return this._formDefinitionOptions$.getValue();
+    }
+    constructor(processLinkService, formService) {
+        this.processLinkService = processLinkService;
+        this.formService = formService;
+        this._selectionProcessDefinitionSubject$ = new BehaviorSubject(null);
+        this._processLinksForSelectedDefinition$ = new BehaviorSubject([]);
+        this._processLinksFetchedForSelectedDefinition$ = new BehaviorSubject(false);
+        this._subscriptions = new Subscription();
+        this._openProcessLinkModalEvents$ = new Subject();
+        this._caseManagementRouteParams$ = new BehaviorSubject(null);
+        this._formDefinitionOptions$ = new BehaviorSubject([]);
+        this._updatingBpmnView = false;
+        this._activityIdBusinessIdMap = {};
+        this.openSelectedProcessDefinitionSubscription();
+        this.openFormDefinitionOptionsSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    setCaseManagementRouteParams(context, params) {
+        this._caseManagementRouteParams$.next([context, params]);
+    }
+    sendOpenProcessLinkModalEvent(event, updateBpmnViewFunction) {
+        this._updateBpmnViewFunction = updateBpmnViewFunction;
+        this._openProcessLinkModalEvents$.next(event);
+    }
+    updateProcessLink(event) {
+        this.setProcessLinksForSelectedDefinition(this.processLinksForSelectedDefinition.map(processLink => {
+            if (processLink.activityId === event.activityId) {
+                return { ...processLink, ...event };
+            }
+            return processLink;
+        }));
+        this.updateBpmnView();
+    }
+    createProcessLink(event) {
+        this.setProcessLinksForSelectedDefinition([
+            ...this.processLinksForSelectedDefinition,
+            event,
+        ]);
+        this.updateBpmnView();
+    }
+    deleteProcessLink(event, updateBpmnViewFunction) {
+        if (updateBpmnViewFunction) {
+            this._updateBpmnViewFunction = updateBpmnViewFunction;
+        }
+        this.setProcessLinksForSelectedDefinition(this.processLinksForSelectedDefinition.filter(processLink => processLink.activityId !== event.activityId));
+        this.updateBpmnView();
+    }
+    setProcessLinksForSelectedDefinition(processLinks) {
+        this._processLinksForSelectedDefinition$.next(processLinks);
     }
-    loadProcessDefinitions() {
-        this.processService.getProcessDefinitions().subscribe((processDefs) => {
-            this.processDefinitions = processDefs;
+    setActivityIdBusinessIdMap(activityIdBusinessIdMap) {
+        this._activityIdBusinessIdMap = activityIdBusinessIdMap;
+    }
+    updateProcessLinksOnIdChange(activityId, newBusinessId) {
+        const newBusinessIdWithoutLabelString = newBusinessId.replace('_label', '');
+        if (!this._activityIdBusinessIdMap[activityId] ||
+            this._activityIdBusinessIdMap[activityId] === newBusinessIdWithoutLabelString) {
+            return;
+        }
+        this.updateProcessLinkId(this._activityIdBusinessIdMap[activityId], newBusinessId);
+        this._activityIdBusinessIdMap = { ...this._activityIdBusinessIdMap, [activityId]: newBusinessId };
+    }
+    openSelectedProcessDefinitionSubscription() {
+        this._subscriptions.add(this.selectionProcessDefinition$.subscribe(definition => {
+            this.fetchProcessLinksForDefinition(definition.id);
+        }));
+    }
+    fetchProcessLinksForDefinition(processDefinitionId) {
+        this.processLinkService.getProcessLink({ processDefinitionId }).subscribe(res => {
+            this.setProcessLinksForSelectedDefinition(res);
         });
     }
-    editProcessDefinition(processDefinition) {
-        this.router.navigate(['/processes/process', processDefinition.key]);
+    updateBpmnView() {
+        if (!this._updateBpmnViewFunction || this._updatingBpmnView)
+            return;
+        this._updatingBpmnView = true;
+        this._updateBpmnViewFunction();
+        this._updatingBpmnView = false;
+    }
+    updateProcessLinkId(oldBusinessId, newBusinessId) {
+        this.setProcessLinksForSelectedDefinition(this.processLinksForSelectedDefinition.map(processLink => {
+            if (processLink.activityId === oldBusinessId) {
+                return { ...processLink, activityId: newBusinessId };
+            }
+            return processLink;
+        }));
+        this.updateBpmnView();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementListComponent, deps: [{ token: i1.ProcessService }, { token: i5.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProcessManagementListComponent, selector: "valtimo-process-management-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-widget>\n  <valtimo-list\n    [items]=\"processDefinitions\"\n    [fields]=\"fields\"\n    (rowClicked)=\"editProcessDefinition($event)\"\n    [header]=\"true\"\n    [viewMode]=\"true\"\n    [isSearchable]=\"true\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Processes' | translate }}</h3>\n      <h5 class=\"list-header-description\">{{ 'Overview of all Processes' | translate }}</h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i4.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i4.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
+    openFormDefinitionOptionsSubscription() {
+        this._subscriptions.add(this._caseManagementRouteParams$
+            .pipe(filter((params) => params !== null))
+            .subscribe(([context, params]) => {
+            if (context === 'independent') {
+                this.formService
+                    .getAllUnlinkedFormDefinitions()
+                    .subscribe(options => this._formDefinitionOptions$.next(options));
+            }
+            else {
+                this.formService
+                    .getAllFormDefinitionsForCaseDefinition(params.caseDefinitionKey, params.caseDefinitionVersionTag)
+                    .subscribe(options => this._formDefinitionOptions$.next(options));
+            }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementEditorService, deps: [{ token: i5.ProcessLinkService }, { token: i2.FormService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementEditorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-process-management-list', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-widget>\n  <valtimo-list\n    [items]=\"processDefinitions\"\n    [fields]=\"fields\"\n    (rowClicked)=\"editProcessDefinition($event)\"\n    [header]=\"true\"\n    [viewMode]=\"true\"\n    [isSearchable]=\"true\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Processes' | translate }}</h3>\n      <h5 class=\"list-header-description\">{{ 'Overview of all Processes' | translate }}</h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1.ProcessService }, { type: i5.Router }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementEditorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i5.ProcessLinkService }, { type: i2.FormService }] });
 
 /*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -84,31 +245,208 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class ProcessManagementService {
-    constructor(configService, http) {
+class ProcessManagementStateService {
+    constructor() {
+        this._openModal$ = new Subject();
+        this._reloadDefinitions$ = new BehaviorSubject(null);
+    }
+    get openModal$() {
+        return this._openModal$.asObservable();
+    }
+    get reloadDefinitions$() {
+        return this._reloadDefinitions$.asObservable();
+    }
+    openModal() {
+        this._openModal$.next(true);
+    }
+    closeModal() {
+        this._openModal$.next(false);
+    }
+    reloadDefinitions() {
+        this._reloadDefinitions$.next(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementStateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const PROCESS_MANAGEMENT_ENDPOINTS = {
+    case: '/management/v1/case-definition',
+    independent: '/management/v1/process-definition',
+};
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+class ProcessManagementService extends BaseApiService {
+    set context(value) {
+        this._context.set(value);
+    }
+    get context() {
+        return this._context.asReadonly();
+    }
+    constructor(httpClient, configService) {
+        super(httpClient, configService);
+        this.httpClient = httpClient;
         this.configService = configService;
-        this.http = http;
-        this.valtimoApiConfig = configService.config.valtimoApi;
+        this._definitionKey$ = new BehaviorSubject(null);
+        this._caseDefinitionVersionTag$ = new BehaviorSubject(null);
+        this._context = signal('independent');
+        this.processes$ = combineLatest([
+            this._definitionKey$,
+            this._caseDefinitionVersionTag$,
+            toObservable(this._context),
+        ]).pipe(switchMap(([definitionKey, caseDefinitionVersionTag, context]) => {
+            if (context === 'independent') {
+                return this.getUnlinkedProcesses();
+            }
+            if (!!definitionKey && !!caseDefinitionVersionTag) {
+                return this.getProcesses(definitionKey, caseDefinitionVersionTag);
+            }
+            return of([]);
+        }));
+    }
+    setParams(caseDefinitionKey, caseDefinitionVersionTag) {
+        this._definitionKey$.next(caseDefinitionKey);
+        this._caseDefinitionVersionTag$.next(caseDefinitionVersionTag);
+    }
+    deleteProcess(processDefinitionKey) {
+        return this.httpClient.delete(this.getApiUrl(`${PROCESS_MANAGEMENT_ENDPOINTS[this._context()]}/${this._definitionKey$.getValue()}/version/${this._caseDefinitionVersionTag$.getValue()}/process-definition/key/${processDefinitionKey}`));
+    }
+    deleteUnlinkedProcess(processDefinitionKey) {
+        return this.httpClient.delete(this.getApiUrl(`${PROCESS_MANAGEMENT_ENDPOINTS[this._context()]}/key/${processDefinitionKey}`));
     }
     deployBpmn(bpmn) {
         const formData = new FormData();
         formData.append('file', bpmn);
-        formData.append('deployment-name', 'valtimoConsoleApp');
-        formData.append('deployment-source', 'process application');
-        return this.http.post(`${this.valtimoApiConfig.endpointUri}v1/process/definition/deployment`, formData);
+        formData.append('processLinks', new Blob([JSON.stringify([].map(processLink => this.emptyStringToNull(processLink)))], {
+            type: 'application/json',
+        }));
+        return this.httpClient.post(this._context() === 'case'
+            ? this.getApiUrl(`${PROCESS_MANAGEMENT_ENDPOINTS[this._context()]}/${this._definitionKey$.getValue()}/version/${this._caseDefinitionVersionTag$.getValue()}/process-definition`)
+            : this.getApiUrl(`${PROCESS_MANAGEMENT_ENDPOINTS[this._context()]}`), formData);
+    }
+    getProcessDefinitionForCase(caseDefinitionKey, caseDefinitionVersionTag, processDefinitionKey) {
+        return this.httpClient.get(this.getApiUrl(`${PROCESS_MANAGEMENT_ENDPOINTS[this._context()]}/${caseDefinitionKey}/version/${caseDefinitionVersionTag}/process-definition/key/${processDefinitionKey}`));
+    }
+    getUnlinkedProcessDefinitionsByKey(processDefinitionKey) {
+        return this.httpClient.get(this.getApiUrl(`${PROCESS_MANAGEMENT_ENDPOINTS[this._context()]}/key/${processDefinitionKey}`));
+    }
+    updateProcessDefinitionCaseDefinitionProperties(caseDefinitionKey, caseDefinitionVersionTag, processDefinitionId, body) {
+        return this.httpClient.put(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionKey}/version/${caseDefinitionVersionTag}/process/${processDefinitionId}/properties`), body);
+    }
+    getProcesses(definitionName, caseDefinitionVersionTag) {
+        return this.httpClient.get(this.getApiUrl(`${PROCESS_MANAGEMENT_ENDPOINTS[this._context()]}/${definitionName}/version/${caseDefinitionVersionTag}/process-definition`));
+    }
+    getUnlinkedProcesses() {
+        return this.httpClient.get(this.getApiUrl(`${PROCESS_MANAGEMENT_ENDPOINTS[this._context()]}`));
+    }
+    emptyStringToNull(object) {
+        if (object && typeof object === 'object') {
+            Object.keys(object).forEach(key => {
+                const typedKey = key;
+                const value = object[typedKey];
+                if (typeof value === 'object' && value !== null) {
+                    this.emptyStringToNull(value);
+                }
+                else if (value === '') {
+                    object[typedKey] = null;
+                }
+            });
+        }
+        return object;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementService, deps: [{ token: i1$1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$1.ConfigService }, { type: i2.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.ConfigService }] });
 
 /*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -122,43 +460,325 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class ProcessManagementUploadComponent {
-    constructor(processManagementService, alertService) {
-        this.processManagementService = processManagementService;
-        this.alertService = alertService;
-        this.bpmn = null;
-        this.reload = new EventEmitter();
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const mapActivityTypeToActivityListenerType = (activityType) => {
+    if (activityType === 'bpmn:UserTask') {
+        return activityType + ':create';
+    }
+    return activityType + ':start';
+};
+
+function getContextObservable(route) {
+    return route.data.pipe(map(data => (data && data['context']) || null), distinctUntilChanged());
+}
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ValtimoPropertiesProvider {
+    static { this.$inject = ['propertiesPanel', 'translate']; }
+    get processManagementEditorService() {
+        return window.processManagementEditorService;
     }
-    onChange(files) {
-        this.bpmn = files.item(0);
+    get translateService() {
+        return window.translateService;
     }
-    uploadProcessBpmn() {
-        this.processManagementService.deployBpmn(this.bpmn).subscribe(() => {
-            this.bpmn = null;
-            this.bpmnFile.nativeElement.value = '';
-            this.alertService.success('Deployment successful');
-            this.reload.emit();
-        }, error => {
-            this.bpmn = null;
-            this.bpmnFile.nativeElement.value = '';
-            this.alertService.error(`Deployment failed. ${error}`);
-        });
+    get pluginTranslationService() {
+        return window.pluginTranslationService;
+    }
+    constructor(propertiesPanel) {
+        propertiesPanel.registerProvider(500, this);
+    }
+    addAsSecondOrFirst(arr, element) {
+        if (arr.length === 0) {
+            arr.push(element);
+        }
+        else {
+            arr.splice(1, 0, element);
+        }
+        return arr;
+    }
+    getGroups(element) {
+        const processLink = this.processManagementEditorService.processLinksForSelectedDefinition.find(processLink => processLink.activityId === element.id) || null;
+        return (groups) => {
+            if (is(element, 'bpmn:UserTask') ||
+                is(element, 'bpmn:StartEvent') ||
+                is(element, 'bpmn:ServiceTask') ||
+                is(element, 'bpmn:CallActivity')) {
+                const customGroup = {
+                    id: 'customRootGroup',
+                    label: 'Process link',
+                    entries: [this.createCustomRootElement(element, processLink)],
+                    groupType: 'root',
+                };
+                this.addAsSecondOrFirst(groups, customGroup);
+            }
+            return groups;
+        };
+    }
+    createCustomRootElement(element, processLink) {
+        return {
+            translateService: this.translateService,
+            processManagementEditorService: this.processManagementEditorService,
+            pluginTranslationService: this.pluginTranslationService,
+            id: 'customRootElement',
+            processLink,
+            element,
+            component: CustomRootElement,
+            isEdited: () => false,
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementUploadComponent, deps: [{ token: ProcessManagementService }, { token: i4.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProcessManagementUploadComponent, selector: "valtimo-process-management-upload", outputs: { reload: "reload" }, viewQueries: [{ propertyName: "bpmnFile", first: true, predicate: ["bpmnFile"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"modal fade\"\n  id=\"uploadProcess\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-labelledby=\"uploadProcessLabel\"\n  aria-hidden=\"true\"\n>\n  <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h3 class=\"modal-title\" id=\"uploadProcessLabel\">Upload process</h3>\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <h5>BPMN Model</h5>\n        <input\n          #bpmnFile\n          type=\"file\"\n          id=\"file\"\n          accept=\".bpmn\"\n          (change)=\"onChange($event.target.files)\"\n        />\n      </div>\n      <div class=\"modal-footer\">\n        <div class=\"btn-group\">\n          <button\n            type=\"button\"\n            class=\"btn btn-primary btn-space\"\n            (click)=\"uploadProcessBpmn()\"\n            [disabled]=\"!bpmn\"\n            data-dismiss=\"modal\"\n          >\n            Upload\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementUploadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-process-management-upload', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"modal fade\"\n  id=\"uploadProcess\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-labelledby=\"uploadProcessLabel\"\n  aria-hidden=\"true\"\n>\n  <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h3 class=\"modal-title\" id=\"uploadProcessLabel\">Upload process</h3>\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <h5>BPMN Model</h5>\n        <input\n          #bpmnFile\n          type=\"file\"\n          id=\"file\"\n          accept=\".bpmn\"\n          (change)=\"onChange($event.target.files)\"\n        />\n      </div>\n      <div class=\"modal-footer\">\n        <div class=\"btn-group\">\n          <button\n            type=\"button\"\n            class=\"btn btn-primary btn-space\"\n            (click)=\"uploadProcessBpmn()\"\n            [disabled]=\"!bpmn\"\n            data-dismiss=\"modal\"\n          >\n            Upload\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: ProcessManagementService }, { type: i4.AlertService }], propDecorators: { reload: [{
-                type: Output
-            }], bpmnFile: [{
-                type: ViewChild,
-                args: ['bpmnFile']
-            }] } });
+const CustomRootElement = (props) => {
+    const { element, processLink, translateService, processManagementEditorService, pluginTranslationService, } = props;
+    const modeling = useService('modeling');
+    const editProcessLinkText = translateService.instant('interface.edit');
+    const unlinkText = translateService.instant('processLink.unlink');
+    const createText = translateService.instant('processLink.create');
+    const modalParams = {
+        processDefinitionKey: processManagementEditorService.selectionProcessDefinition?.key,
+        processDefinitionId: processManagementEditorService.selectionProcessDefinition?.id,
+        element: {
+            id: element.id,
+            type: element.type,
+            activityListenerType: mapActivityTypeToActivityListenerType(element.type),
+            name: element.di.bpmnElement.name,
+        },
+    };
+    const handleCreateClick = () => {
+        const event = {
+            modalParams,
+        };
+        processManagementEditorService.sendOpenProcessLinkModalEvent(event, () => {
+            modeling.updateProperties(element, {});
+        });
+    };
+    const handleEditClick = () => {
+        const event = {
+            processLink,
+            modalParams,
+        };
+        processManagementEditorService.sendOpenProcessLinkModalEvent(event, () => {
+            modeling.updateProperties(element, {});
+        });
+    };
+    const handleUnlinkClick = () => {
+        processManagementEditorService.deleteProcessLink({ activityId: processLink.activityId }, () => {
+            modeling.updateProperties(element, {});
+        });
+    };
+    const processLinkFormDefinitionId = processLink?.formDefinitionId;
+    const processLinkFormDefinitionName = processManagementEditorService.formDefinitionOptions.find(option => option.id === processLinkFormDefinitionId)?.name;
+    if (processLinkFormDefinitionName) {
+        return html `<div class="process-link-properties-panel">
+      <div class="process-link-properties-panel__header">
+        <span class="process-link-properties-panel__title">${processLinkFormDefinitionName}</span>
+
+        <cds-tag
+          class="cds--tag cds--tag--blue cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+          ><span class="cds--tag__label">
+            ${translateService.instant('processLinkType.form')}
+          </span>
+        </cds-tag>
+      </div>
+
+      <div class="process-link-properties-panel__buttons">
+        <button
+          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
+          onClick=${handleUnlinkClick}
+        >
+          ${unlinkText}
+        </button>
+
+        <button
+          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+          onClick=${handleEditClick}
+        >
+          ${editProcessLinkText}
+        </button>
+      </div>
+    </div>`;
+    }
+    const processLinkFormFlowDefinitionKey = processLink?.formFlowDefinitionKey;
+    if (processLinkFormFlowDefinitionKey) {
+        return html `<div class="process-link-properties-panel">
+      <div class="process-link-properties-panel__header">
+        <span class="process-link-properties-panel__title"
+          >${processLinkFormFlowDefinitionKey}</span
+        >
+
+        <cds-tag
+          class="cds--tag cds--tag--teal cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+          ><span class="cds--tag__label">
+            ${translateService.instant('processLinkType.form-flow')}
+          </span>
+        </cds-tag>
+      </div>
+
+      <div class="process-link-properties-panel__buttons">
+        <button
+          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
+          onClick=${handleUnlinkClick}
+        >
+          ${unlinkText}
+        </button>
+
+        <button
+          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+          onClick=${handleEditClick}
+        >
+          ${editProcessLinkText}
+        </button>
+      </div>
+    </div>`;
+    }
+    const pluginActionKey = processLink?.pluginActionDefinitionKey;
+    const pluginActionTranslation = pluginTranslationService.instantByPluginActionKey(pluginActionKey);
+    const pluginTitleTranslation = pluginTranslationService.instantPluginTitleByPluginActionKey(pluginActionKey);
+    if (pluginActionKey) {
+        return html `<div class="process-link-properties-panel">
+      <div class="process-link-properties-panel__header">
+        <span class="process-link-properties-panel__title-container">
+          <span class="process-link-properties-panel__title">${pluginTitleTranslation}</span>
+
+          <span class="process-link-properties-panel__title">${pluginActionTranslation}</span>
+        </span>
+
+        <cds-tag
+          class="cds--tag cds--tag--purple cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+          ><span class="cds--tag__label">
+            ${translateService.instant('processLinkType.plugin')}
+          </span>
+        </cds-tag>
+      </div>
+
+      <div class="process-link-properties-panel__buttons">
+        <button
+          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
+          onClick=${handleUnlinkClick}
+        >
+          ${unlinkText}
+        </button>
+
+        <button
+          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+          onClick=${handleEditClick}
+        >
+          ${editProcessLinkText}
+        </button>
+      </div>
+    </div>`;
+    }
+    const uiComponentKey = processLink?.componentKey;
+    if (uiComponentKey) {
+        return html `<div class="process-link-properties-panel">
+      <div class="process-link-properties-panel__header">
+        <span class="process-link-properties-panel__title">${uiComponentKey}</span>
+
+        <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>
+
+        <button
+          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+          onClick=${handleEditClick}
+        >
+          ${editProcessLinkText}
+        </button>
+      </div>
+    </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>
+  </div>`;
+    const genericCreatePanel = html `<div class="process-link-properties-panel">
+    <div class="process-link-properties-panel__buttons">
+      <button
+        class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+        onClick=${handleCreateClick}
+      >
+        ${createText}
+      </button>
+    </div>
+  </div>`;
+    return processLink ? genericLinkedPanel : genericCreatePanel;
+};
+const ValtimoPropertiesProviderModule = {
+    __init__: ['customPropertiesProvider'],
+    customPropertiesProvider: ['type', ValtimoPropertiesProvider],
+};
 
 /*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -172,20 +792,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class ProcessManagementComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProcessManagementComponent, selector: "valtimo-process-management", viewQueries: [{ propertyName: "processManagementList", first: true, predicate: ["processManagementList"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          data-toggle=\"modal\"\n          data-target=\"#uploadProcess\"\n        >\n          <i class=\"icon mdi mdi-upload mr-1\"></i>\n          {{ 'Upload process' | translate }}\n        </button>\n        <button class=\"btn btn-primary btn-space mr-0\" [routerLink]=\"'create'\">\n          <i class=\"icon mdi mdi-plus mr-1\"></i>\n          {{ 'Create new Process' | translate }}\n        </button>\n      </div>\n    </div>\n    <valtimo-process-management-upload\n      (reload)=\"processManagementList.loadProcessDefinitions()\"\n    ></valtimo-process-management-upload>\n    <valtimo-process-management-list #processManagementList></valtimo-process-management-list>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProcessManagementListComponent, selector: "valtimo-process-management-list" }, { kind: "component", type: ProcessManagementUploadComponent, selector: "valtimo-process-management-upload", outputs: ["reload"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-process-management', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          data-toggle=\"modal\"\n          data-target=\"#uploadProcess\"\n        >\n          <i class=\"icon mdi mdi-upload mr-1\"></i>\n          {{ 'Upload process' | translate }}\n        </button>\n        <button class=\"btn btn-primary btn-space mr-0\" [routerLink]=\"'create'\">\n          <i class=\"icon mdi mdi-plus mr-1\"></i>\n          {{ 'Create new Process' | translate }}\n        </button>\n      </div>\n    </div>\n    <valtimo-process-management-upload\n      (reload)=\"processManagementList.loadProcessDefinitions()\"\n    ></valtimo-process-management-upload>\n    <valtimo-process-management-list #processManagementList></valtimo-process-management-list>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], propDecorators: { processManagementList: [{
-                type: ViewChild,
-                args: ['processManagementList']
-            }] } });
 
 /*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -199,77 +808,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class ProcessManagementBuilderComponent {
-    constructor(http, processService, layoutService, alertService, route, router, pageTitleService) {
-        this.http = http;
+class ProcessManagementBuilderComponent extends PendingChangesComponent {
+    constructor(breadcrumbService, iconService, logger, modalService, notificationService, pageHeaderService, pageTitleService, processLinkService, processLinkStateService, processManagementEditorService, processManagementService, processService, route, router, translateService, pluginTranslationService, editPermissionsService) {
+        super();
+        this.breadcrumbService = breadcrumbService;
+        this.iconService = iconService;
+        this.logger = logger;
+        this.modalService = modalService;
+        this.notificationService = notificationService;
+        this.pageHeaderService = pageHeaderService;
+        this.pageTitleService = pageTitleService;
+        this.processLinkService = processLinkService;
+        this.processLinkStateService = processLinkStateService;
+        this.processManagementEditorService = processManagementEditorService;
+        this.processManagementService = processManagementService;
         this.processService = processService;
-        this.layoutService = layoutService;
-        this.alertService = alertService;
         this.route = route;
         this.router = router;
-        this.pageTitleService = pageTitleService;
-        this.processDefinitionVersions = null;
-        this.selectedVersion = null;
-        this.processKey = null;
+        this.translateService = translateService;
+        this.pluginTranslationService = pluginTranslationService;
+        this.editPermissionsService = editPermissionsService;
+        this._selectedProcess$ = new BehaviorSubject(null);
+        this.loading$ = new BehaviorSubject(true);
         this.isReadOnlyProcess$ = new BehaviorSubject(false);
         this.isSystemProcess$ = new BehaviorSubject(false);
-        this.elementTemplateFiles = ['mailSendTask'];
-    }
-    ngOnInit() {
-        this.init();
-    }
-    init() {
-        this.processKey = this.route.snapshot.paramMap.get('key');
-        forkJoin(this.getElementTemplates()).subscribe((elementTemplates) => {
-            this.bpmnModeler = new Modeler({
-                container: '#canvas',
-                height: '90vh',
-                additionalModules: [
-                    PropertiesPanelModule,
-                    PropertiesProviderModule,
-                    CamundaExtensionModule,
-                ],
-                propertiesPanel: {
-                    parent: '#properties',
-                },
-                moddleExtensions: {
-                    camunda: CamundaModdleDescriptor,
-                },
-                elementTemplates,
-            });
-            this.bpmnViewer = new BpmnJS();
-            this.bpmnViewer.attachTo('#readOnlyCanvas');
-            if (this.processKey) {
-                this.loadProcessVersions(this.processKey);
-                this.selectedVersion = null;
-            }
-            else {
-                this.loadEmptyBpmn();
+        this.canInitializeDocument$ = new BehaviorSubject(false);
+        this.startableByUser$ = new BehaviorSubject(false);
+        this.selectedProcessDefinitionXml$ = this.processManagementEditorService.selectionProcessDefinition$.pipe(filter(selectedProcessDefinition => !!selectedProcessDefinition?.id), distinctUntilChanged((previous, current) => isEqual(previous, current)), tap(selectedProcessDefinition => {
+            this.loading$.next(true);
+            this.pageTitleService.setCustomPageTitle(selectedProcessDefinition.name);
+        }), switchMap(selectedProcessDefinition => this.processService.getProcessDefinitionXml(selectedProcessDefinition.id)), tap(result => {
+            this.cleanUpListenersOnModeler();
+            this._bpmnModeler?.importXML(result.bpmn20Xml);
+            this._bpmnViewer?.importXML(result.bpmn20Xml);
+            this.isReadOnlyProcess$.next(result.readOnly);
+            this.isSystemProcess$.next(result.systemProcess);
+            this.loading$.next(false);
+        }));
+        this.changesPending$ = new BehaviorSubject(false);
+        this.editParam$ = this.route.url.pipe(map$1(segments => {
+            const lastSegment = segments[segments.length - 1]?.path;
+            if (lastSegment === 'create') {
+                return 'create';
             }
-        });
+            const param = this.route.snapshot.paramMap.get('processDefinitionKey');
+            return param ? param : null;
+        }), filter(editParam => !!editParam));
+        this.context$ = getContextObservable(this.route);
+        this.managementParams$ = this.context$.pipe(filter(context => context === 'case'), switchMap(() => getCaseManagementRouteParams(this.route)));
+        this.params$ = getCaseManagementRouteParams(this.route);
+        this.hasEditPermissions$ = combineLatest([
+            this.params$,
+            this.context$,
+        ]).pipe(switchMap(([params, context]) => this.editPermissionsService.hasPermissionsToEditBasedOnContext(params?.caseDefinitionKey, params?.caseDefinitionVersionTag, context)));
+        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)
+            : of([])), map$1(result => result.map(resultItem => resultItem.processDefinition)), tap(processDefinitions => {
+            this.changesPending$.next(false);
+            this.pendingChanges = false;
+            this.setSelectedProcessDefinitionToLatest(processDefinitions);
+        }));
+        this.processDefinitionVersionsListItems$ = combineLatest([
+            this.processDefinitionVersions$,
+            this.processManagementEditorService.selectionProcessDefinition$,
+            this.translateService.stream('key'),
+        ]).pipe(map$1(([processDefinitionVersions, selectionProcessDefinition]) => processDefinitionVersions
+            .map(processDefinitionVersion => ({
+            id: processDefinitionVersion.version,
+            content: `${this.translateService.instant('processManagement.version')}${processDefinitionVersion.version}`,
+            selected: selectionProcessDefinition.version === processDefinitionVersion.version,
+            processDefinitionVersion,
+        }))
+            .sort((a, b) => b.id - a.id)));
+        this.compactMode$ = this.pageHeaderService.compactMode$;
+        this.creatingNewProcess$ = new BehaviorSubject(false);
+        this.extraSpace = computed(() => this.processManagementService.context() === 'case' ? 0 : 0);
+        this.updatingProcessDefinitionCaseDefinition$ = new BehaviorSubject(false);
+        this._subscriptions = new Subscription();
+        this.shapeAddedHandler = (event) => {
+            this.logger.debug('Shape added:', event);
+        };
+        this.shapeRemovedHandler = (event) => {
+            this.logger.debug('Shape removed:', event);
+            const activityId = event?.element?.id;
+            if (!activityId)
+                return;
+            this.processManagementEditorService.deleteProcessLink({ activityId });
+        };
+        this.elementChangedHandler = (event) => {
+            this.logger.debug('Element changed:', event);
+            const activityId = event?.element?.di?.id;
+            const businessId = event?.element?.id;
+            if (!activityId || !businessId)
+                return;
+            this.processManagementEditorService.updateProcessLinksOnIdChange(activityId, businessId);
+        };
+        this.setProcessManagementWindow();
     }
-    deploy() {
-        this.bpmnModeler.saveXML((err, xml) => {
-            this.processService.deployProcess(xml).subscribe(asd => {
-                if (this.processKey) {
-                    this.loadProcessVersions(this.processKey);
-                }
-                else {
-                    this.router.navigate(['/processes']);
-                }
-                this.alertService.success('Deployment successful');
-                this.selectedVersion = null;
-            });
-        });
+    ngAfterViewInit() {
+        this.pageTitleService.disableReset();
+        this.openParamsAndContextSubscription();
+        this.initModeler();
+        this.initViewer();
+        this.subscribeToOpenProcessLinkModalEvents();
+        this.subscribeToProcessLinkUpdateEvents();
+        this.subscribeToProcessLinkCreateEvents();
+        this.subscribeToProcessLinkDeleteEvents();
+        this.processLinkStateService.setEditMode(ProcessLinkEditMode.EMIT_EVENTS);
+        this.initEditing();
     }
-    reset() {
-        this.bpmnModeler.destroy();
-        this.bpmnViewer.destroy();
-        this.init();
+    ngOnDestroy() {
+        this._bpmnModeler?.destroy();
+        this._bpmnViewer?.destroy();
+        this._subscriptions.unsubscribe();
+        this.pageTitleService.enableReset();
+        this.pageTitleService.clearPageActionsViewContainerRef();
+        this.breadcrumbService.clearThirdBreadcrumb();
+        this.breadcrumbService.clearFourthBreadcrumb();
     }
-    download() {
-        this.bpmnModeler.saveXML((err, xml) => {
-            const file = new Blob([xml], { type: 'text/xml' });
+    export(isReadOnlyProcess) {
+        (isReadOnlyProcess ? from(this._bpmnViewer.saveXML()) : from(this._bpmnModeler.saveXML()))
+            .pipe(take(1))
+            .subscribe(result => {
+            const file = new Blob([result.xml ?? ''], { type: 'text/xml' });
             const link = document.createElement('a');
             link.download = 'diagram.bpmn';
             link.href = window.URL.createObjectURL(file);
@@ -278,72 +944,640 @@ class ProcessManagementBuilderComponent {
             link.remove();
         });
     }
-    loadEmptyBpmn() {
-        const url = '/assets/bpmn/initial.bpmn';
-        this.http
-            .get(url, {
-            headers: { observe: 'response' },
-            responseType: 'text',
-        })
-            .subscribe((xml) => {
-            this.bpmnModeler.importXML(xml);
-            this.bpmnViewer.importXML(xml);
+    deployChanges(isReadOnlyProcess) {
+        combineLatest([
+            from(isReadOnlyProcess ? this._bpmnViewer.saveXML() : this._bpmnModeler.saveXML()),
+            this.processManagementEditorService.processLinksForSelectedDefinition$,
+            this.processManagementEditorService.selectionProcessDefinition$,
+            this.context$,
+            this.managementParams$.pipe(startWith(null)),
+        ])
+            .pipe(take(1), switchMap(([result, processLinks, selectedProcessDefinition, context, params]) => {
+            if (context === 'case') {
+                return this.processLinkService.deployProcessWithProcessLinksForCase(processLinks, selectedProcessDefinition.id, !isReadOnlyProcess ? (result?.xml ?? '') : null, params?.caseDefinitionKey ?? '', params?.caseDefinitionVersionTag ?? '', this.canInitializeDocument$.getValue(), this.startableByUser$.getValue());
+            }
+            return this.processLinkService.deployProcessWithProcessLinks(processLinks, selectedProcessDefinition.id, !isReadOnlyProcess ? (result?.xml ?? '') : null);
+        }), switchMap(() => this.context$))
+            .subscribe({
+            next: context => {
+                if (context === 'independent') {
+                    this.pendingChanges = false;
+                    this.reload();
+                    this.showNotification('success');
+                }
+                else {
+                    this.pendingChanges = false;
+                    this.navigateBack('success');
+                }
+            },
+            error: () => {
+                this.showNotification('error');
+            },
         });
     }
-    getElementTemplates() {
-        const templateObs = [];
-        for (const file of this.elementTemplateFiles) {
-            templateObs.push(this.http.get(`/assets/bpmn/element-templates/${file}.json`, {
-                headers: { observe: 'response' },
-                responseType: 'json',
+    deployNewProcessDefinition() {
+        combineLatest([
+            from(this._bpmnModeler.saveXML()),
+            this.processManagementEditorService.processLinksForSelectedDefinition$,
+            this.context$,
+            this.managementParams$.pipe(startWith(null)),
+        ])
+            .pipe(take(1), switchMap(([result, processLinks, context, params]) => {
+            const mappedProcessLinks = processLinks.map(link => ({
+                ...link,
+                processDefinitionId: '-',
             }));
-        }
-        return templateObs;
-    }
-    setLatestVersion() {
-        this.selectedVersion = this.processDefinitionVersions.reduce((acc, version) => version.version > acc.version ? version : acc);
-        this.loadProcessBpmn();
-    }
-    loadProcessVersions(processDefinitionKey) {
-        this.processService
-            .getProcessDefinitionVersions(processDefinitionKey)
-            .subscribe((processDefinitionVersions) => {
-            this.processDefinitionVersions = processDefinitionVersions;
-            this.pageTitleService.setCustomPageTitle(processDefinitionVersions[processDefinitionVersions.length - 1].name);
-            this.setLatestVersion();
+            return context === 'independent'
+                ? this.processLinkService.deployProcessWithProcessLinks(mappedProcessLinks, null, result.xml ?? '')
+                : this.processLinkService.deployProcessWithProcessLinksForCase(mappedProcessLinks, null, result.xml ?? '', params.caseDefinitionKey, params.caseDefinitionVersionTag, this.canInitializeDocument$.getValue(), this.startableByUser$.getValue());
+        }))
+            .subscribe({
+            next: () => {
+                this.pendingChanges = false;
+                this.navigateBack('success');
+            },
+            error: () => {
+                this.showNotification('error');
+            },
         });
     }
-    compareProcessDefinitions(pd1, pd2) {
-        if (pd1 === null && pd2 === null) {
-            return true;
-        }
-        if (pd1 === null || pd2 === null) {
-            return false;
-        }
-        return pd1.id === pd2.id;
+    selectedVersionChange(event) {
+        this.processManagementEditorService.selectionProcessDefinition$
+            .pipe(take(1))
+            .subscribe(selectedVersion => {
+            if (selectedVersion.id !== event.item.processDefinitionVersion.id) {
+                this.processManagementEditorService.setSelectedProcessDefinition(event?.item?.processDefinitionVersion);
+                this.changesPending$.next(false);
+            }
+        });
     }
-    loadProcessBpmn() {
-        this.processService.getProcessDefinitionXml(this.selectedVersion.id).subscribe(result => {
-            this.bpmnModeler.importXML(result['bpmn20Xml']);
-            this.bpmnViewer.importXML(result['bpmn20Xml']);
-            this.isReadOnlyProcess$.next(result.readOnly);
-            this.isSystemProcess$.next(result.systemProcess);
+    navigateBack(notification) {
+        this.router.navigate(['../'], { relativeTo: this.route });
+        if (!notification)
+            return;
+        this.showNotification(notification);
+    }
+    onProcessToggleChange(field, value) {
+        if (field === 'canInitializeDocument')
+            this.canInitializeDocument$.next(value);
+        if (field === 'startableByUser')
+            this.startableByUser$.next(value);
+        this.changesPending$.next(true);
+    }
+    setProcessManagementWindow() {
+        const processManagementWindow = window;
+        if (!processManagementWindow)
+            return;
+        processManagementWindow.processManagementEditorService = this.processManagementEditorService;
+        processManagementWindow.translateService = this.translateService;
+        processManagementWindow.pluginTranslationService = this.pluginTranslationService;
+    }
+    showNotification(notification) {
+        this.notificationService.showToast({
+            caption: this.translateService.instant(`processManagement.${notification}Notification`),
+            type: notification,
+            title: this.translateService.instant(`interface.${notification}`),
+        });
+    }
+    setSelectedProcessDefinitionToLatest(processDefinitions) {
+        if ((processDefinitions || []).length === 0)
+            return;
+        const latest = processDefinitions.reduce((acc, version) => version.version > acc.version ? version : acc);
+        this.processManagementEditorService.setSelectedProcessDefinition(latest);
+    }
+    initModeler() {
+        this._bpmnModeler = new Modeler({
+            additionalModules: [
+                BpmnPropertiesPanelModule,
+                BpmnPropertiesProviderModule,
+                CamundaPlatformPropertiesProviderModule,
+                camundaPlatformBehaviors,
+                ValtimoPropertiesProviderModule,
+            ],
+            moddleExtensions: { camunda: CamundaBpmnModdle },
+            propertiesPanel: { parent: this.modelerPanelElementRef.nativeElement },
+        });
+        this._bpmnModeler?.attachTo(this.modelerElementRef.nativeElement);
+        this._bpmnModeler.on('commandStack.changed', () => {
+            this.changesPending$.next(true);
+            this.pendingChanges = true;
+        });
+        this._bpmnModeler.on('import.done', () => {
+            const idMap = {};
+            const elementRegistry = this._bpmnModeler.get('elementRegistry');
+            elementRegistry.forEach(element => {
+                const activityId = element?.di?.id;
+                const businessId = element?.id;
+                if (!activityId || !businessId)
+                    return;
+                idMap[activityId] = businessId;
+            });
+            this.processManagementEditorService.setActivityIdBusinessIdMap(idMap);
+            this.listenToActivityChangesOnModeler();
         });
     }
+    initViewer() {
+        const disableCommands = () => {
+            const commandStack = this._bpmnViewer.get('commandStack');
+            const originalExecute = commandStack?.execute?.bind(commandStack);
+            if (commandStack?.execute) {
+                commandStack.execute = (command, context) => {
+                    if (command === 'elements.delete' ||
+                        command === 'elements.copy' ||
+                        command === 'elements.paste' ||
+                        command === 'elements.create') {
+                        return;
+                    }
+                    originalExecute(command, context);
+                };
+            }
+        };
+        const DisableBpmnWriteModule = {
+            paletteProvider: ['value', {}],
+            contextPadProvider: ['value', {}],
+            directEditing: [
+                'value',
+                {
+                    registerProvider: () => { },
+                    activate: () => { },
+                    deactivate: () => { },
+                    isActive: () => false,
+                },
+            ],
+            move: ['value', null],
+            resizeHandles: ['value', { addResizer: () => { }, removeResizers: () => { } }],
+        };
+        this._bpmnViewer = new Modeler({
+            additionalModules: [
+                DisableBpmnWriteModule,
+                BpmnPropertiesPanelModule,
+                ValtimoPropertiesProviderModule,
+            ],
+            moddleExtensions: { camunda: CamundaBpmnModdle },
+            propertiesPanel: { parent: this.viewerPanelElementRef.nativeElement },
+        });
+        this._bpmnViewer?.attachTo(this.viewerElementRef.nativeElement);
+        this._bpmnViewer.on('commandStack.changed', () => {
+            this.changesPending$.next(true);
+            this.pendingChanges = true;
+        });
+        this._bpmnViewer.on('import.done', () => {
+            disableCommands();
+        });
+    }
+    reload() {
+        this._reload$.next(null);
+    }
+    handleUpdateEvent(event) {
+        this.modalService.setModalData(event?.modalParams);
+        this.processLinkStateService.setModalParams(event?.modalParams);
+        this.processLinkStateService.setElementName(event?.modalParams?.element?.name ?? '');
+        this.processLinkStateService.selectProcessLink(event.processLink);
+        this.processLinkStateService.showModal();
+    }
+    handleCreateEvent(event) {
+        this.processLinkService
+            .getProcessLinkCandidates(event.modalParams.element.activityListenerType ?? '')
+            .subscribe(candidates => {
+            this.modalService.setModalData(event?.modalParams);
+            this.processLinkStateService.setModalParams(event?.modalParams);
+            this.processLinkStateService.setElementName(event?.modalParams?.element?.name ?? '');
+            this.processLinkStateService.setAvailableProcessLinkTypes(candidates);
+            this.processLinkStateService.showModal();
+        });
+    }
+    subscribeToOpenProcessLinkModalEvents() {
+        this._subscriptions.add(this.processManagementEditorService.openProcessLinkModalEvents$.subscribe(event => {
+            if (event.processLink) {
+                this.handleUpdateEvent(event);
+            }
+            else {
+                this.handleCreateEvent(event);
+            }
+        }));
+    }
+    subscribeToProcessLinkUpdateEvents() {
+        this._subscriptions.add(this.processLinkStateService.processLinkUpdateEvents$.subscribe(event => {
+            this.processManagementEditorService.updateProcessLink(event);
+            this.processLinkStateService.stopSaving();
+            this.processLinkStateService.closeModal();
+        }));
+    }
+    subscribeToProcessLinkCreateEvents() {
+        this._subscriptions.add(this.processLinkStateService.processLinkCreateEvents$.subscribe(event => {
+            this.processManagementEditorService.createProcessLink(event);
+            this.processLinkStateService.stopSaving();
+            this.processLinkStateService.closeModal();
+        }));
+    }
+    subscribeToProcessLinkDeleteEvents() {
+        this._subscriptions.add(this.processLinkStateService.processLinkDeleteEvents$.subscribe(event => {
+            this.processManagementEditorService.deleteProcessLink(event);
+            this.processLinkStateService.stopSaving();
+            this.processLinkStateService.closeModal();
+        }));
+    }
+    initIfCreate() {
+        if (this._selectedProcess$.getValue() !== 'create')
+            return;
+        this.creatingNewProcess$.next(true);
+        this._bpmnModeler?.importXML(EMPTY_BPMN);
+        this.isReadOnlyProcess$.next(false);
+        this.isSystemProcess$.next(false);
+        this.loading$.next(false);
+    }
+    listenToActivityChangesOnModeler() {
+        const eventBus = this._bpmnModeler.get('eventBus');
+        if (!eventBus)
+            return;
+        eventBus.on('shape.added', this.shapeAddedHandler);
+        eventBus.on('shape.removed', this.shapeRemovedHandler);
+        eventBus.on('element.changed', this.elementChangedHandler);
+    }
+    cleanUpListenersOnModeler() {
+        const eventBus = this._bpmnModeler.get('eventBus');
+        if (!eventBus)
+            return;
+        eventBus.off('shape.added', this.shapeAddedHandler);
+        eventBus.off('shape.removed', this.shapeRemovedHandler);
+        eventBus.off('element.changed', this.elementChangedHandler);
+    }
+    initProcessDefinition() {
+        this._subscriptions.add(this._selectedProcess$
+            .pipe(filter(selectedProcess => selectedProcess !== null && selectedProcess !== 'create'), distinctUntilChanged((previous, current) => isEqual(previous, current)), tap(() => this.loading$.next(true)))
+            .subscribe(result => {
+            const processDefinitionResult = result;
+            this.cleanUpListenersOnModeler();
+            this._bpmnModeler?.importXML(processDefinitionResult.bpmn20Xml);
+            this._bpmnViewer?.importXML(processDefinitionResult.bpmn20Xml);
+            this.canInitializeDocument$.next(!!processDefinitionResult?.processCaseLink?.canInitializeDocument);
+            this.startableByUser$.next(!!processDefinitionResult?.processCaseLink?.startableByUser);
+            this.loading$.next(false);
+        }));
+    }
+    openParamsAndContextSubscription() {
+        this._subscriptions.add(getCaseManagementRouteParamsAndContext(this.route).subscribe(([context, params]) => {
+            if (context)
+                this.processManagementService.context = context;
+            if (params) {
+                this.processManagementService.setParams(params.caseDefinitionKey, params.caseDefinitionVersionTag);
+            }
+            this.initBreadcrumbs(params, context);
+            this.processManagementEditorService.setCaseManagementRouteParams(context, params);
+        }));
+    }
+    initBreadcrumbs(params, context) {
+        if (context === 'independent')
+            return;
+        const route = `/case-management/case/${params.caseDefinitionKey}/version/${params.caseDefinitionVersionTag}`;
+        this.breadcrumbService.setThirdBreadcrumb({
+            route: [route],
+            content: `${params.caseDefinitionKey} (${params.caseDefinitionVersionTag})`,
+            href: route,
+        });
+        const routeWithForms = `${route}/processes`;
+        this.breadcrumbService.setFourthBreadcrumb({
+            route: [routeWithForms],
+            content: this.translateService.instant('caseManagement.tabs.processes'),
+            href: routeWithForms,
+        });
+    }
+    initEditing() {
+        combineLatest([this.editParam$, this.managementParams$.pipe(startWith(null)), this.context$])
+            .pipe(take(1), switchMap(([editParam, params, context]) => {
+            if (editParam === 'create') {
+                this._selectedProcess$.next('create');
+                this.initIfCreate();
+                return of(null);
+            }
+            return context === 'case'
+                ? this.processManagementService.getProcessDefinitionForCase(params.caseDefinitionKey, params.caseDefinitionVersionTag, editParam)
+                : this.processManagementService
+                    .getUnlinkedProcessDefinitionsByKey(editParam)
+                    .pipe(map$1(processDefinitionResults => processDefinitionResults[0]));
+        }), tap(res => {
+            if (res) {
+                this._selectedProcess$.next(res);
+                this.processManagementEditorService.setSelectedProcessDefinition(res.processDefinition);
+                this.processManagementEditorService.setProcessLinksForSelectedDefinition(res.processLinks);
+                this.pageTitleService.setCustomPageTitle(res.processDefinition.name || '-');
+            }
+            this.initProcessDefinition();
+        }))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementBuilderComponent, deps: [{ token: i1$1.BreadcrumbService }, { token: i2$2.IconService }, { token: i3.NGXLogger }, { token: i1$1.ModalService }, { token: i2$1.GlobalNotificationService }, { token: i1$1.PageHeaderService }, { token: i1$1.PageTitleService }, { token: i5.ProcessLinkService }, { token: i5.ProcessLinkStateService }, { token: ProcessManagementEditorService }, { token: ProcessManagementService }, { token: i7.ProcessService }, { token: i8.ActivatedRoute }, { token: i8.Router }, { token: i4.TranslateService }, { token: i10.PluginTranslationService }, { token: i2$1.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ProcessManagementBuilderComponent, isStandalone: true, selector: "valtimo-process-management-builder", providers: [
+            ProcessManagementEditorService,
+            ProcessLinkStateService,
+            ProcessLinkStepService,
+            ProcessLinkButtonService,
+        ], viewQueries: [{ propertyName: "modelerElementRef", first: true, predicate: ["modeler"], descendants: true }, { propertyName: "modelerPanelElementRef", first: true, predicate: ["modelerPanel"], descendants: true }, { propertyName: "viewerElementRef", first: true, predicate: ["viewer"], descendants: true }, { propertyName: "viewerPanelElementRef", first: true, predicate: ["viewerPanel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [extraSpace]=\"extraSpace()\"\n  [disableOverflow]=\"true\"\n  *ngIf=\"{\n    processDefinitionVersions: processDefinitionVersions$ | async,\n    selectedProcessDefinitionXml: selectedProcessDefinitionXml$ | async,\n    loading: loading$ | async,\n    isReadOnlyProcess: isReadOnlyProcess$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n  data-carbon-theme=\"g10\"\n  class=\"bpmn__container\"\n>\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'none' : 'flex'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #modeler></div>\n\n    <div class=\"bpmn__modeler-panel\" #modelerPanel></div>\n  </div>\n\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'flex' : 'none'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #viewer></div>\n\n    <div class=\"bpmn__modeler-panel\" #viewerPanel></div>\n  </div>\n</div>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"page-header-actions\"\n      *ngIf=\"{\n        processDefinitionVersionsListItems: processDefinitionVersionsListItems$ | async,\n        loading: loading$ | async,\n        changesPending: changesPending$ | async,\n        isReadOnlyProcess: isReadOnlyProcess$ | async,\n        isSystemProcess: isSystemProcess$ | async,\n        compactMode: compactMode$ | async,\n        creatingNewProcess: creatingNewProcess$ | async,\n        context: context$ | async,\n        hasEditPermissions: hasEditPermissions$ | async,\n        canInitializeDocument: canInitializeDocument$ | async,\n        startableByUser: startableByUser$ | async,\n        updatingProcessDefinitionCaseDefinition: updatingProcessDefinitionCaseDefinition$ | async,\n      } as actionsObs\"\n    >\n      <div class=\"page-header-actions__left-container\">\n        <cds-dropdown\n          *ngIf=\"!actionsObs.creatingNewProcess && actionsObs?.context === 'independent'\"\n          class=\"page-header-actions__version-dropdown\"\n          (selected)=\"selectedVersionChange($event)\"\n          [disabled]=\"\n            actionsObs.loading ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 0 ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 1\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n        >\n          <cds-dropdown-list\n            [items]=\"actionsObs.processDefinitionVersionsListItems || []\"\n          ></cds-dropdown-list>\n        </cds-dropdown>\n\n        <div class=\"page-header-actions__tags\">\n          <cds-tag\n            *ngIf=\"actionsObs.isReadOnlyProcess || !actionsObs.hasEditPermissions\"\n            type=\"blue\"\n            >{{ 'processManagement.readOnly' | translate }}</cds-tag\n          >\n\n          <cds-tag *ngIf=\"actionsObs.isSystemProcess\" type=\"red\">{{\n            'processManagement.systemProcess' | translate\n          }}</cds-tag>\n        </div>\n      </div>\n\n      <div class=\"page-header-actions__buttons\">\n        @if (actionsObs.context === 'case') {\n          <cds-tooltip\n            [description]=\"'processCaseConnection.processCreatesCaseTooltip' | translate\"\n          >\n            <cds-toggle\n              [onText]=\"'processManagement.canInitializeDocument' | translate\"\n              [offText]=\"'processManagement.canInitializeDocument' | translate\"\n              [checked]=\"actionsObs.canInitializeDocument\"\n              [disabled]=\"\n                actionsObs.loading ||\n                actionsObs.updatingProcessDefinitionCaseDefinition ||\n                !actionsObs.hasEditPermissions\n              \"\n              (checkedChange)=\"onProcessToggleChange('canInitializeDocument', $event)\"\n            ></cds-toggle>\n          </cds-tooltip>\n\n          <cds-tooltip\n            [description]=\"'processCaseConnection.startableWithinCaseTooltip' | translate\"\n          >\n            <cds-toggle\n              [onText]=\"'processManagement.startableByUser' | translate\"\n              [offText]=\"'processManagement.startableByUser' | translate\"\n              [checked]=\"actionsObs.startableByUser\"\n              [disabled]=\"\n                actionsObs.loading ||\n                actionsObs.updatingProcessDefinitionCaseDefinition ||\n                !actionsObs.hasEditPermissions\n              \"\n              (checkedChange)=\"onProcessToggleChange('startableByUser', $event)\"\n            ></cds-toggle\n          ></cds-tooltip>\n        }\n\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"arrow--left\" size=\"16\"></svg>\n\n          <span>{{ 'interface.back' | translate }}</span>\n        </button>\n\n        <button\n          [disabled]=\"!actionsObs.changesPending\"\n          cdsButton=\"primary\"\n          (click)=\"\n            !actionsObs.creatingNewProcess\n              ? deployChanges(actionsObs.isReadOnlyProcess)\n              : deployNewProcessDefinition()\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n        >\n          {{ 'processManagement.deploy' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"deploy\" size=\"16\"></svg>\n        </button>\n\n        <cds-overflow-menu class=\"overflow-button\">\n          <cds-overflow-menu-option\n            [disabled]=\"actionsObs.loading\"\n            (selected)=\"export(actionsObs.isReadOnlyProcess)\"\n            >{{ 'interface.export' | translate }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.bpmn__container{position:relative;background-color:var(--cds-layer);width:100%}.bpmn__modeler{width:100%;height:100%;flex-direction:row;padding:1px;box-sizing:border-box;outline:1px solid var(--cds-border-subtle);outline-offset:-1px}.bpmn__modeler ::ng-deep .djs-container>svg{outline:none!important}.bpmn__modeler-canvas{width:100%}.bpmn__modeler-panel{width:481px;padding-left:1px;box-shadow:inset 1px 0 0 0 var(--cds-border-subtle);box-sizing:border-box}.bpmn__loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--cds-background-selected)}.page-header-actions{display:flex;width:100%;justify-content:space-between}.page-header-actions__left-container{display:flex;gap:24px;align-items:flex-end}.page-header-actions__tags{display:flex;gap:8px;align-items:flex-end}.page-header-actions__version-dropdown{width:150px}.page-header-actions__buttons{display:flex;gap:16px;align-items:center}.page-header-actions__buttons cds-toggle{height:24px}.page-header-actions__buttons ::ng-deep .cds--toggle__label-text{display:none}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}::ng-deep .process-link-properties-panel{padding:8px 12px 16px;width:100%;display:flex;flex-direction:column;gap:16px}::ng-deep .process-link-properties-panel__buttons,::ng-deep .process-link-properties-panel__header{width:100%;display:flex;gap:16px}::ng-deep .process-link-properties-panel__header{align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--cds-border-subtle-00);padding-bottom:8px;padding-left:8px;padding-right:8px}::ng-deep .process-link-properties-panel__title{color:var(--cds-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:auto 0}::ng-deep .process-link-properties-panel__title-container{display:flex;flex-direction:column;gap:4px}::ng-deep .process-link-properties-panel__title-container :last-child{color:var(--cds-text-helper);font-style:italic}::ng-deep .process-link-properties-panel .cds--tag{margin:0}::ng-deep .process-link-properties-panel .cds--btn{flex-shrink:1;width:100%;display:flex;align-items:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "directive", type: FitPageDirective, selector: "[fitPage]", inputs: ["extraSpace", "disabled", "disableOverflow"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "directive", type: RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.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: DialogModule }, { kind: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-process-management-builder', standalone: true, imports: [
+                        CommonModule,
+                        FitPageDirective,
+                        LoadingModule,
+                        RenderInPageHeaderDirective,
+                        DropdownModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        ButtonModule,
+                        IconModule,
+                        TranslateModule,
+                        TagModule,
+                        ProcessLinkModule,
+                        ProcessLinkModule,
+                        DialogModule,
+                        ToggleModule,
+                        TooltipModule,
+                    ], providers: [
+                        ProcessManagementEditorService,
+                        ProcessLinkStateService,
+                        ProcessLinkStepService,
+                        ProcessLinkButtonService,
+                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  fitPage\n  [extraSpace]=\"extraSpace()\"\n  [disableOverflow]=\"true\"\n  *ngIf=\"{\n    processDefinitionVersions: processDefinitionVersions$ | async,\n    selectedProcessDefinitionXml: selectedProcessDefinitionXml$ | async,\n    loading: loading$ | async,\n    isReadOnlyProcess: isReadOnlyProcess$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n  data-carbon-theme=\"g10\"\n  class=\"bpmn__container\"\n>\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'none' : 'flex'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #modeler></div>\n\n    <div class=\"bpmn__modeler-panel\" #modelerPanel></div>\n  </div>\n\n  <div\n    class=\"bpmn__modeler\"\n    [style.display]=\"obs.isReadOnlyProcess || !obs.hasEditPermissions ? 'flex' : 'none'\"\n  >\n    <div class=\"bpmn__modeler-canvas\" #viewer></div>\n\n    <div class=\"bpmn__modeler-panel\" #viewerPanel></div>\n  </div>\n</div>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"page-header-actions\"\n      *ngIf=\"{\n        processDefinitionVersionsListItems: processDefinitionVersionsListItems$ | async,\n        loading: loading$ | async,\n        changesPending: changesPending$ | async,\n        isReadOnlyProcess: isReadOnlyProcess$ | async,\n        isSystemProcess: isSystemProcess$ | async,\n        compactMode: compactMode$ | async,\n        creatingNewProcess: creatingNewProcess$ | async,\n        context: context$ | async,\n        hasEditPermissions: hasEditPermissions$ | async,\n        canInitializeDocument: canInitializeDocument$ | async,\n        startableByUser: startableByUser$ | async,\n        updatingProcessDefinitionCaseDefinition: updatingProcessDefinitionCaseDefinition$ | async,\n      } as actionsObs\"\n    >\n      <div class=\"page-header-actions__left-container\">\n        <cds-dropdown\n          *ngIf=\"!actionsObs.creatingNewProcess && actionsObs?.context === 'independent'\"\n          class=\"page-header-actions__version-dropdown\"\n          (selected)=\"selectedVersionChange($event)\"\n          [disabled]=\"\n            actionsObs.loading ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 0 ||\n            (actionsObs.processDefinitionVersionsListItems || []).length === 1\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n        >\n          <cds-dropdown-list\n            [items]=\"actionsObs.processDefinitionVersionsListItems || []\"\n          ></cds-dropdown-list>\n        </cds-dropdown>\n\n        <div class=\"page-header-actions__tags\">\n          <cds-tag\n            *ngIf=\"actionsObs.isReadOnlyProcess || !actionsObs.hasEditPermissions\"\n            type=\"blue\"\n            >{{ 'processManagement.readOnly' | translate }}</cds-tag\n          >\n\n          <cds-tag *ngIf=\"actionsObs.isSystemProcess\" type=\"red\">{{\n            'processManagement.systemProcess' | translate\n          }}</cds-tag>\n        </div>\n      </div>\n\n      <div class=\"page-header-actions__buttons\">\n        @if (actionsObs.context === 'case') {\n          <cds-tooltip\n            [description]=\"'processCaseConnection.processCreatesCaseTooltip' | translate\"\n          >\n            <cds-toggle\n              [onText]=\"'processManagement.canInitializeDocument' | translate\"\n              [offText]=\"'processManagement.canInitializeDocument' | translate\"\n              [checked]=\"actionsObs.canInitializeDocument\"\n              [disabled]=\"\n                actionsObs.loading ||\n                actionsObs.updatingProcessDefinitionCaseDefinition ||\n                !actionsObs.hasEditPermissions\n              \"\n              (checkedChange)=\"onProcessToggleChange('canInitializeDocument', $event)\"\n            ></cds-toggle>\n          </cds-tooltip>\n\n          <cds-tooltip\n            [description]=\"'processCaseConnection.startableWithinCaseTooltip' | translate\"\n          >\n            <cds-toggle\n              [onText]=\"'processManagement.startableByUser' | translate\"\n              [offText]=\"'processManagement.startableByUser' | translate\"\n              [checked]=\"actionsObs.startableByUser\"\n              [disabled]=\"\n                actionsObs.loading ||\n                actionsObs.updatingProcessDefinitionCaseDefinition ||\n                !actionsObs.hasEditPermissions\n              \"\n              (checkedChange)=\"onProcessToggleChange('startableByUser', $event)\"\n            ></cds-toggle\n          ></cds-tooltip>\n        }\n\n        <button\n          *ngIf=\"actionsObs.context === 'case'\"\n          cdsButton=\"secondary\"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n          (click)=\"navigateBack(null)\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"arrow--left\" size=\"16\"></svg>\n\n          <span>{{ 'interface.back' | translate }}</span>\n        </button>\n\n        <button\n          [disabled]=\"!actionsObs.changesPending\"\n          cdsButton=\"primary\"\n          (click)=\"\n            !actionsObs.creatingNewProcess\n              ? deployChanges(actionsObs.isReadOnlyProcess)\n              : deployNewProcessDefinition()\n          \"\n          [size]=\"actionsObs.compactMode ? 'sm' : 'md'\"\n        >\n          {{ 'processManagement.deploy' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"deploy\" size=\"16\"></svg>\n        </button>\n\n        <cds-overflow-menu class=\"overflow-button\">\n          <cds-overflow-menu-option\n            [disabled]=\"actionsObs.loading\"\n            (selected)=\"export(actionsObs.isReadOnlyProcess)\"\n            >{{ 'interface.export' | translate }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.bpmn__container{position:relative;background-color:var(--cds-layer);width:100%}.bpmn__modeler{width:100%;height:100%;flex-direction:row;padding:1px;box-sizing:border-box;outline:1px solid var(--cds-border-subtle);outline-offset:-1px}.bpmn__modeler ::ng-deep .djs-container>svg{outline:none!important}.bpmn__modeler-canvas{width:100%}.bpmn__modeler-panel{width:481px;padding-left:1px;box-shadow:inset 1px 0 0 0 var(--cds-border-subtle);box-sizing:border-box}.bpmn__loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--cds-background-selected)}.page-header-actions{display:flex;width:100%;justify-content:space-between}.page-header-actions__left-container{display:flex;gap:24px;align-items:flex-end}.page-header-actions__tags{display:flex;gap:8px;align-items:flex-end}.page-header-actions__version-dropdown{width:150px}.page-header-actions__buttons{display:flex;gap:16px;align-items:center}.page-header-actions__buttons cds-toggle{height:24px}.page-header-actions__buttons ::ng-deep .cds--toggle__label-text{display:none}.valtimo-process-builder__header{display:flex;justify-content:space-between}.valtimo-process-builder__actions>*:not(:last-child){margin-right:8px}::ng-deep .process-link-properties-panel{padding:8px 12px 16px;width:100%;display:flex;flex-direction:column;gap:16px}::ng-deep .process-link-properties-panel__buttons,::ng-deep .process-link-properties-panel__header{width:100%;display:flex;gap:16px}::ng-deep .process-link-properties-panel__header{align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--cds-border-subtle-00);padding-bottom:8px;padding-left:8px;padding-right:8px}::ng-deep .process-link-properties-panel__title{color:var(--cds-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:auto 0}::ng-deep .process-link-properties-panel__title-container{display:flex;flex-direction:column;gap:4px}::ng-deep .process-link-properties-panel__title-container :last-child{color:var(--cds-text-helper);font-style:italic}::ng-deep .process-link-properties-panel .cds--tag{margin:0}::ng-deep .process-link-properties-panel .cds--btn{flex-shrink:1;width:100%;display:flex;align-items:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.BreadcrumbService }, { type: i2$2.IconService }, { type: i3.NGXLogger }, { type: i1$1.ModalService }, { type: i2$1.GlobalNotificationService }, { type: i1$1.PageHeaderService }, { type: i1$1.PageTitleService }, { type: i5.ProcessLinkService }, { type: i5.ProcessLinkStateService }, { type: ProcessManagementEditorService }, { type: ProcessManagementService }, { type: i7.ProcessService }, { type: i8.ActivatedRoute }, { type: i8.Router }, { type: i4.TranslateService }, { type: i10.PluginTranslationService }, { type: i2$1.EditPermissionsService }], propDecorators: { modelerElementRef: [{
+                type: ViewChild,
+                args: ['modeler', { static: false }]
+            }], modelerPanelElementRef: [{
+                type: ViewChild,
+                args: ['modelerPanel', { static: false }]
+            }], viewerElementRef: [{
+                type: ViewChild,
+                args: ['viewer', { static: false }]
+            }], viewerPanelElementRef: [{
+                type: ViewChild,
+                args: ['viewerPanel', { static: false }]
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ProcessManagementListComponent {
+    constructor(iconService, notificationService, processManagementService, processManagementStateService, translateService, environmentService, route, editPermissionsService) {
+        this.iconService = iconService;
+        this.notificationService = notificationService;
+        this.processManagementService = processManagementService;
+        this.processManagementStateService = processManagementStateService;
+        this.translateService = translateService;
+        this.environmentService = environmentService;
+        this.route = route;
+        this.editPermissionsService = editPermissionsService;
+        this.processSelected = new EventEmitter();
+        this.context = this.processManagementService.context;
+        this.processToDelete$ = new BehaviorSubject(null);
+        this.showDeleteModal$ = new BehaviorSubject(false);
+        this.loading$ = new BehaviorSubject(true);
+        this.ACTION_ITEMS = [
+            { label: 'Delete', callback: this.onDeleteProcess.bind(this), type: 'danger' },
+        ];
+        this.context$ = getContextObservable(this.route);
+        this.processDefinitions$ = this.processManagementStateService.reloadDefinitions$.pipe(tap(() => this.loading$.next(true)), switchMap(() => this.processManagementService.processes$), tap(() => this.loading$.next(false)));
+        this.hasEditPermissions$ = combineLatest([
+            getCaseManagementRouteParams(this.route),
+            this.context$,
+        ]).pipe(switchMap(([params, context]) => {
+            return this.editPermissionsService.hasPermissionsToEditBasedOnContext(params?.caseDefinitionKey, params?.caseDefinitionVersionTag, context);
+        }));
+        this.FIELDS = [
+            { key: 'processDefinition.name', label: 'processManagement.name' },
+            { key: 'processDefinition.key', label: 'processManagement.key' },
+            {
+                key: 'processDefinition.readOnly',
+                label: 'processManagement.readOnly',
+                viewType: ViewType.BOOLEAN,
+            },
+            ...(this.processManagementService.context() === 'case'
+                ? [
+                    {
+                        key: 'processCaseLink.canInitializeDocument',
+                        label: 'processManagement.canInitializeDocument',
+                        viewType: ViewType.BOOLEAN,
+                    },
+                ]
+                : []),
+            ...(this.processManagementService.context() === 'case'
+                ? [
+                    {
+                        key: 'processCaseLink.startableByUser',
+                        label: 'processManagement.startableByUser',
+                        viewType: ViewType.BOOLEAN,
+                    },
+                ]
+                : []),
+        ];
+        this.iconService.registerAll([Upload16]);
+    }
+    editProcessDefinition(processDefinition) {
+        this.processSelected.emit(processDefinition);
+    }
+    openModal() {
+        this.processManagementStateService.openModal();
+    }
+    onCreateProcess() {
+        this.processSelected.emit('create');
+    }
+    onDeleteConfirm(processDefinition) {
+        (this.context() === 'case'
+            ? this.processManagementService.deleteProcess(processDefinition.key)
+            : this.processManagementService.deleteUnlinkedProcess(processDefinition.key)).subscribe(() => {
+            this.processManagementStateService.reloadDefinitions();
+            this.notificationService.showToast({
+                title: this.translateService.instant(`interface.delete`),
+                caption: this.translateService.instant(`processManagement.deleteNotification`),
+                type: 'success',
+            });
+        });
+    }
+    onDeleteProcess(process) {
+        this.processToDelete$.next(process.processDefinition);
+        this.showDeleteModal$.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementListComponent, deps: [{ token: i2$2.IconService }, { token: i2$1.GlobalNotificationService }, { token: ProcessManagementService }, { token: ProcessManagementStateService }, { token: i4.TranslateService }, { token: i2$1.EnvironmentService }, { token: i8.ActivatedRoute }, { token: i2$1.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ProcessManagementListComponent, isStandalone: true, selector: "valtimo-process-management-list", outputs: { processSelected: "processSelected" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"ACTION_ITEMS\"\n  [showActionItems]=\"hasEditPermissions$ | async\"\n  [fields]=\"FIELDS\"\n  [header]=\"false\"\n  [items]=\"processDefinitions$ | async\"\n  [loading]=\"loading$ | async\"\n  (rowClicked)=\"editProcessDefinition($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <button\n      *ngIf=\"hasEditPermissions$ | async\"\n      cdsButton=\"ghost\"\n      iconOnly=\"true\"\n      (click)=\"openModal()\"\n    >\n      <svg cdsIcon=\"upload\" size=\"16\"></svg>\n    </button>\n\n    <ng-container [ngTemplateOutlet]=\"createProcess\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"createProcess\"\n    [title]=\"'processManagement.noResults.title' | translate\"\n    [description]=\"'processManagement.noResults.' + context() + 'Description' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"processManagement.deleteModal.content\"\n  [outputOnConfirm]=\"processToDelete$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"processManagement.deleteModal.title\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #createProcess>\n  <button *ngIf=\"hasEditPermissions$ | async\" cdsButton=\"primary\" (click)=\"onCreateProcess()\">\n    {{ 'processManagement.createProcess' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-process-management-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ButtonModule,
+                        CarbonListModule,
+                        IconModule,
+                        IconModule,
+                        TranslateModule,
+                        ConfirmationModalModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"ACTION_ITEMS\"\n  [showActionItems]=\"hasEditPermissions$ | async\"\n  [fields]=\"FIELDS\"\n  [header]=\"false\"\n  [items]=\"processDefinitions$ | async\"\n  [loading]=\"loading$ | async\"\n  (rowClicked)=\"editProcessDefinition($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <button\n      *ngIf=\"hasEditPermissions$ | async\"\n      cdsButton=\"ghost\"\n      iconOnly=\"true\"\n      (click)=\"openModal()\"\n    >\n      <svg cdsIcon=\"upload\" size=\"16\"></svg>\n    </button>\n\n    <ng-container [ngTemplateOutlet]=\"createProcess\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"createProcess\"\n    [title]=\"'processManagement.noResults.title' | translate\"\n    [description]=\"'processManagement.noResults.' + context() + 'Description' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"processManagement.deleteModal.content\"\n  [outputOnConfirm]=\"processToDelete$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"processManagement.deleteModal.title\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #createProcess>\n  <button *ngIf=\"hasEditPermissions$ | async\" cdsButton=\"primary\" (click)=\"onCreateProcess()\">\n    {{ 'processManagement.createProcess' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i2$2.IconService }, { type: i2$1.GlobalNotificationService }, { type: ProcessManagementService }, { type: ProcessManagementStateService }, { type: i4.TranslateService }, { type: i2$1.EnvironmentService }, { type: i8.ActivatedRoute }, { type: i2$1.EditPermissionsService }], propDecorators: { processSelected: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ProcessManagementUploadComponent {
+    constructor(formBuilder, notificationService, processManagementService, processManagementStateService, translateService) {
+        this.formBuilder = formBuilder;
+        this.notificationService = notificationService;
+        this.processManagementService = processManagementService;
+        this.processManagementStateService = processManagementStateService;
+        this.translateService = translateService;
+        this.modalOpen$ = this.processManagementStateService.openModal$;
+        this.ACCEPTED_FILES = ['bpmn'];
+        this.form = this.formBuilder.group({
+            file: this.formBuilder.control(new Set(), [Validators.required]),
+        });
+        this.fileSelected$ = this.form.get('file')?.valueChanges.pipe(startWith(null), map$1(value => !!(value instanceof Set && value.size > 0)));
+    }
+    closeModal() {
+        this.processManagementStateService.closeModal();
+        setTimeout(() => {
+            this.form.reset();
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    uploadProcessBpmn() {
+        const bpmnFile = this.form.value?.file?.values()?.next()?.value?.file;
+        if (!bpmnFile)
+            return;
+        this.processManagementService.deployBpmn(bpmnFile).subscribe({
+            next: () => {
+                this.notificationService.showNotification({
+                    type: 'success',
+                    title: this.translateService.instant('processManagement.upload.success'),
+                });
+                this.closeModal();
+                this.processManagementStateService.reloadDefinitions();
+            },
+            error: () => {
+                this.notificationService.showNotification({
+                    type: 'error',
+                    title: this.translateService.instant('processManagement.upload.failure'),
+                });
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementUploadComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.GlobalNotificationService }, { token: ProcessManagementService }, { token: ProcessManagementStateService }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ProcessManagementUploadComponent, isStandalone: true, selector: "valtimo-process-management-upload", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"modalOpen$ | async\" size=\"sm\" (close)=\"closeModal()\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'processManagement.upload.modalTitle' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\">\n    <cds-file-uploader\n      [accept]=\"ACCEPTED_FILES\"\n      [buttonText]=\"'processManagement.upload.buttonText' | translate\"\n      [description]=\"'processManagement.upload.description' | translate\"\n      [multiple]=\"false\"\n      [title]=\"'processManagement.upload.title' | translate\"\n      buttonType=\"primary\"\n      formControlName=\"file\"\n    >\n    </cds-file-uploader>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"(fileSelected$ | async) === false\"\n      (click)=\"uploadProcessBpmn()\"\n    >\n      {{ 'interface.upload' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-process-management-upload', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        FileUploaderModule,
+                        ModalModule,
+                        LayerModule,
+                        ReactiveFormsModule,
+                        ButtonModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"modalOpen$ | async\" size=\"sm\" (close)=\"closeModal()\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'processManagement.upload.modalTitle' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\">\n    <cds-file-uploader\n      [accept]=\"ACCEPTED_FILES\"\n      [buttonText]=\"'processManagement.upload.buttonText' | translate\"\n      [description]=\"'processManagement.upload.description' | translate\"\n      [multiple]=\"false\"\n      [title]=\"'processManagement.upload.title' | translate\"\n      buttonType=\"primary\"\n      formControlName=\"file\"\n    >\n    </cds-file-uploader>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"(fileSelected$ | async) === false\"\n      (click)=\"uploadProcessBpmn()\"\n    >\n      {{ 'interface.upload' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.GlobalNotificationService }, { type: ProcessManagementService }, { type: ProcessManagementStateService }, { type: i4.TranslateService }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ProcessManagementComponent {
+    constructor(processManagementService, route, router) {
+        this.processManagementService = processManagementService;
+        this.route = route;
+        this.router = router;
+        this.context$ = getContextObservable(this.route);
+        this.params$ = this.context$.pipe(filter$1(context => context === 'case'), switchMap(() => getCaseManagementRouteParams(this.route)), distinctUntilChanged((previous, current) => isEqual(previous, current)));
+        this.paramsAreSet$ = new BehaviorSubject(false);
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.openParamsAndContextSubscription();
+    }
     ngOnDestroy() {
-        this.bpmnModeler.destroy();
-        this.bpmnViewer.destroy();
+        this._subscriptions.unsubscribe();
+    }
+    onProcessSelected(selectedProcessEvent) {
+        const editParam = selectedProcessEvent === 'create' ? 'create' : selectedProcessEvent?.processDefinition?.key;
+        this.router.navigate([editParam], {
+            relativeTo: this.route,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementBuilderComponent, deps: [{ token: i2.HttpClient }, { token: i1.ProcessService }, { token: i3.LayoutService }, { token: i4.AlertService }, { token: i5.ActivatedRoute }, { token: i5.Router }, { token: i4.PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProcessManagementBuilderComponent, selector: "valtimo-process-management-builder", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"mb-5\" [ngClass]=\"{'main-content pt-0': !layoutService.isFullscreen}\">\n  <div [ngClass]=\"{'container-fluid': !layoutService.isFullscreen}\">\n    <div class=\"text-right\">\n      <div\n        class=\"btn-group mt-m3px mb-3\"\n        *ngIf=\"(selectedVersion !== null || processKey === null) && !layoutService.isFullscreen\"\n      >\n        <button class=\"btn btn-primary btn-space\" (click)=\"download()\">\n          <i class=\"icon mdi mdi-download mr-1\"></i>{{ 'processManagement.download' | translate }}\n        </button>\n        <button\n          class=\"btn btn-success btn-space\"\n          (click)=\"deploy()\"\n          *ngIf=\"(isReadOnlyProcess$ | async) === false\"\n          [ngClass]=\"{'mr-0': selectedVersion !== null}\"\n        >\n          <i class=\"icon mdi mdi-upload mr-1\"></i>{{ 'processManagement.deploy' | translate }}\n        </button>\n        <button\n          *ngIf=\"selectedVersion === null\"\n          class=\"btn btn-danger btn-space mr-0\"\n          (click)=\"reset()\"\n        >\n          <i class=\"icon mdi mdi-delete mr-1\"></i>{{ 'processManagement.clear' | translate }}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"modeler pl-3 pr-3 mb-3\" [ngClass]=\"{'mt-4': !layoutService.isFullscreen}\">\n      <div\n        class=\"row pt-4 pb-3 bg-light versions\"\n        *ngIf=\"processDefinitionVersions\"\n        [ngClass]=\"{'border-bottom-0': selectedVersion !== null}\"\n      >\n        <div class=\"col-md-4\" *ngIf=\"processDefinitionVersions.length > 0\">\n          <span class=\"badge badge-pill badge-info mr-1\" *ngIf=\"isReadOnlyProcess$ | async\">\n            {{ 'processManagement.readOnly' | translate }}\n          </span>\n          <span class=\"badge badge-pill badge-warning mr-1\" *ngIf=\"isSystemProcess$ | async\">\n            {{ 'processManagement.systemProcess' | translate }}\n          </span>\n        </div>\n        <div class=\"col-md-2 offset-md-2\">\n          <label for=\"processVersion\"><strong>Version</strong></label>\n          <select\n            id=\"processVersion\"\n            class=\"form-control select-version-control\"\n            [(ngModel)]=\"selectedVersion\"\n            (change)=\"loadProcessBpmn()\"\n            [compareWith]=\"compareProcessDefinitions\"\n          >\n            <option [ngValue]=\"null\" disabled selected>Version</option>\n            <option\n              *ngFor=\"let processDefinition of processDefinitionVersions\"\n              [ngValue]=\"processDefinition\"\n            >\n              {{ processDefinition.version }}\n            </option>\n          </select>\n        </div>\n        <div\n          class=\"col-md-auto d-flex align-items-end text-right\"\n          *ngIf=\"(selectedVersion !== null || processKey === null) && layoutService.isFullscreen\"\n        >\n          <div class=\"btn-group\">\n            <button class=\"btn btn-primary btn-space\" (click)=\"download()\">\n              <i class=\"icon mdi mdi-download mr-1\"></i\n              >{{ 'processManagement.download' | translate }}\n            </button>\n            <button\n              class=\"btn btn-success btn-space\"\n              (click)=\"deploy()\"\n              *ngIf=\"(isReadOnlyProcess$ | async) === false\"\n            >\n              <i class=\"icon mdi mdi-upload mr-1\"></i>{{ 'processManagement.deploy' | translate }}\n            </button>\n            <button *ngIf=\"!selectedVersion\" class=\"btn btn-danger btn-space\" (click)=\"reset()\">\n              <i class=\"icon mdi mdi-delete mr-1\"></i>{{ 'processManagement.clear' | translate }}\n            </button>\n          </div>\n        </div>\n        <div\n          *ngIf=\"selectedVersion\"\n          class=\"col-md-1 fullscreen-toggle text-right\"\n          [ngClass]=\"{'offset-md-2': !layoutService.isFullscreen}\"\n        >\n          <i\n            class=\"fas\"\n            [ngClass]=\"{\n              'fa-expand-arrows-alt': !layoutService.isFullscreen,\n              'fa-compress-arrows-alt': layoutService.isFullscreen,\n            }\"\n            (click)=\"layoutService.toggleFullscreen()\"\n          ></i>\n        </div>\n      </div>\n      <div\n        *ngIf=\"(isSystemProcess$ | async) && (isReadOnlyProcess$ | async)\"\n        class=\"row bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'processManagement.readOnlySystemProcessWarningMessage'\"\n      ></div>\n      <div\n        *ngIf=\"(isSystemProcess$ | async) && (isReadOnlyProcess$ | async) === false\"\n        class=\"row bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'processManagement.systemProcessWarningMessage'\"\n      ></div>\n      <div [hidden]=\"!selectedVersion && processKey\" class=\"row bg-white diagram mb-3\">\n        <div id=\"canvas\" class=\"col-9\" [hidden]=\"isReadOnlyProcess$ | async\"></div>\n        <div id=\"properties\" class=\"col-3 pr-0\" [hidden]=\"isReadOnlyProcess$ | async\"></div>\n        <div\n          id=\"readOnlyCanvas\"\n          class=\"col-12\"\n          [hidden]=\"(isReadOnlyProcess$ | async) === false\"\n        ></div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".versions,.diagram{border:1px solid #dee2e6}.process-title{color:#6b6b6b;font-size:1.5rem}.fullscreen-toggle{font-size:2rem}.fullscreen-toggle>i{cursor:pointer}.modeler{height:90vh}.select-version-control{width:90px}#properties{border-left:1px solid #dee2e6;padding-left:0}#readOnlyCanvas{height:90vh}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    openParamsAndContextSubscription() {
+        this._subscriptions.add(combineLatest([this.context$, this.params$.pipe(startWith(null))]).subscribe(([context, params]) => {
+            if (context)
+                this.processManagementService.context = context;
+            if (params) {
+                this.processManagementService.setParams(params.caseDefinitionKey, params.caseDefinitionVersionTag);
+            }
+            this.paramsAreSet$.next(true);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementComponent, deps: [{ token: ProcessManagementService }, { token: i8.ActivatedRoute }, { token: i8.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ProcessManagementComponent, isStandalone: true, selector: "valtimo-process-management", providers: [TranslateService], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    paramsAreSet: paramsAreSet$ | async,\n  } as obs\"\n>\n  @if (obs.paramsAreSet) {\n    <valtimo-process-management-list\n      (processSelected)=\"onProcessSelected($event)\"\n    ></valtimo-process-management-list>\n\n    <valtimo-process-management-upload></valtimo-process-management-upload>\n  } @else {\n    <cds-loading></cds-loading>\n  }\n</ng-container>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "component", type: ProcessManagementListComponent, selector: "valtimo-process-management-list", outputs: ["processSelected"] }, { kind: "component", type: ProcessManagementUploadComponent, selector: "valtimo-process-management-upload" }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i2$2.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: NotificationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-process-management-builder', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"mb-5\" [ngClass]=\"{'main-content pt-0': !layoutService.isFullscreen}\">\n  <div [ngClass]=\"{'container-fluid': !layoutService.isFullscreen}\">\n    <div class=\"text-right\">\n      <div\n        class=\"btn-group mt-m3px mb-3\"\n        *ngIf=\"(selectedVersion !== null || processKey === null) && !layoutService.isFullscreen\"\n      >\n        <button class=\"btn btn-primary btn-space\" (click)=\"download()\">\n          <i class=\"icon mdi mdi-download mr-1\"></i>{{ 'processManagement.download' | translate }}\n        </button>\n        <button\n          class=\"btn btn-success btn-space\"\n          (click)=\"deploy()\"\n          *ngIf=\"(isReadOnlyProcess$ | async) === false\"\n          [ngClass]=\"{'mr-0': selectedVersion !== null}\"\n        >\n          <i class=\"icon mdi mdi-upload mr-1\"></i>{{ 'processManagement.deploy' | translate }}\n        </button>\n        <button\n          *ngIf=\"selectedVersion === null\"\n          class=\"btn btn-danger btn-space mr-0\"\n          (click)=\"reset()\"\n        >\n          <i class=\"icon mdi mdi-delete mr-1\"></i>{{ 'processManagement.clear' | translate }}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"modeler pl-3 pr-3 mb-3\" [ngClass]=\"{'mt-4': !layoutService.isFullscreen}\">\n      <div\n        class=\"row pt-4 pb-3 bg-light versions\"\n        *ngIf=\"processDefinitionVersions\"\n        [ngClass]=\"{'border-bottom-0': selectedVersion !== null}\"\n      >\n        <div class=\"col-md-4\" *ngIf=\"processDefinitionVersions.length > 0\">\n          <span class=\"badge badge-pill badge-info mr-1\" *ngIf=\"isReadOnlyProcess$ | async\">\n            {{ 'processManagement.readOnly' | translate }}\n          </span>\n          <span class=\"badge badge-pill badge-warning mr-1\" *ngIf=\"isSystemProcess$ | async\">\n            {{ 'processManagement.systemProcess' | translate }}\n          </span>\n        </div>\n        <div class=\"col-md-2 offset-md-2\">\n          <label for=\"processVersion\"><strong>Version</strong></label>\n          <select\n            id=\"processVersion\"\n            class=\"form-control select-version-control\"\n            [(ngModel)]=\"selectedVersion\"\n            (change)=\"loadProcessBpmn()\"\n            [compareWith]=\"compareProcessDefinitions\"\n          >\n            <option [ngValue]=\"null\" disabled selected>Version</option>\n            <option\n              *ngFor=\"let processDefinition of processDefinitionVersions\"\n              [ngValue]=\"processDefinition\"\n            >\n              {{ processDefinition.version }}\n            </option>\n          </select>\n        </div>\n        <div\n          class=\"col-md-auto d-flex align-items-end text-right\"\n          *ngIf=\"(selectedVersion !== null || processKey === null) && layoutService.isFullscreen\"\n        >\n          <div class=\"btn-group\">\n            <button class=\"btn btn-primary btn-space\" (click)=\"download()\">\n              <i class=\"icon mdi mdi-download mr-1\"></i\n              >{{ 'processManagement.download' | translate }}\n            </button>\n            <button\n              class=\"btn btn-success btn-space\"\n              (click)=\"deploy()\"\n              *ngIf=\"(isReadOnlyProcess$ | async) === false\"\n            >\n              <i class=\"icon mdi mdi-upload mr-1\"></i>{{ 'processManagement.deploy' | translate }}\n            </button>\n            <button *ngIf=\"!selectedVersion\" class=\"btn btn-danger btn-space\" (click)=\"reset()\">\n              <i class=\"icon mdi mdi-delete mr-1\"></i>{{ 'processManagement.clear' | translate }}\n            </button>\n          </div>\n        </div>\n        <div\n          *ngIf=\"selectedVersion\"\n          class=\"col-md-1 fullscreen-toggle text-right\"\n          [ngClass]=\"{'offset-md-2': !layoutService.isFullscreen}\"\n        >\n          <i\n            class=\"fas\"\n            [ngClass]=\"{\n              'fa-expand-arrows-alt': !layoutService.isFullscreen,\n              'fa-compress-arrows-alt': layoutService.isFullscreen,\n            }\"\n            (click)=\"layoutService.toggleFullscreen()\"\n          ></i>\n        </div>\n      </div>\n      <div\n        *ngIf=\"(isSystemProcess$ | async) && (isReadOnlyProcess$ | async)\"\n        class=\"row bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'processManagement.readOnlySystemProcessWarningMessage'\"\n      ></div>\n      <div\n        *ngIf=\"(isSystemProcess$ | async) && (isReadOnlyProcess$ | async) === false\"\n        class=\"row bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'processManagement.systemProcessWarningMessage'\"\n      ></div>\n      <div [hidden]=\"!selectedVersion && processKey\" class=\"row bg-white diagram mb-3\">\n        <div id=\"canvas\" class=\"col-9\" [hidden]=\"isReadOnlyProcess$ | async\"></div>\n        <div id=\"properties\" class=\"col-3 pr-0\" [hidden]=\"isReadOnlyProcess$ | async\"></div>\n        <div\n          id=\"readOnlyCanvas\"\n          class=\"col-12\"\n          [hidden]=\"(isReadOnlyProcess$ | async) === false\"\n        ></div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".versions,.diagram{border:1px solid #dee2e6}.process-title{color:#6b6b6b;font-size:1.5rem}.fullscreen-toggle{font-size:2rem}.fullscreen-toggle>i{cursor:pointer}.modeler{height:90vh}.select-version-control{width:90px}#properties{border-left:1px solid #dee2e6;padding-left:0}#readOnlyCanvas{height:90vh}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i2.HttpClient }, { type: i1.ProcessService }, { type: i3.LayoutService }, { type: i4.AlertService }, { type: i5.ActivatedRoute }, { type: i5.Router }, { type: i4.PageTitleService }] });
+            args: [{ selector: 'valtimo-process-management', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ProcessManagementListComponent,
+                        ProcessManagementUploadComponent,
+                        ProcessManagementBuilderComponent,
+                        LoadingModule,
+                        NotificationModule,
+                    ], providers: [TranslateService], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    paramsAreSet: paramsAreSet$ | async,\n  } as obs\"\n>\n  @if (obs.paramsAreSet) {\n    <valtimo-process-management-list\n      (processSelected)=\"onProcessSelected($event)\"\n    ></valtimo-process-management-list>\n\n    <valtimo-process-management-upload></valtimo-process-management-upload>\n  } @else {\n    <cds-loading></cds-loading>\n  }\n</ng-container>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: ProcessManagementService }, { type: i8.ActivatedRoute }, { type: i8.Router }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 /*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -362,27 +1596,42 @@ const routes = [
         path: 'processes',
         component: ProcessManagementComponent,
         canActivate: [AuthGuardService],
-        data: { title: 'Processes', roles: [ROLE_ADMIN] },
+        data: {
+            title: 'Processes',
+            roles: [ROLE_ADMIN],
+            context: 'independent',
+        },
     },
     {
         path: 'processes/create',
         component: ProcessManagementBuilderComponent,
         canActivate: [AuthGuardService],
-        data: { title: 'Create new Process', roles: [ROLE_ADMIN] },
+        canDeactivate: [pendingChangesGuard],
+        data: {
+            title: 'Create new Process',
+            roles: [ROLE_ADMIN],
+            context: 'independent',
+        },
     },
     {
-        path: 'processes/process/:key',
+        path: 'processes/:processDefinitionKey',
         component: ProcessManagementBuilderComponent,
         canActivate: [AuthGuardService],
-        data: { title: 'Process details', roles: [ROLE_ADMIN], customPageTitle: true },
+        canDeactivate: [pendingChangesGuard],
+        data: {
+            title: 'Process details',
+            roles: [ROLE_ADMIN],
+            customPageTitle: true,
+            context: 'independent',
+        },
     },
 ];
 class ProcessManagementRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementRoutingModule, imports: [CommonModule, i5.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementRoutingModule, imports: [CommonModule, RouterModule.forChild(routes), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementRoutingModule, imports: [CommonModule, i8.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementRoutingModule, imports: [CommonModule, RouterModule.forChild(routes), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -392,7 +1641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 /*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -407,46 +1656,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * limitations under the License.
  */
 class ProcessManagementModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementModule, declarations: [ProcessManagementComponent,
-            ProcessManagementBuilderComponent,
-            ProcessManagementListComponent,
-            ProcessManagementUploadComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementModule, imports: [CommonModule,
             ProcessManagementRoutingModule,
             WidgetModule,
-            ListModule,
             FormsModule,
-            TranslateModule], exports: [ProcessManagementComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementModule, imports: [CommonModule,
+            TranslateModule,
+            ProcessLinkModule,
+            ProcessManagementComponent,
+            ProcessManagementBuilderComponent,
+            CarbonListModule,
+            ButtonModule,
+            IconModule,
+            DropdownModule,
+            ModalModule,
+            NotificationModule,
+            RadioModule,
+            ReactiveFormsModule,
+            ModalModule,
+            FileUploaderModule,
+            LayerModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementModule, imports: [CommonModule,
             ProcessManagementRoutingModule,
             WidgetModule,
-            ListModule,
             FormsModule,
-            TranslateModule] }); }
+            TranslateModule,
+            ProcessLinkModule,
+            ProcessManagementComponent,
+            ProcessManagementBuilderComponent,
+            CarbonListModule,
+            ButtonModule,
+            IconModule,
+            DropdownModule,
+            ModalModule,
+            NotificationModule,
+            RadioModule,
+            ReactiveFormsModule,
+            ModalModule,
+            FileUploaderModule,
+            LayerModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessManagementModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessManagementModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        ProcessManagementComponent,
-                        ProcessManagementBuilderComponent,
-                        ProcessManagementListComponent,
-                        ProcessManagementUploadComponent,
-                    ],
                     imports: [
                         CommonModule,
                         ProcessManagementRoutingModule,
                         WidgetModule,
-                        ListModule,
                         FormsModule,
                         TranslateModule,
+                        ProcessLinkModule,
+                        ProcessManagementComponent,
+                        ProcessManagementBuilderComponent,
+                        CarbonListModule,
+                        ButtonModule,
+                        IconModule,
+                        DropdownModule,
+                        ModalModule,
+                        NotificationModule,
+                        RadioModule,
+                        ReactiveFormsModule,
+                        ModalModule,
+                        FileUploaderModule,
+                        LayerModule,
                     ],
-                    exports: [ProcessManagementComponent],
                 }]
         }] });
 
 /*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -468,5 +1746,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ProcessManagementComponent, ProcessManagementModule };
+export { PROCESS_MANAGEMENT_ENDPOINTS, ProcessManagementBuilderComponent, ProcessManagementComponent, ProcessManagementModule, ProcessManagementStateService };
 //# sourceMappingURL=valtimo-process-management.mjs.map