@valtimo/components 13.11.0 → 13.12.0

package/fesm2022/valtimo-components.mjs

@@ -6151,11 +6151,11 @@ class CarbonListComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CarbonListComponent, deps: [{ token: EllipsisPipe }, { token: CarbonListFilterPipe }, { token: i2$2.IconService }, { token: i4.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }, { token: KeyStateService }, { token: CarbonListDragAndDropService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-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<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <cds-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    [flip]=\"true\"\n    [offset]=\"{x: 0, y: 50}\"\n    placement=\"bottom\"\n    role=\"menu\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (action of data.actions; track action.label) {\n      <cds-overflow-menu-option\n        [disabled]=\"action.disabledCallback ? action.disabledCallback(data.item) : false\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </cds-overflow-menu-option>\n    }\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></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        >\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)}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$2.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$2.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$2.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$2.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$2.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$2.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$2.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$2.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$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "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$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-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<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <cds-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    [flip]=\"true\"\n    [offset]=\"{x: 0, y: 50}\"\n    [autoAlign]=\"true\"\n    placement=\"bottom\"\n    role=\"menu\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (action of data.actions; track action.label) {\n      <cds-overflow-menu-option\n        [disabled]=\"action.disabledCallback ? action.disabledCallback(data.item) : false\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </cds-overflow-menu-option>\n    }\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></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        >\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)}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$2.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$2.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$2.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$2.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$2.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$2.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$2.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$2.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$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "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$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CarbonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-carbon-list', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], 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<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <cds-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    [flip]=\"true\"\n    [offset]=\"{x: 0, y: 50}\"\n    placement=\"bottom\"\n    role=\"menu\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (action of data.actions; track action.label) {\n      <cds-overflow-menu-option\n        [disabled]=\"action.disabledCallback ? action.disabledCallback(data.item) : false\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </cds-overflow-menu-option>\n    }\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></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        >\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)}\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-carbon-list', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], 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<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <cds-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    [flip]=\"true\"\n    [offset]=\"{x: 0, y: 50}\"\n    [autoAlign]=\"true\"\n    placement=\"bottom\"\n    role=\"menu\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (action of data.actions; track action.label) {\n      <cds-overflow-menu-option\n        [disabled]=\"action.disabledCallback ? action.disabledCallback(data.item) : false\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </cds-overflow-menu-option>\n    }\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></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        >\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)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: EllipsisPipe }, { type: CarbonListFilterPipe }, { type: i2$2.IconService }, { type: i4.NGXLogger }, { type: i1.TranslateService }, { type: ViewContentService }, { type: KeyStateService }, { type: CarbonListDragAndDropService }, { type: i0.ElementRef }], propDecorators: { actionsMenuTemplate: [{
                 type: ViewChild,
                 args: ['actionsMenuTemplate']
@@ -11765,6 +11765,8 @@ class SelectComponent {
         this.smallMargin = false;
         this.carbonTheme = 'g10';
         this.appendInline = true;
+        this.warn = false;
+        this.warnText = '';
         this.selectedChange = new EventEmitter();
         this.selected$ = new BehaviorSubject('');
         this._listItems$ = new BehaviorSubject([]);
@@ -11861,13 +11863,13 @@ class SelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SelectComponent, isStandalone: false, selector: "v-select", inputs: { items: "items", defaultSelection: "defaultSelection", defaultSelectionId: "defaultSelectionId", defaultSelectionIds: "defaultSelectionIds", disabled: "disabled", dropUp: "dropUp", invalid: "invalid", multiple: "multiple", margin: "margin", widthInPx: "widthInPx", notFoundText: "notFoundText", clearAllText: "clearAllText", clearText: "clearText", clearable: "clearable", name: "name", title: "title", titleTranslationKey: "titleTranslationKey", clearSelectionSubject$: "clearSelectionSubject$", tooltip: "tooltip", required: "required", loading: "loading", loadingText: "loadingText", placeholder: "placeholder", smallMargin: "smallMargin", carbonTheme: "carbonTheme", appendInline: "appendInline", dataTestId: "dataTestId" }, outputs: { selectedChange: "selectedChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SelectComponent, isStandalone: false, selector: "v-select", inputs: { items: "items", defaultSelection: "defaultSelection", defaultSelectionId: "defaultSelectionId", defaultSelectionIds: "defaultSelectionIds", disabled: "disabled", dropUp: "dropUp", invalid: "invalid", multiple: "multiple", margin: "margin", widthInPx: "widthInPx", notFoundText: "notFoundText", clearAllText: "clearAllText", clearText: "clearText", clearable: "clearable", name: "name", title: "title", titleTranslationKey: "titleTranslationKey", clearSelectionSubject$: "clearSelectionSubject$", tooltip: "tooltip", required: "required", loading: "loading", loadingText: "loadingText", placeholder: "placeholder", smallMargin: "smallMargin", carbonTheme: "carbonTheme", appendInline: "appendInline", warn: "warn", warnText: "warnText", dataTestId: "dataTestId" }, outputs: { selectedChange: "selectedChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async,\n  } as vars\"\n  class=\"v-select-container\"\n  [ngClass]=\"{\n    'v-select-container--margin': margin,\n    'v-select-container--small-margin': smallMargin,\n    'v-select-container--not-clearable': !clearable,\n  }\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <cds-combo-box\n    [attr.data-testid]=\"dataTestId\"\n    [appendInline]=\"appendInline\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"$disabled() || loading || (vars?.items || []).length === 0\"\n    [dropUp]=\"dropUp\"\n    [invalid]=\"invalid\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : (vars?.items || []).length === 0\n          ? vars.notFoundText\n          : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"vars?.items || []\"></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: [".v-select-container--margin{margin-block-end:var(--v-input-margin)}.v-select-container--small-margin{margin-block-end:var(--v-input-small-margin)}.v-select-container--not-clearable .cds--list-box.cds--combo-box .cds--list-box__field>.cds--list-box__selection{display:none!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: "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: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i2$2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async,\n  } as vars\"\n  class=\"v-select-container\"\n  [ngClass]=\"{\n    'v-select-container--margin': margin,\n    'v-select-container--small-margin': smallMargin,\n    'v-select-container--not-clearable': !clearable,\n  }\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <cds-combo-box\n    [attr.data-testid]=\"dataTestId\"\n    [appendInline]=\"appendInline\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"$disabled() || loading || (vars?.items || []).length === 0\"\n    [dropUp]=\"dropUp\"\n    [invalid]=\"invalid\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : (vars?.items || []).length === 0\n          ? vars.notFoundText\n          : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    [warn]=\"warn\"\n    [warnText]=\"warnText\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"vars?.items || []\"></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: [".v-select-container--margin{margin-block-end:var(--v-input-margin)}.v-select-container--small-margin{margin-block-end:var(--v-input-small-margin)}.v-select-container--not-clearable .cds--list-box.cds--combo-box .cds--list-box__field>.cds--list-box__selection{display:none!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: "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: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i2$2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -11877,7 +11879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async,\n  } as vars\"\n  class=\"v-select-container\"\n  [ngClass]=\"{\n    'v-select-container--margin': margin,\n    'v-select-container--small-margin': smallMargin,\n    'v-select-container--not-clearable': !clearable,\n  }\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <cds-combo-box\n    [attr.data-testid]=\"dataTestId\"\n    [appendInline]=\"appendInline\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"$disabled() || loading || (vars?.items || []).length === 0\"\n    [dropUp]=\"dropUp\"\n    [invalid]=\"invalid\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : (vars?.items || []).length === 0\n          ? vars.notFoundText\n          : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"vars?.items || []\"></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: [".v-select-container--margin{margin-block-end:var(--v-input-margin)}.v-select-container--small-margin{margin-block-end:var(--v-input-small-margin)}.v-select-container--not-clearable .cds--list-box.cds--combo-box .cds--list-box__field>.cds--list-box__selection{display:none!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<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async,\n  } as vars\"\n  class=\"v-select-container\"\n  [ngClass]=\"{\n    'v-select-container--margin': margin,\n    'v-select-container--small-margin': smallMargin,\n    'v-select-container--not-clearable': !clearable,\n  }\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <cds-combo-box\n    [attr.data-testid]=\"dataTestId\"\n    [appendInline]=\"appendInline\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"$disabled() || loading || (vars?.items || []).length === 0\"\n    [dropUp]=\"dropUp\"\n    [invalid]=\"invalid\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : (vars?.items || []).length === 0\n          ? vars.notFoundText\n          : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    [warn]=\"warn\"\n    [warnText]=\"warnText\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"vars?.items || []\"></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: [".v-select-container--margin{margin-block-end:var(--v-input-margin)}.v-select-container--small-margin{margin-block-end:var(--v-input-small-margin)}.v-select-container--not-clearable .cds--list-box.cds--combo-box .cds--list-box__field>.cds--list-box__selection{display:none!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"] }]
         }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { items: [{
                 type: Input
             }], defaultSelection: [{
@@ -11930,6 +11932,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], appendInline: [{
                 type: Input
+            }], warn: [{
+                type: Input
+            }], warnText: [{
+                type: Input
             }], dataTestId: [{
                 type: Input
             }], selectedChange: [{
@@ -13566,7 +13572,7 @@ class SearchFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i3$1.DocumentService }, { token: i1.TranslateService }, { token: i2$2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SearchFieldsComponent, isStandalone: false, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", caseDefinitionKey: "caseDefinitionKey", setValuesSubject$: "setValuesSubject$", clearValuesSubject$: "clearValuesSubject$", defaultValues: "defaultValues", disableSaveSearch: "disableSaveSearch", inputDisabled: "inputDisabled", externalSearchField: "externalSearchField", canSaveSearch: "canSaveSearch" }, outputs: { doSearch: "doSearch", saveSearchEvent: "saveSearchEvent", clearEvent: "clearEvent" }, 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<ng-container *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!loading\">\n  <cds-accordion>\n    <cds-accordion-item\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (selected)=\"toggleExpanded()\"\n      [expanded]=\"expanded$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n    </cds-accordion-item>\n  </cds-accordion>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\"><cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <ng-container *ngIf=\"searchFields$ | async as searchFields\">\n    <ng-container\n      *ngIf=\"{\n        noSearchFields: (!searchFields || searchFields.length === 0) && !externalSearchField,\n      } as vars\"\n    >\n      <div\n        *ngIf=\"!vars.noSearchFields\"\n        class=\"search-fields-container\"\n        [ngClass]=\"{'search-fields-container--hidden': (expanded$ | async) === false}\"\n        [cdsLayer]=\"1\"\n      >\n        <ng-content></ng-content>\n\n        <ng-container *ngFor=\"let searchField of searchFields\">\n          <div class=\"search-field-container\">\n            <ng-container\n              *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n            ></ng-container>\n          </div>\n        </ng-container>\n      </div>\n\n      <div class=\"meta-container\" *ngIf=\"expanded$ | async\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate; context: {noSearchFields: vars.noSearchFields}\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      values: values$ | async,\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key),\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateSingleSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateMultiSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateSingleSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'single-select-dropdown' ||\n        searchField.fieldType === 'single_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateMultiSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'multi-select-dropdown' ||\n        searchField.fieldType === 'multi_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [multiple]=\"true\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div\n    class=\"buttons-container\"\n    *ngIf=\"\n      !noSearchFields && {expanded: expanded$ | async, isSearchEmpty: isSearchEmpty$ | async} as obs\n    \"\n  >\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded && canSaveSearch\"\n        cdsButton=\"secondary\"\n        data-testid=\"search-fields-save-button\"\n        [disabled]=\"disableSaveSearch && obs.isSearchEmpty\"\n        (click)=\"saveSearch()\"\n        type=\"button\"\n        id=\"save\"\n      >\n        <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.saveButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "component", type: FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "placeholder", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime", "carbonTheme"], outputs: ["valueChange"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i2$2.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i2$2.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "directive", type: i2$2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SearchFieldsComponent, isStandalone: false, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", caseDefinitionKey: "caseDefinitionKey", setValuesSubject$: "setValuesSubject$", clearValuesSubject$: "clearValuesSubject$", defaultValues: "defaultValues", disableSaveSearch: "disableSaveSearch", inputDisabled: "inputDisabled", externalSearchField: "externalSearchField", canSaveSearch: "canSaveSearch" }, outputs: { doSearch: "doSearch", saveSearchEvent: "saveSearchEvent", clearEvent: "clearEvent" }, 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<ng-container *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!loading\">\n  <cds-accordion>\n    <cds-accordion-item\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (selected)=\"toggleExpanded()\"\n      [expanded]=\"expanded$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n    </cds-accordion-item>\n  </cds-accordion>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\"><cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <ng-container *ngIf=\"searchFields$ | async as searchFields\">\n    <ng-container\n      *ngIf=\"{\n        noSearchFields: (!searchFields || searchFields.length === 0) && !externalSearchField,\n      } as vars\"\n    >\n      <div\n        *ngIf=\"!vars.noSearchFields\"\n        class=\"search-fields-container\"\n        [ngClass]=\"{'search-fields-container--hidden': (expanded$ | async) === false}\"\n        [cdsLayer]=\"1\"\n      >\n        <ng-content></ng-content>\n\n        <ng-container *ngFor=\"let searchField of searchFields\">\n          <div class=\"search-field-container\">\n            <ng-container\n              *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n            ></ng-container>\n          </div>\n        </ng-container>\n      </div>\n\n      <div class=\"meta-container\" *ngIf=\"expanded$ | async\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate; context: {noSearchFields: vars.noSearchFields}\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      values: values$ | async,\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key),\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateSingleSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateMultiSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateSingleSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'single-select-dropdown' ||\n        searchField.fieldType === 'single_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateMultiSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'multi-select-dropdown' ||\n        searchField.fieldType === 'multi_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [multiple]=\"true\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div\n    class=\"buttons-container\"\n    *ngIf=\"\n      !noSearchFields && {expanded: expanded$ | async, isSearchEmpty: isSearchEmpty$ | async} as obs\n    \"\n  >\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded && canSaveSearch\"\n        cdsButton=\"secondary\"\n        data-testid=\"search-fields-save-button\"\n        [disabled]=\"disableSaveSearch && obs.isSearchEmpty\"\n        (click)=\"saveSearch()\"\n        type=\"button\"\n        id=\"save\"\n      >\n        <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.saveButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "component", type: FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "placeholder", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime", "carbonTheme"], outputs: ["valueChange"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i2$2.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i2$2.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "directive", type: i2$2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SearchFieldsComponent, decorators: [{
             type: Component,
@@ -15037,7 +15043,7 @@ class TableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableComponent, deps: [{ token: i3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TableComponent, isStandalone: false, selector: "v-table", inputs: { items: "items", columns: "columns", loading: "loading", showEditButtons: "showEditButtons", showPagination: "showPagination", editButtonTranslationKey: "editButtonTranslationKey", itemsTranslationKey: "itemsTranslationKey", noResultsTranslationKey: "noResultsTranslationKey", mobileBreakpointPx: "mobileBreakpointPx", amountOfLoadingRows: "amountOfLoadingRows", collectionSize: "collectionSize", page: "page", size: "size" }, outputs: { editButtonClicked: "editButtonClicked", paginationSizeSet: "paginationSizeSet", paginationPageSet: "paginationPageSet" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" (click)=\"editButtonClicked.emit(item)\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)',\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" [disabled]=\"true\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)',\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('previous')\" [disabled]=\"loading\">\n        {{ 'interface.previous' | translate }}\n      </button>\n    </span>\n\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('next')\" [disabled]=\"loading\">\n        {{ 'interface.nextArrow' | translate }}\n      </button>\n    </span>\n  </div>\n</ng-template>\n", styles: [".v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TableComponent, isStandalone: false, selector: "v-table", inputs: { items: "items", columns: "columns", loading: "loading", showEditButtons: "showEditButtons", showPagination: "showPagination", editButtonTranslationKey: "editButtonTranslationKey", itemsTranslationKey: "itemsTranslationKey", noResultsTranslationKey: "noResultsTranslationKey", mobileBreakpointPx: "mobileBreakpointPx", amountOfLoadingRows: "amountOfLoadingRows", collectionSize: "collectionSize", page: "page", size: "size" }, outputs: { editButtonClicked: "editButtonClicked", paginationSizeSet: "paginationSizeSet", paginationPageSet: "paginationPageSet" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" (click)=\"editButtonClicked.emit(item)\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)',\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" [disabled]=\"true\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)',\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('previous')\" [disabled]=\"loading\">\n        {{ 'interface.previous' | translate }}\n      </button>\n    </span>\n\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('next')\" [disabled]=\"loading\">\n        {{ 'interface.nextArrow' | translate }}\n      </button>\n    </span>\n  </div>\n</ng-template>\n", styles: [".v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,