diff --git a/package-lock.json b/package-lock.json
index a64ba737d..918a166bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -282,7 +282,7 @@
         "@ngx-translate/http-loader": "8.0.0",
         "@tadashi/currency": "3.4.0",
         "@types/topojson": "3.2.6",
-        "bpmn-js": "18.0.0",
+        "bpmn-js": "6.5.1",
         "carbon-components-angular": "5.28.6",
         "deepmerge-ts": "7.1.0",
         "flatpickr": "4.6.13",
@@ -467,7 +467,7 @@
     },
     "dist/valtimo/config": {
       "name": "@valtimo/config",
-      "version": "12.2.0",
+      "version": "0.0.0-watch+1734702188440",
       "dev": true,
       "license": "EUPL-1.2",
       "dependencies": {
@@ -559,7 +559,7 @@
     },
     "dist/valtimo/dossier": {
       "name": "@valtimo/dossier",
-      "version": "12.2.0",
+      "version": "0.0.0-watch+1734957976471",
       "dev": true,
       "license": "EUPL-1.2",
       "dependencies": {
@@ -690,7 +690,6 @@
       "dev": true,
       "license": "EUPL-1.2",
       "dependencies": {
-        "bpmn-js": "18.0.0",
         "tslib": "2.6.3"
       },
       "peerDependencies": {
@@ -698,165 +697,6 @@
         "@angular/core": "^17.2.2"
       }
     },
-    "dist/valtimo/migration/node_modules/bpmn-js": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-18.0.0.tgz",
-      "integrity": "sha512-eZR4hqk2BT0m9jAGGtp/f1TD0m7LXXKfYle99q75d+NjSmxetIuvxGn48S9W+H8arJ7vgsls2GELzXoDuEE0eg==",
-      "dev": true,
-      "dependencies": {
-        "bpmn-moddle": "^9.0.1",
-        "diagram-js": "^15.1.0",
-        "diagram-js-direct-editing": "^3.2.0",
-        "ids": "^1.0.5",
-        "inherits-browser": "^0.1.0",
-        "min-dash": "^4.1.1",
-        "min-dom": "^4.2.1",
-        "tiny-svg": "^3.1.2"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "dist/valtimo/migration/node_modules/bpmn-moddle": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-9.0.1.tgz",
-      "integrity": "sha512-jO2P5RBx0cZCCd+imqhpNE5anttaYuGd71u76NEA/qMZwJSW1t5ETAtw9/E2InfiPU2w0TR8oxPyopJXRc9VQg==",
-      "dev": true,
-      "dependencies": {
-        "min-dash": "^4.2.1",
-        "moddle": "^7.0.0",
-        "moddle-xml": "^11.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "dist/valtimo/migration/node_modules/component-event": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/component-event/-/component-event-0.2.1.tgz",
-      "integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==",
-      "dev": true
-    },
-    "dist/valtimo/migration/node_modules/diagram-js": {
-      "version": "15.2.3",
-      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-15.2.3.tgz",
-      "integrity": "sha512-C7MM5D7D0x6F5KsPzGmIPL/O9VoglTFSGrDnQNiFIA0SldC6WCwx/0nG9nS4Pwjtf7QeccaozF7FD1NAMHFs5Q==",
-      "dev": true,
-      "dependencies": {
-        "@bpmn-io/diagram-js-ui": "^0.2.3",
-        "clsx": "^2.1.0",
-        "didi": "^10.2.2",
-        "inherits-browser": "^0.1.0",
-        "min-dash": "^4.1.0",
-        "min-dom": "^4.2.1",
-        "object-refs": "^0.4.0",
-        "path-intersection": "^3.0.0",
-        "tiny-svg": "^3.1.2"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "dist/valtimo/migration/node_modules/diagram-js-direct-editing": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/diagram-js-direct-editing/-/diagram-js-direct-editing-3.2.0.tgz",
-      "integrity": "sha512-+pyxeQGBSdLiZX0/tmmsm2qZSvm9YtVzod5W3RMHSTR7VrkUMD6E7EX/W9JQv3ebxO7oIdqFmytmNDDpSHnYEw==",
-      "dev": true,
-      "dependencies": {
-        "min-dash": "^4.0.0",
-        "min-dom": "^4.2.1"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "peerDependencies": {
-        "diagram-js": "*"
-      }
-    },
-    "dist/valtimo/migration/node_modules/didi": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/didi/-/didi-10.2.2.tgz",
-      "integrity": "sha512-l8NYkYFXV1izHI65EyT8EXOjUZtKmQkHLTT89cSP7HU5J/G7AOj0dXKtLc04EXYlga99PBY18IPjOeZ+c3DI4w==",
-      "dev": true,
-      "engines": {
-        "node": ">= 16"
-      }
-    },
-    "dist/valtimo/migration/node_modules/min-dash": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.2.tgz",
-      "integrity": "sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==",
-      "dev": true
-    },
-    "dist/valtimo/migration/node_modules/min-dom": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-4.2.1.tgz",
-      "integrity": "sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==",
-      "dev": true,
-      "dependencies": {
-        "component-event": "^0.2.1",
-        "domify": "^1.4.1",
-        "min-dash": "^4.2.1"
-      }
-    },
-    "dist/valtimo/migration/node_modules/moddle": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/moddle/-/moddle-7.0.0.tgz",
-      "integrity": "sha512-Hpte2hfKDwoZWPvDngsEHjloPnO+sKMUVkAPc0r9PrpnVLqsyPUTV0ZQU8CAp87YmRZ9QzeQMJxdKbaP9vEIKA==",
-      "dev": true,
-      "dependencies": {
-        "min-dash": "^4.2.1"
-      }
-    },
-    "dist/valtimo/migration/node_modules/moddle-xml": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-11.0.0.tgz",
-      "integrity": "sha512-L3Sseepfcq9Uy0iIfqEDTXSoYLva1Y/JGbN/4AMOeQ6cqbu8Ma/SDJIdOFm7smsAa64j2z3SwCGG3FIilQVnUg==",
-      "dev": true,
-      "dependencies": {
-        "min-dash": "^4.0.0",
-        "saxen": "^10.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "moddle": ">= 6.2.0"
-      }
-    },
-    "dist/valtimo/migration/node_modules/object-refs": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/object-refs/-/object-refs-0.4.0.tgz",
-      "integrity": "sha512-6kJqKWryKZmtte6QYvouas0/EIJKPI1/MMIuRsiBlNuhIMfqYTggzX2F1AJ2+cDs288xyi9GL7FyasHINR98BQ==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "dist/valtimo/migration/node_modules/path-intersection": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-3.1.0.tgz",
-      "integrity": "sha512-3xS3lvv/vuwm5aH2BVvNRvnvwR2Drde7jQClKpCXTYXIMMjcw/EnMhzCgeHwqbCpzi760PEfAkU53vSIlrNr9A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 14.20"
-      }
-    },
-    "dist/valtimo/migration/node_modules/saxen": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/saxen/-/saxen-10.0.0.tgz",
-      "integrity": "sha512-RXsmWok/SAWqOG/f5ADEz51DN9WtZEzqih3e08ranldcaXekxjx8NBKjGh/y5hlowjo0JH/LekBu6gtPFD1G6g==",
-      "dev": true,
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "dist/valtimo/migration/node_modules/tiny-svg": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-3.1.3.tgz",
-      "integrity": "sha512-9mwnPqXInRsBmH/DO6NMxBE++9LsqpVXQSSTZGc5bomoKKvL5OX/Hlotw7XVXP6XLRcHWIzZpxfovGqWKgCypQ==",
-      "dev": true
-    },
     "dist/valtimo/milestone": {
       "name": "@valtimo/milestone",
       "version": "12.2.0",
@@ -960,11 +800,8 @@
       "dev": true,
       "license": "EUPL-1.2",
       "dependencies": {
-        "@bpmn-io/properties-panel": "3.25.0",
-        "bpmn-js": "18.0.0",
-        "bpmn-js-properties-panel": "5.26.0",
-        "camunda-bpmn-js-behaviors": "1.7.0",
-        "camunda-bpmn-moddle": "7.0.1",
+        "bpmn-js-properties-panel": "0.46.0",
+        "camunda-bpmn-moddle": "4.5.0",
         "tslib": "2.6.3"
       },
       "peerDependencies": {
@@ -981,25 +818,6 @@
         "min-dash": "^4.0.0"
       }
     },
-    "dist/valtimo/process-management/node_modules/bpmn-js": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-18.0.0.tgz",
-      "integrity": "sha512-eZR4hqk2BT0m9jAGGtp/f1TD0m7LXXKfYle99q75d+NjSmxetIuvxGn48S9W+H8arJ7vgsls2GELzXoDuEE0eg==",
-      "dev": true,
-      "dependencies": {
-        "bpmn-moddle": "^9.0.1",
-        "diagram-js": "^15.1.0",
-        "diagram-js-direct-editing": "^3.2.0",
-        "ids": "^1.0.5",
-        "inherits-browser": "^0.1.0",
-        "min-dash": "^4.1.1",
-        "min-dom": "^4.2.1",
-        "tiny-svg": "^3.1.2"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "dist/valtimo/process-management/node_modules/bpmn-js-properties-panel": {
       "version": "5.26.0",
       "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-5.26.0.tgz",
@@ -1022,20 +840,6 @@
         "diagram-js": ">= 11.9"
       }
     },
-    "dist/valtimo/process-management/node_modules/bpmn-moddle": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-9.0.1.tgz",
-      "integrity": "sha512-jO2P5RBx0cZCCd+imqhpNE5anttaYuGd71u76NEA/qMZwJSW1t5ETAtw9/E2InfiPU2w0TR8oxPyopJXRc9VQg==",
-      "dev": true,
-      "dependencies": {
-        "min-dash": "^4.2.1",
-        "moddle": "^7.0.0",
-        "moddle-xml": "^11.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "dist/valtimo/process-management/node_modules/camunda-bpmn-moddle": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/camunda-bpmn-moddle/-/camunda-bpmn-moddle-7.0.1.tgz",
@@ -1048,51 +852,6 @@
       "integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==",
       "dev": true
     },
-    "dist/valtimo/process-management/node_modules/diagram-js": {
-      "version": "15.2.3",
-      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-15.2.3.tgz",
-      "integrity": "sha512-C7MM5D7D0x6F5KsPzGmIPL/O9VoglTFSGrDnQNiFIA0SldC6WCwx/0nG9nS4Pwjtf7QeccaozF7FD1NAMHFs5Q==",
-      "dev": true,
-      "dependencies": {
-        "@bpmn-io/diagram-js-ui": "^0.2.3",
-        "clsx": "^2.1.0",
-        "didi": "^10.2.2",
-        "inherits-browser": "^0.1.0",
-        "min-dash": "^4.1.0",
-        "min-dom": "^4.2.1",
-        "object-refs": "^0.4.0",
-        "path-intersection": "^3.0.0",
-        "tiny-svg": "^3.1.2"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "dist/valtimo/process-management/node_modules/diagram-js-direct-editing": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/diagram-js-direct-editing/-/diagram-js-direct-editing-3.2.0.tgz",
-      "integrity": "sha512-+pyxeQGBSdLiZX0/tmmsm2qZSvm9YtVzod5W3RMHSTR7VrkUMD6E7EX/W9JQv3ebxO7oIdqFmytmNDDpSHnYEw==",
-      "dev": true,
-      "dependencies": {
-        "min-dash": "^4.0.0",
-        "min-dom": "^4.2.1"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "peerDependencies": {
-        "diagram-js": "*"
-      }
-    },
-    "dist/valtimo/process-management/node_modules/didi": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/didi/-/didi-10.2.2.tgz",
-      "integrity": "sha512-l8NYkYFXV1izHI65EyT8EXOjUZtKmQkHLTT89cSP7HU5J/G7AOj0dXKtLc04EXYlga99PBY18IPjOeZ+c3DI4w==",
-      "dev": true,
-      "engines": {
-        "node": ">= 16"
-      }
-    },
     "dist/valtimo/process-management/node_modules/min-dash": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.2.tgz",
@@ -1110,64 +869,6 @@
         "min-dash": "^4.2.1"
       }
     },
-    "dist/valtimo/process-management/node_modules/moddle": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/moddle/-/moddle-7.0.0.tgz",
-      "integrity": "sha512-Hpte2hfKDwoZWPvDngsEHjloPnO+sKMUVkAPc0r9PrpnVLqsyPUTV0ZQU8CAp87YmRZ9QzeQMJxdKbaP9vEIKA==",
-      "dev": true,
-      "dependencies": {
-        "min-dash": "^4.2.1"
-      }
-    },
-    "dist/valtimo/process-management/node_modules/moddle-xml": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-11.0.0.tgz",
-      "integrity": "sha512-L3Sseepfcq9Uy0iIfqEDTXSoYLva1Y/JGbN/4AMOeQ6cqbu8Ma/SDJIdOFm7smsAa64j2z3SwCGG3FIilQVnUg==",
-      "dev": true,
-      "dependencies": {
-        "min-dash": "^4.0.0",
-        "saxen": "^10.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "moddle": ">= 6.2.0"
-      }
-    },
-    "dist/valtimo/process-management/node_modules/object-refs": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/object-refs/-/object-refs-0.4.0.tgz",
-      "integrity": "sha512-6kJqKWryKZmtte6QYvouas0/EIJKPI1/MMIuRsiBlNuhIMfqYTggzX2F1AJ2+cDs288xyi9GL7FyasHINR98BQ==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "dist/valtimo/process-management/node_modules/path-intersection": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-3.1.0.tgz",
-      "integrity": "sha512-3xS3lvv/vuwm5aH2BVvNRvnvwR2Drde7jQClKpCXTYXIMMjcw/EnMhzCgeHwqbCpzi760PEfAkU53vSIlrNr9A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 14.20"
-      }
-    },
-    "dist/valtimo/process-management/node_modules/saxen": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/saxen/-/saxen-10.0.0.tgz",
-      "integrity": "sha512-RXsmWok/SAWqOG/f5ADEz51DN9WtZEzqih3e08ranldcaXekxjx8NBKjGh/y5hlowjo0JH/LekBu6gtPFD1G6g==",
-      "dev": true,
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "dist/valtimo/process-management/node_modules/tiny-svg": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-3.1.3.tgz",
-      "integrity": "sha512-9mwnPqXInRsBmH/DO6NMxBE++9LsqpVXQSSTZGc5bomoKKvL5OX/Hlotw7XVXP6XLRcHWIzZpxfovGqWKgCypQ==",
-      "dev": true
-    },
     "dist/valtimo/resource": {
       "name": "@valtimo/resource",
       "version": "12.2.0",
@@ -1212,7 +913,7 @@
     },
     "dist/valtimo/task": {
       "name": "@valtimo/task",
-      "version": "12.2.0",
+      "version": "0.0.0-watch+1734957976118",
       "dev": true,
       "license": "EUPL-1.2",
       "dependencies": {
@@ -3739,17 +3440,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@bpmn-io/cm-theme": {
-      "version": "0.1.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/@bpmn-io/cm-theme/-/cm-theme-0.1.0-alpha.2.tgz",
-      "integrity": "sha512-ZILgiYzxk3KMvxplUXmdRFQo45/JehDPg5k9tWfehmzUOSE13ssyLPil8uCloMQnb3yyzyOWTjb/wzKXTHlFQw==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/language": "^6.3.1",
-        "@codemirror/view": "^6.5.1",
-        "@lezer/highlight": "^1.1.4"
-      }
-    },
     "node_modules/@bpmn-io/diagram-js-ui": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.3.tgz",
@@ -3791,104 +3481,6 @@
         "min-dash": "^3.8.1"
       }
     },
-    "node_modules/@bpmn-io/feel-editor": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/@bpmn-io/feel-editor/-/feel-editor-1.9.1.tgz",
-      "integrity": "sha512-UxSORdh5cwKM4fib4f9ov6J1/BHGpQVNtA+wPyEdKQyCyz3wqwE2/xe5wneVR1j5QFC5m2Na8nTy4a1TDFvZTw==",
-      "dev": true,
-      "dependencies": {
-        "@bpmn-io/feel-lint": "^1.3.0",
-        "@codemirror/autocomplete": "^6.16.2",
-        "@codemirror/commands": "^6.6.0",
-        "@codemirror/language": "^6.10.2",
-        "@codemirror/lint": "^6.8.0",
-        "@codemirror/state": "^6.4.1",
-        "@codemirror/view": "^6.28.1",
-        "@lezer/highlight": "^1.2.0",
-        "lang-feel": "^2.1.1",
-        "min-dom": "^4.2.1"
-      },
-      "engines": {
-        "node": ">= 16"
-      }
-    },
-    "node_modules/@bpmn-io/feel-editor/node_modules/component-event": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/component-event/-/component-event-0.2.1.tgz",
-      "integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==",
-      "dev": true
-    },
-    "node_modules/@bpmn-io/feel-editor/node_modules/min-dash": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.2.tgz",
-      "integrity": "sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==",
-      "dev": true
-    },
-    "node_modules/@bpmn-io/feel-editor/node_modules/min-dom": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-4.2.1.tgz",
-      "integrity": "sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==",
-      "dev": true,
-      "dependencies": {
-        "component-event": "^0.2.1",
-        "domify": "^1.4.1",
-        "min-dash": "^4.2.1"
-      }
-    },
-    "node_modules/@bpmn-io/feel-lint": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@bpmn-io/feel-lint/-/feel-lint-1.3.1.tgz",
-      "integrity": "sha512-wcFkJKhOm/iqCt5bzkKvxL5Dr9wKwUD+t164bQYbJsTYouAqmkkxiGsoqck42hXwdIhMSguZ+vqQ3hj5QdiYCA==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/language": "^6.10.0",
-        "lezer-feel": "^1.2.3"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/@bpmn-io/properties-panel": {
-      "version": "3.25.0",
-      "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.25.0.tgz",
-      "integrity": "sha512-SRGgj8uJc1Yyjcht2g36Q+xKR7sTx5VZXvcwDrdmQKlx5Y3nRmvmMjDGzeGDJDb7pNU1DSlaBJic84uISDBMWg==",
-      "dev": true,
-      "dependencies": {
-        "@bpmn-io/feel-editor": "^1.9.0",
-        "@codemirror/view": "^6.28.1",
-        "classnames": "^2.3.1",
-        "feelers": "^1.4.0",
-        "focus-trap": "^7.5.2",
-        "min-dash": "^4.1.1",
-        "min-dom": "^4.0.3"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/@bpmn-io/properties-panel/node_modules/component-event": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/component-event/-/component-event-0.2.1.tgz",
-      "integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==",
-      "dev": true
-    },
-    "node_modules/@bpmn-io/properties-panel/node_modules/min-dash": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.2.tgz",
-      "integrity": "sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==",
-      "dev": true
-    },
-    "node_modules/@bpmn-io/properties-panel/node_modules/min-dom": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-4.2.1.tgz",
-      "integrity": "sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==",
-      "dev": true,
-      "dependencies": {
-        "component-event": "^0.2.1",
-        "domify": "^1.4.1",
-        "min-dash": "^4.2.1"
-      }
-    },
     "node_modules/@braintree/sanitize-url": {
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz",
@@ -4087,78 +3679,6 @@
         "@ibm/telemetry-js": "^1.5.1"
       }
     },
-    "node_modules/@codemirror/autocomplete": {
-      "version": "6.18.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.3.tgz",
-      "integrity": "sha512-1dNIOmiM0z4BIBwxmxEfA1yoxh1MF/6KPBbh20a5vphGV0ictKlgQsbJs6D6SkR6iJpGbpwRsa6PFMNlg9T9pQ==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.17.0",
-        "@lezer/common": "^1.0.0"
-      },
-      "peerDependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/commands": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.7.1.tgz",
-      "integrity": "sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.4.0",
-        "@codemirror/view": "^6.27.0",
-        "@lezer/common": "^1.1.0"
-      }
-    },
-    "node_modules/@codemirror/language": {
-      "version": "6.10.6",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.6.tgz",
-      "integrity": "sha512-KrsbdCnxEztLVbB5PycWXFxas4EOyk/fPAfruSOnDDppevQgid2XZ+KbJ9u+fDikP/e7MW7HPBTvTb8JlZK9vA==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.23.0",
-        "@lezer/common": "^1.1.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0",
-        "style-mod": "^4.0.0"
-      }
-    },
-    "node_modules/@codemirror/lint": {
-      "version": "6.8.4",
-      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.4.tgz",
-      "integrity": "sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.35.0",
-        "crelt": "^1.0.5"
-      }
-    },
-    "node_modules/@codemirror/state": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
-      "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==",
-      "dev": true
-    },
-    "node_modules/@codemirror/view": {
-      "version": "6.35.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.35.0.tgz",
-      "integrity": "sha512-I0tYy63q5XkaWsJ8QRv5h6ves7kvtrBWjBcnf/bzohFJQc5c14a1AQRdE8QpPF9eMp5Mq2FMm59TCj1gDfE7kw==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/state": "^6.4.0",
-        "style-mod": "^4.1.0",
-        "w3c-keyname": "^2.2.4"
-      }
-    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -5058,40 +4578,6 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "license": "MIT"
     },
-    "node_modules/@lezer/common": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
-      "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==",
-      "dev": true
-    },
-    "node_modules/@lezer/highlight": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
-      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
-      "dev": true,
-      "dependencies": {
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/lr": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
-      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
-      "dev": true,
-      "dependencies": {
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/markdown": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.3.2.tgz",
-      "integrity": "sha512-Wu7B6VnrKTbBEohqa63h5vxXjiC4pO5ZQJ/TDbhJxPQaaIoRD/6UVDhSDtVsCwVZV12vvN9KxuLL3ATMnlG0oQ==",
-      "dev": true,
-      "dependencies": {
-        "@lezer/common": "^1.0.0",
-        "@lezer/highlight": "^1.0.0"
-      }
-    },
     "node_modules/@ljharb/through": {
       "version": "2.3.13",
       "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.13.tgz",
@@ -9705,27 +9191,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camunda-bpmn-js-behaviors": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/camunda-bpmn-js-behaviors/-/camunda-bpmn-js-behaviors-1.7.0.tgz",
-      "integrity": "sha512-QOu3gkfET20ow/ZXOrnOSoIqwDqbDgBknlNf1a3vgYCgvhRG08eZ3gfcs5ZVAhB+SJCEU6QHj7iZXraxqhiogw==",
-      "dev": true,
-      "dependencies": {
-        "ids": "^1.0.0",
-        "min-dash": "^4.0.0"
-      },
-      "peerDependencies": {
-        "bpmn-js": ">= 9",
-        "camunda-bpmn-moddle": ">= 7",
-        "zeebe-bpmn-moddle": ">= 0.18"
-      }
-    },
-    "node_modules/camunda-bpmn-js-behaviors/node_modules/min-dash": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.2.tgz",
-      "integrity": "sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==",
-      "dev": true
-    },
     "node_modules/camunda-bpmn-moddle": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/camunda-bpmn-moddle/-/camunda-bpmn-moddle-4.5.0.tgz",
@@ -10527,12 +9992,6 @@
         "type-func": "^1.0.1"
       }
     },
-    "node_modules/crelt": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
-      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
-      "dev": true
-    },
     "node_modules/critters": {
       "version": "0.0.22",
       "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.22.tgz",
@@ -13386,74 +12845,6 @@
         "pend": "~1.2.0"
       }
     },
-    "node_modules/feelers": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/feelers/-/feelers-1.4.0.tgz",
-      "integrity": "sha512-CGa/7ILuqoqTaeYeoKsg/4tzu2es9sEEJTmSjdu0lousZBw4V9gcYhHYFNmbrSrKmbAVfOzj6/DsymGJWFIOeg==",
-      "dev": true,
-      "dependencies": {
-        "@bpmn-io/cm-theme": "^0.1.0-alpha.2",
-        "@bpmn-io/feel-lint": "^1.2.0",
-        "@codemirror/autocomplete": "^6.10.1",
-        "@codemirror/commands": "^6.3.0",
-        "@codemirror/language": "^6.9.1",
-        "@codemirror/lint": "^6.4.2",
-        "@codemirror/state": "^6.3.0",
-        "@codemirror/view": "^6.21.3",
-        "@lezer/common": "^1.1.0",
-        "@lezer/highlight": "^1.1.6",
-        "@lezer/lr": "^1.3.13",
-        "@lezer/markdown": "^1.1.0",
-        "feelin": "^3.0.1",
-        "lezer-feel": "^1.2.4",
-        "min-dom": "^5.0.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/feelers/node_modules/domify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/domify/-/domify-2.0.0.tgz",
-      "integrity": "sha512-rmvrrmWQPD/X1A/nPBfIVg4r05792QdG9Z4Prk6oQG0F9zBMDkr0GKAdds1wjb2dq1rTz/ywc4ZxpZbgz0tttg==",
-      "dev": true,
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/feelers/node_modules/min-dash": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.2.tgz",
-      "integrity": "sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==",
-      "dev": true
-    },
-    "node_modules/feelers/node_modules/min-dom": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-5.1.1.tgz",
-      "integrity": "sha512-GaKUlguMAofd3OJsB0OkP17i5kucKqErgVCJxPawO9l5NwIPnr28SAr99zzlzMCWWljISBYrnZVWdE2Q92YGFQ==",
-      "dev": true,
-      "dependencies": {
-        "domify": "^2.0.0",
-        "min-dash": "^4.2.1"
-      }
-    },
-    "node_modules/feelin": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/feelin/-/feelin-3.2.0.tgz",
-      "integrity": "sha512-GFDbHsTYk7YXO1tyw1dOjb7IODeAZvNIosdGZThUwPx5XcD/XhO0hnPZXsIbAzSsIdrgGlTEEdby9fZ2gixysA==",
-      "dev": true,
-      "dependencies": {
-        "@lezer/lr": "^1.4.2",
-        "lezer-feel": "^1.4.0",
-        "luxon": "^3.5.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/fetch-ponyfill": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/fetch-ponyfill/-/fetch-ponyfill-7.1.0.tgz",
@@ -13649,15 +13040,6 @@
       "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
       "license": "ISC"
     },
-    "node_modules/focus-trap": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.2.tgz",
-      "integrity": "sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==",
-      "dev": true,
-      "dependencies": {
-        "tabbable": "^6.2.0"
-      }
-    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -16297,23 +15679,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/lang-feel": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/lang-feel/-/lang-feel-2.2.0.tgz",
-      "integrity": "sha512-Ebo5nftYsMfJzB3Ny8Oy4oaDXZXb5x61qtVVmKv6aImvAZUbT76mD60ZbEilizjZQzsR2CcU1iMK5sacIa1NVA==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.16.2",
-        "@codemirror/language": "^6.10.2",
-        "@codemirror/state": "^6.4.1",
-        "@codemirror/view": "^6.28.1",
-        "@lezer/common": "^1.2.1",
-        "lezer-feel": "^1.3.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/launch-editor": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.9.1.tgz",
@@ -16440,26 +15805,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lezer-feel": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/lezer-feel/-/lezer-feel-1.4.0.tgz",
-      "integrity": "sha512-kNxG7O38gwpuYy+C3JCRxQNTCE2qu9uTuH5dE3EGVnRhIQMe6rPDz0S8t3urLEOsMud6HI795m6zX2ujfUaqTw==",
-      "dev": true,
-      "dependencies": {
-        "@lezer/highlight": "^1.2.1",
-        "@lezer/lr": "^1.4.2",
-        "min-dash": "^4.2.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/lezer-feel/node_modules/min-dash": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.2.tgz",
-      "integrity": "sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==",
-      "dev": true
-    },
     "node_modules/license-webpack-plugin": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-4.0.2.tgz",
@@ -16645,15 +15990,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/luxon": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
-      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.8",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
@@ -21547,12 +20883,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/style-mod": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
-      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
-      "dev": true
-    },
     "node_modules/stylus": {
       "version": "0.63.0",
       "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.63.0.tgz",
@@ -21752,12 +21082,6 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
-      "dev": true
-    },
     "node_modules/table-js": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/table-js/-/table-js-7.3.0.tgz",
@@ -23215,12 +22539,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/w3c-keyname": {
-      "version": "2.2.8",
-      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
-      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
-      "dev": true
-    },
     "node_modules/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
diff --git a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html
index a47265e90..bafd4375d 100644
--- a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html
+++ b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html
@@ -47,27 +47,84 @@
       *ngFor="let value of values$ | async as values; trackBy: trackByFn; index as i"
       class="v-multi-input__row"
     >
-      <ng-container *ngIf="type === 'value'">
-        <ng-container *ngTemplateOutlet="singleValue; context: {value: value}"></ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="type === 'keyValue'">
-        <ng-container
-          *ngTemplateOutlet="keyValue; context: {value: value, index: i}"
-        ></ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="type === 'keyDropdownValue'">
-        <ng-container
-          *ngTemplateOutlet="keyDropdownValue; context: {value: value, index: i}"
-        ></ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="type === 'arbitraryAmount'">
-        <ng-container
-          *ngTemplateOutlet="arbitraryAmountValue; context: {value: value, index: i}"
-        ></ng-container>
-      </ng-container>
+      @switch (type) {
+        @case ('value') {
+          <valtimo-single-value
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            (valueChange)="onValueChange($event.value, $event.inputValue, 'value')"
+          ></valtimo-single-value>
+        }
+        @case ('keyValue') {
+          <valtimo-key-value
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-key-value>
+        }
+        @case ('keyDropdownValue') {
+          <valtimo-key-dropdown-value
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [dropdownColumnTitle]="dropdownColumnTitle"
+            [index]="i"
+            [value]="value"
+            [dropdownItems$]="getDropdownItemsForRow(i)"
+            [dropdownWidth]="dropdownWidth"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-key-dropdown-value>
+        }
+        @case ('arbitraryAmount') {
+          <valtimo-arbitrary-amount-value
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [arbitraryAmountTitles]="arbitraryAmountTitles"
+            [amountOfArbitraryValuesArray$]="amountOfArbitraryValuesArray$"
+            (valueChange)="
+              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)
+            "
+          ></valtimo-arbitrary-amount-value>
+        }
+        @case ('keyValuePathSelector') {
+          <valtimo-key-value-path-selector
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [documentDefinitionName]="valuePathSelectorDocumentDefinitionName"
+            [prefixes]="valuePathSelectorPrefixes"
+            [showDocumentDefinitionSelector]="valuePathSelectorShowDocumentDefinitionSelector"
+            [notation]="valuePathSelectorNotation"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-key-value-path-selector>
+        }
+        @case ('valuePathSelectorValue') {
+          <valtimo-value-path-selector-value
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [documentDefinitionName]="valuePathSelectorDocumentDefinitionName"
+            [prefixes]="valuePathSelectorPrefixes"
+            [showDocumentDefinitionSelector]="valuePathSelectorShowDocumentDefinitionSelector"
+            [notation]="valuePathSelectorNotation"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-value-path-selector-value>
+        }
+      }
 
       <button
         *ngIf="!hideDeleteButton"
@@ -97,97 +154,3 @@
     </div>
   </div>
 </div>
-
-<ng-template #singleValue let-value="value">
-  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
-    <input
-      cdsText
-      [defaultValue]="value.value"
-      [disabled]="disabled"
-      (change)="onValueChange(value, $event.target.value, 'value')"
-    />
-  </div>
-</ng-template>
-
-<ng-template #keyValue let-value="value" let-index="index">
-  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
-    <cds-label *ngIf="index === 0 && keyColumnTitle && valueColumnTitle">{{
-      keyColumnTitle
-    }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value.key"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'key')"
-    />
-  </div>
-  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
-    <cds-label *ngIf="index === 0 && keyColumnTitle && valueColumnTitle">{{
-      valueColumnTitle
-    }}</cds-label>
-    <input
-      cdsText
-      [defaultValue]="value.value"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'value')"
-    />
-  </div>
-</ng-template>
-
-<ng-template #arbitraryAmountValue let-value="value" let-index="index">
-  <div
-    class="v-multi-input__input"
-    [ngClass]="{'--full-width': fullWidth}"
-    *ngFor="let _ of amountOfArbitraryValuesArray$ | async; index as i"
-  >
-    <cds-label *ngIf="index === 0">{{
-      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''
-    }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value ? value['' + i] : ''"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'arbitrary', i)"
-    />
-  </div>
-</ng-template>
-
-<ng-template #keyDropdownValue let-value="value" let-index="index">
-  <div [ngClass]="{'--full-width': fullWidth}" class="v-multi-input__input">
-    <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value.key"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'key')"
-    />
-  </div>
-
-  <div [style.minWidth.px]="dropdownWidth" class="v-multi-input__input">
-    <cds-label *ngIf="index === 0 && dropdownColumnTitle">{{ dropdownColumnTitle }}</cds-label>
-
-    <cds-dropdown
-      (selected)="onValueChange(value, $event.item.id, 'dropdown')"
-      [appendInline]="true"
-    >
-      <cds-dropdown-list
-        [items]="getDropdownItemsForRow(index) | async"
-        type="multi"
-      ></cds-dropdown-list>
-    </cds-dropdown>
-  </div>
-
-  <div [ngClass]="{'--full-width': fullWidth}" class="v-multi-input__input">
-    <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value.value"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'value')"
-    />
-  </div>
-</ng-template>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss
index 96e4e95ef..85d669bb6 100644
--- a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss
+++ b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss
@@ -14,25 +14,41 @@
  * limitations under the License.
  */
 
-.v-multi-input--margin {
-  margin-block-end: var(--v-input-margin);
-}
+.v-multi-input {
+  &--margin {
+    margin-block-end: var(--v-input-margin);
+  }
 
-.v-multi-input__row {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  margin-block-end: var(--v-multi-input-row-spacing-block);
-}
+  &__row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    margin-block-end: var(--v-multi-input-row-spacing-block);
+  }
 
-.v-multi-input__input {
-  margin-inline-end: var(--v-multi-input-input-spacing-inline);
+  &__input {
+    margin-inline-end: var(--v-multi-input-input-spacing-inline);
 
-  &.--full-width {
-    width: 100%;
+    &.--full-width {
+      flex: 1;
+    }
   }
-}
 
-.v-multi-input--no-delete-button .v-multi-input__input:last-child {
-  margin-inline-end: 0;
+  &__separator {
+    height: 40px;
+    width: 12px;
+    display: flex;
+    justify-content: flex-start;
+
+    &::before {
+      content: '';
+      height: 100%;
+      width: 1px;
+      background-color: var(--cds-border-subtle-selected);
+    }
+  }
+
+  &--no-delete-button &__input:last-child {
+    margin-inline-end: 0;
+  }
 }
diff --git a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.ts b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.ts
index dd97b7963..c395f6939 100644
--- a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.ts
+++ b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.ts
@@ -14,14 +14,25 @@
  * limitations under the License.
  */
 
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
 import {
   ArbitraryInputTitles,
   ListItemWithId,
+  MultiInputChangeEventType,
   MultiInputKeyValue,
   MultiInputOutput,
   MultiInputType,
   MultiInputValues,
+  ValuePathSelectorNotation,
+  ValuePathSelectorPrefix,
 } from '../../models';
 import {BehaviorSubject, combineLatest, Observable, Subscription} from 'rxjs';
 import {map, take} from 'rxjs/operators';
@@ -31,40 +42,45 @@ import {v4 as uuidv4} from 'uuid';
   selector: 'valtimo-carbon-multi-input',
   templateUrl: './carbon-multi-input.component.html',
   styleUrls: ['./carbon-multi-input.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class CarbonMultiInputComponent implements OnInit, OnDestroy {
-  @Input() public name = '';
-  @Input() public title = '';
-  @Input() public titleTranslationKey = '';
-  @Input() public type: MultiInputType = 'value';
+  @Input() public addRowText = '';
+  @Input() public addRowTranslationKey = '';
+  @Input() public arbitraryAmountTitles!: ArbitraryInputTitles;
   @Input() public set arbitraryValueAmount(value: number) {
     this._amountOfArbitraryValues = value;
     this.amountOfArbitraryValuesArray$.next(this.getArrayOfXLength(value));
   }
-  @Input() public arbitraryAmountTitles!: ArbitraryInputTitles;
-  @Input() public initialAmountOfRows = 1;
-  @Input() public minimumAmountOfRows = 1;
-  @Input() public maxRows = null;
-  @Input() public addRowText = '';
-  @Input() public addRowTranslationKey = '';
+  @Input() public defaultValues!: MultiInputValues;
   @Input() public deleteRowText = '';
   @Input() public deleteRowTranslationKey = '';
   @Input() public disabled = false;
-  @Input() public defaultValues!: MultiInputValues;
-  @Input() public margin = false;
-  @Input() public tooltip = '';
-  @Input() public required = false;
-  @Input() public keyColumnTitle = '';
-  @Input() public valueColumnTitle = '';
   @Input() public dropdownColumnTitle = '';
-  @Input() public hideDeleteButton = false;
-  @Input() public hideAddButton = false;
   @Input() public set dropdownItems(value: Array<ListItemWithId>) {
     this.dropdownItems$.next(value);
   }
   @Input() public dropdownWidth = 250;
   @Input() public fullWidth = false;
-  @Input() public carbonTheme = 'g10';
+  @Input() public hideAddButton = false;
+  @Input() public hideDeleteButton = false;
+  @Input() public initialAmountOfRows = 1;
+  @Input() public keyColumnTitle = '';
+  @Input() public margin = false;
+  @Input() public maxRows = null;
+  @Input() public minimumAmountOfRows = 1;
+  @Input() public name = '';
+  @Input() public required = false;
+  @Input() public title = '';
+  @Input() public titleTranslationKey = '';
+  @Input() public tooltip = '';
+  @Input() public type: MultiInputType = 'value';
+  @Input() public valueColumnTitle = '';
+
+  @Input() public readonly valuePathSelectorDocumentDefinitionName = '';
+  @Input() public readonly valuePathSelectorPrefixes: ValuePathSelectorPrefix[] = [];
+  @Input() public readonly valuePathSelectorShowDocumentDefinitionSelector = false;
+  @Input() public readonly valuePathSelectorNotation: ValuePathSelectorNotation = 'dots';
 
   @Output() public valueChange: EventEmitter<MultiInputOutput> = new EventEmitter();
   @Output() public allValuesValidEvent: EventEmitter<boolean> = new EventEmitter();
@@ -74,30 +90,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
 
   public readonly values$ = new BehaviorSubject<MultiInputValues>([]);
   public readonly mappedValues$: Observable<MultiInputOutput> = this.values$.pipe(
-    map(
-      values =>
-        values
-          .map(value => this.getMappedValue(value))
-          .filter(value => {
-            switch (this.type) {
-              case 'value':
-                return value;
-              case 'keyValue':
-                return (value as MultiInputKeyValue).value || (value as MultiInputKeyValue).key;
-              case 'keyDropdownValue':
-                return (
-                  (value as MultiInputKeyValue).value &&
-                  (value as MultiInputKeyValue).key &&
-                  (value as MultiInputKeyValue).dropdown
-                );
-              case 'arbitraryAmount':
-                const objectValues = Object.values(value as MultiInputKeyValue);
-                const positiveValuesAmount = objectValues.filter(objectValue => !!objectValue);
-
-                return objectValues.length === positiveValuesAmount.length;
-            }
-          }) as MultiInputOutput
-    )
+    map(values => this.filterAndMapValues(values))
   );
   public readonly addRowEnabled$: Observable<boolean> = this.values$.pipe(
     map(values => !!(this.maxRows === null || values.length < this.maxRows))
@@ -105,7 +98,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
 
   public readonly dropdownItems$ = new BehaviorSubject<Array<ListItemWithId>>([]);
 
-  private _valuesSubscription!: Subscription;
+  private readonly _subscriptions = new Subscription();
 
   public ngOnInit(): void {
     this.values$.next(this.getInitialRows());
@@ -113,7 +106,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
   }
 
   public ngOnDestroy(): void {
-    this._valuesSubscription?.unsubscribe();
+    this._subscriptions.unsubscribe();
   }
 
   public addRow(): void {
@@ -134,7 +127,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
     });
   }
 
-  public trackByFn(index: number, value: MultiInputKeyValue): string {
+  public trackByFn(_: number, value: MultiInputKeyValue): string {
     return value.uuid as string;
   }
 
@@ -154,7 +147,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
   public onValueChange(
     templateValue: MultiInputKeyValue,
     inputValue: string,
-    change: 'key' | 'value' | 'dropdown' | 'arbitrary',
+    change: MultiInputChangeEventType,
     arbitraryIndex?: number
   ): void {
     this.values$.pipe(take(1)).subscribe(values => {
@@ -180,10 +173,10 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
   private getInitialRows(): MultiInputValues {
     const minimumRows = this.minimumAmountOfRows;
     const initialRows = this.initialAmountOfRows;
-    const amountOfInitalRows = Math.max(minimumRows, initialRows);
+    const amountOfInitialRows = Math.max(minimumRows, initialRows);
 
     if (!this.defaultValues) {
-      return new Array(amountOfInitalRows).fill(this.getEmptyValue());
+      return new Array(amountOfInitialRows).fill(this.getEmptyValue());
     }
 
     return this.defaultValues.map(defaultValue => ({...defaultValue, uuid: uuidv4()}));
@@ -211,7 +204,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
   }
 
   private getMappedValue(valueToMap: MultiInputKeyValue): MultiInputKeyValue | string {
-    if (this.type === 'keyValue') {
+    if (this.type === 'keyValue' || this.type === 'keyValuePathSelector') {
       return {key: valueToMap.key, value: valueToMap.value};
     } else if (this.type === 'keyDropdownValue') {
       return {key: valueToMap.key, value: valueToMap.value, dropdown: valueToMap.dropdown};
@@ -225,15 +218,43 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
   }
 
   private openValuesSubscription(): void {
-    this._valuesSubscription = combineLatest([this.values$, this.mappedValues$]).subscribe(
-      ([values, mappedValues]) => {
+    this._subscriptions.add(
+      combineLatest([this.values$, this.mappedValues$]).subscribe(([values, mappedValues]) => {
         this.valueChange.emit(mappedValues);
         this.allValuesValidEvent.emit(values.length === mappedValues.length);
-      }
+      })
     );
   }
 
-  private getArrayOfXLength(length: number): Array<0> {
+  private getArrayOfXLength(length: number): 0[] {
     return Array(length).fill(0);
   }
+
+  private filterAndMapValues(values: MultiInputValues): MultiInputOutput {
+    return values
+      .map(value => this.getMappedValue(value))
+      .filter(value => this.isValueValid(value)) as MultiInputOutput;
+  }
+
+  private isValueValid(value: MultiInputKeyValue | string): boolean {
+    switch (this.type) {
+      case 'value':
+        return !!value;
+      case 'keyValue':
+      case 'keyValuePathSelector':
+        return !!((value as MultiInputKeyValue).value || (value as MultiInputKeyValue).key);
+      case 'keyDropdownValue':
+        return !!(
+          (value as MultiInputKeyValue).value &&
+          (value as MultiInputKeyValue).key &&
+          (value as MultiInputKeyValue).dropdown
+        );
+      case 'arbitraryAmount':
+        const objectValues = Object.values(value as MultiInputKeyValue);
+        const positiveValuesAmount = objectValues.filter(objectValue => !!objectValue);
+        return objectValues.length === positiveValuesAmount.length;
+      default:
+        return false;
+    }
+  }
 }
diff --git a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.module.ts b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.module.ts
index c6aa334d7..415ed6e54 100644
--- a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.module.ts
+++ b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.module.ts
@@ -27,6 +27,14 @@ import {
 import {ButtonModule} from '../button/button.module';
 import {InputLabelModule} from '../input-label/input-label.module';
 import {InputModule} from '../input/input.module';
+import {
+  ArbitraryAmountValueComponent,
+  KeyDropdownValueComponent,
+  KeyValueComponent,
+  KeyValuePathSelectorComponent,
+  SingleValueComponent,
+} from './components';
+import {ValuePathSelectorValueComponent} from './components/value-path-selector-value';
 
 @NgModule({
   declarations: [CarbonMultiInputComponent],
@@ -40,6 +48,12 @@ import {InputModule} from '../input/input.module';
     IconModule,
     CarbonInputModule,
     DropdownModule,
+    KeyValueComponent,
+    SingleValueComponent,
+    KeyDropdownValueComponent,
+    ArbitraryAmountValueComponent,
+    KeyValuePathSelectorComponent,
+    ValuePathSelectorValueComponent,
   ],
   exports: [CarbonMultiInputComponent],
 })
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.html
new file mode 100644
index 000000000..b2c8e0d17
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.html
@@ -0,0 +1,30 @@
+<!--
+  ~ Copyright 2015-2024 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.
+  -->
+
+@for (_ of amountOfArbitraryValuesArray$ | async; let i = $index; track i) {
+  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+    <cds-label *ngIf="index === 0">{{
+      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''
+    }}</cds-label>
+
+    <input
+      cdsText
+      [defaultValue]="value ? value['' + i] : ''"
+      [disabled]="disabled"
+      (input)="onInputChange(i, $event.target.value)"
+    />
+  </div>
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.scss
new file mode 100644
index 000000000..df54a0a80
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.scss
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2015-2024 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.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.ts
new file mode 100644
index 000000000..271334cca
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {
+  ArbitraryInputTitles,
+  MultiInputChangeEventType,
+  MultiInputKeyValue,
+} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {InputModule} from 'carbon-components-angular';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'valtimo-arbitrary-amount-value',
+  templateUrl: './arbitrary-amount-value.component.html',
+  styleUrls: ['./arbitrary-amount-value.component.scss'],
+  standalone: true,
+  imports: [CommonModule, InputModule],
+})
+export class ArbitraryAmountValueComponent {
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+  @Input() public readonly arbitraryAmountTitles!: ArbitraryInputTitles;
+  @Input() public readonly amountOfArbitraryValuesArray$!: Observable<0[]>;
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+    arbitraryIndex: number;
+  }> = new EventEmitter();
+
+  @HostBinding('class.--full-width') get isFullWidth(): boolean {
+    return this.fullWidth;
+  }
+
+  public onInputChange(arbitraryIndex: number, inputValue: string): void {
+    this.valueChange.emit({
+      value: this.value,
+      inputValue,
+      type: 'arbitrary',
+      arbitraryIndex,
+    });
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/index.ts
new file mode 100644
index 000000000..ee3461739
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+export * from './arbitrary-amount-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/index.ts
new file mode 100644
index 000000000..0b851a583
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/index.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+export * from './key-value';
+export * from './single-value';
+export * from './key-dropdown-value';
+export * from './arbitrary-amount-value';
+export * from './key-value-path-selector';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/index.ts
new file mode 100644
index 000000000..4c57c0113
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+export * from './key-dropdown-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.html
new file mode 100644
index 000000000..e0f3cd93a
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.html
@@ -0,0 +1,49 @@
+<!--
+  ~ Copyright 2015-2024 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.
+  -->
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.key"
+    [disabled]="disabled"
+    (input)="onInputChange('key', $event.target.value)"
+  />
+</div>
+
+<div
+  class="v-multi-input__input"
+  [ngClass]="{'--full-width': fullWidth}"
+  [style.minWidth.px]="dropdownWidth"
+>
+  <cds-label *ngIf="index === 0 && dropdownColumnTitle">{{ dropdownColumnTitle }}</cds-label>
+
+  <cds-dropdown (selected)="onInputChange('dropdown', $event.item.id)" [appendInline]="true">
+    <cds-dropdown-list [items]="dropdownItems$ | async" type="multi"></cds-dropdown-list>
+  </cds-dropdown>
+</div>
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.value"
+    [disabled]="disabled"
+    (input)="onInputChange('value', $event.target.value)"
+  />
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.scss
new file mode 100644
index 000000000..df54a0a80
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.scss
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2015-2024 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.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.ts
new file mode 100644
index 000000000..b2ed77dcc
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {ListItemWithId, MultiInputChangeEventType, MultiInputKeyValue} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {DropdownModule, InputModule} from 'carbon-components-angular';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'valtimo-key-dropdown-value',
+  templateUrl: './key-dropdown-value.component.html',
+  styleUrls: ['./key-dropdown-value.component.scss'],
+  standalone: true,
+  imports: [CommonModule, InputModule, DropdownModule],
+})
+export class KeyDropdownValueComponent {
+  @Input() public readonly keyColumnTitle!: string;
+  @Input() public readonly valueColumnTitle!: string;
+  @Input() public readonly dropdownColumnTitle!: string;
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() public readonly dropdownItems$!: Observable<Array<ListItemWithId>>;
+  @Input() public readonly dropdownWidth = 250;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+  }> = new EventEmitter();
+
+  public onInputChange(type: MultiInputChangeEventType, inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue, type});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/index.ts
new file mode 100644
index 000000000..6b602983e
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+export * from './key-value-path-selector.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.html
new file mode 100644
index 000000000..7a0fbe8ec
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.html
@@ -0,0 +1,42 @@
+<!--
+  ~ Copyright 2015-2024 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.
+  -->
+
+<div class="v-multi-input__input key" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.key"
+    [disabled]="disabled"
+    (input)="onInputChange('key', $event.target.value)"
+  />
+</div>
+
+<div class="v-multi-input__separator"></div>
+
+<div class="v-multi-input__input path-selector" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
+
+  <valtimo-value-path-selector
+    [documentDefinitionName]="documentDefinitionName"
+    [prefixes]="prefixes"
+    [showDocumentDefinitionSelector]="showDocumentDefinitionSelector"
+    [disabled]="disabled"
+    [defaultValue]="value?.value"
+    [notation]="notation"
+    (valueChangeEvent)="onInputChange('value', $event)"
+  ></valtimo-value-path-selector>
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.scss
new file mode 100644
index 000000000..15f287714
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.scss
@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2015-2024 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.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+
+  .path-selector {
+    flex: 2;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.ts
new file mode 100644
index 000000000..7b8e34639
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2015-2024 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,
+ * WITHimport { LabelModule } from 'carbon-components-angular';
+OUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {
+  MultiInputChangeEventType,
+  MultiInputKeyValue,
+  ValuePathSelectorNotation,
+  ValuePathSelectorPrefix,
+} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {InputModule} from 'carbon-components-angular';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ValuePathSelectorComponent} from '../../../value-path-selector';
+
+@Component({
+  selector: 'valtimo-key-value-path-selector',
+  templateUrl: './key-value-path-selector.component.html',
+  styleUrls: ['key-value-path-selector.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputModule,
+    ValuePathSelectorComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class KeyValuePathSelectorComponent {
+  @Input() public readonly keyColumnTitle!: string;
+  @Input() public readonly valueColumnTitle!: string;
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Input() public readonly documentDefinitionName = '';
+  @Input() public readonly prefixes: ValuePathSelectorPrefix[] = [];
+  @Input() public readonly showDocumentDefinitionSelector = false;
+  @Input() public readonly notation: ValuePathSelectorNotation = 'dots';
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+  }> = new EventEmitter();
+
+  public onInputChange(type: MultiInputChangeEventType, inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue, type});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/index.ts
new file mode 100644
index 000000000..aeb083273
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+export * from './key-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.html
new file mode 100644
index 000000000..f70187e43
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.html
@@ -0,0 +1,37 @@
+<!--
+  ~ Copyright 2015-2024 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.
+  -->
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.key"
+    [disabled]="disabled"
+    (input)="onInputChange('key', $event.target.value)"
+  />
+</div>
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.value"
+    [disabled]="disabled"
+    (input)="onInputChange('value', $event.target.value)"
+  />
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.scss
new file mode 100644
index 000000000..df54a0a80
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.scss
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2015-2024 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.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.ts
new file mode 100644
index 000000000..79852bf5f
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2015-2024 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,
+ * WITHimport { LabelModule } from 'carbon-components-angular';
+OUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {MultiInputChangeEventType, MultiInputKeyValue} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {InputModule} from 'carbon-components-angular';
+
+@Component({
+  selector: 'valtimo-key-value',
+  templateUrl: './key-value.component.html',
+  styleUrls: ['key-value.component.scss'],
+  standalone: true,
+  imports: [CommonModule, InputModule],
+})
+export class KeyValueComponent {
+  @Input() public readonly keyColumnTitle!: string;
+  @Input() public readonly valueColumnTitle!: string;
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+  }> = new EventEmitter();
+
+  public onInputChange(type: MultiInputChangeEventType, inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue, type});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/single-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/index.ts
new file mode 100644
index 000000000..68ceb524b
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+export * from './single-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.html
new file mode 100644
index 000000000..093000344
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.html
@@ -0,0 +1,24 @@
+<!--
+  ~ Copyright 2015-2024 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.
+  -->
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <input
+    cdsText
+    [defaultValue]="value?.value"
+    [disabled]="disabled"
+    (input)="onInputChange($event.target.value)"
+  />
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.scss
new file mode 100644
index 000000000..df54a0a80
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.scss
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2015-2024 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.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.ts
new file mode 100644
index 000000000..139e1adbe
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {MultiInputKeyValue} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {InputModule} from 'carbon-components-angular';
+
+@Component({
+  selector: 'valtimo-single-value',
+  templateUrl: './single-value.component.html',
+  styleUrls: ['./single-value.component.scss'],
+  standalone: true,
+  imports: [CommonModule, InputModule],
+})
+export class SingleValueComponent {
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+  }> = new EventEmitter();
+
+  public onInputChange(inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/index.ts
new file mode 100644
index 000000000..edd8f5d94
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+export * from './value-path-selector-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.html
new file mode 100644
index 000000000..8e14b3945
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.html
@@ -0,0 +1,42 @@
+<!--
+  ~ Copyright 2015-2024 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.
+  -->
+
+<div class="v-multi-input__input path-selector" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
+
+  <valtimo-value-path-selector
+    [documentDefinitionName]="documentDefinitionName"
+    [prefixes]="prefixes"
+    [showDocumentDefinitionSelector]="showDocumentDefinitionSelector"
+    [disabled]="disabled"
+    [defaultValue]="value?.key"
+    [notation]="notation"
+    (valueChangeEvent)="onInputChange('key', $event)"
+  ></valtimo-value-path-selector>
+</div>
+
+<div class="v-multi-input__separator"></div>
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.value"
+    [disabled]="disabled"
+    (input)="onInputChange('value', $event.target.value)"
+  />
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.scss
new file mode 100644
index 000000000..15f287714
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.scss
@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2015-2024 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.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+
+  .path-selector {
+    flex: 2;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.ts
new file mode 100644
index 000000000..4d4c235c0
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2015-2024 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,
+ * WITHimport { LabelModule } from 'carbon-components-angular';
+OUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {
+  MultiInputChangeEventType,
+  MultiInputKeyValue,
+  ValuePathSelectorNotation,
+  ValuePathSelectorPrefix,
+} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {InputModule} from 'carbon-components-angular';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ValuePathSelectorComponent} from '../../../value-path-selector';
+
+@Component({
+  selector: 'valtimo-value-path-selector-value',
+  templateUrl: './value-path-selector-value.component.html',
+  styleUrls: ['value-path-selector-value.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputModule,
+    ValuePathSelectorComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class ValuePathSelectorValueComponent {
+  @Input() public readonly keyColumnTitle!: string;
+  @Input() public readonly valueColumnTitle!: string;
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Input() public readonly documentDefinitionName = '';
+  @Input() public readonly prefixes: ValuePathSelectorPrefix[] = [];
+  @Input() public readonly showDocumentDefinitionSelector = false;
+  @Input() public readonly notation: ValuePathSelectorNotation = 'dots';
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+  }> = new EventEmitter();
+
+  public onInputChange(type: MultiInputChangeEventType, inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue, type});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/value-path-selector/index.ts b/projects/valtimo/components/src/lib/components/value-path-selector/index.ts
new file mode 100644
index 000000000..1ce41a4ab
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/value-path-selector/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 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.
+ */
+
+export * from './value-path-selector.component';
diff --git a/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.html b/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.html
index eba705cc5..78d6bef11 100644
--- a/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.html
+++ b/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.html
@@ -25,6 +25,16 @@
   <v-input-label [required]="required" [title]="label" [tooltip]="tooltip"> </v-input-label>
 
   <form [formGroup]="formGroup" class="value-path-selector__form">
+    <cds-toggle
+      data-testid="value-path-selector-toggle"
+      size="sm"
+      [disabled]="obs.disabled"
+      [onText]="'valuePathSelector.dropdown' | translate"
+      [offText]="'valuePathSelector.manual' | translate"
+      [checked]="obs.inputModeIsDropdown"
+      (checkedChange)="onInputModeChange($event)"
+    ></cds-toggle>
+
     @if (obs.inputModeIsDropdown) {
       <ng-container
         *ngIf="
@@ -40,7 +50,8 @@
           [disabled]="
             obs.disabled ||
             docObs.loadingDocumentDefinitionItems ||
-            !docObs.documentDefinitionListItems
+            !docObs.documentDefinitionListItems ||
+            (docObs.documentDefinitionListItems || []).length === 0
           "
           (selected)="onDocumentDefinitionSelected($event)"
           [placeholder]="'valuePathSelector.selectDocDefPlaceholder' | translate"
@@ -52,7 +63,12 @@
       <cds-dropdown
         data-testid="value-path-selector-valuePath"
         [appendInline]="appendInline"
-        [disabled]="obs.disabled || obs.loadingValuePathItems || !obs.valuePathListItems"
+        [disabled]="
+          obs.disabled ||
+          obs.loadingValuePathItems ||
+          !obs.valuePathListItems ||
+          (obs.valuePathListItems || []).length === 0
+        "
         (selected)="onPathSelected($event)"
         [placeholder]="'valuePathSelector.placeholder' | translate"
       >
@@ -66,14 +82,5 @@
         formControlName="selectedPath"
       />
     }
-
-    <cds-toggle
-      data-testid="value-path-selector-toggle"
-      [disabled]="obs.disabled"
-      [onText]="'valuePathSelector.dropdown' | translate"
-      [offText]="'valuePathSelector.manual' | translate"
-      [checked]="obs.inputModeIsDropdown"
-      (checkedChange)="onInputModeChange($event)"
-    ></cds-toggle>
   </form>
 </ng-container>
diff --git a/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.scss b/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.scss
index d0159026f..cb06e3c3f 100644
--- a/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.scss
+++ b/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.scss
@@ -41,6 +41,7 @@
 
   ::ng-deep cds-dropdown {
     width: 100%;
+    min-width: 0;
   }
 
   ::ng-deep .cds--toggle__label-text {
diff --git a/projects/valtimo/components/src/lib/models/multi-input.model.ts b/projects/valtimo/components/src/lib/models/multi-input.model.ts
index 1b37d0ebb..661642829 100644
--- a/projects/valtimo/components/src/lib/models/multi-input.model.ts
+++ b/projects/valtimo/components/src/lib/models/multi-input.model.ts
@@ -17,7 +17,13 @@
 import {FormOutput} from '../models';
 import {ListItem} from 'carbon-components-angular';
 
-type MultiInputType = 'keyValue' | 'value' | 'keyDropdownValue' | 'arbitraryAmount';
+type MultiInputType =
+  | 'keyValue'
+  | 'value'
+  | 'keyDropdownValue'
+  | 'arbitraryAmount'
+  | 'keyValuePathSelector'
+  | 'valuePathSelectorValue';
 
 interface MultiInputKeyValue {
   uuid?: string;
@@ -47,6 +53,8 @@ interface ArbitraryInputTitles {
   [indexKey: string]: string;
 }
 
+type MultiInputChangeEventType = 'key' | 'value' | 'dropdown' | 'arbitrary';
+
 export {
   MultiInputType,
   MultiInputValues,
@@ -56,4 +64,5 @@ export {
   MultiInputFormsValues,
   ListItemWithId,
   ArbitraryInputTitles,
+  MultiInputChangeEventType,
 };
diff --git a/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts b/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts
index 5fbd8d649..2308c1f53 100644
--- a/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts
+++ b/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts
@@ -2,9 +2,9 @@ import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({name: 'valtimoEllipsis', standalone: true})
 export class EllipsisPipe implements PipeTransform {
-  public transform(content: string, limit: number | null): string {
+  public transform(content: string, limit?: number | null): string {
     if (!limit) return content;
 
-    return content.substring(0, limit - 1) + (content.length > limit ? '...' : '');
+    return content.substring(0, limit) + (content.length > limit ? '...' : '');
   }
 }
diff --git a/projects/valtimo/dossier/src/lib/components/dossier-supporting-process-start-modal/dossier-supporting-process-start-modal.component.ts b/projects/valtimo/dossier/src/lib/components/dossier-supporting-process-start-modal/dossier-supporting-process-start-modal.component.ts
index 62bc4b25d..7784e4c37 100644
--- a/projects/valtimo/dossier/src/lib/components/dossier-supporting-process-start-modal/dossier-supporting-process-start-modal.component.ts
+++ b/projects/valtimo/dossier/src/lib/components/dossier-supporting-process-start-modal/dossier-supporting-process-start-modal.component.ts
@@ -154,6 +154,7 @@ export class DossierSupportingProcessStartModalComponent {
   public formSubmitted(): void {
     this.modal.hide();
     this.formSubmit.emit();
+    this.formDefinition$.next(null);
   }
 
   public gotoFormLinkScreen(): void {
diff --git a/projects/valtimo/plugin-management/src/lib/components/plugin-configure/plugin-configure.component.html b/projects/valtimo/plugin-management/src/lib/components/plugin-configure/plugin-configure.component.html
index 0b86fdee5..7892dadb1 100644
--- a/projects/valtimo/plugin-management/src/lib/components/plugin-configure/plugin-configure.component.html
+++ b/projects/valtimo/plugin-management/src/lib/components/plugin-configure/plugin-configure.component.html
@@ -16,6 +16,7 @@
 
 <valtimo-plugin-configuration-container
   *ngIf="pluginDefinitionKey$ | async as pluginDefinitionKey"
+  [cdsLayer]="1"
   [pluginDefinitionKey]="pluginDefinitionKey"
   [prefillConfiguration$]="prefillConfiguration$"
   [save$]="save$"
diff --git a/projects/valtimo/plugin-management/src/lib/components/plugin-edit/plugin-edit.component.html b/projects/valtimo/plugin-management/src/lib/components/plugin-edit/plugin-edit.component.html
index d72394589..f4b66b973 100644
--- a/projects/valtimo/plugin-management/src/lib/components/plugin-edit/plugin-edit.component.html
+++ b/projects/valtimo/plugin-management/src/lib/components/plugin-edit/plugin-edit.component.html
@@ -16,6 +16,7 @@
 
 <valtimo-plugin-configuration-container
   *ngIf="pluginDefinitionKey$ | async as pluginDefinitionKey"
+  [cdsLayer]="1"
   [pluginDefinitionKey]="pluginDefinitionKey"
   [prefillConfiguration$]="prefillConfiguration$"
   [save$]="saveEdit$"
diff --git a/projects/valtimo/plugin-management/src/lib/plugin-management.module.ts b/projects/valtimo/plugin-management/src/lib/plugin-management.module.ts
index 19f25e7e8..9697bcbda 100644
--- a/projects/valtimo/plugin-management/src/lib/plugin-management.module.ts
+++ b/projects/valtimo/plugin-management/src/lib/plugin-management.module.ts
@@ -41,6 +41,7 @@ import {
 import {
   ButtonModule as CarbonButtonModule,
   IconModule,
+  LayerModule,
   ModalModule as CarbonModalModule,
 } from 'carbon-components-angular';
 
@@ -73,6 +74,7 @@ import {
     CarbonModalModule,
     IconModule,
     ValtimoCdsModalDirectiveModule,
+    LayerModule,
   ],
   exports: [
     PluginManagementComponent,
diff --git a/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.html b/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.html
index 496bd8625..6db81fb96 100644
--- a/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.html
+++ b/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.html
@@ -35,6 +35,7 @@
     [required]="true"
     [clearable]="false"
   ></v-select>
+
   <v-input
     *ngIf="obs.formTypeIsUrl === false"
     name="formTypeId"
@@ -46,6 +47,7 @@
     [tooltip]="'formTypeIdTooltip' | pluginTranslate: pluginId | async"
     [required]="true"
   ></v-input>
+
   <v-input
     *ngIf="obs.formTypeIsUrl"
     name="formTypeUrl"
@@ -57,10 +59,11 @@
     [required]="true"
     [trim]="true"
   ></v-input>
+
   <valtimo-carbon-multi-input
     name="sendData"
     [title]="'sendData' | pluginTranslate: pluginId | async"
-    type="keyValue"
+    type="keyValuePathSelector"
     [disabled]="obs.disabled"
     [defaultValues]="obs.prefill?.sendData"
     [margin]="true"
@@ -68,11 +71,16 @@
     [tooltip]="'sendDataTooltip' | pluginTranslate: pluginId | async"
     [minimumAmountOfRows]="0"
     [initialAmountOfRows]="0"
+    [fullWidth]="true"
+    valuePathSelectorNotation="slashes"
+    [valuePathSelectorPrefixes]="[ValuePathSelectorPrefix.DOC]"
+    [valuePathSelectorShowDocumentDefinitionSelector]="true"
   ></valtimo-carbon-multi-input>
+
   <valtimo-carbon-multi-input
     name="receiveData"
     [title]="'receiveData' | pluginTranslate: pluginId | async"
-    type="keyValue"
+    type="valuePathSelectorValue"
     [disabled]="obs.disabled"
     [defaultValues]="obs.prefill?.receiveData"
     [margin]="true"
@@ -80,7 +88,12 @@
     [tooltip]="'receiveDataTooltip' | pluginTranslate: pluginId | async"
     [minimumAmountOfRows]="0"
     [initialAmountOfRows]="0"
+    [fullWidth]="true"
+    valuePathSelectorNotation="slashes"
+    [valuePathSelectorPrefixes]="[ValuePathSelectorPrefix.DOC]"
+    [valuePathSelectorShowDocumentDefinitionSelector]="true"
   ></valtimo-carbon-multi-input>
+
   <v-select
     [items]="receiverSelectItems$ | async"
     [margin]="true"
@@ -93,6 +106,7 @@
     [required]="true"
     [clearable]="false"
   ></v-select>
+
   <v-input
     *ngIf="obs.receiverIsOther"
     name="identificationKey"
@@ -104,6 +118,7 @@
     [required]="true"
     [trim]="true"
   ></v-input>
+
   <v-input
     *ngIf="obs.receiverIsOther"
     name="identificationValue"
@@ -115,6 +130,7 @@
     [required]="true"
     [trim]="true"
   ></v-input>
+
   <v-input
     name="verloopDurationInDays"
     [title]="'verloopDurationInDays' | pluginTranslate: pluginId | async"
diff --git a/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.ts b/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.ts
index 2b2359099..7c9509842 100644
--- a/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.ts
+++ b/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.ts
@@ -20,7 +20,7 @@ import {BehaviorSubject, combineLatest, map, Observable, Subscription, take} fro
 import {TranslateService} from '@ngx-translate/core';
 import {PluginTranslationService} from '../../../../services';
 import {CreatePortalTaskConfig, FormType, OtherReceiver, Receiver} from '../../models';
-import {SelectItem} from '@valtimo/components';
+import {SelectItem, ValuePathSelectorPrefix} from '@valtimo/components';
 
 @Component({
   selector: 'valtimo-create-portal-task',
@@ -56,6 +56,8 @@ export class CreatePortalTaskComponent
   );
   private readonly valid$ = new BehaviorSubject<boolean>(false);
 
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+
   constructor(
     private readonly translateService: TranslateService,
     private readonly pluginTranslationService: PluginTranslationService
diff --git a/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.html b/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.html
index a10323f37..8d727707b 100644
--- a/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.html
+++ b/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.html
@@ -68,14 +68,23 @@
     [defaultSelectionId]="obs.prefill?.format"
     [required]="true"
   ></v-select>
+
   <valtimo-carbon-multi-input
     name="templateData"
     [title]="'templateData' | pluginTranslate: pluginId | async"
-    type="keyValue"
+    type="keyValuePathSelector"
     [disabled]="obs.disabled"
     [defaultValues]="obs.prefill?.templateData"
     [margin]="true"
     [required]="true"
     [tooltip]="'templateDataTooltip' | pluginTranslate: pluginId | async"
+    valuePathSelectorNotation="slashes"
+    [fullWidth]="true"
+    [valuePathSelectorPrefixes]="[
+      ValuePathSelectorPrefix.DOC,
+      ValuePathSelectorPrefix.CASE,
+      ValuePathSelectorPrefix.ZAAK,
+    ]"
+    [valuePathSelectorShowDocumentDefinitionSelector]="true"
   ></valtimo-carbon-multi-input>
 </v-form>
diff --git a/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.ts b/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.ts
index 09cf255db..73c503dce 100644
--- a/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.ts
+++ b/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.ts
@@ -15,14 +15,10 @@
  */
 
 import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
-import {
-  FunctionConfigurationComponent,
-  FunctionConfigurationData,
-  PluginConfigurationComponent,
-  PluginConfigurationData,
-} from '../../../../models';
+import {FunctionConfigurationComponent} from '../../../../models';
 import {BehaviorSubject, combineLatest, Observable, Subscription, take} from 'rxjs';
-import {DocumentFormat, GenerateDocumentConfig, SmartDocumentsConfig} from '../../models';
+import {DocumentFormat, GenerateDocumentConfig} from '../../models';
+import {ValuePathSelectorPrefix} from '@valtimo/components';
 
 @Component({
   selector: 'valtimo-generate-document-configuration',
@@ -46,6 +42,8 @@ export class GenerateDocumentConfigurationComponent
     text: format,
   }));
 
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+
   private saveSubscription!: Subscription;
   private readonly formValue$ = new BehaviorSubject<GenerateDocumentConfig | null>(null);
   private readonly valid$ = new BehaviorSubject<boolean>(false);
diff --git a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.html b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.html
index 878999343..5d44cb2b1 100644
--- a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.html
+++ b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.html
@@ -202,7 +202,7 @@
       </ng-container>
       <v-input class="hidden-input" name="uuid" [defaultValue]="uuid"> </v-input>
     </v-form>
-    <v-modal [parentId]="uuid" (closeEvent)="closeMappingModal(uuid)">
+    <v-modal [parentId]="uuid" (closeEvent)="closeMappingModal(uuid)" [maxWidthPx]="960">
       <div role="header">
         <h3 cdsModalHeaderHeading>{{ 'setMapping' | pluginTranslate: pluginId | async }}</h3>
       </div>
@@ -220,36 +220,40 @@ <h3 cdsModalHeaderHeading>{{ 'setMapping' | pluginTranslate: pluginId | async }}
           </cds-label>
           <valtimo-carbon-multi-input
             *ngIf="showMappingModalsDelay[uuid]"
-            type="keyValue"
+            type="keyValuePathSelector"
             (valueChange)="mappingValueChange($event, uuid)"
             [defaultValues]="mappings[uuid] || prefill?.mapping"
             [valueColumnTitle]="'target' | pluginTranslate: pluginId | async"
             [keyColumnTitle]="'source' | pluginTranslate: pluginId | async"
             [fullWidth]="true"
+            valuePathSelectorNotation="slashes"
+            [valuePathSelectorDocumentDefinitionName]="
+              getSelectedCaseDefinitionNameForIndex(index) | async
+            "
+            [valuePathSelectorPrefixes]="[ValuePathSelectorPrefix.DOC]"
           ></valtimo-carbon-multi-input>
         </div>
       </div>
 
-      <div role="footer">
-        <ng-container>
-          <button
-            cdsButton="secondary"
-            [attr.modal-primary-focus]="true"
-            (click)="closeMappingModal(uuid)"
-            [disabled]="obs.disabled"
-          >
-            {{ 'close' | pluginTranslate: pluginId | async }}
-          </button>
-          <button
-            cdsButton="primary"
-            [attr.modal-primary-focus]="true"
-            [disabled]="obs.disabled"
-            (click)="saveMapping(uuid)"
-            [disabled]="obs.disabled"
-          >
-            {{ 'save' | pluginTranslate: pluginId | async }}
-          </button>
-        </ng-container>
+      <div role="footer" class="modal-buttons-container">
+        <button
+          cdsButton="secondary"
+          [attr.modal-primary-focus]="true"
+          (click)="closeMappingModal(uuid)"
+          [disabled]="obs.disabled"
+        >
+          {{ 'close' | pluginTranslate: pluginId | async }}
+        </button>
+
+        <button
+          cdsButton="primary"
+          [attr.modal-primary-focus]="true"
+          [disabled]="obs.disabled"
+          (click)="saveMapping(uuid)"
+          [disabled]="obs.disabled"
+        >
+          {{ 'save' | pluginTranslate: pluginId | async }}
+        </button>
       </div>
     </v-modal>
   </ng-container>
diff --git a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.scss b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.scss
index 9015f1ad0..3e4ed2830 100644
--- a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.scss
+++ b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.scss
@@ -31,3 +31,9 @@
 .cds--text-input__field-wrapper {
   flex-direction: column;
 }
+
+.modal-buttons-container {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.ts b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.ts
index 210d51ddb..4d242fbd9 100644
--- a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.ts
+++ b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.ts
@@ -44,6 +44,7 @@ import {
   MultiInputValues,
   RadioValue,
   SelectItem,
+  ValuePathSelectorPrefix,
   VModalComponent,
 } from '@valtimo/components';
 import {VerzoekPluginService} from '../../services';
@@ -144,6 +145,18 @@ export class VerzoekConfigurationComponent
   private readonly formValue$ = new BehaviorSubject<VerzoekConfig | null>(null);
   private readonly valid$ = new BehaviorSubject<boolean>(false);
 
+  public getSelectedCaseDefinitionNameForIndex(index: number): Observable<string> {
+    return this.formValue$.pipe(
+      map(
+        formValue =>
+          Array.isArray(formValue.verzoekProperties) &&
+          formValue.verzoekProperties[index]?.caseDefinitionName
+      )
+    );
+  }
+
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+
   constructor(
     private readonly pluginManagementService: PluginManagementService,
     private readonly translateService: TranslateService,
diff --git a/projects/valtimo/process-link/src/lib/components/process-link-modal/process-link-modal.component.html b/projects/valtimo/process-link/src/lib/components/process-link-modal/process-link-modal.component.html
index d85496042..566c1d07f 100644
--- a/projects/valtimo/process-link/src/lib/components/process-link-modal/process-link-modal.component.html
+++ b/projects/valtimo/process-link/src/lib/components/process-link-modal/process-link-modal.component.html
@@ -45,7 +45,7 @@ <h3 cdsModalHeaderHeading>
         <ng-container *ngTemplateOutlet="progressIndicator; context: {obs: obs}"></ng-container>
       </div>
     </cds-modal-header>
-    <section cdsModalContent>
+    <section cdsModalContent [cdsLayer]="1">
       <ng-container *ngTemplateOutlet="stepContent; context: {obs: obs}"></ng-container>
     </section>
     <ng-template *ngTemplateOutlet="footer; context: {obs: obs}"></ng-template>
diff --git a/projects/valtimo/process-link/src/lib/process-link.module.ts b/projects/valtimo/process-link/src/lib/process-link.module.ts
index bf169f7f3..b2dadf600 100644
--- a/projects/valtimo/process-link/src/lib/process-link.module.ts
+++ b/projects/valtimo/process-link/src/lib/process-link.module.ts
@@ -47,6 +47,7 @@ import {
   ComboBoxModule,
   IconModule,
   InputModule,
+  LayerModule,
   LoadingModule,
   ModalModule as CarbonModalModule,
   ProgressIndicatorModule,
@@ -114,6 +115,7 @@ import {FormDisplayConfigurationComponent} from './components/form-display-confi
     SelectModule,
     ToggleModule,
     CarbonMultiInputModule,
+    LayerModule,
   ],
   exports: [
     ProcessLinkComponent,
diff --git a/projects/valtimo/process-link/src/lib/services/process-link.service.ts b/projects/valtimo/process-link/src/lib/services/process-link.service.ts
index 0ca693a28..6b7a26b91 100644
--- a/projects/valtimo/process-link/src/lib/services/process-link.service.ts
+++ b/projects/valtimo/process-link/src/lib/services/process-link.service.ts
@@ -92,14 +92,18 @@ export class ProcessLinkService {
     );
   }
 
-  private emptyStringToNull(object: any) {
-    Object.keys(object).forEach(key => {
-      if (typeof object[key] === 'object') {
-        this.emptyStringToNull(object[key]);
-      } else if (object[key] === '') {
-        object[key] = null;
-      }
-    });
+  private emptyStringToNull<T extends Record<string, any>>(object: T): T {
+    if (object && typeof object === 'object') {
+      Object.keys(object).forEach(key => {
+        const typedKey = key as keyof T;
+        const value = object[typedKey];
+        if (typeof value === 'object' && value !== null) {
+          this.emptyStringToNull(value);
+        } else if (value === '') {
+          object[typedKey] = null as any;
+        }
+      });
+    }
     return object;
   }
 
diff --git a/projects/valtimo/task/src/lib/components/task-detail-content/task-detail-content.component.ts b/projects/valtimo/task/src/lib/components/task-detail-content/task-detail-content.component.ts
index 426aa0f12..456b99f01 100644
--- a/projects/valtimo/task/src/lib/components/task-detail-content/task-detail-content.component.ts
+++ b/projects/valtimo/task/src/lib/components/task-detail-content/task-detail-content.component.ts
@@ -222,6 +222,8 @@ export class TaskDetailContentComponent implements OnInit, OnDestroy {
     this.resetTaskProcessLinkType();
     this.resetFormDefinition();
 
+    this.taskInstanceId$.next(task.id);
+
     if (!processLink) {
       this.getTaskProcessLink(task.id);
     } else {
@@ -233,7 +235,6 @@ export class TaskDetailContentComponent implements OnInit, OnDestroy {
     this.stateService.setDocumentId(documentId);
 
     this.task$.next(task);
-    this.taskInstanceId$.next(task.id);
     this.page$.next({
       title: task.name,
       subtitle: `${this.translateService.instant('taskDetail.taskCreated')} ${task.created}`,