@valtimo/components 12.6.0 → 12.7.0

package/fesm2022/valtimo-components.mjs

@@ -2053,7 +2053,7 @@ class KeyGeneratorService {
             .toLowerCase()
             .replace(/[^a-z0-9-_]+|-[^a-z0-9]+/g, '-')
             .replace(/_[-_]+/g, '_')
-            .replace(/^[^a-z]+/g, '');
+            .replace(/^[^a-z]+|[^a-z0-9]+$/g, '');
         if (!usedKeys.includes(dashCaseKey)) {
             return dashCaseKey;
         }
@@ -9634,7 +9634,7 @@ class ValuePathSelectorComponent {
                 multi: true,
                 useExisting: forwardRef(() => ValuePathSelectorComponent),
             },
-        ], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n  } as obs\"\n>\n  <v-input-label [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\"> </v-input-label>\n\n  <form [formGroup]=\"formGroup\" class=\"value-path-selector__form\">\n    @if (obs.inputModeIsDropdown) {\n      <ng-container\n        *ngIf=\"\n          showDocumentDefinitionSelector && {\n            loadingDocumentDefinitionItems: loadingDocumentDefinitionItems$ | async,\n            documentDefinitionListItems: documentDefinitionListItems$ | async,\n          } as docObs\n        \"\n      >\n        <cds-dropdown\n          data-testid=\"value-path-selector-documentDefinition\"\n          [appendInline]=\"appendInline\"\n          [disabled]=\"\n            obs.disabled ||\n            docObs.loadingDocumentDefinitionItems ||\n            !docObs.documentDefinitionListItems\n          \"\n          (selected)=\"onDocumentDefinitionSelected($event)\"\n          [placeholder]=\"'valuePathSelector.selectDocDefPlaceholder' | translate\"\n        >\n          <cds-dropdown-list [items]=\"docObs.documentDefinitionListItems || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </ng-container>\n\n      <cds-dropdown\n        data-testid=\"value-path-selector-valuePath\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"obs.disabled || obs.loadingValuePathItems || !obs.valuePathListItems\"\n        (selected)=\"onPathSelected($event)\"\n        [placeholder]=\"'valuePathSelector.placeholder' | translate\"\n      >\n        <cds-dropdown-list [items]=\"obs.valuePathListItems || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    } @else {\n      <input\n        data-testid=\"value-path-selector-input\"\n        cdsText\n        type=\"text\"\n        formControlName=\"selectedPath\"\n      />\n    }\n\n    <cds-toggle\n      data-testid=\"value-path-selector-toggle\"\n      [disabled]=\"obs.disabled\"\n      [onText]=\"'valuePathSelector.dropdown' | translate\"\n      [offText]=\"'valuePathSelector.manual' | translate\"\n      [checked]=\"obs.inputModeIsDropdown\"\n      (checkedChange)=\"onInputModeChange($event)\"\n    ></cds-toggle>\n  </form>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}::ng-deep .value-path-selector--margin-bottom{margin-bottom:16px}::ng-deep .value-path-selector--margin-bottom-lg{margin-bottom:24px}::ng-deep .value-path-selector--margin-bottom-xl{margin-bottom:34px}.value-path-selector__form{display:flex;width:100%;align-items:center;gap:16px;justify-content:space-between}.value-path-selector__form ::ng-deep cds-dropdown{width:100%}.value-path-selector__form ::ng-deep .cds--toggle__label-text{display:none}.value-path-selector__form ::ng-deep .cds--toggle__label{display:flex}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n  } as obs\"\n>\n  <v-input-label [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\"> </v-input-label>\n\n  <form [formGroup]=\"formGroup\" class=\"value-path-selector__form\">\n    <cds-toggle\n      data-testid=\"value-path-selector-toggle\"\n      size=\"sm\"\n      [disabled]=\"obs.disabled\"\n      [onText]=\"'valuePathSelector.dropdown' | translate\"\n      [offText]=\"'valuePathSelector.manual' | translate\"\n      [checked]=\"obs.inputModeIsDropdown\"\n      (checkedChange)=\"onInputModeChange($event)\"\n    ></cds-toggle>\n\n    @if (obs.inputModeIsDropdown) {\n      <ng-container\n        *ngIf=\"\n          showDocumentDefinitionSelector && {\n            loadingDocumentDefinitionItems: loadingDocumentDefinitionItems$ | async,\n            documentDefinitionListItems: documentDefinitionListItems$ | async,\n          } as docObs\n        \"\n      >\n        <cds-dropdown\n          data-testid=\"value-path-selector-documentDefinition\"\n          [appendInline]=\"appendInline\"\n          [disabled]=\"\n            obs.disabled ||\n            docObs.loadingDocumentDefinitionItems ||\n            !docObs.documentDefinitionListItems ||\n            (docObs.documentDefinitionListItems || []).length === 0\n          \"\n          (selected)=\"onDocumentDefinitionSelected($event)\"\n          [placeholder]=\"'valuePathSelector.selectDocDefPlaceholder' | translate\"\n        >\n          <cds-dropdown-list [items]=\"docObs.documentDefinitionListItems || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </ng-container>\n\n      <cds-dropdown\n        data-testid=\"value-path-selector-valuePath\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"\n          obs.disabled ||\n          obs.loadingValuePathItems ||\n          !obs.valuePathListItems ||\n          (obs.valuePathListItems || []).length === 0\n        \"\n        (selected)=\"onPathSelected($event)\"\n        [placeholder]=\"'valuePathSelector.placeholder' | translate\"\n      >\n        <cds-dropdown-list [items]=\"obs.valuePathListItems || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    } @else {\n      <input\n        data-testid=\"value-path-selector-input\"\n        cdsText\n        type=\"text\"\n        formControlName=\"selectedPath\"\n      />\n    }\n  </form>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}::ng-deep .value-path-selector--margin-bottom{margin-bottom:16px}::ng-deep .value-path-selector--margin-bottom-lg{margin-bottom:24px}::ng-deep .value-path-selector--margin-bottom-xl{margin-bottom:34px}.value-path-selector__form{display:flex;width:100%;align-items:center;gap:16px;justify-content:space-between}.value-path-selector__form ::ng-deep cds-dropdown{width:100%;min-width:0}.value-path-selector__form ::ng-deep .cds--toggle__label-text{display:none}.value-path-selector__form ::ng-deep .cds--toggle__label{display:flex}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorComponent, decorators: [{
             type: Component,
@@ -9654,7 +9654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => ValuePathSelectorComponent),
                         },
-                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n  } as obs\"\n>\n  <v-input-label [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\"> </v-input-label>\n\n  <form [formGroup]=\"formGroup\" class=\"value-path-selector__form\">\n    @if (obs.inputModeIsDropdown) {\n      <ng-container\n        *ngIf=\"\n          showDocumentDefinitionSelector && {\n            loadingDocumentDefinitionItems: loadingDocumentDefinitionItems$ | async,\n            documentDefinitionListItems: documentDefinitionListItems$ | async,\n          } as docObs\n        \"\n      >\n        <cds-dropdown\n          data-testid=\"value-path-selector-documentDefinition\"\n          [appendInline]=\"appendInline\"\n          [disabled]=\"\n            obs.disabled ||\n            docObs.loadingDocumentDefinitionItems ||\n            !docObs.documentDefinitionListItems\n          \"\n          (selected)=\"onDocumentDefinitionSelected($event)\"\n          [placeholder]=\"'valuePathSelector.selectDocDefPlaceholder' | translate\"\n        >\n          <cds-dropdown-list [items]=\"docObs.documentDefinitionListItems || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </ng-container>\n\n      <cds-dropdown\n        data-testid=\"value-path-selector-valuePath\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"obs.disabled || obs.loadingValuePathItems || !obs.valuePathListItems\"\n        (selected)=\"onPathSelected($event)\"\n        [placeholder]=\"'valuePathSelector.placeholder' | translate\"\n      >\n        <cds-dropdown-list [items]=\"obs.valuePathListItems || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    } @else {\n      <input\n        data-testid=\"value-path-selector-input\"\n        cdsText\n        type=\"text\"\n        formControlName=\"selectedPath\"\n      />\n    }\n\n    <cds-toggle\n      data-testid=\"value-path-selector-toggle\"\n      [disabled]=\"obs.disabled\"\n      [onText]=\"'valuePathSelector.dropdown' | translate\"\n      [offText]=\"'valuePathSelector.manual' | translate\"\n      [checked]=\"obs.inputModeIsDropdown\"\n      (checkedChange)=\"onInputModeChange($event)\"\n    ></cds-toggle>\n  </form>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}::ng-deep .value-path-selector--margin-bottom{margin-bottom:16px}::ng-deep .value-path-selector--margin-bottom-lg{margin-bottom:24px}::ng-deep .value-path-selector--margin-bottom-xl{margin-bottom:34px}.value-path-selector__form{display:flex;width:100%;align-items:center;gap:16px;justify-content:space-between}.value-path-selector__form ::ng-deep cds-dropdown{width:100%}.value-path-selector__form ::ng-deep .cds--toggle__label-text{display:none}.value-path-selector__form ::ng-deep .cds--toggle__label{display:flex}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n  } as obs\"\n>\n  <v-input-label [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\"> </v-input-label>\n\n  <form [formGroup]=\"formGroup\" class=\"value-path-selector__form\">\n    <cds-toggle\n      data-testid=\"value-path-selector-toggle\"\n      size=\"sm\"\n      [disabled]=\"obs.disabled\"\n      [onText]=\"'valuePathSelector.dropdown' | translate\"\n      [offText]=\"'valuePathSelector.manual' | translate\"\n      [checked]=\"obs.inputModeIsDropdown\"\n      (checkedChange)=\"onInputModeChange($event)\"\n    ></cds-toggle>\n\n    @if (obs.inputModeIsDropdown) {\n      <ng-container\n        *ngIf=\"\n          showDocumentDefinitionSelector && {\n            loadingDocumentDefinitionItems: loadingDocumentDefinitionItems$ | async,\n            documentDefinitionListItems: documentDefinitionListItems$ | async,\n          } as docObs\n        \"\n      >\n        <cds-dropdown\n          data-testid=\"value-path-selector-documentDefinition\"\n          [appendInline]=\"appendInline\"\n          [disabled]=\"\n            obs.disabled ||\n            docObs.loadingDocumentDefinitionItems ||\n            !docObs.documentDefinitionListItems ||\n            (docObs.documentDefinitionListItems || []).length === 0\n          \"\n          (selected)=\"onDocumentDefinitionSelected($event)\"\n          [placeholder]=\"'valuePathSelector.selectDocDefPlaceholder' | translate\"\n        >\n          <cds-dropdown-list [items]=\"docObs.documentDefinitionListItems || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </ng-container>\n\n      <cds-dropdown\n        data-testid=\"value-path-selector-valuePath\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"\n          obs.disabled ||\n          obs.loadingValuePathItems ||\n          !obs.valuePathListItems ||\n          (obs.valuePathListItems || []).length === 0\n        \"\n        (selected)=\"onPathSelected($event)\"\n        [placeholder]=\"'valuePathSelector.placeholder' | translate\"\n      >\n        <cds-dropdown-list [items]=\"obs.valuePathListItems || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    } @else {\n      <input\n        data-testid=\"value-path-selector-input\"\n        cdsText\n        type=\"text\"\n        formControlName=\"selectedPath\"\n      />\n    }\n  </form>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}::ng-deep .value-path-selector--margin-bottom{margin-bottom:16px}::ng-deep .value-path-selector--margin-bottom-lg{margin-bottom:24px}::ng-deep .value-path-selector--margin-bottom-xl{margin-bottom:34px}.value-path-selector__form{display:flex;width:100%;align-items:center;gap:16px;justify-content:space-between}.value-path-selector__form ::ng-deep cds-dropdown{width:100%;min-width:0}.value-path-selector__form ::ng-deep .cds--toggle__label-text{display:none}.value-path-selector__form ::ng-deep .cds--toggle__label{display:flex}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: ValuePathSelectorService }, { type: i2$1.FormBuilder }, { type: i2$3.DocumentService }], propDecorators: { _showMargin: [{
                 type: HostBinding,
                 args: ['class.value-path-selector--margin-bottom']
@@ -11769,6 +11769,475 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/*
+ * 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.
+ */
+class KeyValueComponent {
+    constructor() {
+        this.fullWidth = false;
+        this.disabled = false;
+        this.keyColumnFlex = 1;
+        this.valueColumnFlex = 1;
+        this.valueChange = new EventEmitter();
+    }
+    onInputChange(type, inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue, type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: KeyValueComponent, isStandalone: true, selector: "valtimo-key-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-key-value', standalone: true, imports: [CommonModule, InputModule$1], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { keyColumnTitle: [{
+                type: Input
+            }], valueColumnTitle: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], keyColumnFlex: [{
+                type: Input
+            }], valueColumnFlex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * 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.
+ */
+class SingleValueComponent {
+    constructor() {
+        this.fullWidth = false;
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+    }
+    onInputChange(inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SingleValueComponent, isStandalone: true, selector: "valtimo-single-value", inputs: { value: "value", fullWidth: "fullWidth", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n  <input\n    cdsText\n    [defaultValue]=\"value?.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange($event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-single-value', standalone: true, imports: [CommonModule, InputModule$1], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n  <input\n    cdsText\n    [defaultValue]=\"value?.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange($event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * 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.
+ */
+class KeyDropdownValueComponent {
+    constructor() {
+        this.dropdownWidth = 250;
+        this.fullWidth = false;
+        this.disabled = false;
+        this.keyColumnFlex = 1;
+        this.dropdownColumnFlex = 1;
+        this.valueColumnFlex = 1;
+        this.valueChange = new EventEmitter();
+    }
+    onInputChange(type, inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue, type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyDropdownValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: KeyDropdownValueComponent, isStandalone: true, selector: "valtimo-key-dropdown-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", index: "index", value: "value", dropdownItems$: "dropdownItems$", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", disabled: "disabled", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.minWidth.px]=\"dropdownWidth\"\n  [style.flex]=\"dropdownColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n  <cds-dropdown (selected)=\"onInputChange('dropdown', $event.item.id)\" [appendInline]=\"true\">\n    <cds-dropdown-list [items]=\"dropdownItems$ | async\" type=\"multi\"></cds-dropdown-list>\n  </cds-dropdown>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyDropdownValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-key-dropdown-value', standalone: true, imports: [CommonModule, InputModule$1, DropdownModule], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.minWidth.px]=\"dropdownWidth\"\n  [style.flex]=\"dropdownColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n  <cds-dropdown (selected)=\"onInputChange('dropdown', $event.item.id)\" [appendInline]=\"true\">\n    <cds-dropdown-list [items]=\"dropdownItems$ | async\" type=\"multi\"></cds-dropdown-list>\n  </cds-dropdown>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { keyColumnTitle: [{
+                type: Input
+            }], valueColumnTitle: [{
+                type: Input
+            }], dropdownColumnTitle: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], dropdownItems$: [{
+                type: Input
+            }], dropdownWidth: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], keyColumnFlex: [{
+                type: Input
+            }], dropdownColumnFlex: [{
+                type: Input
+            }], valueColumnFlex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * 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.
+ */
+class ArbitraryAmountValueComponent {
+    constructor() {
+        this.fullWidth = false;
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+    }
+    get isFullWidth() {
+        return this.fullWidth;
+    }
+    onInputChange(arbitraryIndex, inputValue) {
+        this.valueChange.emit({
+            value: this.value,
+            inputValue,
+            type: 'arbitrary',
+            arbitraryIndex,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArbitraryAmountValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ArbitraryAmountValueComponent, isStandalone: true, selector: "valtimo-arbitrary-amount-value", inputs: { index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", arbitraryAmountTitles: "arbitraryAmountTitles", amountOfArbitraryValuesArray$: "amountOfArbitraryValuesArray$" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.isFullWidth" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@for (_ of amountOfArbitraryValuesArray$ | async; let i = $index; track i) {\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0\">{{\n      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value ? value['' + i] : ''\"\n      [disabled]=\"disabled\"\n      (input)=\"onInputChange(i, $event.target.value)\"\n    />\n  </div>\n\n  @if (((amountOfArbitraryValuesArray$ | async) || []).length - 1 !== i) {\n    <div class=\"v-multi-input__separator\"></div>\n  }\n}\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArbitraryAmountValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-arbitrary-amount-value', standalone: true, imports: [CommonModule, InputModule$1], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@for (_ of amountOfArbitraryValuesArray$ | async; let i = $index; track i) {\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0\">{{\n      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value ? value['' + i] : ''\"\n      [disabled]=\"disabled\"\n      (input)=\"onInputChange(i, $event.target.value)\"\n    />\n  </div>\n\n  @if (((amountOfArbitraryValuesArray$ | async) || []).length - 1 !== i) {\n    <div class=\"v-multi-input__separator\"></div>\n  }\n}\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], arbitraryAmountTitles: [{
+                type: Input
+            }], amountOfArbitraryValuesArray$: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], isFullWidth: [{
+                type: HostBinding,
+                args: ['class.--full-width']
+            }] } });
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+class KeyValuePathSelectorComponent {
+    constructor() {
+        this.fullWidth = false;
+        this.disabled = false;
+        this.documentDefinitionName = '';
+        this.prefixes = [];
+        this.showDocumentDefinitionSelector = false;
+        this.notation = 'dots';
+        this.keyColumnFlex = 1;
+        this.valueColumnFlex = 1;
+        this.valueChange = new EventEmitter();
+    }
+    onInputChange(type, inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue, type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyValuePathSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: KeyValuePathSelectorComponent, isStandalone: true, selector: "valtimo-key-value-path-selector", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", documentDefinitionName: "documentDefinitionName", prefixes: "prefixes", showDocumentDefinitionSelector: "showDocumentDefinitionSelector", notation: "notation", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input__input key\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.value\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('value', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}:host .path-selector{flex:2}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "documentDefinitionName", "version", "prefixes", "label", "tooltip", "required", "showDocumentDefinitionSelector", "notation", "defaultValue"], outputs: ["valueChangeEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyValuePathSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-key-value-path-selector', standalone: true, imports: [
+                        CommonModule,
+                        InputModule$1,
+                        ValuePathSelectorComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input__input key\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.value\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('value', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}:host .path-selector{flex:2}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { keyColumnTitle: [{
+                type: Input
+            }], valueColumnTitle: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], documentDefinitionName: [{
+                type: Input
+            }], prefixes: [{
+                type: Input
+            }], showDocumentDefinitionSelector: [{
+                type: Input
+            }], notation: [{
+                type: Input
+            }], keyColumnFlex: [{
+                type: Input
+            }], valueColumnFlex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * 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.
+ */
+class ValuePathSelectorValueComponent {
+    constructor() {
+        this.fullWidth = false;
+        this.disabled = false;
+        this.documentDefinitionName = '';
+        this.prefixes = [];
+        this.showDocumentDefinitionSelector = false;
+        this.notation = 'dots';
+        this.keyColumnFlex = 1;
+        this.valueColumnFlex = 1;
+        this.valueChange = new EventEmitter();
+    }
+    onInputChange(type, inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue, type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ValuePathSelectorValueComponent, isStandalone: true, selector: "valtimo-value-path-selector-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", documentDefinitionName: "documentDefinitionName", prefixes: "prefixes", showDocumentDefinitionSelector: "showDocumentDefinitionSelector", notation: "notation", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.key\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('key', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}:host .path-selector{flex:2}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "documentDefinitionName", "version", "prefixes", "label", "tooltip", "required", "showDocumentDefinitionSelector", "notation", "defaultValue"], outputs: ["valueChangeEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-value-path-selector-value', standalone: true, imports: [
+                        CommonModule,
+                        InputModule$1,
+                        ValuePathSelectorComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.key\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('key', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}:host .path-selector{flex:2}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { keyColumnTitle: [{
+                type: Input
+            }], valueColumnTitle: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], documentDefinitionName: [{
+                type: Input
+            }], prefixes: [{
+                type: Input
+            }], showDocumentDefinitionSelector: [{
+                type: Input
+            }], notation: [{
+                type: Input
+            }], keyColumnFlex: [{
+                type: Input
+            }], valueColumnFlex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * 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.
+ */
+class ValuePathSelectorDropdownValueComponent {
+    constructor() {
+        this.documentDefinitionName = '';
+        this.prefixes = [];
+        this.showDocumentDefinitionSelector = false;
+        this.notation = 'dots';
+        this.dropdownWidth = 250;
+        this.fullWidth = false;
+        this.disabled = false;
+        this.keyColumnFlex = 1;
+        this.dropdownColumnFlex = 1;
+        this.valueColumnFlex = 1;
+        this.valueChange = new EventEmitter();
+    }
+    onInputChange(type, inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue, type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorDropdownValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ValuePathSelectorDropdownValueComponent, isStandalone: true, selector: "valtimo-value-path-selector-dropdown-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", index: "index", value: "value", dropdownItems$: "dropdownItems$", documentDefinitionName: "documentDefinitionName", prefixes: "prefixes", showDocumentDefinitionSelector: "showDocumentDefinitionSelector", notation: "notation", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", disabled: "disabled", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.key\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('key', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.minWidth.px]=\"dropdownWidth\"\n  [style.flex]=\"dropdownColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n  <cds-dropdown (selected)=\"onInputChange('dropdown', $event.item.id)\" [appendInline]=\"true\">\n    <cds-dropdown-list [items]=\"dropdownItems$ | async\" type=\"multi\"></cds-dropdown-list>\n  </cds-dropdown>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;align-items:flex-end}:host.--full-width{width:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "documentDefinitionName", "version", "prefixes", "label", "tooltip", "required", "showDocumentDefinitionSelector", "notation", "defaultValue"], outputs: ["valueChangeEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorDropdownValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-value-path-selector-dropdown-value', standalone: true, imports: [
+                        CommonModule,
+                        InputModule$1,
+                        DropdownModule,
+                        ValuePathSelectorComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.key\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('key', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.minWidth.px]=\"dropdownWidth\"\n  [style.flex]=\"dropdownColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n  <cds-dropdown (selected)=\"onInputChange('dropdown', $event.item.id)\" [appendInline]=\"true\">\n    <cds-dropdown-list [items]=\"dropdownItems$ | async\" type=\"multi\"></cds-dropdown-list>\n  </cds-dropdown>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;align-items:flex-end}:host.--full-width{width:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { keyColumnTitle: [{
+                type: Input
+            }], valueColumnTitle: [{
+                type: Input
+            }], dropdownColumnTitle: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], dropdownItems$: [{
+                type: Input
+            }], documentDefinitionName: [{
+                type: Input
+            }], prefixes: [{
+                type: Input
+            }], showDocumentDefinitionSelector: [{
+                type: Input
+            }], notation: [{
+                type: Input
+            }], dropdownWidth: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], keyColumnFlex: [{
+                type: Input
+            }], dropdownColumnFlex: [{
+                type: Input
+            }], valueColumnFlex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -11786,53 +12255,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  */
 class CarbonMultiInputComponent {
     constructor() {
-        this.name = '';
-        this.title = '';
-        this.titleTranslationKey = '';
-        this.type = 'value';
-        this.initialAmountOfRows = 1;
-        this.minimumAmountOfRows = 1;
-        this.maxRows = null;
         this.addRowText = '';
         this.addRowTranslationKey = '';
         this.deleteRowText = '';
         this.deleteRowTranslationKey = '';
         this.disabled = false;
-        this.margin = false;
-        this.tooltip = '';
-        this.required = false;
-        this.keyColumnTitle = '';
-        this.valueColumnTitle = '';
         this.dropdownColumnTitle = '';
-        this.hideDeleteButton = false;
-        this.hideAddButton = false;
         this.dropdownWidth = 250;
         this.fullWidth = false;
-        this.carbonTheme = 'g10';
+        this.hideAddButton = false;
+        this.hideDeleteButton = false;
+        this.initialAmountOfRows = 1;
+        this.keyColumnTitle = '';
+        this.margin = false;
+        this.maxRows = null;
+        this.minimumAmountOfRows = 1;
+        this.name = '';
+        this.required = false;
+        this.title = '';
+        this.titleTranslationKey = '';
+        this.tooltip = '';
+        this.type = 'value';
+        this.valueColumnTitle = '';
+        this.valuePathSelectorDocumentDefinitionName = '';
+        this.valuePathSelectorPrefixes = [];
+        this.valuePathSelectorShowDocumentDefinitionSelector = false;
+        this.valuePathSelectorNotation = 'dots';
+        this.keyColumnFlex = 1;
+        this.dropdownColumnFlex = 1;
+        this.valueColumnFlex = 1;
         this.valueChange = new EventEmitter();
         this.allValuesValidEvent = new EventEmitter();
         this.amountOfArbitraryValuesArray$ = new BehaviorSubject([]);
         this.values$ = new BehaviorSubject([]);
-        this.mappedValues$ = this.values$.pipe(map$1(values => values
-            .map(value => this.getMappedValue(value))
-            .filter(value => {
-            switch (this.type) {
-                case 'value':
-                    return value;
-                case 'keyValue':
-                    return value.value || value.key;
-                case 'keyDropdownValue':
-                    return (value.value &&
-                        value.key &&
-                        value.dropdown);
-                case 'arbitraryAmount':
-                    const objectValues = Object.values(value);
-                    const positiveValuesAmount = objectValues.filter(objectValue => !!objectValue);
-                    return objectValues.length === positiveValuesAmount.length;
-            }
-        })));
+        this.mappedValues$ = this.values$.pipe(map$1(values => this.filterAndMapValues(values)));
         this.addRowEnabled$ = this.values$.pipe(map$1(values => !!(this.maxRows === null || values.length < this.maxRows)));
         this.dropdownItems$ = new BehaviorSubject([]);
+        this._subscriptions = new Subscription();
     }
     set arbitraryValueAmount(value) {
         this._amountOfArbitraryValues = value;
@@ -11846,7 +12305,7 @@ class CarbonMultiInputComponent {
         this.openValuesSubscription();
     }
     ngOnDestroy() {
-        this._valuesSubscription?.unsubscribe();
+        this._subscriptions.unsubscribe();
     }
     addRow() {
         combineLatest([this.values$, this.addRowEnabled$])
@@ -11864,7 +12323,7 @@ class CarbonMultiInputComponent {
             }
         });
     }
-    trackByFn(index, value) {
+    trackByFn(_, value) {
         return value.uuid;
     }
     getDropdownItemsForRow(index) {
@@ -11900,9 +12359,9 @@ class CarbonMultiInputComponent {
     getInitialRows() {
         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: v4() }));
     }
@@ -11924,10 +12383,10 @@ class CarbonMultiInputComponent {
         };
     }
     getMappedValue(valueToMap) {
-        if (this.type === 'keyValue') {
+        if (this.type === 'keyValue' || this.type === 'keyValuePathSelector') {
             return { key: valueToMap.key, value: valueToMap.value };
         }
-        else if (this.type === 'keyDropdownValue') {
+        else if (this.type === 'keyDropdownValue' || this.type === 'valuePathSelectorDropdownValue') {
             return { key: valueToMap.key, value: valueToMap.value, dropdown: valueToMap.dropdown };
         }
         else if (this.type === 'arbitraryAmount') {
@@ -11938,73 +12397,110 @@ class CarbonMultiInputComponent {
         return valueToMap.value;
     }
     openValuesSubscription() {
-        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);
-        });
+        }));
     }
     getArrayOfXLength(length) {
         return Array(length).fill(0);
     }
+    filterAndMapValues(values) {
+        return values
+            .map(value => this.getMappedValue(value))
+            .filter(value => this.isValueValid(value));
+    }
+    isValueValid(value) {
+        switch (this.type) {
+            case 'value':
+                return !!value;
+            case 'keyValue':
+            case 'keyValuePathSelector':
+                return !!(value.value || value.key);
+            case 'keyDropdownValue':
+            case 'valuePathSelectorDropdownValue':
+                return !!(value.value &&
+                    value.key &&
+                    value.dropdown);
+            case 'arbitraryAmount':
+                const objectValues = Object.values(value);
+                const positiveValuesAmount = objectValues.filter(objectValue => !!objectValue);
+                return objectValues.length === positiveValuesAmount.length;
+            default:
+                return false;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", type: "type", arbitraryValueAmount: "arbitraryValueAmount", arbitraryAmountTitles: "arbitraryAmountTitles", initialAmountOfRows: "initialAmountOfRows", minimumAmountOfRows: "minimumAmountOfRows", maxRows: "maxRows", addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", defaultValues: "defaultValues", margin: "margin", tooltip: "tooltip", required: "required", keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", hideDeleteButton: "hideDeleteButton", hideAddButton: "hideAddButton", dropdownItems: "dropdownItems", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", carbonTheme: "carbonTheme" }, outputs: { valueChange: "valueChange", allValuesValidEvent: "allValuesValidEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyDropdownValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyDropdownValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'arbitraryAmount'\">\n        <ng-container\n          *ngTemplateOutlet=\"arbitraryAmountValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #singleValue let-value=\"value\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (change)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyValue let-value=\"value\" let-index=\"index\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</cds-label>\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #arbitraryAmountValue let-value=\"value\" let-index=\"index\">\n  <div\n    class=\"v-multi-input__input\"\n    [ngClass]=\"{'--full-width': fullWidth}\"\n    *ngFor=\"let _ of amountOfArbitraryValuesArray$ | async; index as i\"\n  >\n    <cds-label *ngIf=\"index === 0\">{{\n      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value ? value['' + i] : ''\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'arbitrary', i)\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyDropdownValue let-value=\"value\" let-index=\"index\">\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n\n  <div [style.minWidth.px]=\"dropdownWidth\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n    <cds-dropdown\n      (selected)=\"onValueChange(value, $event.item.id, 'dropdown')\"\n      [appendInline]=\"true\"\n    >\n      <cds-dropdown-list\n        [items]=\"getDropdownItemsForRow(index) | async\"\n        type=\"multi\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n", styles: [".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)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{width:100%}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: { addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", arbitraryAmountTitles: "arbitraryAmountTitles", arbitraryValueAmount: "arbitraryValueAmount", defaultValues: "defaultValues", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", dropdownColumnTitle: "dropdownColumnTitle", dropdownItems: "dropdownItems", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", hideAddButton: "hideAddButton", hideDeleteButton: "hideDeleteButton", initialAmountOfRows: "initialAmountOfRows", keyColumnTitle: "keyColumnTitle", margin: "margin", maxRows: "maxRows", minimumAmountOfRows: "minimumAmountOfRows", name: "name", required: "required", title: "title", titleTranslationKey: "titleTranslationKey", tooltip: "tooltip", type: "type", valueColumnTitle: "valueColumnTitle", valuePathSelectorDocumentDefinitionName: "valuePathSelectorDocumentDefinitionName", valuePathSelectorPrefixes: "valuePathSelectorPrefixes", valuePathSelectorShowDocumentDefinitionSelector: "valuePathSelectorShowDocumentDefinitionSelector", valuePathSelectorNotation: "valuePathSelectorNotation", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange", allValuesValidEvent: "allValuesValidEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      @switch (type) {\n        @case ('value') {\n          <valtimo-single-value\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, 'value')\"\n          ></valtimo-single-value>\n        }\n        @case ('keyValue') {\n          <valtimo-key-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value>\n        }\n        @case ('keyDropdownValue') {\n          <valtimo-key-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-dropdown-value>\n        }\n        @case ('arbitraryAmount') {\n          <valtimo-arbitrary-amount-value\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [arbitraryAmountTitles]=\"arbitraryAmountTitles\"\n            [amountOfArbitraryValuesArray$]=\"amountOfArbitraryValuesArray$\"\n            (valueChange)=\"\n              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)\n            \"\n          ></valtimo-arbitrary-amount-value>\n        }\n        @case ('keyValuePathSelector') {\n          <valtimo-key-value-path-selector\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value-path-selector>\n        }\n        @case ('valuePathSelectorValue') {\n          <valtimo-value-path-selector-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-value>\n        }\n        @case ('valuePathSelectorDropdownValue') {\n          <valtimo-value-path-selector-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-dropdown-value>\n        }\n      }\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".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)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: KeyValueComponent, selector: "valtimo-key-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: SingleValueComponent, selector: "valtimo-single-value", inputs: ["value", "fullWidth", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: KeyDropdownValueComponent, selector: "valtimo-key-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ArbitraryAmountValueComponent, selector: "valtimo-arbitrary-amount-value", inputs: ["index", "value", "fullWidth", "disabled", "arbitraryAmountTitles", "amountOfArbitraryValuesArray$"], outputs: ["valueChange"] }, { kind: "component", type: KeyValuePathSelectorComponent, selector: "valtimo-key-value-path-selector", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "documentDefinitionName", "prefixes", "showDocumentDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorValueComponent, selector: "valtimo-value-path-selector-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "documentDefinitionName", "prefixes", "showDocumentDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorDropdownValueComponent, selector: "valtimo-value-path-selector-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "documentDefinitionName", "prefixes", "showDocumentDefinitionSelector", "notation", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonMultiInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-carbon-multi-input', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyDropdownValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyDropdownValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'arbitraryAmount'\">\n        <ng-container\n          *ngTemplateOutlet=\"arbitraryAmountValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #singleValue let-value=\"value\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (change)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyValue let-value=\"value\" let-index=\"index\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</cds-label>\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #arbitraryAmountValue let-value=\"value\" let-index=\"index\">\n  <div\n    class=\"v-multi-input__input\"\n    [ngClass]=\"{'--full-width': fullWidth}\"\n    *ngFor=\"let _ of amountOfArbitraryValuesArray$ | async; index as i\"\n  >\n    <cds-label *ngIf=\"index === 0\">{{\n      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value ? value['' + i] : ''\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'arbitrary', i)\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyDropdownValue let-value=\"value\" let-index=\"index\">\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n\n  <div [style.minWidth.px]=\"dropdownWidth\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n    <cds-dropdown\n      (selected)=\"onValueChange(value, $event.item.id, 'dropdown')\"\n      [appendInline]=\"true\"\n    >\n      <cds-dropdown-list\n        [items]=\"getDropdownItemsForRow(index) | async\"\n        type=\"multi\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n", styles: [".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)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{width:100%}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], title: [{
+            args: [{ selector: 'valtimo-carbon-multi-input', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      @switch (type) {\n        @case ('value') {\n          <valtimo-single-value\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, 'value')\"\n          ></valtimo-single-value>\n        }\n        @case ('keyValue') {\n          <valtimo-key-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value>\n        }\n        @case ('keyDropdownValue') {\n          <valtimo-key-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-dropdown-value>\n        }\n        @case ('arbitraryAmount') {\n          <valtimo-arbitrary-amount-value\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [arbitraryAmountTitles]=\"arbitraryAmountTitles\"\n            [amountOfArbitraryValuesArray$]=\"amountOfArbitraryValuesArray$\"\n            (valueChange)=\"\n              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)\n            \"\n          ></valtimo-arbitrary-amount-value>\n        }\n        @case ('keyValuePathSelector') {\n          <valtimo-key-value-path-selector\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value-path-selector>\n        }\n        @case ('valuePathSelectorValue') {\n          <valtimo-value-path-selector-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-value>\n        }\n        @case ('valuePathSelectorDropdownValue') {\n          <valtimo-value-path-selector-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"disabled\"\n            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-dropdown-value>\n        }\n      }\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".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)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { addRowText: [{
                 type: Input
-            }], titleTranslationKey: [{
+            }], addRowTranslationKey: [{
                 type: Input
-            }], type: [{
+            }], arbitraryAmountTitles: [{
                 type: Input
             }], arbitraryValueAmount: [{
                 type: Input
-            }], arbitraryAmountTitles: [{
+            }], defaultValues: [{
                 type: Input
-            }], initialAmountOfRows: [{
+            }], deleteRowText: [{
                 type: Input
-            }], minimumAmountOfRows: [{
+            }], deleteRowTranslationKey: [{
                 type: Input
-            }], maxRows: [{
+            }], disabled: [{
                 type: Input
-            }], addRowText: [{
+            }], dropdownColumnTitle: [{
                 type: Input
-            }], addRowTranslationKey: [{
+            }], dropdownItems: [{
                 type: Input
-            }], deleteRowText: [{
+            }], dropdownWidth: [{
                 type: Input
-            }], deleteRowTranslationKey: [{
+            }], fullWidth: [{
                 type: Input
-            }], disabled: [{
+            }], hideAddButton: [{
                 type: Input
-            }], defaultValues: [{
+            }], hideDeleteButton: [{
+                type: Input
+            }], initialAmountOfRows: [{
+                type: Input
+            }], keyColumnTitle: [{
                 type: Input
             }], margin: [{
                 type: Input
-            }], tooltip: [{
+            }], maxRows: [{
+                type: Input
+            }], minimumAmountOfRows: [{
+                type: Input
+            }], name: [{
                 type: Input
             }], required: [{
                 type: Input
-            }], keyColumnTitle: [{
+            }], title: [{
+                type: Input
+            }], titleTranslationKey: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], type: [{
                 type: Input
             }], valueColumnTitle: [{
                 type: Input
-            }], dropdownColumnTitle: [{
+            }], valuePathSelectorDocumentDefinitionName: [{
                 type: Input
-            }], hideDeleteButton: [{
+            }], valuePathSelectorPrefixes: [{
                 type: Input
-            }], hideAddButton: [{
+            }], valuePathSelectorShowDocumentDefinitionSelector: [{
                 type: Input
-            }], dropdownItems: [{
+            }], valuePathSelectorNotation: [{
                 type: Input
-            }], dropdownWidth: [{
+            }], keyColumnFlex: [{
                 type: Input
-            }], fullWidth: [{
+            }], dropdownColumnFlex: [{
                 type: Input
-            }], carbonTheme: [{
+            }], valueColumnFlex: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -13102,6 +13598,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -13127,7 +13751,14 @@ class CarbonMultiInputModule {
             ButtonModule$1,
             IconModule,
             InputModule$1,
-            DropdownModule], exports: [CarbonMultiInputComponent] }); }
+            DropdownModule,
+            KeyValueComponent,
+            SingleValueComponent,
+            KeyDropdownValueComponent,
+            ArbitraryAmountValueComponent,
+            KeyValuePathSelectorComponent,
+            ValuePathSelectorValueComponent,
+            ValuePathSelectorDropdownValueComponent], exports: [CarbonMultiInputComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonMultiInputModule, imports: [CommonModule,
             InputLabelModule,
             InputModule,
@@ -13136,7 +13767,14 @@ class CarbonMultiInputModule {
             ButtonModule$1,
             IconModule,
             InputModule$1,
-            DropdownModule] }); }
+            DropdownModule,
+            KeyValueComponent,
+            SingleValueComponent,
+            KeyDropdownValueComponent,
+            ArbitraryAmountValueComponent,
+            KeyValuePathSelectorComponent,
+            ValuePathSelectorValueComponent,
+            ValuePathSelectorDropdownValueComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonMultiInputModule, decorators: [{
             type: NgModule,
@@ -13152,6 +13790,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         IconModule,
                         InputModule$1,
                         DropdownModule,
+                        KeyValueComponent,
+                        SingleValueComponent,
+                        KeyDropdownValueComponent,
+                        ArbitraryAmountValueComponent,
+                        KeyValuePathSelectorComponent,
+                        ValuePathSelectorValueComponent,
+                        ValuePathSelectorDropdownValueComponent,
                     ],
                     exports: [CarbonMultiInputComponent],
                 }]