@valtimo/components 13.42.0 → 13.43.0

package/fesm2022/valtimo-components.mjs

@@ -2933,6 +2933,33 @@ function createCustomFormioComponent(customComponentOptions) {
             }
             return superAttach;
         }
+        // Lets a custom component reject a value through customValidator, instead of having to encode
+        // the invalidity into the value itself.
+        // @ts-ignore
+        checkComponentValidity(data, dirty, row, options = {}) {
+            // @ts-ignore
+            const result = super.checkComponentValidity(data, dirty, row, options);
+            const customValidator = customComponentOptions.customValidator;
+            if (!customValidator ||
+                this.shouldSkipValidation(data, dirty, row) ||
+                this.isEmpty(this.dataValue)) {
+                return result;
+            }
+            const applyCustomValidator = (valid) => {
+                // Only run when nothing else rejected the value, so the error already set stays visible.
+                if (!valid)
+                    return false;
+                const message = customValidator(this.dataValue);
+                if (!message)
+                    return true;
+                if (!options.silentCheck)
+                    this.setCustomValidity(message, dirty);
+                return false;
+            };
+            return typeof result?.then === 'function'
+                ? Promise.resolve(result).then(applyCustomValidator)
+                : applyCustomValidator(result);
+        }
         // Add extra option to support multiple value (e.g. datagrid) with single angular component (disableMultiValueWrapper)
         useWrapper() {
             return (this.component.hasOwnProperty('multiple') &&
@@ -3602,11 +3629,11 @@ class CamundaChoicefieldFormfieldComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CamundaChoicefieldFormfieldComponent, deps: [{ token: ChoiceFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CamundaChoicefieldFormfieldComponent, isStandalone: false, selector: "valtimo-camunda-choicefield-formfield", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select class=\"form-control\" id=\"{{ formField.id }}\" [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <ng-container *ngFor=\"let choicefieldValue of choicefieldValues\">\n        <option\n          *ngIf=\"!choicefieldValue.deprecated\"\n          [value]=\"choicefieldValue.value\"\n          id=\"option_{{ choicefieldValue.value }}\"\n        >\n          {{ choicefieldValue.name }}\n        </option>\n      </ng-container>\n    </select>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CamundaChoicefieldFormfieldComponent, isStandalone: false, selector: "valtimo-camunda-choicefield-formfield", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select class=\"form-control\" id=\"{{ formField.id }}\" [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <option\n        *ngFor=\"let choicefieldValue of choicefieldValues\"\n        [value]=\"choicefieldValue.value\"\n        id=\"option_{{ choicefieldValue.value }}\"\n      >\n        {{ choicefieldValue.name }}\n      </option>\n    </select>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CamundaChoicefieldFormfieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-camunda-choicefield-formfield', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select class=\"form-control\" id=\"{{ formField.id }}\" [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <ng-container *ngFor=\"let choicefieldValue of choicefieldValues\">\n        <option\n          *ngIf=\"!choicefieldValue.deprecated\"\n          [value]=\"choicefieldValue.value\"\n          id=\"option_{{ choicefieldValue.value }}\"\n        >\n          {{ choicefieldValue.name }}\n        </option>\n      </ng-container>\n    </select>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'valtimo-camunda-choicefield-formfield', standalone: false, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select class=\"form-control\" id=\"{{ formField.id }}\" [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <option\n        *ngFor=\"let choicefieldValue of choicefieldValues\"\n        [value]=\"choicefieldValue.value\"\n        id=\"option_{{ choicefieldValue.value }}\"\n      >\n        {{ choicefieldValue.name }}\n      </option>\n    </select>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ChoiceFieldService }] });
 
 /*
@@ -6332,16 +6359,19 @@ class OverflowMenuTriggerComponent {
     constructor(_iconService) {
         this._iconService = _iconService;
         this.compact = false;
+        this.label = '';
         this._iconService.registerAll([OverflowMenuVertical16]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OverflowMenuTriggerComponent, deps: [{ token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: OverflowMenuTriggerComponent, isStandalone: true, selector: "v-overflow-menu-trigger", inputs: { compact: "compact" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"v-overflow-menu-trigger\" [class.--compact]=\"compact\">\n  <svg cdsIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n</div>\n", styles: [".v-overflow-menu-trigger{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--cds-icon-primary)}.v-overflow-menu-trigger:hover{background-color:var(--cds-layer-active)}.v-overflow-menu-trigger.--compact{width:2rem;height:2rem;min-height:2rem}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: OverflowMenuTriggerComponent, isStandalone: true, selector: "v-overflow-menu-trigger", inputs: { compact: "compact", label: "label" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-overflow-menu-trigger\"\n  [attr.aria-label]=\"label || null\"\n  [attr.title]=\"label || null\"\n  [class.--compact]=\"compact\"\n>\n  <svg cdsIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n</div>\n", styles: [".v-overflow-menu-trigger{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--cds-icon-primary)}.v-overflow-menu-trigger:hover{background-color:var(--cds-layer-active)}.v-overflow-menu-trigger.--compact{width:2rem;height:2rem;min-height:2rem}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OverflowMenuTriggerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-overflow-menu-trigger', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconModule], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"v-overflow-menu-trigger\" [class.--compact]=\"compact\">\n  <svg cdsIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n</div>\n", styles: [".v-overflow-menu-trigger{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--cds-icon-primary)}.v-overflow-menu-trigger:hover{background-color:var(--cds-layer-active)}.v-overflow-menu-trigger.--compact{width:2rem;height:2rem;min-height:2rem}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ selector: 'v-overflow-menu-trigger', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconModule], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-overflow-menu-trigger\"\n  [attr.aria-label]=\"label || null\"\n  [attr.title]=\"label || null\"\n  [class.--compact]=\"compact\"\n>\n  <svg cdsIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n</div>\n", styles: [".v-overflow-menu-trigger{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--cds-icon-primary)}.v-overflow-menu-trigger:hover{background-color:var(--cds-layer-active)}.v-overflow-menu-trigger.--compact{width:2rem;height:2rem;min-height:2rem}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i2$3.IconService }], propDecorators: { compact: [{
                 type: Input
+            }], label: [{
+                type: Input
             }] } });
 
 /*
@@ -7400,7 +7430,7 @@ class CarbonListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonListComponent, deps: [{ token: EllipsisPipe }, { token: CarbonListFilterPipe }, { token: i2$3.IconService }, { token: i4.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }, { token: KeyStateService }, { token: CarbonListDragAndDropService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", skeletonRowCount: "skeletonRowCount", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", initialSearchValue: "initialSearchValue", searchDebounceMs: "searchDebounceMs", invalidSearchFields: "invalidSearchFields", searchFields: "searchFields", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled", expandedRowTemplate: "expandedRowTemplate", expandedRowKey: "expandedRowKey", trackByKey: "trackByKey" }, 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  ~ /*\n  ~  * Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~  *\n  ~  * Licensed under EUPL, Version 1.2 (the \"License\");\n  ~  * you may not use this file except in compliance with the License.\n  ~  * You may obtain a copy of the License at\n  ~  *\n  ~  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~  *\n  ~  * Unless required by applicable law or agreed to in writing, software\n  ~  * distributed under the License is distributed on an \"AS IS\" basis,\n  ~  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~  * See the License for the specific language governing permissions and\n  ~  * limitations under the License.\n  ~  */\n  -->\n<cds-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      <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n        <cds-table-toolbar-search\n          #toolbarSearch\n          [expandable]=\"false\"\n          [formControl]=\"searchFormControl\"\n          [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n          data-test-id=\"carbonListSearch\"\n          (input)=\"updateAutocomplete()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          (clear)=\"onSearchClear()\"\n          (open)=\"onSearchOpenChange($event)\"\n        ></cds-table-toolbar-search>\n        <div\n          class=\"valtimo-search-overlay\"\n          aria-hidden=\"true\"\n        ><span\n            *ngFor=\"let segment of getSearchSegments()\"\n            [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n          >{{ segment.text }}</span></div>\n        <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n          <li\n            *ngFor=\"let field of filteredSuggestions; let i = index\"\n            [class.selected]=\"i === selectedSuggestionIndex\"\n            (mousedown)=\"selectSuggestion(field)\"\n          >{{ field.title || field.key }}</li>\n        </ul>\n      </div>\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\" data-test-id=\"carbonListNoResults\">\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    data-test-id=\"carbonListPagination\"\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  <v-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    [portalToBody]=\"true\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    placement=\"bottom-end\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\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      </v-overflow-menu-option>\n    }\n  </v-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      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></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      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></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      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\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;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!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)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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", "showExpandAllToggle", "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.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: "directive", type: i11.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", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionItemDisabledPipe, name: "actionItemDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", skeletonRowCount: "skeletonRowCount", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", initialSearchValue: "initialSearchValue", searchDebounceMs: "searchDebounceMs", invalidSearchFields: "invalidSearchFields", searchFields: "searchFields", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled", expandedRowTemplate: "expandedRowTemplate", expandedRowKey: "expandedRowKey", trackByKey: "trackByKey" }, 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  ~ /*\n  ~  * Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~  *\n  ~  * Licensed under EUPL, Version 1.2 (the \"License\");\n  ~  * you may not use this file except in compliance with the License.\n  ~  * You may obtain a copy of the License at\n  ~  *\n  ~  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~  *\n  ~  * Unless required by applicable law or agreed to in writing, software\n  ~  * distributed under the License is distributed on an \"AS IS\" basis,\n  ~  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~  * See the License for the specific language governing permissions and\n  ~  * limitations under the License.\n  ~  */\n  -->\n<cds-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      <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n        <cds-table-toolbar-search\n          #toolbarSearch\n          [expandable]=\"false\"\n          [formControl]=\"searchFormControl\"\n          [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n          data-test-id=\"carbonListSearch\"\n          (input)=\"updateAutocomplete()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          (clear)=\"onSearchClear()\"\n          (open)=\"onSearchOpenChange($event)\"\n        ></cds-table-toolbar-search>\n        <div\n          class=\"valtimo-search-overlay\"\n          aria-hidden=\"true\"\n        ><span\n            *ngFor=\"let segment of getSearchSegments()\"\n            [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n          >{{ segment.text }}</span></div>\n        <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n          <li\n            *ngFor=\"let field of filteredSuggestions; let i = index\"\n            [class.selected]=\"i === selectedSuggestionIndex\"\n            (mousedown)=\"selectSuggestion(field)\"\n          >{{ field.title || field.key }}</li>\n        </ul>\n      </div>\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\" data-test-id=\"carbonListNoResults\">\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    data-test-id=\"carbonListPagination\"\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  <v-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    [portalToBody]=\"true\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    placement=\"bottom-end\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\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      </v-overflow-menu-option>\n    }\n  </v-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      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></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      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></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      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\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;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!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)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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", "showExpandAllToggle", "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.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: "directive", type: i11.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", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact", "label"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionItemDisabledPipe, name: "actionItemDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonListComponent, decorators: [{
             type: Component,
@@ -8641,11 +8671,11 @@ class TimelineComponent {
         this.actions$.next(value.reduce((acc, curr) => ({ ...acc, [curr.id]: curr }), {}));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TimelineComponent, isStandalone: false, selector: "valtimo-timeline", inputs: { items: "items", actions: "actions" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@if (items$ | async; as items) {\n  <ul class=\"timeline mb-0 py-5\">\n    @for (item of items; track item.customData.id) {\n      <li class=\"timeline-item status-done\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n\n          <br />\n\n          <span>{{ item.time }}</span>\n        </div>\n\n        <div class=\"timeline-content\" *ngIf=\"actions$ | async as actions\">\n          <div class=\"timeline-header\">\n            <span class=\"timeline-author\">{{ item.user }}</span>\n\n            <br />\n\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n\n            <p class=\"timeline-summary\">\n              {{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}\n            </p>\n          </div>\n\n          <v-overflow-menu *ngIf=\"item.supportedActionIds?.length > 0\" placement=\"bottom-end\">\n            <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n            @for (actionId of item.supportedActionIds; track actionId) {\n              <v-overflow-menu-option (selected)=\"actions[actionId].callback(item, $event)\">\n                <i\n                  *ngIf=\"!!actions[actionId].icon\"\n                  class=\"icon mdi\"\n                  [ngClass]=\"actions[actionId].icon\"\n                ></i>\n\n                {{ actions[actionId]?.label || '-' }}\n              </v-overflow-menu-option>\n            }\n          </v-overflow-menu>\n        </div>\n      </li>\n    }\n  </ul>\n}\n", styles: [".timeline-activity{font-size:100%}.timeline-header{padding:38px 0 38px 38px}.timeline-content{display:flex;justify-content:space-between}.timeline-summary{font-size:.8rem;white-space:pre-line}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TimelineComponent, isStandalone: false, selector: "valtimo-timeline", inputs: { items: "items", actions: "actions" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@if (items$ | async; as items) {\n  <ul class=\"timeline mb-0 py-5\">\n    @for (item of items; track item.customData.id) {\n      <li class=\"timeline-item status-done\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n\n          <br />\n\n          <span>{{ item.time }}</span>\n        </div>\n\n        <div class=\"timeline-content\" *ngIf=\"actions$ | async as actions\">\n          <div class=\"timeline-header\">\n            <span class=\"timeline-author\">{{ item.user }}</span>\n\n            <br />\n\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n\n            <p class=\"timeline-summary\">\n              {{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}\n            </p>\n          </div>\n\n          <v-overflow-menu *ngIf=\"item.supportedActionIds?.length > 0\" placement=\"bottom-end\">\n            <v-overflow-menu-trigger\n              overflowTrigger\n              [label]=\"'interface.options' | translate\"\n            ></v-overflow-menu-trigger>\n            @for (actionId of item.supportedActionIds; track actionId) {\n              <v-overflow-menu-option (selected)=\"actions[actionId].callback(item, $event)\">\n                <i\n                  *ngIf=\"!!actions[actionId].icon\"\n                  class=\"icon mdi\"\n                  [ngClass]=\"actions[actionId].icon\"\n                ></i>\n\n                {{ (actions[actionId]?.label | translate) || '-' }}\n              </v-overflow-menu-option>\n            }\n          </v-overflow-menu>\n        </div>\n      </li>\n    }\n  </ul>\n}\n", styles: [".timeline-activity{font-size:100%}.timeline-header{padding:38px 0 38px 38px}.timeline-content{display:flex;justify-content:space-between}.timeline-summary{font-size:.8rem;white-space:pre-line}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact", "label"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-timeline', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@if (items$ | async; as items) {\n  <ul class=\"timeline mb-0 py-5\">\n    @for (item of items; track item.customData.id) {\n      <li class=\"timeline-item status-done\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n\n          <br />\n\n          <span>{{ item.time }}</span>\n        </div>\n\n        <div class=\"timeline-content\" *ngIf=\"actions$ | async as actions\">\n          <div class=\"timeline-header\">\n            <span class=\"timeline-author\">{{ item.user }}</span>\n\n            <br />\n\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n\n            <p class=\"timeline-summary\">\n              {{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}\n            </p>\n          </div>\n\n          <v-overflow-menu *ngIf=\"item.supportedActionIds?.length > 0\" placement=\"bottom-end\">\n            <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n            @for (actionId of item.supportedActionIds; track actionId) {\n              <v-overflow-menu-option (selected)=\"actions[actionId].callback(item, $event)\">\n                <i\n                  *ngIf=\"!!actions[actionId].icon\"\n                  class=\"icon mdi\"\n                  [ngClass]=\"actions[actionId].icon\"\n                ></i>\n\n                {{ actions[actionId]?.label || '-' }}\n              </v-overflow-menu-option>\n            }\n          </v-overflow-menu>\n        </div>\n      </li>\n    }\n  </ul>\n}\n", styles: [".timeline-activity{font-size:100%}.timeline-header{padding:38px 0 38px 38px}.timeline-content{display:flex;justify-content:space-between}.timeline-summary{font-size:.8rem;white-space:pre-line}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ selector: 'valtimo-timeline', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@if (items$ | async; as items) {\n  <ul class=\"timeline mb-0 py-5\">\n    @for (item of items; track item.customData.id) {\n      <li class=\"timeline-item status-done\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n\n          <br />\n\n          <span>{{ item.time }}</span>\n        </div>\n\n        <div class=\"timeline-content\" *ngIf=\"actions$ | async as actions\">\n          <div class=\"timeline-header\">\n            <span class=\"timeline-author\">{{ item.user }}</span>\n\n            <br />\n\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n\n            <p class=\"timeline-summary\">\n              {{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}\n            </p>\n          </div>\n\n          <v-overflow-menu *ngIf=\"item.supportedActionIds?.length > 0\" placement=\"bottom-end\">\n            <v-overflow-menu-trigger\n              overflowTrigger\n              [label]=\"'interface.options' | translate\"\n            ></v-overflow-menu-trigger>\n            @for (actionId of item.supportedActionIds; track actionId) {\n              <v-overflow-menu-option (selected)=\"actions[actionId].callback(item, $event)\">\n                <i\n                  *ngIf=\"!!actions[actionId].icon\"\n                  class=\"icon mdi\"\n                  [ngClass]=\"actions[actionId].icon\"\n                ></i>\n\n                {{ (actions[actionId]?.label | translate) || '-' }}\n              </v-overflow-menu-option>\n            }\n          </v-overflow-menu>\n        </div>\n      </li>\n    }\n  </ul>\n}\n", styles: [".timeline-activity{font-size:100%}.timeline-header{padding:38px 0 38px 38px}.timeline-content{display:flex;justify-content:space-between}.timeline-summary{font-size:.8rem;white-space:pre-line}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], actions: [{
@@ -10473,29 +10503,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * limitations under the License.
  */
 /**
- * Custom iban validator for angular forms.
  * Checks if the iban is valid.
  * First move the first four chracters from the beginngin to the end of the string.
  * Change the letter to a numeric representation.
  * Calculate the modulo in a parts, because javascript cannot accuratly calculate the modulus for large numbers.
  *
+ * @returns True if the iban is valid or the value is empty.
+ */
+function isValidIban(value) {
+    const valueString = value == null ? '' : String(value);
+    if (!valueString) {
+        return true;
+    }
+    const rearranged = valueString.substring(4) + valueString.substring(0, 4);
+    const numeric = Array.from(rearranged)
+        .map(c => (isNaN(parseInt(c, 10)) ? (c.charCodeAt(0) - 55).toString() : c))
+        .join('');
+    return (Array.from(numeric)
+        .map(c => parseInt(c, 10))
+        .reduce((remainder, value) => (remainder * 10 + value) % 97, 0) === 1);
+}
+/**
+ * Custom iban validator for angular forms.
+ *
  * @returns Null if the iban is valid or the value is an empty string, else return an object with isIbanValid property.
  */
 function ibanValidator() {
-    return (control) => {
-        const valueString = String(control.value);
-        if (valueString.match(/^$/)) {
-            return null;
-        }
-        const rearranged = valueString.substring(4, valueString.length) + valueString.substring(0, 4);
-        const numeric = Array.from(rearranged)
-            .map(c => (isNaN(parseInt(c, 10)) ? (c.charCodeAt(0) - 55).toString() : c))
-            .join('');
-        const isValidIban = Array.from(numeric)
-            .map(c => parseInt(c, 10))
-            .reduce((remainder, value) => (remainder * 10 + value) % 97, 0);
-        return isValidIban === 1 ? null : { isIbanValid: 'IBAN voldoet niet' };
-    };
+    return (control) => isValidIban(control.value) ? null : { isIbanValid: 'IBAN voldoet niet' };
 }
 
 /*
@@ -10531,6 +10565,11 @@ class FormIoIbanComponent {
             this.ibanForm.controls.iban.setValue(this.value);
             this.ibanForm.controls.iban.setValidators(this.required ? [Validators.required, ibanValidator()] : [ibanValidator()]);
             this.ibanForm.controls.iban.updateValueAndValidity();
+            // Form.io recreates this component on every redraw, for example when a row is added to a
+            // datagrid. Without this, the error of an already invalid iban is hidden until it is touched.
+            if (this.value) {
+                this.ibanForm.controls.iban.markAsTouched();
+            }
             if (this.disabled) {
                 Object.keys(this.ibanForm.controls).forEach(key => {
                     this.ibanForm?.get(key)?.disable();
@@ -10545,9 +10584,9 @@ class FormIoIbanComponent {
         this._subscriptions.unsubscribe();
     }
     onValueChange() {
-        this.value = this.ibanForm.valid
-            ? this.ibanForm.controls.iban.value
-            : [this.ibanForm.value];
+        // Always emit the string, also when invalid: form.io stores this as the submission value, and
+        // anything else renders as [object Object] on redraw. Rejecting is done by the customValidator.
+        this.value = this.ibanForm.controls.iban.value ?? '';
         this.valueChange.emit(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormIoIbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -12066,7 +12105,7 @@ const formIoUploaderEditForm = () => {
  * limitations under the License.
  */
 const customUploaderType = 'valtimo-file';
-const COMPONENT_OPTIONS$6 = {
+const COMPONENT_OPTIONS$5 = {
     type: customUploaderType,
     selector: 'valtimo-form-io-uploader',
     title: 'Valtimo File Upload',
@@ -12077,8 +12116,8 @@ const COMPONENT_OPTIONS$6 = {
     editForm: formIoUploaderEditForm,
 };
 function registerFormioUploadComponent(injector) {
-    if (!customElements.get(COMPONENT_OPTIONS$6.selector)) {
-        registerCustomFormioComponent(COMPONENT_OPTIONS$6, FormIoUploaderComponent, injector);
+    if (!customElements.get(COMPONENT_OPTIONS$5.selector)) {
+        registerCustomFormioComponent(COMPONENT_OPTIONS$5, FormIoUploaderComponent, injector);
     }
 }
 
@@ -12161,7 +12200,7 @@ const formIoCurrentUserEditForm = () => ({
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const COMPONENT_OPTIONS$5 = {
+const COMPONENT_OPTIONS$4 = {
     type: 'valtimo-current-user',
     selector: 'valtimo-form-io-current-user',
     title: 'Valtimo Current User',
@@ -12174,7 +12213,7 @@ const COMPONENT_OPTIONS$5 = {
     },
 };
 function registerFormioCurrentUserComponent(injector) {
-    registerCustomFormioComponent(COMPONENT_OPTIONS$5, FormIoCurrentUserComponent, injector);
+    registerCustomFormioComponent(COMPONENT_OPTIONS$4, FormIoCurrentUserComponent, injector);
 }
 
 /*
@@ -12192,7 +12231,8 @@ function registerFormioCurrentUserComponent(injector) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const COMPONENT_OPTIONS$4 = {
+const ERROR_MESSAGE_TRANSLATION_KEY = 'formioTranslations.formioIbanComponent.errorMessage';
+const getComponentOptions = (injector) => ({
     type: 'iban',
     selector: 'valtimo-iban',
     title: 'Iban',
@@ -12207,9 +12247,12 @@ const COMPONENT_OPTIONS$4 = {
             required: false,
         },
     },
-};
+    customValidator: (value) => isValidIban(value)
+        ? null
+        : injector.get(TranslateService).instant(ERROR_MESSAGE_TRANSLATION_KEY),
+});
 function registerFormioIbanComponent(injector) {
-    registerCustomFormioComponent(COMPONENT_OPTIONS$4, FormIoIbanComponent, injector);
+    registerCustomFormioComponent(getComponentOptions(injector), FormIoIbanComponent, injector);
 }
 
 /*
@@ -16062,10 +16105,20 @@ class DateTimePickerComponent {
         this.datePlaceholder = 'dd-mm-yyyy';
         this.timePlaceholder = 'hh:mm';
         this.labelText = '';
+        /**
+         * Format of the emitted value. Use `iso` when the value is passed on to an API. Defaults to the
+         * localised format the input shows, which is what existing consumers expect.
+         */
+        this.valueFormat = 'display';
         this.defaultDateIsToday = false;
         this.valueChange = new EventEmitter();
+        /** Holds the date as `yyyy-mm-dd`, independent of how `dateFormat` renders it. */
         this.dateValue$ = new BehaviorSubject('');
         this.timeValue$ = new BehaviorSubject('');
+        /** The Carbon date picker parses strings with `dateFormat`, so it is fed a date object instead. */
+        this.pickerDates$ = this.dateValue$.pipe(map(date => (date ? [new Date(`${date}T00:00:00`)] : [])));
+        this.ISO_DATE_PATTERN = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
+        this.DAY_FIRST_DATE_PATTERN = /^(\d{1,2})[-/](\d{1,2})[-/](\d{4})$/;
         this.subscriptions = new Subscription();
     }
     set defaultDate(value) {
@@ -16090,7 +16143,8 @@ class DateTimePickerComponent {
                 this.valueChange.emit('');
                 return;
             }
-            const fullValue = this.enableTime && time ? `${date} ${time}` : date;
+            const emittedDate = this.valueFormat === 'iso' ? date : this.formatDisplayDate(date);
+            const fullValue = this.enableTime && time ? `${emittedDate} ${time}` : emittedDate;
             this.valueChange.emit(fullValue);
         }));
     }
@@ -16119,24 +16173,42 @@ class DateTimePickerComponent {
         const trimmed = (value ?? '').trim();
         if (!trimmed)
             return { date: '', time: '' };
-        const parts = trimmed.split(' ');
+        const parts = trimmed.split(/[ T]/);
         if (parts.length >= 2) {
-            return { date: parts[0] ?? '', time: parts.slice(1).join(' ') ?? '' };
+            return { date: this.normalizeDate(parts[0]), time: parts.slice(1).join(' ') ?? '' };
         }
-        return { date: trimmed, time: '' };
+        return { date: this.normalizeDate(trimmed), time: '' };
     }
     normalizeDate(date) {
-        if (typeof date === 'string')
-            return date;
         if (date instanceof Date)
             return this.formatDate(date);
+        if (typeof date !== 'string')
+            return '';
+        const trimmed = date.trim();
+        const isoMatch = this.ISO_DATE_PATTERN.exec(trimmed);
+        if (isoMatch) {
+            const [, year, month, day] = isoMatch;
+            return this.joinDate(year, month, day);
+        }
+        const dayFirstMatch = this.DAY_FIRST_DATE_PATTERN.exec(trimmed);
+        if (dayFirstMatch) {
+            const [, day, month, year] = dayFirstMatch;
+            return this.joinDate(year, month, day);
+        }
         return '';
     }
     formatDate(date) {
-        return date.toLocaleDateString('nl-NL');
+        return this.joinDate(`${date.getFullYear()}`, `${date.getMonth() + 1}`, `${date.getDate()}`);
+    }
+    formatDisplayDate(isoDate) {
+        const [year, month, day] = isoDate.split('-').map(Number);
+        return new Date(year, month - 1, day).toLocaleDateString('nl-NL');
+    }
+    joinDate(year, month, day) {
+        return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DateTimePickerComponent, isStandalone: true, selector: "valtimo-date-time-picker", inputs: { fullWidth: "fullWidth", margin: "margin", name: "name", title: "title", placeholder: "placeholder", titleTranslationKey: "titleTranslationKey", disabled: "disabled", tooltip: "tooltip", required: "required", smallLabel: "smallLabel", enableTime: "enableTime", carbonTheme: "carbonTheme", dateFormat: "dateFormat", showFieldLabel: "showFieldLabel", datePlaceholder: "datePlaceholder", timePlaceholder: "timePlaceholder", labelText: "labelText", defaultDate: "defaultDate", defaultDateIsToday: "defaultDateIsToday", clear$: "clear$" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.valtimo-date-time-picker": "this.hostClass", "class.full-width": "this.fullWidth", "class.margin": "this.margin" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n-->\n\n<v-input-label\n  *ngIf=\"showFieldLabel && (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\n<div class=\"valtimo-date-time-picker__wrapper\">\n  <cds-date-picker\n    class=\"date-only\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [label]=\"labelText\"\n    [placeholder]=\"datePlaceholder || 'dd-mm-yyyy'\"\n    [dateFormat]=\"dateFormat\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"dateValue$ | async\"\n    (ngModelChange)=\"onDateSelected($event)\"\n  ></cds-date-picker>\n\n  <cds-timepicker\n    *ngIf=\"enableTime\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [placeholder]=\"timePlaceholder || 'hh:mm'\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"timeValue$ | async\"\n    (ngModelChange)=\"onTimeSelected($event)\"\n  ></cds-timepicker>\n</div>\n", styles: [".valtimo-date-time-picker{display:flex;flex-direction:column;gap:8px}.valtimo-date-time-picker.full-width{width:100%}.valtimo-date-time-picker.margin{margin-bottom:16px}.valtimo-date-time-picker__wrapper{display:flex;align-items:flex-end;gap:16px}.valtimo-date-time-picker ::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important}.valtimo-date-time-picker ::ng-deep .cds--date-picker__input,.valtimo-date-time-picker ::ng-deep .cds--time-picker__input-field{background-color:var(--cds-field-01)!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputModule$1 }, { kind: "ngmodule", type: DatePickerModule$1 }, { kind: "component", type: i2$3.DatePicker, selector: "cds-date-picker, ibm-date-picker", inputs: ["range", "dateFormat", "language", "label", "helperText", "rangeHelperText", "rangeLabel", "placeholder", "ariaLabel", "inputPattern", "id", "value", "theme", "disabled", "readonly", "invalid", "invalidText", "warn", "warnText", "size", "rangeInvalid", "rangeInvalidText", "rangeWarn", "rangeWarnText", "skeleton", "plugins", "flatpickrOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: TimePickerModule }, { kind: "component", type: i2$3.TimePicker, selector: "cds-timepicker, ibm-timepicker", inputs: ["invalid", "invalidText", "label", "hideLabel", "placeholder", "pattern", "id", "disabled", "value", "maxLength", "skeleton", "theme", "size"], outputs: ["valueChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DateTimePickerComponent, isStandalone: true, selector: "valtimo-date-time-picker", inputs: { fullWidth: "fullWidth", margin: "margin", name: "name", title: "title", placeholder: "placeholder", titleTranslationKey: "titleTranslationKey", disabled: "disabled", tooltip: "tooltip", required: "required", smallLabel: "smallLabel", enableTime: "enableTime", carbonTheme: "carbonTheme", dateFormat: "dateFormat", showFieldLabel: "showFieldLabel", datePlaceholder: "datePlaceholder", timePlaceholder: "timePlaceholder", labelText: "labelText", valueFormat: "valueFormat", defaultDate: "defaultDate", defaultDateIsToday: "defaultDateIsToday", clear$: "clear$" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.valtimo-date-time-picker": "this.hostClass", "class.full-width": "this.fullWidth", "class.margin": "this.margin" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n-->\n\n<v-input-label\n  *ngIf=\"showFieldLabel && (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\n<div class=\"valtimo-date-time-picker__wrapper\">\n  <cds-date-picker\n    class=\"date-only\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [label]=\"labelText\"\n    [placeholder]=\"datePlaceholder || 'dd-mm-yyyy'\"\n    [dateFormat]=\"dateFormat\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"pickerDates$ | async\"\n    (ngModelChange)=\"onDateSelected($event)\"\n  ></cds-date-picker>\n\n  <cds-timepicker\n    *ngIf=\"enableTime\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [placeholder]=\"timePlaceholder || 'hh:mm'\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"timeValue$ | async\"\n    (ngModelChange)=\"onTimeSelected($event)\"\n  ></cds-timepicker>\n</div>\n", styles: [".valtimo-date-time-picker{display:flex;flex-direction:column;gap:8px}.valtimo-date-time-picker.full-width{width:100%}.valtimo-date-time-picker.margin{margin-bottom:16px}.valtimo-date-time-picker__wrapper{display:flex;align-items:flex-end;gap:16px}.valtimo-date-time-picker ::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important}.valtimo-date-time-picker ::ng-deep .cds--date-picker__input,.valtimo-date-time-picker ::ng-deep .cds--time-picker__input-field{background-color:var(--cds-field-01)!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputModule$1 }, { kind: "ngmodule", type: DatePickerModule$1 }, { kind: "component", type: i2$3.DatePicker, selector: "cds-date-picker, ibm-date-picker", inputs: ["range", "dateFormat", "language", "label", "helperText", "rangeHelperText", "rangeLabel", "placeholder", "ariaLabel", "inputPattern", "id", "value", "theme", "disabled", "readonly", "invalid", "invalidText", "warn", "warnText", "size", "rangeInvalid", "rangeInvalidText", "rangeWarn", "rangeWarnText", "skeleton", "plugins", "flatpickrOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: TimePickerModule }, { kind: "component", type: i2$3.TimePicker, selector: "cds-timepicker, ibm-timepicker", inputs: ["invalid", "invalidText", "label", "hideLabel", "placeholder", "pattern", "id", "disabled", "value", "maxLength", "skeleton", "theme", "size"], outputs: ["valueChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -16149,7 +16221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         DatePickerModule$1,
                         TimePickerModule,
                         LayerModule,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n-->\n\n<v-input-label\n  *ngIf=\"showFieldLabel && (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\n<div class=\"valtimo-date-time-picker__wrapper\">\n  <cds-date-picker\n    class=\"date-only\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [label]=\"labelText\"\n    [placeholder]=\"datePlaceholder || 'dd-mm-yyyy'\"\n    [dateFormat]=\"dateFormat\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"dateValue$ | async\"\n    (ngModelChange)=\"onDateSelected($event)\"\n  ></cds-date-picker>\n\n  <cds-timepicker\n    *ngIf=\"enableTime\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [placeholder]=\"timePlaceholder || 'hh:mm'\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"timeValue$ | async\"\n    (ngModelChange)=\"onTimeSelected($event)\"\n  ></cds-timepicker>\n</div>\n", styles: [".valtimo-date-time-picker{display:flex;flex-direction:column;gap:8px}.valtimo-date-time-picker.full-width{width:100%}.valtimo-date-time-picker.margin{margin-bottom:16px}.valtimo-date-time-picker__wrapper{display:flex;align-items:flex-end;gap:16px}.valtimo-date-time-picker ::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important}.valtimo-date-time-picker ::ng-deep .cds--date-picker__input,.valtimo-date-time-picker ::ng-deep .cds--time-picker__input-field{background-color:var(--cds-field-01)!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n-->\n\n<v-input-label\n  *ngIf=\"showFieldLabel && (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\n<div class=\"valtimo-date-time-picker__wrapper\">\n  <cds-date-picker\n    class=\"date-only\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [label]=\"labelText\"\n    [placeholder]=\"datePlaceholder || 'dd-mm-yyyy'\"\n    [dateFormat]=\"dateFormat\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"pickerDates$ | async\"\n    (ngModelChange)=\"onDateSelected($event)\"\n  ></cds-date-picker>\n\n  <cds-timepicker\n    *ngIf=\"enableTime\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [placeholder]=\"timePlaceholder || 'hh:mm'\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"timeValue$ | async\"\n    (ngModelChange)=\"onTimeSelected($event)\"\n  ></cds-timepicker>\n</div>\n", styles: [".valtimo-date-time-picker{display:flex;flex-direction:column;gap:8px}.valtimo-date-time-picker.full-width{width:100%}.valtimo-date-time-picker.margin{margin-bottom:16px}.valtimo-date-time-picker__wrapper{display:flex;align-items:flex-end;gap:16px}.valtimo-date-time-picker ::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important}.valtimo-date-time-picker ::ng-deep .cds--date-picker__input,.valtimo-date-time-picker ::ng-deep .cds--time-picker__input-field{background-color:var(--cds-field-01)!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.valtimo-date-time-picker']
@@ -16193,6 +16265,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], labelText: [{
                 type: Input
+            }], valueFormat: [{
+                type: Input
             }], defaultDate: [{
                 type: Input
             }], defaultDateIsToday: [{