@valtimo/components 12.4.1 → 12.5.0

package/fesm2022/valtimo-components.mjs

@@ -112,6 +112,7 @@ var ViewType;
     ViewType["BOOLEAN"] = "boolean";
     ViewType["CURRENCY"] = "currency";
     ViewType["DATE"] = "date";
+    ViewType["DATE_TIME"] = "datetime";
     ViewType["ENUM"] = "enum";
     ViewType["NUMBER"] = "number";
     ViewType["PERCENT"] = "percent";
@@ -4848,9 +4849,9 @@ class DateTimeTypeConverter {
         if (!value)
             return '-';
         const dateValue = moment(value);
-        return (dateValue.isValid() ? dateValue : moment(value, 'DD-MM-YYYY, h:m:s'))
+        return (dateValue.isValid() ? dateValue : moment(value, 'DD-MM-YYYY, hh:mm:ss'))
             .locale(localStorage.getItem('langKey') ?? 'nl')
-            .format(definition?.format || 'DD-MM-YYYY, h:m:s');
+            .format(definition?.format || 'DD-MM-YYYY, hh:mm:ss');
     }
 }
 
@@ -5467,9 +5468,12 @@ class CarbonListComponent {
                         return this.resolveTagObject(item.tags);
                     }
                     default:
+                        const resolvedObject = this.resolveObject(field, item);
                         return new TableItem({
-                            title: this.resolveObject(field, item) ?? '-',
-                            data: this.resolveObject(field, item) ?? '-',
+                            title: resolvedObject ?? '-',
+                            data: (field.tooltipCharLimit
+                                ? this.transformContentEllipsis(resolvedObject, field.tooltipCharLimit)
+                                : resolvedObject) ?? '-',
                             template: this.defaultTemplate,
                             item,
                         });
@@ -5751,15 +5755,16 @@ class CarbonListComponent {
                 data: { tags: [] },
                 template: this.tagTemplate,
             });
-        const tags = itemTags.map((tag, index) => index === 0 ? { ...tag, ellipsisContent: this.transformTagEllipsis(tag.content) } : tag);
+        const tags = itemTags.map((tag, index) => index === 0
+            ? { ...tag, ellipsisContent: this.transformContentEllipsis(tag.content, TAG_ELLIPSIS_LIMIT) }
+            : tag);
         return new TableItem({
             data: { tags },
             template: this.tagTemplate,
         });
     }
-    transformTagEllipsis(tagContent) {
-        return (tagContent.substring(0, TAG_ELLIPSIS_LIMIT - 1) +
-            (tagContent.length > TAG_ELLIPSIS_LIMIT ? '...' : ''));
+    transformContentEllipsis(content, limit) {
+        return content.substring(0, limit - 1) + (content.length > limit ? '...' : '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonListComponent, deps: [{ token: CarbonListFilterPipe }, { token: i2$3.IconService }, { token: i2$5.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }, { token: KeyStateService }, { token: CarbonListDragAndDropService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CarbonListComponent, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", actions: "actions", actionItems: "actionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <cds-overflow-menu\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    [flip]=\"true\"\n    [offset]=\"{x: 0, y: 50}\"\n    placement=\"bottom\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (action of data.actions; track action.label) {\n      <cds-overflow-menu-option\n        [disabled]=\"action.disabledCallback ? action.disabledCallback(data.item) : false\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </cds-overflow-menu-option>\n    }\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  <ng-container *ngIf=\"!data.tags\">-</ng-container>\n\n  <div *ngIf=\"data.tags\" class=\"tag-template\">\n    @if (data.tags.length === 0) {\n      -\n    } @else {\n      <cds-tag *ngIf=\"!!data.tags[0].content\" class=\"cds-tag--no-margin\" [type]=\"data.tags[0].type\">\n        {{ data.tags[0].ellipsisContent ?? data.tags[0].content }}\n      </cds-tag>\n\n      <cds-tag\n        *ngIf=\"data.tags.length > 1\"\n        class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n        type=\"high-contrast\"\n        (click)=\"onTagClick($event, data.tags)\"\n      >\n        {{ data.tags.length - 1 }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n      </cds-tag>\n    }\n  </div>\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -8312,11 +8317,11 @@ class FormioComponent {
         this._overrideOptions$.next(config.formioOptions);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormioComponent, deps: [{ token: i8.UserProviderService }, { token: i2$5.NGXLogger }, { token: FormIoStateService }, { token: i1$2.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormioComponent, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ 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: i10$1.FormioComponent, selector: "formio" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormioComponent, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ 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: i10$1.FormioComponent, selector: "formio" }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], 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    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n" }]
+            args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], 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=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i8.UserProviderService }, { type: i2$5.NGXLogger }, { type: FormIoStateService }, { type: i1$2.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i2.ConfigService }], propDecorators: { options: [{
                 type: Input
             }], submission: [{
@@ -8450,11 +8455,11 @@ class FormioBuilderComponent {
         this.change.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormioBuilderComponent, deps: [{ token: i1.TranslateService }, { token: FormIoStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, 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 *ngIf=\"(editFormModified$ | async) && form$ | async as formDefinition\">\n  <form-builder\n    [form]=\"formDefinition\"\n    [rebuild]=\"triggerRebuild\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10$1.FormBuilderComponent, selector: "form-builder", inputs: ["form", "options", "formbuilder", "noeval", "refresh", "rebuild"], outputs: ["change"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, 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=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"(editFormModified$ | async) && form$ | async as formDefinition\"\n>\n  <form-builder\n    [form]=\"formDefinition\"\n    [rebuild]=\"triggerRebuild\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10$1.FormBuilderComponent, selector: "form-builder", inputs: ["form", "options", "formbuilder", "noeval", "refresh", "rebuild"], outputs: ["change"] }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormioBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-form-io-builder', 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 *ngIf=\"(editFormModified$ | async) && form$ | async as formDefinition\">\n  <form-builder\n    [form]=\"formDefinition\"\n    [rebuild]=\"triggerRebuild\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n" }]
+            args: [{ selector: 'valtimo-form-io-builder', 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=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"(editFormModified$ | async) && form$ | async as formDefinition\"\n>\n  <form-builder\n    [form]=\"formDefinition\"\n    [rebuild]=\"triggerRebuild\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.TranslateService }, { type: FormIoStateService }], propDecorators: { form: [{
                 type: Input
             }], change: [{
@@ -9784,7 +9789,8 @@ class FormIoModule {
             ResourceModule,
             RouterModule,
             ReactiveFormsModule,
-            FormioValueResolverSelectorComponent], exports: [FormioComponent,
+            FormioValueResolverSelectorComponent,
+            LayerModule], exports: [FormioComponent,
             FormioBuilderComponent,
             FormIoUploaderComponent,
             FormIoCurrentUserComponent,
@@ -9806,7 +9812,8 @@ class FormIoModule {
             ResourceModule,
             RouterModule,
             ReactiveFormsModule,
-            FormioValueResolverSelectorComponent] }); }
+            FormioValueResolverSelectorComponent,
+            LayerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormIoModule, decorators: [{
             type: NgModule,
@@ -9822,6 +9829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         RouterModule,
                         ReactiveFormsModule,
                         FormioValueResolverSelectorComponent,
+                        LayerModule,
                     ],
                     declarations: [
                         FormioComponent,
@@ -10646,11 +10654,11 @@ class SearchableDropdownSelectComponent {
         this.clearSelection.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchableDropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: { style: "style", items: "items", buttonText: "buttonText", searchText: "searchText", noResultsText: "noResultsText", disabled: "disabled", selectedText: "selectedText", selectedTextValue: "selectedTextValue", clearSelectionButtonTitle: "clearSelectionButtonTitle", hasSelection: "hasSelection", width: "width", hasPermission: "hasPermission", showClearSelection: "showClearSelection" }, outputs: { itemSelected: "itemSelected", clearSelection: "clearSelection" }, 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 *ngIf=\"!hasSelection; else selection\">\n  <valtimo-searchable-dropdown\n    *ngIf=\"hasPermission\"\n    [buttonText]=\"buttonText\"\n    [disabled]=\"disabled\"\n    [items]=\"items\"\n    [noResultsText]=\"noResultsText\"\n    [searchText]=\"searchText\"\n    [style]=\"style\"\n    [width]=\"width\"\n    (itemSelected)=\"onSelect($event)\"\n  >\n  </valtimo-searchable-dropdown>\n</ng-container>\n\n<ng-template #selection>\n  <div\n    class=\"d-flex flex-row align-items-center\"\n    [style.height.px]=\"style === 'button' ? 34 : null\"\n  >\n    <h5 class=\"selected-text\">\n      {{ selectedText }} <b>{{ selectedTextValue }}</b>\n    </h5>\n    <button\n      *ngIf=\"hasPermission && showClearSelection\"\n      [title]=\"clearSelectionButtonTitle\"\n      (click)=\"onClearSelection()\"\n      aria-label=\"Close\"\n      class=\"close p-0 m-0 ml-2 text-danger\"\n      type=\"button\"\n    >\n      <i class=\"clear-icon mdi mdi-close text-danger\"></i>\n    </button>\n  </div>\n</ng-template>\n", styles: [".selected-text{margin:0}.clear-icon{font-size:16px}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchableDropdownComponent, selector: "valtimo-searchable-dropdown", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "width"], outputs: ["itemSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: { style: "style", items: "items", buttonText: "buttonText", searchText: "searchText", noResultsText: "noResultsText", disabled: "disabled", selectedText: "selectedText", selectedTextValue: "selectedTextValue", clearSelectionButtonTitle: "clearSelectionButtonTitle", hasSelection: "hasSelection", width: "width", hasPermission: "hasPermission", showClearSelection: "showClearSelection" }, outputs: { itemSelected: "itemSelected", clearSelection: "clearSelection" }, 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 *ngIf=\"!hasSelection; else selection\">\n  <valtimo-searchable-dropdown\n    *ngIf=\"hasPermission\"\n    [buttonText]=\"buttonText\"\n    [disabled]=\"disabled\"\n    [items]=\"items\"\n    [noResultsText]=\"noResultsText\"\n    [searchText]=\"searchText\"\n    [style]=\"style\"\n    [width]=\"width\"\n    (itemSelected)=\"onSelect($event)\"\n  >\n  </valtimo-searchable-dropdown>\n</ng-container>\n\n<ng-template #selection>\n  <div\n    class=\"d-flex flex-row align-items-center\"\n    [style.height.px]=\"style === 'button' ? 34 : null\"\n  >\n    <h5 class=\"selected-text\">\n      {{ selectedText }} <b>{{ selectedTextValue }}</b>\n    </h5>\n    <button\n      *ngIf=\"hasPermission && showClearSelection\"\n      [title]=\"clearSelectionButtonTitle\"\n      (click)=\"onClearSelection()\"\n      aria-label=\"Close\"\n      class=\"close p-0 m-0 ml-2 text-danger\"\n      type=\"button\"\n    >\n      <i class=\"clear-icon mdi mdi-close text-danger\"></i>\n    </button>\n  </div>\n</ng-template>\n", styles: [".selected-text{margin:0}.clear-icon{font-size:16px}.close{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: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchableDropdownComponent, selector: "valtimo-searchable-dropdown", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "width"], outputs: ["itemSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchableDropdownSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-searchable-dropdown-select', 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 *ngIf=\"!hasSelection; else selection\">\n  <valtimo-searchable-dropdown\n    *ngIf=\"hasPermission\"\n    [buttonText]=\"buttonText\"\n    [disabled]=\"disabled\"\n    [items]=\"items\"\n    [noResultsText]=\"noResultsText\"\n    [searchText]=\"searchText\"\n    [style]=\"style\"\n    [width]=\"width\"\n    (itemSelected)=\"onSelect($event)\"\n  >\n  </valtimo-searchable-dropdown>\n</ng-container>\n\n<ng-template #selection>\n  <div\n    class=\"d-flex flex-row align-items-center\"\n    [style.height.px]=\"style === 'button' ? 34 : null\"\n  >\n    <h5 class=\"selected-text\">\n      {{ selectedText }} <b>{{ selectedTextValue }}</b>\n    </h5>\n    <button\n      *ngIf=\"hasPermission && showClearSelection\"\n      [title]=\"clearSelectionButtonTitle\"\n      (click)=\"onClearSelection()\"\n      aria-label=\"Close\"\n      class=\"close p-0 m-0 ml-2 text-danger\"\n      type=\"button\"\n    >\n      <i class=\"clear-icon mdi mdi-close text-danger\"></i>\n    </button>\n  </div>\n</ng-template>\n", styles: [".selected-text{margin:0}.clear-icon{font-size:16px}\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"] }]
+            args: [{ selector: 'valtimo-searchable-dropdown-select', 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 *ngIf=\"!hasSelection; else selection\">\n  <valtimo-searchable-dropdown\n    *ngIf=\"hasPermission\"\n    [buttonText]=\"buttonText\"\n    [disabled]=\"disabled\"\n    [items]=\"items\"\n    [noResultsText]=\"noResultsText\"\n    [searchText]=\"searchText\"\n    [style]=\"style\"\n    [width]=\"width\"\n    (itemSelected)=\"onSelect($event)\"\n  >\n  </valtimo-searchable-dropdown>\n</ng-container>\n\n<ng-template #selection>\n  <div\n    class=\"d-flex flex-row align-items-center\"\n    [style.height.px]=\"style === 'button' ? 34 : null\"\n  >\n    <h5 class=\"selected-text\">\n      {{ selectedText }} <b>{{ selectedTextValue }}</b>\n    </h5>\n    <button\n      *ngIf=\"hasPermission && showClearSelection\"\n      [title]=\"clearSelectionButtonTitle\"\n      (click)=\"onClearSelection()\"\n      aria-label=\"Close\"\n      class=\"close p-0 m-0 ml-2 text-danger\"\n      type=\"button\"\n    >\n      <i class=\"clear-icon mdi mdi-close text-danger\"></i>\n    </button>\n  </div>\n</ng-template>\n", styles: [".selected-text{margin:0}.clear-icon{font-size:16px}.close{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"] }]
         }], propDecorators: { style: [{
                 type: Input
             }], items: [{
@@ -11224,12 +11232,6 @@ class InputComponent {
         this.valueSubscription?.unsubscribe();
         this.clearSubscription?.unsubscribe();
     }
-    onKeydown(event) {
-        if (event.code !== 'Enter') {
-            return;
-        }
-        event.preventDefault();
-    }
     toggleShowPassword() {
         this.showPassword$.pipe(take$1(1)).subscribe(showPassword => {
             this.showPassword$.next(!showPassword);
@@ -11276,11 +11278,11 @@ class InputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputComponent, selector: "v-input", inputs: { name: "name", type: "type", title: "title", titleTranslationKey: "titleTranslationKey", defaultValue: "defaultValue", widthPx: "widthPx", fullWidth: "fullWidth", margin: "margin", smallMargin: "smallMargin", disabled: "disabled", step: "step", min: "min", maxLength: "maxLength", tooltip: "tooltip", required: "required", hideNumberSpinBox: "hideNumberSpinBox", smallLabel: "smallLabel", rows: "rows", clear$: "clear$", carbonTheme: "carbonTheme", placeholder: "placeholder", dataTestId: "dataTestId" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidthClass" } }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"v-input-container\">\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textareaInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"passwordInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"numberInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"digitOnlyInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"checkboxInput\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #textInput>\n  <input\n    *ngIf=\"isText\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    [ngModel]=\"inputValue$ | async\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (keydown)=\"onKeydown($event)\"\n    [style.width.px]=\"widthPx\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #textareaInput>\n  <textarea\n    *ngIf=\"isTextarea\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsTextArea\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [rows]=\"rows\"\n    (keydown)=\"onKeydown($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n  ></textarea>\n</ng-template>\n\n<ng-template #passwordInput>\n  <ng-container *ngIf=\"isPassword\">\n    <div\n      *ngIf=\"{showPassword: showPassword$ | async} as obs\"\n      [ngClass]=\"{\n        'v-input--full-width': fullWidthClass,\n        'v-input--margin': margin,\n        'v-input--small-margin': smallMargin,\n      }\"\n      class=\"v-input__password-container\"\n    >\n      <input\n        [ngClass]=\"{\n          'v-input--full-width': fullWidthClass,\n        }\"\n        cdsText\n        [attr.data-testid]=\"dataTestId\"\n        [disabled]=\"disabled\"\n        [maxLength]=\"maxLength\"\n        [min]=\"0\"\n        [name]=\"name\"\n        [ngModel]=\"inputValue$ | async\"\n        [step]=\"step\"\n        (keydown)=\"onKeydown($event)\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [style.width.px]=\"widthPx\"\n        [type]=\"obs.showPassword ? 'text' : 'password'\"\n      />\n      <div class=\"v-input__password-icon\">\n        <v-button\n          [mdiIcon]=\"obs.showPassword ? 'eye-off' : 'eye'\"\n          type=\"icon-grey-small\"\n          (clickEvent)=\"toggleShowPassword()\"\n        ></v-button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #numberInput>\n  <input\n    *ngIf=\"isNumber\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n      'v-input--hide-spinbox': hideNumberSpinBox,\n    }\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"min\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (keydown)=\"onKeydown($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"number\"\n  />\n</ng-template>\n\n<ng-template #digitOnlyInput>\n  <input\n    *ngIf=\"isDigitOnly\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsText\n    digitOnly\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (keydown)=\"onKeydown($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #checkboxInput>\n  <div *ngIf=\"isCheckbox\" (click)=\"stopCheckboxEventPropagation($event)\">\n    <cds-checkbox\n      [attr.data-testid]=\"dataTestId\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [ngModel]=\"inputValue$ | async\"\n      (ngModelChange)=\"onValueChange($event)\"\n    >\n    </cds-checkbox>\n  </div>\n</ng-template>\n", styles: [".full-width{width:100%}.v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i2$3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$3.TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[digitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputComponent, selector: "v-input", inputs: { name: "name", type: "type", title: "title", titleTranslationKey: "titleTranslationKey", defaultValue: "defaultValue", widthPx: "widthPx", fullWidth: "fullWidth", margin: "margin", smallMargin: "smallMargin", disabled: "disabled", step: "step", min: "min", maxLength: "maxLength", tooltip: "tooltip", required: "required", hideNumberSpinBox: "hideNumberSpinBox", smallLabel: "smallLabel", rows: "rows", clear$: "clear$", carbonTheme: "carbonTheme", placeholder: "placeholder", dataTestId: "dataTestId" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidthClass" } }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"v-input-container\">\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textareaInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"passwordInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"numberInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"digitOnlyInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"checkboxInput\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #textInput>\n  <input\n    *ngIf=\"isText\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    [ngModel]=\"inputValue$ | async\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #textareaInput>\n  <textarea\n    *ngIf=\"isTextarea\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsTextArea\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [rows]=\"rows\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n  ></textarea>\n</ng-template>\n\n<ng-template #passwordInput>\n  <ng-container *ngIf=\"isPassword\">\n    <div\n      *ngIf=\"{showPassword: showPassword$ | async} as obs\"\n      [ngClass]=\"{\n        'v-input--full-width': fullWidthClass,\n        'v-input--margin': margin,\n        'v-input--small-margin': smallMargin,\n      }\"\n      class=\"v-input__password-container\"\n    >\n      <input\n        [ngClass]=\"{\n          'v-input--full-width': fullWidthClass,\n        }\"\n        cdsText\n        [attr.data-testid]=\"dataTestId\"\n        [disabled]=\"disabled\"\n        [maxLength]=\"maxLength\"\n        [min]=\"0\"\n        [name]=\"name\"\n        [ngModel]=\"inputValue$ | async\"\n        [step]=\"step\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [style.width.px]=\"widthPx\"\n        [type]=\"obs.showPassword ? 'text' : 'password'\"\n      />\n      <div class=\"v-input__password-icon\">\n        <v-button\n          [mdiIcon]=\"obs.showPassword ? 'eye-off' : 'eye'\"\n          type=\"icon-grey-small\"\n          (clickEvent)=\"toggleShowPassword()\"\n        ></v-button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #numberInput>\n  <input\n    *ngIf=\"isNumber\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n      'v-input--hide-spinbox': hideNumberSpinBox,\n    }\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"min\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"number\"\n  />\n</ng-template>\n\n<ng-template #digitOnlyInput>\n  <input\n    *ngIf=\"isDigitOnly\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsText\n    digitOnly\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #checkboxInput>\n  <div *ngIf=\"isCheckbox\" (click)=\"stopCheckboxEventPropagation($event)\">\n    <cds-checkbox\n      [attr.data-testid]=\"dataTestId\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [ngModel]=\"inputValue$ | async\"\n      (ngModelChange)=\"onValueChange($event)\"\n    >\n    </cds-checkbox>\n  </div>\n</ng-template>\n", styles: [".full-width{width:100%}.v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i2$3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$3.TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[digitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-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 class=\"v-input-container\">\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textareaInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"passwordInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"numberInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"digitOnlyInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"checkboxInput\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #textInput>\n  <input\n    *ngIf=\"isText\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    [ngModel]=\"inputValue$ | async\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (keydown)=\"onKeydown($event)\"\n    [style.width.px]=\"widthPx\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #textareaInput>\n  <textarea\n    *ngIf=\"isTextarea\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsTextArea\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [rows]=\"rows\"\n    (keydown)=\"onKeydown($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n  ></textarea>\n</ng-template>\n\n<ng-template #passwordInput>\n  <ng-container *ngIf=\"isPassword\">\n    <div\n      *ngIf=\"{showPassword: showPassword$ | async} as obs\"\n      [ngClass]=\"{\n        'v-input--full-width': fullWidthClass,\n        'v-input--margin': margin,\n        'v-input--small-margin': smallMargin,\n      }\"\n      class=\"v-input__password-container\"\n    >\n      <input\n        [ngClass]=\"{\n          'v-input--full-width': fullWidthClass,\n        }\"\n        cdsText\n        [attr.data-testid]=\"dataTestId\"\n        [disabled]=\"disabled\"\n        [maxLength]=\"maxLength\"\n        [min]=\"0\"\n        [name]=\"name\"\n        [ngModel]=\"inputValue$ | async\"\n        [step]=\"step\"\n        (keydown)=\"onKeydown($event)\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [style.width.px]=\"widthPx\"\n        [type]=\"obs.showPassword ? 'text' : 'password'\"\n      />\n      <div class=\"v-input__password-icon\">\n        <v-button\n          [mdiIcon]=\"obs.showPassword ? 'eye-off' : 'eye'\"\n          type=\"icon-grey-small\"\n          (clickEvent)=\"toggleShowPassword()\"\n        ></v-button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #numberInput>\n  <input\n    *ngIf=\"isNumber\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n      'v-input--hide-spinbox': hideNumberSpinBox,\n    }\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"min\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (keydown)=\"onKeydown($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"number\"\n  />\n</ng-template>\n\n<ng-template #digitOnlyInput>\n  <input\n    *ngIf=\"isDigitOnly\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsText\n    digitOnly\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (keydown)=\"onKeydown($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #checkboxInput>\n  <div *ngIf=\"isCheckbox\" (click)=\"stopCheckboxEventPropagation($event)\">\n    <cds-checkbox\n      [attr.data-testid]=\"dataTestId\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [ngModel]=\"inputValue$ | async\"\n      (ngModelChange)=\"onValueChange($event)\"\n    >\n    </cds-checkbox>\n  </div>\n</ng-template>\n", styles: [".full-width{width:100%}.v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}\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"] }]
+            args: [{ selector: 'v-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 class=\"v-input-container\">\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textareaInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"passwordInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"numberInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"digitOnlyInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"checkboxInput\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #textInput>\n  <input\n    *ngIf=\"isText\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    [ngModel]=\"inputValue$ | async\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #textareaInput>\n  <textarea\n    *ngIf=\"isTextarea\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsTextArea\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [rows]=\"rows\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n  ></textarea>\n</ng-template>\n\n<ng-template #passwordInput>\n  <ng-container *ngIf=\"isPassword\">\n    <div\n      *ngIf=\"{showPassword: showPassword$ | async} as obs\"\n      [ngClass]=\"{\n        'v-input--full-width': fullWidthClass,\n        'v-input--margin': margin,\n        'v-input--small-margin': smallMargin,\n      }\"\n      class=\"v-input__password-container\"\n    >\n      <input\n        [ngClass]=\"{\n          'v-input--full-width': fullWidthClass,\n        }\"\n        cdsText\n        [attr.data-testid]=\"dataTestId\"\n        [disabled]=\"disabled\"\n        [maxLength]=\"maxLength\"\n        [min]=\"0\"\n        [name]=\"name\"\n        [ngModel]=\"inputValue$ | async\"\n        [step]=\"step\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [style.width.px]=\"widthPx\"\n        [type]=\"obs.showPassword ? 'text' : 'password'\"\n      />\n      <div class=\"v-input__password-icon\">\n        <v-button\n          [mdiIcon]=\"obs.showPassword ? 'eye-off' : 'eye'\"\n          type=\"icon-grey-small\"\n          (clickEvent)=\"toggleShowPassword()\"\n        ></v-button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #numberInput>\n  <input\n    *ngIf=\"isNumber\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n      'v-input--hide-spinbox': hideNumberSpinBox,\n    }\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"min\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"number\"\n  />\n</ng-template>\n\n<ng-template #digitOnlyInput>\n  <input\n    *ngIf=\"isDigitOnly\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsText\n    digitOnly\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #checkboxInput>\n  <div *ngIf=\"isCheckbox\" (click)=\"stopCheckboxEventPropagation($event)\">\n    <cds-checkbox\n      [attr.data-testid]=\"dataTestId\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [ngModel]=\"inputValue$ | async\"\n      (ngModelChange)=\"onValueChange($event)\"\n    >\n    </cds-checkbox>\n  </div>\n</ng-template>\n", styles: [".full-width{width:100%}.v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}\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: { fullWidthClass: [{
                 type: HostBinding,
                 args: ['class.full-width']
@@ -11921,6 +11923,36 @@ 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,
+ * 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 DefaultValuePipe {
+    transform(values, uuid) {
+        return values.pipe(map$1(valuesArray => valuesArray.find(value => value.uuid === uuid)?.value || {}));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DefaultValuePipe, isStandalone: true, name: "defaultValue" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'defaultValue',
+                    standalone: true,
+                }]
+        }] });
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -11958,6 +11990,7 @@ class MultiInputFormComponent {
         this.values$ = new BehaviorSubject([]);
         this.mappedValues$ = this.values$.pipe(map$1(values => values.map(value => value.value)));
         this.addRowEnabled$ = this.values$.pipe(map$1(values => !!(this.maxRows === null || values.length < this.maxRows)));
+        this.initialDefaultValues$ = new BehaviorSubject([]);
         this.formValueChange = (newValue, rowUuid) => {
             const currentValues = this.values$.getValue();
             const newValues = [];
@@ -11973,7 +12006,15 @@ class MultiInputFormComponent {
         };
     }
     ngOnInit() {
-        this.values$.next(this.getInitialRows());
+        const initialValues = this.getInitialRows();
+        this.initialDefaultValues$.next(initialValues);
+        this.values$.next(initialValues);
+        this.openValuesSubscription();
+    }
+    ngOnChanges() {
+        const initialValues = this.getInitialRows();
+        this.initialDefaultValues$.next(initialValues);
+        this.values$.next(initialValues);
         this.openValuesSubscription();
     }
     ngOnDestroy() {
@@ -12051,16 +12092,17 @@ class MultiInputFormComponent {
         };
     }
     openValuesSubscription() {
+        this.valuesSubscription?.unsubscribe();
         this.valuesSubscription = this.values$.subscribe(values => {
             this.valueChange.emit(values);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiInputFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiInputFormComponent, selector: "v-multi-input-form", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", type: "type", initialAmountOfRows: "initialAmountOfRows", minimumAmountOfRows: "minimumAmountOfRows", maxRows: "maxRows", addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", defaultValues: "defaultValues", margin: "margin", tooltip: "tooltip", required: "required", formTemplate: "formTemplate" }, outputs: { valueChange: "valueChange", deleteRowEvent: "deleteRowEvent" }, 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\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\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>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\" #rows>\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; let i = index\"\n    >\n      <div\n        class=\"full-width\"\n        [ngClass]=\"{'v-multi-input__row-form--invisible': value.expanded === false}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            formTemplate;\n            context: {\n              index: i,\n              changeFunction: formValueChange,\n              uuid: value.uuid,\n              prefill: defaultValues && defaultValues[i],\n            }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"value.expanded === false\">\n        <v-paragraph>{{ getFirstValue(value) }}</v-paragraph>\n      </div>\n      <div class=\"v-multi-input__buttons\">\n        <div class=\"v-multi-input__toggle-button\">\n          <v-button\n            [mdiIcon]=\"value.expanded === true ? 'chevron-up' : 'chevron-down'\"\n            type=\"icon-grey\"\n            (clickEvent)=\"toggleRow(value.uuid, value.expanded)\"\n            [title]=\"\n              value.expanded ? ('interface.collapse' | translate) : ('interface.expand' | translate)\n            \"\n          ></v-button>\n        </div>\n        <div class=\"v-multi-input__delete-button\">\n          <v-button\n            [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n            mdiIcon=\"close\"\n            type=\"icon-danger\"\n            (clickEvent)=\"deleteRow(value.uuid)\"\n            [title]=\"vars.deleteRowText\"\n          ></v-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <v-button\n        mdiIcon=\"plus\"\n        type=\"success\"\n        (clickEvent)=\"addRow()\"\n        [title]=\"vars.addRowText\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        >{{ vars.addRowText }}</v-button\n      >\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:center;justify-content:space-between;margin-block-end:var(--v-multi-input-row-spacing-block);border:var(--v-multi-input-form-border);padding-block-start:var(--v-multi-input-padding);padding-block-end:var(--v-multi-input-padding);padding-inline-start:var(--v-multi-input-padding);padding-inline-end:var(--v-multi-input-padding);background-color:var(--v-multi-input-form-bg-color)}.v-multi-input__delete-button{align-self:flex-start}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__row-form--invisible{display:none}.v-multi-input__buttons{display:flex;align-items:center;justify-content:center;align-self:flex-start}.v-multi-input__toggle-button{margin-inline-end:var(--v-multi-input-button-spacing)}\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: "component", type: ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiInputFormComponent, selector: "v-multi-input-form", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", type: "type", initialAmountOfRows: "initialAmountOfRows", minimumAmountOfRows: "minimumAmountOfRows", maxRows: "maxRows", addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", defaultValues: "defaultValues", margin: "margin", tooltip: "tooltip", required: "required", formTemplate: "formTemplate" }, outputs: { valueChange: "valueChange", deleteRowEvent: "deleteRowEvent" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\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>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\" #rows>\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; let i = index\"\n    >\n      <div\n        class=\"full-width\"\n        [ngClass]=\"{'v-multi-input__row-form--invisible': value.expanded === false}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            formTemplate;\n            context: {\n              index: i,\n              changeFunction: formValueChange,\n              uuid: value.uuid,\n              prefill: initialDefaultValues$ | defaultValue: value.uuid | async,\n            }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"value.expanded === false\">\n        <v-paragraph>{{ getFirstValue(value) }}</v-paragraph>\n      </div>\n      <div class=\"v-multi-input__buttons\">\n        <div class=\"v-multi-input__toggle-button\">\n          <v-button\n            [mdiIcon]=\"value.expanded === true ? 'chevron-up' : 'chevron-down'\"\n            type=\"icon-grey\"\n            (clickEvent)=\"toggleRow(value.uuid, value.expanded)\"\n            [title]=\"\n              value.expanded ? ('interface.collapse' | translate) : ('interface.expand' | translate)\n            \"\n          ></v-button>\n        </div>\n        <div class=\"v-multi-input__delete-button\">\n          <v-button\n            [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n            mdiIcon=\"close\"\n            type=\"icon-danger\"\n            (clickEvent)=\"deleteRow(value.uuid)\"\n            [title]=\"vars.deleteRowText\"\n          ></v-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <v-button\n        mdiIcon=\"plus\"\n        type=\"success\"\n        (clickEvent)=\"addRow()\"\n        [title]=\"vars.addRowText\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        >{{ vars.addRowText }}</v-button\n      >\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:center;justify-content:space-between;margin-block-end:var(--v-multi-input-row-spacing-block);border:var(--v-multi-input-form-border);padding-block-start:var(--v-multi-input-padding);padding-block-end:var(--v-multi-input-padding);padding-inline-start:var(--v-multi-input-padding);padding-inline-end:var(--v-multi-input-padding);background-color:var(--v-multi-input-form-bg-color)}.v-multi-input__delete-button{align-self:flex-start}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__row-form--invisible{display:none}.v-multi-input__buttons{display:flex;align-items:center;justify-content:center;align-self:flex-start}.v-multi-input__toggle-button{margin-inline-end:var(--v-multi-input-button-spacing)}\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: "component", type: ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DefaultValuePipe, name: "defaultValue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiInputFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-multi-input-form', 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\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\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>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\" #rows>\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; let i = index\"\n    >\n      <div\n        class=\"full-width\"\n        [ngClass]=\"{'v-multi-input__row-form--invisible': value.expanded === false}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            formTemplate;\n            context: {\n              index: i,\n              changeFunction: formValueChange,\n              uuid: value.uuid,\n              prefill: defaultValues && defaultValues[i],\n            }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"value.expanded === false\">\n        <v-paragraph>{{ getFirstValue(value) }}</v-paragraph>\n      </div>\n      <div class=\"v-multi-input__buttons\">\n        <div class=\"v-multi-input__toggle-button\">\n          <v-button\n            [mdiIcon]=\"value.expanded === true ? 'chevron-up' : 'chevron-down'\"\n            type=\"icon-grey\"\n            (clickEvent)=\"toggleRow(value.uuid, value.expanded)\"\n            [title]=\"\n              value.expanded ? ('interface.collapse' | translate) : ('interface.expand' | translate)\n            \"\n          ></v-button>\n        </div>\n        <div class=\"v-multi-input__delete-button\">\n          <v-button\n            [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n            mdiIcon=\"close\"\n            type=\"icon-danger\"\n            (clickEvent)=\"deleteRow(value.uuid)\"\n            [title]=\"vars.deleteRowText\"\n          ></v-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <v-button\n        mdiIcon=\"plus\"\n        type=\"success\"\n        (clickEvent)=\"addRow()\"\n        [title]=\"vars.addRowText\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        >{{ vars.addRowText }}</v-button\n      >\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:center;justify-content:space-between;margin-block-end:var(--v-multi-input-row-spacing-block);border:var(--v-multi-input-form-border);padding-block-start:var(--v-multi-input-padding);padding-block-end:var(--v-multi-input-padding);padding-inline-start:var(--v-multi-input-padding);padding-inline-end:var(--v-multi-input-padding);background-color:var(--v-multi-input-form-bg-color)}.v-multi-input__delete-button{align-self:flex-start}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__row-form--invisible{display:none}.v-multi-input__buttons{display:flex;align-items:center;justify-content:center;align-self:flex-start}.v-multi-input__toggle-button{margin-inline-end:var(--v-multi-input-button-spacing)}\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"] }]
+            args: [{ selector: 'v-multi-input-form', 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\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\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>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\" #rows>\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; let i = index\"\n    >\n      <div\n        class=\"full-width\"\n        [ngClass]=\"{'v-multi-input__row-form--invisible': value.expanded === false}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            formTemplate;\n            context: {\n              index: i,\n              changeFunction: formValueChange,\n              uuid: value.uuid,\n              prefill: initialDefaultValues$ | defaultValue: value.uuid | async,\n            }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"value.expanded === false\">\n        <v-paragraph>{{ getFirstValue(value) }}</v-paragraph>\n      </div>\n      <div class=\"v-multi-input__buttons\">\n        <div class=\"v-multi-input__toggle-button\">\n          <v-button\n            [mdiIcon]=\"value.expanded === true ? 'chevron-up' : 'chevron-down'\"\n            type=\"icon-grey\"\n            (clickEvent)=\"toggleRow(value.uuid, value.expanded)\"\n            [title]=\"\n              value.expanded ? ('interface.collapse' | translate) : ('interface.expand' | translate)\n            \"\n          ></v-button>\n        </div>\n        <div class=\"v-multi-input__delete-button\">\n          <v-button\n            [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n            mdiIcon=\"close\"\n            type=\"icon-danger\"\n            (clickEvent)=\"deleteRow(value.uuid)\"\n            [title]=\"vars.deleteRowText\"\n          ></v-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <v-button\n        mdiIcon=\"plus\"\n        type=\"success\"\n        (clickEvent)=\"addRow()\"\n        [title]=\"vars.addRowText\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        >{{ vars.addRowText }}</v-button\n      >\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:center;justify-content:space-between;margin-block-end:var(--v-multi-input-row-spacing-block);border:var(--v-multi-input-form-border);padding-block-start:var(--v-multi-input-padding);padding-block-end:var(--v-multi-input-padding);padding-inline-start:var(--v-multi-input-padding);padding-inline-end:var(--v-multi-input-padding);background-color:var(--v-multi-input-form-bg-color)}.v-multi-input__delete-button{align-self:flex-start}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__row-form--invisible{display:none}.v-multi-input__buttons{display:flex;align-items:center;justify-content:center;align-self:flex-start}.v-multi-input__toggle-button{margin-inline-end:var(--v-multi-input-button-spacing)}\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: [{
@@ -13689,9 +13731,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/**
- * @deprecated Migrate old design to Carbon
- */
 class VModalComponent {
     constructor(modalService, iconService) {
         this.modalService = modalService;
@@ -13724,7 +13763,7 @@ class VModalComponent {
         this.modalService.setAppearingDelay(this.appearingDelayMs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VModalComponent, deps: [{ token: ModalService }, { token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: VModalComponent, selector: "v-modal", inputs: { appearingDelayMs: "appearingDelayMs", maxWidthPx: "maxWidthPx", hideFooter: "hideFooter" }, outputs: { closeEvent: "closeEvent" }, 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    visible: visible$ | async,\n    appearing: appearing$ | async,\n    disappearing: disappearing$ | async,\n    showBackdrop: showBackdrop$ | async,\n    mouseInsideModal: mouseInsideModal$ | async,\n  } as obs\"\n>\n  <div\n    class=\"v-modal-backdrop\"\n    [ngClass]=\"{\n      'v-modal-backdrop--visible': obs.visible || obs.disappearing,\n      'v-modal-backdrop--backdrop': obs.showBackdrop,\n      'v-modal-backdrop--hidden': !obs.visible,\n      'v-modal-backdrop--appearing': obs.appearing,\n      'v-modal-backdrop--disappearing': obs.disappearing,\n      'v-modal-backdrop--mouse-on-backdrop': !obs.mouseInsideModal,\n    }\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modal; context: {appearing: obs.appearing, disappearing: obs.disappearing}\"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modal let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div\n    class=\"v-modal\"\n    (mouseenter)=\"modalMouseEnter()\"\n    (mouseleave)=\"modalMouseLeave()\"\n    [style.max-width.px]=\"maxWidthPx\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modalHeader; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalFooter\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #modalHeader let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-modal__header\">\n    <ng-content select=\"div[role=header]\"></ng-content>\n    <div class=\"v-modal__header-overflow\">\n      <div class=\"v-modal__header-overflow-gradient\"></div>\n      <div class=\"v-modal__header-overflow-bg\"></div>\n    </div>\n    <div class=\"v-modal__header-buttons\">\n      <cds-icon-button (click)=\"closeModal()\" kind=\"ghost\" size=\"sm\">\n        <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"24\"></svg>\n      </cds-icon-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"v-modal__content\">\n    <ng-content select=\"div[role=content]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #modalFooter>\n  <div class=\"v-modal__footer\" [ngClass]=\"{'v-modal__footer--hidden': hideFooter}\">\n    <ng-content select=\"div[role=footer]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".v-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--v-modal-z-index);background-color:var(--v-color-backdrop-transparant);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:var(--v-modal-backdrop-transition);display:none;cursor:var(--v-modal-backdrop-cursor);padding-inline-start:var(--v-modal-backdrop-padding-inline);padding-inline-end:var(--v-modal-backdrop-padding-inline);padding-block-start:var(--v-modal-backdrop-padding-block);padding-block-end:var(--v-modal-backdrop-padding-block)}.v-modal-backdrop--visible,.v-modal-backdrop--disappearing{display:flex;align-items:center;justify-content:flex-end}.v-modal{position:relative;right:-100%;background-color:var(--v-modal-background-color);height:100%;min-height:var(--v-modal-min-height);max-height:100%;width:100%;max-width:var(--v-modal-max-width);opacity:0;transition:var(--v-modal-transition);cursor:var(--v-modal-cursor);border-radius:var(--v-modal-border-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--v-modal-box-shadow)}.v-modal-backdrop--backdrop{background-color:var(--v-modal-backdrop-color);-webkit-backdrop-filter:var(--v-modal-backdrop-filter);backdrop-filter:var(--v-modal-backdrop-filter)}.v-modal-backdrop--backdrop .v-modal{right:0;opacity:1}.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:not(.v-modal-backdrop--disappearing),.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:not(.v-modal-backdrop--appearing),.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:hover{background-color:var(--v-modal-backdrop-color-hover);-webkit-backdrop-filter:var(--v-modal-backdrop-filter-hover);backdrop-filter:var(--v-modal-backdrop-filter-hover)}.v-modal-backdrop--hidden,.v-modal-backdrop--appearing{cursor:var(--v-modal-backdrop-cursor-disappearing)}.v-modal__header{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;background-color:var(--v-modal-header-bg-color);padding-block-start:var(--v-modal-header-padding-block);padding-block-end:var(--v-modal-header-padding-block);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);border-bottom:var(--v-modal-header-border);min-height:var(--v-modal-header-min-height);box-sizing:content-box}.v-modal__header-buttons{position:absolute;right:var(--v-modal-padding-inline);top:var(--v-modal-header-padding-block)}.v-modal__header-overflow{position:absolute;right:var(--v-modal-padding-inline);top:var(--v-modal-header-padding-block);height:calc(100% - var(--v-modal-header-padding-block) - var(--v-modal-header-padding-block));display:flex;flex-direction:row}.v-modal__header-overflow-gradient{width:var(--v-modal-header-overflow-gradient-width);height:100%;background-image:var(--v-modal-header-overflow-gradient-bg-image)}.v-modal__header-overflow-bg{width:var(--v-modal-header-overflow-width);height:100%;background-color:var(--v-modal-header-bg-color)}.v-modal__footer{display:flex;flex-shrink:0;background-color:var(--v-modal-footer-bg-color);padding-block-start:var(--v-modal-footer-padding-block);padding-block-end:var(--v-modal-footer-padding-block);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);border-top:var(--v-modal-footer-border)}.v-modal__footer--hidden{display:none}.v-modal__content{height:100%;padding-block-start:var(--v-modal-content-padding-block-start);padding-block-end:var(--v-modal-content-padding-block-end);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);overflow:auto}::ng-deep .v-modal div[role=header],::ng-deep .v-modal div[role=content],::ng-deep .v-modal div[role=footer]{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: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2$3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: VModalComponent, selector: "v-modal", inputs: { appearingDelayMs: "appearingDelayMs", maxWidthPx: "maxWidthPx", hideFooter: "hideFooter", parentId: "parentId" }, outputs: { closeEvent: "closeEvent" }, 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    visible: visible$ | async,\n    appearing: appearing$ | async,\n    disappearing: disappearing$ | async,\n    showBackdrop: showBackdrop$ | async,\n    mouseInsideModal: mouseInsideModal$ | async,\n  } as obs\"\n>\n  <div\n    class=\"v-modal-backdrop\"\n    [ngClass]=\"{\n      'v-modal-backdrop--visible': obs.visible || obs.disappearing,\n      'v-modal-backdrop--backdrop': obs.showBackdrop,\n      'v-modal-backdrop--hidden': !obs.visible,\n      'v-modal-backdrop--appearing': obs.appearing,\n      'v-modal-backdrop--disappearing': obs.disappearing,\n      'v-modal-backdrop--mouse-on-backdrop': !obs.mouseInsideModal,\n    }\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modal; context: {appearing: obs.appearing, disappearing: obs.disappearing}\"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modal let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div\n    class=\"v-modal\"\n    (mouseenter)=\"modalMouseEnter()\"\n    (mouseleave)=\"modalMouseLeave()\"\n    [style.max-width.px]=\"maxWidthPx\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modalHeader; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalFooter\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #modalHeader let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-modal__header\">\n    <ng-content select=\"div[role=header]\"></ng-content>\n    <div class=\"v-modal__header-overflow\">\n      <div class=\"v-modal__header-overflow-gradient\"></div>\n      <div class=\"v-modal__header-overflow-bg\"></div>\n    </div>\n    <div class=\"v-modal__header-buttons\">\n      <cds-icon-button (click)=\"closeModal()\" kind=\"ghost\" size=\"sm\">\n        <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"24\"></svg>\n      </cds-icon-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"v-modal__content\">\n    <ng-content select=\"div[role=content]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #modalFooter>\n  <div class=\"v-modal__footer\" [ngClass]=\"{'v-modal__footer--hidden': hideFooter}\">\n    <ng-content select=\"div[role=footer]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".v-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--v-modal-z-index);background-color:var(--v-color-backdrop-transparant);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:var(--v-modal-backdrop-transition);display:none;cursor:var(--v-modal-backdrop-cursor);padding-inline-start:var(--v-modal-backdrop-padding-inline);padding-inline-end:var(--v-modal-backdrop-padding-inline);padding-block-start:var(--v-modal-backdrop-padding-block);padding-block-end:var(--v-modal-backdrop-padding-block)}.v-modal-backdrop--visible,.v-modal-backdrop--disappearing{display:flex;align-items:center;justify-content:flex-end}.v-modal{position:relative;right:-100%;background-color:var(--v-modal-background-color);height:100%;min-height:var(--v-modal-min-height);max-height:100%;width:100%;max-width:var(--v-modal-max-width);opacity:0;transition:var(--v-modal-transition);cursor:var(--v-modal-cursor);border-radius:var(--v-modal-border-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--v-modal-box-shadow)}.v-modal-backdrop--backdrop{background-color:var(--v-modal-backdrop-color);-webkit-backdrop-filter:var(--v-modal-backdrop-filter);backdrop-filter:var(--v-modal-backdrop-filter)}.v-modal-backdrop--backdrop .v-modal{right:0;opacity:1}.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:not(.v-modal-backdrop--disappearing),.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:not(.v-modal-backdrop--appearing),.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:hover{background-color:var(--v-modal-backdrop-color-hover);-webkit-backdrop-filter:var(--v-modal-backdrop-filter-hover);backdrop-filter:var(--v-modal-backdrop-filter-hover)}.v-modal-backdrop--hidden,.v-modal-backdrop--appearing{cursor:var(--v-modal-backdrop-cursor-disappearing)}.v-modal__header{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;background-color:var(--v-modal-header-bg-color);padding-block-start:var(--v-modal-header-padding-block);padding-block-end:var(--v-modal-header-padding-block);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);border-bottom:var(--v-modal-header-border);min-height:var(--v-modal-header-min-height);box-sizing:content-box}.v-modal__header-buttons{position:absolute;right:var(--v-modal-padding-inline);top:var(--v-modal-header-padding-block)}.v-modal__header-overflow{position:absolute;right:var(--v-modal-padding-inline);top:var(--v-modal-header-padding-block);height:calc(100% - var(--v-modal-header-padding-block) - var(--v-modal-header-padding-block));display:flex;flex-direction:row}.v-modal__header-overflow-gradient{width:var(--v-modal-header-overflow-gradient-width);height:100%;background-image:var(--v-modal-header-overflow-gradient-bg-image)}.v-modal__header-overflow-bg{width:var(--v-modal-header-overflow-width);height:100%;background-color:var(--v-modal-header-bg-color)}.v-modal__footer{display:flex;flex-shrink:0;background-color:var(--v-modal-footer-bg-color);padding-block-start:var(--v-modal-footer-padding-block);padding-block-end:var(--v-modal-footer-padding-block);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);border-top:var(--v-modal-footer-border)}.v-modal__footer--hidden{display:none}.v-modal__content{height:100%;padding-block-start:var(--v-modal-content-padding-block-start);padding-block-end:var(--v-modal-content-padding-block-end);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);overflow:auto}::ng-deep .v-modal div[role=header],::ng-deep .v-modal div[role=content],::ng-deep .v-modal div[role=footer]{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: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2$3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VModalComponent, decorators: [{
             type: Component,
@@ -13735,6 +13774,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], hideFooter: [{
                 type: Input
+            }], parentId: [{
+                type: Input
             }], closeEvent: [{
                 type: Output
             }] } });
@@ -14632,7 +14673,8 @@ class MultiInputFormModule {
             InputModule,
             ButtonModule,
             TranslateModule,
-            ParagraphModule], exports: [MultiInputFormComponent] }); }
+            ParagraphModule,
+            DefaultValuePipe], exports: [MultiInputFormComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiInputFormModule, imports: [CommonModule,
             InputLabelModule,
             InputModule,
@@ -14651,6 +14693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ButtonModule,
                         TranslateModule,
                         ParagraphModule,
+                        DefaultValuePipe,
                     ],
                     exports: [MultiInputFormComponent],
                 }]