@valtimo/components 13.37.0 → 13.38.0

package/fesm2022/valtimo-components.mjs

@@ -747,7 +747,7 @@ var ValuePathSelectorInputMode;
  */
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2886,11 +2886,7 @@ function createCustomFormioComponent(customComponentOptions) {
                     superAttach = super.attach(element);
                 }
                 // Bind customOptions
-                for (const key in this.component.customOptions) {
-                    if (this.component.customOptions.hasOwnProperty(key)) {
-                        this._customAngularElement[key] = this.component.customOptions[key];
-                    }
-                }
+                this.bindCustomOptions();
                 // Bind validate options
                 for (const key in this.component.validate) {
                     if (this.component.validate.hasOwnProperty(key)) {
@@ -2913,9 +2909,26 @@ function createCustomFormioComponent(customComponentOptions) {
                         component: this.component,
                     });
                 });
-                // Ensure we bind the value (if it isn't a multiple-value component with no wrapper)
-                if (!this._customAngularElement.value && !this.component.disableMultiValueWrapper) {
-                    this.restoreValue();
+                // Ensure we bind the value (if it isn't a multiple-value component with no wrapper).
+                // Use Array.isArray check in the empty condition because ![] is false in JS, meaning
+                // array-type components (emptyValue: []) would never trigger restoreValue() after a
+                // redrawOn:"data" redraw without this explicit empty-array check.
+                const currentValue = this._customAngularElement.value;
+                const hasNoCurrentValue = !currentValue || (Array.isArray(currentValue) && currentValue.length === 0);
+                if (hasNoCurrentValue && !this.component.disableMultiValueWrapper) {
+                    const storedValue = this.dataValue;
+                    if (Array.isArray(storedValue) && storedValue.length > 0) {
+                        // Directly set array values instead of calling restoreValue() to avoid
+                        // restoreValue()'s defaultValue branch triggering onChange/validation side
+                        // effects when the component renders with no data yet (e.g. on initial render).
+                        this._customAngularElement.value = storedValue;
+                    }
+                    else if (!Array.isArray(currentValue)) {
+                        // Original behaviour for non-array components.
+                        this.restoreValue();
+                    }
+                    // For array components with no stored data: do nothing — matches original
+                    // behaviour where ![] === false prevented restoreValue() from being called.
                 }
             }
             return superAttach;
@@ -2931,9 +2944,33 @@ function createCustomFormioComponent(customComponentOptions) {
             if (!this._customAngularElement || !('value' in this._customAngularElement)) {
                 return false;
             }
+            // Re-apply customOptions on every setValue. calculateValue expressions can mutate
+            // this.component.customOptions (e.g. "component.customOptions.filename = 'test'") for
+            // their side effect, and FormIO calls setValue() right after evaluating calculateValue.
+            // customOptions are otherwise only bound during attach(), which is only re-run on a
+            // redraw triggered by *another* component's data change — so without this, calculated
+            // customOptions never reach the Angular element in a single-component form.
+            this.bindCustomOptions();
             this._customAngularElement.value = value;
             return true;
         }
+        // Push the (possibly calculateValue-mutated) customOptions to the Angular element.
+        bindCustomOptions() {
+            if (!this._customAngularElement) {
+                return;
+            }
+            for (const key in this.component.customOptions) {
+                // Reject dangerous keys to prevent prototype pollution. customOptions can be
+                // manipulated through form schemas or calculateValue expressions, so a key like
+                // __proto__/constructor/prototype must never be assigned onto the element.
+                if (Object.prototype.hasOwnProperty.call(this.component.customOptions, key) &&
+                    key !== '__proto__' &&
+                    key !== 'constructor' &&
+                    key !== 'prototype') {
+                    this._customAngularElement[key] = this.component.customOptions[key];
+                }
+            }
+        }
     };
 }
 
@@ -5293,11 +5330,11 @@ class LeftSidebarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LeftSidebarComponent, deps: [{ token: i0.ElementRef }, { token: MenuService }, { token: ShellService }, { token: i3.BreakpointObserver }, { token: i1$3.Router }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: LeftSidebarComponent, isStandalone: false, selector: "valtimo-left-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButton"], 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\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n    menuItemsLoaded: menuItemsLoaded$ | async,\n    menuItems: menuItems$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n    <ng-container *ngFor=\"let menuItem of obs.menuItems\">\n      <ng-container *ngIf=\"!menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              menuItem: menuItem,\n              closestSequence: obs.closestSequence,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              closestSequence: obs.closestSequence,\n              menuItem: menuItem,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n\n        <div [ngClass]=\"{\n          'menu-item--hidden': menuItem.includeFunction !== undefined,\n          'menu-item--visible':\n            menuItem.includeFunction !== undefined &&\n            (includeFunctionObservables[menuItem.title] | async),\n        }\">\n          <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n          <cds-sidenav-menu\n            [title]=\"menuItem | menuItemTranslate | async\"\n            [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n          >\n            <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n              <ng-container\n                *ngIf=\"{\n                  disableCaseCount: disableCaseCount$ | async,\n                  count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n                  sequence: '' + menuItem.sequence + '.' + childMenuItem.sequence,\n                } as vars\"\n              >\n                <cds-sidenav-item\n                  [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n                  [title]=\"\n                    menuItem.title === 'Cases' || menuItem.title === 'Dossiers'\n                      ? (childMenuItem | menuItemTranslate | async)\n                      : null\n                  \"\n                  [ngClass]=\"{\n                    'cds--side-nav__item--empty': !childMenuItem.link,\n                    'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n                    'menu-item--visible':\n                      childMenuItem.includeFunction !== undefined &&\n                      (includeFunctionObservables[childMenuItem.title] | async),\n                  }\"\n                  [active]=\"vars.sequence === obs.closestSequence\"\n                  [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n                  (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n                  (contextmenu)=\"onRightClick(vars.sequence)\"\n                  (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n                >\n                  <valtimo-menu-item-text\n                    [accent]=\"!childMenuItem.link\"\n                    [menuItem]=\"childMenuItem\"\n                    [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n                    (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n                    (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n                  ></valtimo-menu-item-text>\n\n                  <ng-container\n                    *ngTemplateOutlet=\"countTemplate; context: {count: vars.count, disableCaseCount: vars.disableCaseCount}\"\n                  ></ng-container>\n                </cds-sidenav-item>\n              </ng-container>\n            </ng-container>\n          </cds-sidenav-menu>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text>\n    </cds-sidenav-item>\n  </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\" let-disableCaseCount=\"disableCaseCount\">\n  <ng-container *ngIf=\"count && !disableCaseCount\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width: 767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\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: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: ["menuItem", "accent", "showOverFlowMenu"], outputs: ["overflowMenuClosed", "openInNewTab"] }, { kind: "component", type: i2$3.SideNav, selector: "cds-sidenav, ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems", "useRouter"] }, { kind: "component", type: i2$3.SideNavItem, selector: "cds-sidenav-item, ibm-sidenav-item", inputs: ["href", "useRouter", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i2$3.SideNavMenu, selector: "cds-sidenav-menu, ibm-sidenav-menu", inputs: ["useRouter", "title", "expanded", "hasActiveChild", "menuItems"] }, { kind: "directive", type: CtrlClickDirective, selector: "[ctrl-click]", outputs: ["ctrl-click"] }, { kind: "component", type: i2$3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }, { kind: "pipe", type: CaseCountPipe, name: "caseCount" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: LeftSidebarComponent, isStandalone: false, selector: "valtimo-left-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButton"], 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\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n    menuItemsLoaded: menuItemsLoaded$ | async,\n    menuItems: menuItems$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n    <ng-container *ngFor=\"let menuItem of obs.menuItems\">\n      <ng-container *ngIf=\"!menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              menuItem: menuItem,\n              closestSequence: obs.closestSequence,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              closestSequence: obs.closestSequence,\n              menuItem: menuItem,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n\n        <div [ngClass]=\"{\n          'menu-item--hidden': menuItem.includeFunction !== undefined,\n          'menu-item--visible':\n            menuItem.includeFunction !== undefined &&\n            (includeFunctionObservables[menuItem.title] | async),\n        }\">\n          <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n          <cds-sidenav-menu\n            [title]=\"menuItem | menuItemTranslate | async\"\n            [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n          >\n            <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n              <ng-container\n                *ngIf=\"{\n                  disableCaseCount: disableCaseCount$ | async,\n                  count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n                  sequence: '' + menuItem.sequence + '.' + childMenuItem.sequence,\n                } as vars\"\n              >\n                <cds-sidenav-item\n                  [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n                  [title]=\"\n                    menuItem.title === 'Cases' || menuItem.title === 'Dossiers'\n                      ? (childMenuItem | menuItemTranslate | async)\n                      : null\n                  \"\n                  [ngClass]=\"{\n                    'cds--side-nav__item--empty': !childMenuItem.link,\n                    'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n                    'menu-item--visible':\n                      childMenuItem.includeFunction !== undefined &&\n                      (includeFunctionObservables[childMenuItem.title] | async),\n                  }\"\n                  [active]=\"vars.sequence === obs.closestSequence\"\n                  [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n                  (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n                  (contextmenu)=\"onRightClick(vars.sequence)\"\n                  (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n                >\n                  <valtimo-menu-item-text\n                    [accent]=\"!childMenuItem.link\"\n                    [menuItem]=\"childMenuItem\"\n                    [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n                    (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n                    (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n                  ></valtimo-menu-item-text>\n\n                  <ng-container\n                    *ngTemplateOutlet=\"countTemplate; context: {count: vars.count, disableCaseCount: vars.disableCaseCount}\"\n                  ></ng-container>\n                </cds-sidenav-item>\n              </ng-container>\n            </ng-container>\n          </cds-sidenav-menu>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text>\n    </cds-sidenav-item>\n  </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\" let-disableCaseCount=\"disableCaseCount\">\n  <ng-container *ngIf=\"count && !disableCaseCount\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\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: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: ["menuItem", "accent", "showOverFlowMenu"], outputs: ["overflowMenuClosed", "openInNewTab"] }, { kind: "component", type: i2$3.SideNav, selector: "cds-sidenav, ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems", "useRouter"] }, { kind: "component", type: i2$3.SideNavItem, selector: "cds-sidenav-item, ibm-sidenav-item", inputs: ["href", "useRouter", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i2$3.SideNavMenu, selector: "cds-sidenav-menu, ibm-sidenav-menu", inputs: ["useRouter", "title", "expanded", "hasActiveChild", "menuItems"] }, { kind: "directive", type: CtrlClickDirective, selector: "[ctrl-click]", outputs: ["ctrl-click"] }, { kind: "component", type: i2$3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }, { kind: "pipe", type: CaseCountPipe, name: "caseCount" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LeftSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-left-sidebar', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n    menuItemsLoaded: menuItemsLoaded$ | async,\n    menuItems: menuItems$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n    <ng-container *ngFor=\"let menuItem of obs.menuItems\">\n      <ng-container *ngIf=\"!menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              menuItem: menuItem,\n              closestSequence: obs.closestSequence,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              closestSequence: obs.closestSequence,\n              menuItem: menuItem,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n\n        <div [ngClass]=\"{\n          'menu-item--hidden': menuItem.includeFunction !== undefined,\n          'menu-item--visible':\n            menuItem.includeFunction !== undefined &&\n            (includeFunctionObservables[menuItem.title] | async),\n        }\">\n          <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n          <cds-sidenav-menu\n            [title]=\"menuItem | menuItemTranslate | async\"\n            [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n          >\n            <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n              <ng-container\n                *ngIf=\"{\n                  disableCaseCount: disableCaseCount$ | async,\n                  count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n                  sequence: '' + menuItem.sequence + '.' + childMenuItem.sequence,\n                } as vars\"\n              >\n                <cds-sidenav-item\n                  [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n                  [title]=\"\n                    menuItem.title === 'Cases' || menuItem.title === 'Dossiers'\n                      ? (childMenuItem | menuItemTranslate | async)\n                      : null\n                  \"\n                  [ngClass]=\"{\n                    'cds--side-nav__item--empty': !childMenuItem.link,\n                    'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n                    'menu-item--visible':\n                      childMenuItem.includeFunction !== undefined &&\n                      (includeFunctionObservables[childMenuItem.title] | async),\n                  }\"\n                  [active]=\"vars.sequence === obs.closestSequence\"\n                  [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n                  (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n                  (contextmenu)=\"onRightClick(vars.sequence)\"\n                  (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n                >\n                  <valtimo-menu-item-text\n                    [accent]=\"!childMenuItem.link\"\n                    [menuItem]=\"childMenuItem\"\n                    [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n                    (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n                    (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n                  ></valtimo-menu-item-text>\n\n                  <ng-container\n                    *ngTemplateOutlet=\"countTemplate; context: {count: vars.count, disableCaseCount: vars.disableCaseCount}\"\n                  ></ng-container>\n                </cds-sidenav-item>\n              </ng-container>\n            </ng-container>\n          </cds-sidenav-menu>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text>\n    </cds-sidenav-item>\n  </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\" let-disableCaseCount=\"disableCaseCount\">\n  <ng-container *ngIf=\"count && !disableCaseCount\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width: 767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\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-left-sidebar', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n    menuItemsLoaded: menuItemsLoaded$ | async,\n    menuItems: menuItems$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n    <ng-container *ngFor=\"let menuItem of obs.menuItems\">\n      <ng-container *ngIf=\"!menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              menuItem: menuItem,\n              closestSequence: obs.closestSequence,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              closestSequence: obs.closestSequence,\n              menuItem: menuItem,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n\n        <div [ngClass]=\"{\n          'menu-item--hidden': menuItem.includeFunction !== undefined,\n          'menu-item--visible':\n            menuItem.includeFunction !== undefined &&\n            (includeFunctionObservables[menuItem.title] | async),\n        }\">\n          <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n          <cds-sidenav-menu\n            [title]=\"menuItem | menuItemTranslate | async\"\n            [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n          >\n            <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n              <ng-container\n                *ngIf=\"{\n                  disableCaseCount: disableCaseCount$ | async,\n                  count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n                  sequence: '' + menuItem.sequence + '.' + childMenuItem.sequence,\n                } as vars\"\n              >\n                <cds-sidenav-item\n                  [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n                  [title]=\"\n                    menuItem.title === 'Cases' || menuItem.title === 'Dossiers'\n                      ? (childMenuItem | menuItemTranslate | async)\n                      : null\n                  \"\n                  [ngClass]=\"{\n                    'cds--side-nav__item--empty': !childMenuItem.link,\n                    'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n                    'menu-item--visible':\n                      childMenuItem.includeFunction !== undefined &&\n                      (includeFunctionObservables[childMenuItem.title] | async),\n                  }\"\n                  [active]=\"vars.sequence === obs.closestSequence\"\n                  [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n                  (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n                  (contextmenu)=\"onRightClick(vars.sequence)\"\n                  (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n                >\n                  <valtimo-menu-item-text\n                    [accent]=\"!childMenuItem.link\"\n                    [menuItem]=\"childMenuItem\"\n                    [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n                    (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n                    (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n                  ></valtimo-menu-item-text>\n\n                  <ng-container\n                    *ngTemplateOutlet=\"countTemplate; context: {count: vars.count, disableCaseCount: vars.disableCaseCount}\"\n                  ></ng-container>\n                </cds-sidenav-item>\n              </ng-container>\n            </ng-container>\n          </cds-sidenav-menu>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text>\n    </cds-sidenav-item>\n  </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\" let-disableCaseCount=\"disableCaseCount\">\n  <ng-container *ngIf=\"count && !disableCaseCount\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\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: i0.ElementRef }, { type: MenuService }, { type: ShellService }, { type: i3.BreakpointObserver }, { type: i1$3.Router }, { type: i1$2.ConfigService }], propDecorators: { toggleButtonRef: [{
                 type: ViewChild,
                 args: ['toggleButton']
@@ -6359,7 +6396,7 @@ class ValtimoCdsModalDirective {
             return;
         const contentElements = this.elementRef.nativeElement.querySelectorAll('.cds--modal-content');
         for (const element of contentElements) {
-            this.renderer.setStyle(element, 'min-height', `${this.minContentHeight}px`, RendererStyleFlags2.Important);
+            this.renderer.setStyle(element, 'min-height', `min(${this.minContentHeight}px, calc(90dvh - 13rem))`, RendererStyleFlags2.Important);
         }
     }
     preventModalCloseButtonTooltip() {
@@ -6473,7 +6510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         }] });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -6519,7 +6556,8 @@ class CarbonListComponent {
         return this._pagination;
     }
     set skeletonRowCount(value) {
-        this._skeletonRowCount$.next(value);
+        this._skeletonRowCountSet = value != null;
+        this._skeletonRowCount$.next(value ?? this._skeletonRowCount$.value);
     }
     set initialSortState(value) {
         if (!value || this._isSortInit)
@@ -6532,6 +6570,14 @@ class CarbonListComponent {
             return;
         this.sort$.next(value);
     }
+    set initialSearchValue(value) {
+        if (this._initialSearchValue !== value) {
+            this._initialSearchValue = value;
+            this.searchFormControl.setValue(value || '', { emitEvent: false });
+            this._lastExecutedSearch = value;
+            this.searchActive = !!value;
+        }
+    }
     static { this.PAGINATION_SIZE = 'PaginationSize'; }
     get selectedItems() {
         const model = this._table.model;
@@ -6543,7 +6589,7 @@ class CarbonListComponent {
     get model() {
         return this._table.model;
     }
-    constructor(ellipsisPipe, filterPipe, iconService, logger, translateService, viewContentService, keyStateService, dragAndDropService, elementRef) {
+    constructor(ellipsisPipe, filterPipe, iconService, logger, translateService, viewContentService, keyStateService, dragAndDropService, elementRef, cdr) {
         this.ellipsisPipe = ellipsisPipe;
         this.filterPipe = filterPipe;
         this.iconService = iconService;
@@ -6553,8 +6599,10 @@ class CarbonListComponent {
         this.keyStateService = keyStateService;
         this.dragAndDropService = dragAndDropService;
         this.elementRef = elementRef;
+        this.cdr = cdr;
         this._items$ = new BehaviorSubject([]);
         this._skeletonRowCount$ = new BehaviorSubject(5);
+        this._skeletonRowCountSet = false;
         this.currentOpenActionId = null;
         this._fields$ = new BehaviorSubject([]);
         this._tableTranslations$ = new BehaviorSubject(DEFAULT_LIST_TRANSLATIONS);
@@ -6567,6 +6615,11 @@ class CarbonListComponent {
         this.showActionItems = true;
         this._isSortInit = false;
         this.isSearchable = false;
+        this._initialSearchValue = null;
+        this.searchActive = false;
+        this.searchDebounceMs = 500;
+        this.invalidSearchFields = [];
+        this.searchFields = [];
         this.enableSingleSelection = false;
         this.showSelectionColumn = false;
         this.striped = false;
@@ -6608,7 +6661,14 @@ class CarbonListComponent {
         this.ViewType = ViewType;
         this.skeletonModel = Table.skeletonModel(5, 5);
         this.searchFormControl = new FormControl('');
+        this.showAutocomplete = false;
+        this.filteredSuggestions = [];
+        this.selectedSuggestionIndex = -1;
+        this.autocompleteLeft = 0;
+        this._lastExecutedSearch = null;
+        this._searchInputElement = null;
         this._subscriptions = new Subscription();
+        this._expandedRowKeys = new Set();
         this._viewInitialized$ = new BehaviorSubject(false);
         this._translatedFields$ = this.translateService.stream('key').pipe(switchMap(() => this._fields$), filter((fields) => !!fields), map((fields) => fields.map((field) => ({
             ...field,
@@ -6634,50 +6694,57 @@ class CarbonListComponent {
             this._fields$,
             this._items$,
             this._viewInitialized$,
-        ]).pipe(filter(([fields, items, viewInitialized]) => !!fields && !!items && viewInitialized), map(([fields, items]) => items.map((item, index) => [
-            ...this.getDragAndDropItemsItems(item, index, items.length),
-            ...fields.map((field) => {
-                switch (field.viewType) {
-                    case ViewType.TEMPLATE:
-                        return new TableItem({
-                            data: { item, index, length: items.length, ...field.templateData },
-                            item,
-                            template: field.template,
-                        });
-                    case ViewType.BOOLEAN:
-                        let data = this.resolveObject(field, item);
-                        data = !BOOLEAN_CONVERTER_VALUES.includes(data)
-                            ? data
-                            : `${'viewTypeConverter.' + data}`;
-                        return new TableItem({
-                            data,
-                            template: this.booleanTemplate,
-                            item,
-                        });
-                    case ViewType.TAGS: {
-                        return new TableItem({
-                            data: {
-                                tags: this.resolveTagObject(item, field.key),
-                                tagAmount: field?.tagAmount || 1,
-                            },
-                            item,
-                            template: this.tagTemplate,
-                        });
+        ]).pipe(filter(([fields, items, viewInitialized]) => !!fields && !!items && viewInitialized), map(([fields, items]) => items.map((item, index) => {
+            const row = [
+                ...this.getDragAndDropItemsItems(item, index, items.length),
+                ...fields.map((field) => {
+                    switch (field.viewType) {
+                        case ViewType.TEMPLATE:
+                            return new TableItem({
+                                data: { item, index, length: items.length, ...field.templateData },
+                                item,
+                                template: field.template,
+                            });
+                        case ViewType.BOOLEAN:
+                            let data = this.resolveObject(field, item);
+                            data = !BOOLEAN_CONVERTER_VALUES.includes(data)
+                                ? data
+                                : `${'viewTypeConverter.' + data}`;
+                            return new TableItem({
+                                data,
+                                template: this.booleanTemplate,
+                                item,
+                            });
+                        case ViewType.TAGS: {
+                            return new TableItem({
+                                data: {
+                                    tags: this.resolveTagObject(item, field.key),
+                                    tagAmount: field?.tagAmount || 1,
+                                },
+                                item,
+                                template: this.tagTemplate,
+                            });
+                        }
+                        default:
+                            const resolvedObject = this.resolveObject(field, item);
+                            return new TableItem({
+                                title: resolvedObject ?? '-',
+                                data: (field.tooltipCharLimit
+                                    ? this.ellipsisPipe.transform(resolvedObject, field.tooltipCharLimit)
+                                    : resolvedObject) ?? '-',
+                                template: this.defaultTemplate,
+                                item,
+                            });
                     }
-                    default:
-                        const resolvedObject = this.resolveObject(field, item);
-                        return new TableItem({
-                            title: resolvedObject ?? '-',
-                            data: (field.tooltipCharLimit
-                                ? this.ellipsisPipe.transform(resolvedObject, field.tooltipCharLimit)
-                                : resolvedObject) ?? '-',
-                            template: this.defaultTemplate,
-                            item,
-                        });
-                }
-            }),
-            ...this.getExtraItems(item, index, items.length),
-        ])), tap$1((data) => {
+                }),
+                ...this.getExtraItems(item, index, items.length),
+            ];
+            if (this.expandedRowTemplate && row.length > 0) {
+                row[0].expandedData = item;
+                row[0].expandedTemplate = this.expandedRowTemplate;
+            }
+            return row;
+        })), tap$1((data) => {
             this._completeDataSource = data;
         }));
         this._filteredItems$ = new BehaviorSubject(null);
@@ -6685,12 +6752,14 @@ class CarbonListComponent {
             this._headerItems$,
             this._tableItems$,
             this._filteredItems$,
-        ]).pipe(map(([header, data, filteredData]) => {
+        ]).pipe(tap$1(() => this._captureExpandedRows()), map(([header, data, filteredData]) => {
             const model = new TableModel();
             model.header = header;
             model.data = filteredData ?? data;
+            this._restoreExpandedRows(model);
             return model;
         }), startWith(new TableModel()));
+        this._searchOpen = false;
         this.iconService.registerAll([ArrowDown16, ArrowUp16, SettingsView16, Draggable16]);
     }
     ngOnInit() {
@@ -6699,7 +6768,7 @@ class CarbonListComponent {
         }
         this._subscriptions.add(combineLatest([this._headerItems$, this._items$, this._skeletonRowCount$]).subscribe(([headers, items, skeletonRowCount]) => {
             let rowCount = items?.length > 0 ? items?.length : skeletonRowCount;
-            if (items?.length === 0 && this.pagination?.size) {
+            if (items?.length === 0 && this.pagination?.size && !this._skeletonRowCountSet) {
                 rowCount = this.pagination.size;
             }
             if (!this.hideToolbar) {
@@ -6708,17 +6777,9 @@ class CarbonListComponent {
             this.skeletonModel = Table.skeletonModel(rowCount + 1, headers.length);
         }));
         this._subscriptions.add(this.searchFormControl.valueChanges
-            .pipe(debounceTime$1(500))
+            .pipe(debounceTime$1(this.searchDebounceMs))
             .subscribe((searchString) => {
-            if (this.search.observed) {
-                this.search.emit(searchString);
-                return;
-            }
-            if (!searchString) {
-                this._filteredItems$.next(null);
-                return;
-            }
-            this._filteredItems$.next(this.filterPipe.transform(this._completeDataSource, searchString ?? ''));
+            this.executeSearch(searchString);
         }));
     }
     ngAfterViewInit() {
@@ -6977,13 +7038,240 @@ class CarbonListComponent {
             type: 'blue',
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonListComponent, deps: [{ token: EllipsisPipe }, { token: CarbonListFilterPipe }, { token: i2$3.IconService }, { token: i4.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }, { token: KeyStateService }, { token: CarbonListDragAndDropService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", skeletonRowCount: "skeletonRowCount", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", 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        data-test-id=\"carbonListSearch\"\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\" data-test-id=\"carbonListNoResults\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n    data-test-id=\"carbonListPagination\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <v-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    placement=\"bottom-end\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </v-overflow-menu-option>\n    }\n  </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}\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$3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showExpandAllToggle", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionItemDisabledPipe, name: "actionItemDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    getSearchSegments() {
+        const text = this.searchFormControl.value || '';
+        if (!text)
+            return [{ text, isInvalid: false }];
+        const segments = [];
+        const fieldPattern = /(\w+(?:\.\w+)*):("([^"]+)"|(\S+))/g;
+        const invalidSet = new Set((this.invalidSearchFields || []).map(f => f.toLowerCase()));
+        let lastIndex = 0;
+        let match;
+        while ((match = fieldPattern.exec(text)) !== null) {
+            if (match.index > lastIndex) {
+                segments.push({ text: text.substring(lastIndex, match.index), isInvalid: false });
+            }
+            const fieldName = match[1];
+            const isInvalid = invalidSet.has(fieldName.toLowerCase());
+            segments.push({ text: fieldName, isInvalid });
+            const rest = match[0].substring(fieldName.length);
+            segments.push({ text: rest, isInvalid: false });
+            lastIndex = match.index + match[0].length;
+        }
+        if (lastIndex < text.length) {
+            segments.push({ text: text.substring(lastIndex), isInvalid: false });
+        }
+        return segments;
+    }
+    getSearchInputElement() {
+        if (!this._searchInputElement) {
+            this._searchInputElement = this.elementRef.nativeElement.querySelector('.valtimo-search-container input');
+        }
+        return this._searchInputElement;
+    }
+    getCurrentFieldToken() {
+        const value = this.searchFormControl.value || '';
+        const input = this.getSearchInputElement();
+        const cursor = input?.selectionStart ?? value.length;
+        let start = value.lastIndexOf(' ', cursor - 1) + 1;
+        const beforeCursor = value.substring(start, cursor);
+        if (beforeCursor.includes(':'))
+            return null;
+        const nextSpace = value.indexOf(' ', cursor);
+        const end = nextSpace === -1 ? value.length : nextSpace;
+        const afterCursor = value.substring(cursor, end);
+        if (afterCursor.includes(':'))
+            return null;
+        return { token: beforeCursor, start };
+    }
+    onSearchFocus() {
+        const input = this.getSearchInputElement();
+        if (input && document.activeElement === input) {
+            this.updateAutocomplete();
+        }
+    }
+    updateAutocomplete() {
+        const input = this.getSearchInputElement();
+        if (!input) {
+            this.showAutocomplete = false;
+            this.filteredSuggestions = [];
+            return;
+        }
+        const tokenInfo = this.getCurrentFieldToken();
+        if (!tokenInfo || !this.searchFields?.length) {
+            this.showAutocomplete = false;
+            this.filteredSuggestions = [];
+            return;
+        }
+        const searchToken = tokenInfo.token.toLowerCase();
+        this.filteredSuggestions = searchToken.length === 0
+            ? this.searchFields
+            : this.searchFields.filter(field => field.key.toLowerCase().includes(searchToken) ||
+                (field.title && field.title.toLowerCase().includes(searchToken)));
+        this.showAutocomplete = this.filteredSuggestions.length > 0;
+        this.selectedSuggestionIndex = -1;
+        if (this.showAutocomplete) {
+            this.autocompleteLeft = this.calculateTokenLeft(tokenInfo.start);
+        }
+    }
+    calculateTokenLeft(tokenStart) {
+        const input = this.getSearchInputElement();
+        if (!input)
+            return 48;
+        const value = this.searchFormControl.value || '';
+        const textBefore = value.substring(0, tokenStart);
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return 48;
+        const style = window.getComputedStyle(input);
+        ctx.font = `${style.fontSize} ${style.fontFamily}`;
+        const textWidth = ctx.measureText(textBefore).width;
+        return 48 + textWidth - 12;
+    }
+    selectSuggestion(field) {
+        const tokenInfo = this.getCurrentFieldToken();
+        if (!tokenInfo)
+            return;
+        const value = this.searchFormControl.value || '';
+        const input = this.getSearchInputElement();
+        const cursor = input?.selectionStart ?? value.length;
+        const fieldPath = field.path?.replace(/^(doc|case):/, '') || field.key;
+        const newValue = value.substring(0, tokenInfo.start) + fieldPath + ':' + value.substring(cursor);
+        this.searchFormControl.setValue(newValue);
+        this.showAutocomplete = false;
+        setTimeout(() => {
+            const newCursor = tokenInfo.start + fieldPath.length + 1;
+            input?.setSelectionRange(newCursor, newCursor);
+            input?.focus();
+        });
+    }
+    onSearchKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.onSearchEnter();
+            return;
+        }
+        if (!this.showAutocomplete || this.filteredSuggestions.length === 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.selectedSuggestionIndex =
+                    this.selectedSuggestionIndex < 0
+                        ? 0
+                        : (this.selectedSuggestionIndex + 1) % this.filteredSuggestions.length;
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.selectedSuggestionIndex =
+                    this.selectedSuggestionIndex < 0
+                        ? this.filteredSuggestions.length - 1
+                        : (this.selectedSuggestionIndex - 1 + this.filteredSuggestions.length) %
+                            this.filteredSuggestions.length;
+                break;
+            case 'Tab':
+                event.preventDefault();
+                if (this.selectedSuggestionIndex >= 0) {
+                    this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);
+                }
+                else {
+                    this.showAutocomplete = false;
+                }
+                break;
+            case 'Escape':
+                this.showAutocomplete = false;
+                break;
+        }
+    }
+    onSearchBlur() {
+        setTimeout(() => {
+            this.showAutocomplete = false;
+            this._searchInputElement = null;
+        }, 150);
+    }
+    onSearchClear() {
+        this.showAutocomplete = false;
+    }
+    executeSearch(searchString) {
+        if (searchString === this._lastExecutedSearch) {
+            return;
+        }
+        this._lastExecutedSearch = searchString;
+        if (this.search.observed) {
+            this.search.emit(searchString);
+            return;
+        }
+        if (!searchString) {
+            this._filteredItems$.next(null);
+            return;
+        }
+        this._filteredItems$.next(this.filterPipe.transform(this._completeDataSource, searchString ?? ''));
+    }
+    onSearchEnter() {
+        if (this.showAutocomplete && this.selectedSuggestionIndex >= 0) {
+            this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);
+        }
+        else {
+            this.showAutocomplete = false;
+            this.executeSearch(this.searchFormControl.value);
+        }
+    }
+    onSearchOpenChange(isOpen) {
+        this._searchOpen = isOpen;
+        this._searchInputElement = null;
+        if (isOpen) {
+            setTimeout(() => {
+                this.updateAutocomplete();
+            }, 0);
+        }
+        else {
+            this.showAutocomplete = false;
+        }
+    }
+    onSearchFocusOut(event) {
+        const container = this.elementRef.nativeElement.querySelector('.valtimo-search-container');
+        const relatedTarget = event.relatedTarget;
+        if (!container?.contains(relatedTarget)) {
+            setTimeout(() => {
+                this.showAutocomplete = false;
+                this.cdr.markForCheck();
+            }, 150);
+        }
+    }
+    _captureExpandedRows() {
+        if (!this.expandedRowKey || !this._table?.model)
+            return;
+        const model = this._table.model;
+        const items = this._items;
+        for (let i = 0; i < items.length; i++) {
+            const key = get(items[i], this.expandedRowKey);
+            if (key && model.isRowExpanded(i)) {
+                this._expandedRowKeys.add(key);
+            }
+            else if (key) {
+                this._expandedRowKeys.delete(key);
+            }
+        }
+    }
+    _restoreExpandedRows(model) {
+        if (!this.expandedRowKey || this._expandedRowKeys.size === 0)
+            return;
+        const items = this._items;
+        for (let i = 0; i < items.length; i++) {
+            const key = get(items[i], this.expandedRowKey);
+            if (key && this._expandedRowKeys.has(key)) {
+                model.expandRow(i, true);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonListComponent, deps: [{ token: EllipsisPipe }, { token: CarbonListFilterPipe }, { token: i2$3.IconService }, { token: i4.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }, { token: KeyStateService }, { token: CarbonListDragAndDropService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", skeletonRowCount: "skeletonRowCount", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", initialSearchValue: "initialSearchValue", searchDebounceMs: "searchDebounceMs", invalidSearchFields: "invalidSearchFields", searchFields: "searchFields", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled", expandedRowTemplate: "expandedRowTemplate", expandedRowKey: "expandedRowKey" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, descendants: true }], ngImport: i0, template: "<!--\n  ~ /*\n  ~  * Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~  *\n  ~  * Licensed under EUPL, Version 1.2 (the \"License\");\n  ~  * you may not use this file except in compliance with the License.\n  ~  * You may obtain a copy of the License at\n  ~  *\n  ~  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~  *\n  ~  * Unless required by applicable law or agreed to in writing, software\n  ~  * distributed under the License is distributed on an \"AS IS\" basis,\n  ~  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~  * See the License for the specific language governing permissions and\n  ~  * limitations under the License.\n  ~  */\n  -->\n<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n        <cds-table-toolbar-search\n          #toolbarSearch\n          [expandable]=\"false\"\n          [formControl]=\"searchFormControl\"\n          [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n          data-test-id=\"carbonListSearch\"\n          (input)=\"updateAutocomplete()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          (clear)=\"onSearchClear()\"\n          (open)=\"onSearchOpenChange($event)\"\n        ></cds-table-toolbar-search>\n        <div\n          class=\"valtimo-search-overlay\"\n          aria-hidden=\"true\"\n        ><span\n            *ngFor=\"let segment of getSearchSegments()\"\n            [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n          >{{ segment.text }}</span></div>\n        <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n          <li\n            *ngFor=\"let field of filteredSuggestions; let i = index\"\n            [class.selected]=\"i === selectedSuggestionIndex\"\n            (mousedown)=\"selectSuggestion(field)\"\n          >{{ field.title || field.key }}</li>\n        </ul>\n      </div>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\" data-test-id=\"carbonListNoResults\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n    data-test-id=\"carbonListPagination\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <v-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    placement=\"bottom-end\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </v-overflow-menu-option>\n    }\n  </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showExpandAllToggle", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionItemDisabledPipe, name: "actionItemDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", 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        data-test-id=\"carbonListSearch\"\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\" data-test-id=\"carbonListNoResults\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n    data-test-id=\"carbonListPagination\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <v-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    placement=\"bottom-end\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </v-overflow-menu-option>\n    }\n  </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}\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$3.IconService }, { type: i4.NGXLogger }, { type: i1.TranslateService }, { type: ViewContentService }, { type: KeyStateService }, { type: CarbonListDragAndDropService }, { type: i0.ElementRef }], propDecorators: { actionsMenuTemplate: [{
+            args: [{ selector: 'valtimo-carbon-list', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], standalone: false, template: "<!--\n  ~ /*\n  ~  * Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~  *\n  ~  * Licensed under EUPL, Version 1.2 (the \"License\");\n  ~  * you may not use this file except in compliance with the License.\n  ~  * You may obtain a copy of the License at\n  ~  *\n  ~  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~  *\n  ~  * Unless required by applicable law or agreed to in writing, software\n  ~  * distributed under the License is distributed on an \"AS IS\" basis,\n  ~  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~  * See the License for the specific language governing permissions and\n  ~  * limitations under the License.\n  ~  */\n  -->\n<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n        <cds-table-toolbar-search\n          #toolbarSearch\n          [expandable]=\"false\"\n          [formControl]=\"searchFormControl\"\n          [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n          data-test-id=\"carbonListSearch\"\n          (input)=\"updateAutocomplete()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          (clear)=\"onSearchClear()\"\n          (open)=\"onSearchOpenChange($event)\"\n        ></cds-table-toolbar-search>\n        <div\n          class=\"valtimo-search-overlay\"\n          aria-hidden=\"true\"\n        ><span\n            *ngFor=\"let segment of getSearchSegments()\"\n            [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n          >{{ segment.text }}</span></div>\n        <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n          <li\n            *ngFor=\"let field of filteredSuggestions; let i = index\"\n            [class.selected]=\"i === selectedSuggestionIndex\"\n            (mousedown)=\"selectSuggestion(field)\"\n          >{{ field.title || field.key }}</li>\n        </ul>\n      </div>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\" data-test-id=\"carbonListNoResults\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n    data-test-id=\"carbonListPagination\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <v-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    placement=\"bottom-end\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </v-overflow-menu-option>\n    }\n  </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: EllipsisPipe }, { type: CarbonListFilterPipe }, { type: i2$3.IconService }, { type: i4.NGXLogger }, { type: i1.TranslateService }, { type: ViewContentService }, { type: KeyStateService }, { type: CarbonListDragAndDropService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { actionsMenuTemplate: [{
                 type: ViewChild,
                 args: ['actionsMenuTemplate']
             }], actionTemplate: [{
@@ -7040,6 +7328,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], isSearchable: [{
                 type: Input
+            }], initialSearchValue: [{
+                type: Input
+            }], searchDebounceMs: [{
+                type: Input
+            }], invalidSearchFields: [{
+                type: Input
+            }], searchFields: [{
+                type: Input
             }], enableSingleSelection: [{
                 type: Input
             }], lastColumnTemplate: [{
@@ -7060,6 +7356,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], dragAndDropDisabled: [{
                 type: Input
+            }], expandedRowTemplate: [{
+                type: Input
+            }], expandedRowKey: [{
+                type: Input
             }], rowClicked: [{
                 type: Output
             }], paginationClicked: [{
@@ -8281,11 +8581,11 @@ class FilterSidebarComponent {
         localStorage.setItem('filterSidebar', this.filterSidebar);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FilterSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FilterSidebarComponent, isStandalone: false, selector: "valtimo-filter-sidebar", 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  <a\n    class=\"toggle-filter-sidebar\"\n    data-toggle=\"tooltip\"\n    data-trigger=\"hover\"\n    data-placement=\"right\"\n    title=\"Show / hide\"\n    href=\"javascript:void(0)\"\n    (click)=\"toggleFilterSidebar()\"\n    [ngClass]=\"this.filterSidebar === 'show' && 'toggle-expanded'\"\n  >\n    <div class=\"icon-container p-0 bg-transparent\">\n      <i class=\"click-able icon shadow mdi mdi-filter-variant\"></i>\n    </div>\n  </a>\n  <aside class=\"page-aside p-4 mb-4 bg-light filter-holder\" *ngIf=\"this.filterSidebar === 'show'\">\n    <ng-content></ng-content>\n  </aside>\n</div>\n", styles: [".filter-holder{border:0px solid transparent}.toggle-filter-sidebar{position:absolute;top:25px;margin-left:-50px;z-index:1;font-size:2rem;cursor:pointer}.icon-container .icon{background-color:#fff;color:#6b6b6b;line-height:2rem;cursor:pointer}.toggle-filter-sidebar:hover .icon-container .icon{color:#ff5800}@media screen and (min-width: 768px){.toggle-filter-sidebar{margin-left:-25px}.page-aside{position:absolute;left:0;margin-top:0;height:calc(100vh - 61px)}.toggle-expanded{margin-left:255px}}\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FilterSidebarComponent, isStandalone: false, selector: "valtimo-filter-sidebar", 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  <a\n    class=\"toggle-filter-sidebar\"\n    data-toggle=\"tooltip\"\n    data-trigger=\"hover\"\n    data-placement=\"right\"\n    title=\"Show / hide\"\n    href=\"javascript:void(0)\"\n    (click)=\"toggleFilterSidebar()\"\n    [ngClass]=\"this.filterSidebar === 'show' && 'toggle-expanded'\"\n  >\n    <div class=\"icon-container p-0 bg-transparent\">\n      <i class=\"click-able icon shadow mdi mdi-filter-variant\"></i>\n    </div>\n  </a>\n  <aside class=\"page-aside p-4 mb-4 bg-light filter-holder\" *ngIf=\"this.filterSidebar === 'show'\">\n    <ng-content></ng-content>\n  </aside>\n</div>\n", styles: [".filter-holder{border:0px solid transparent}.toggle-filter-sidebar{position:absolute;top:25px;margin-left:-50px;z-index:1;font-size:2rem;cursor:pointer}.icon-container .icon{background-color:#fff;color:#6b6b6b;line-height:2rem;cursor:pointer}.toggle-filter-sidebar:hover .icon-container .icon{color:#ff5800}@media screen and (min-width:768px){.toggle-filter-sidebar{margin-left:-25px}.page-aside{position:absolute;left:0;margin-top:0;height:calc(100vh - 61px)}.toggle-expanded{margin-left:255px}}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FilterSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-filter-sidebar', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <a\n    class=\"toggle-filter-sidebar\"\n    data-toggle=\"tooltip\"\n    data-trigger=\"hover\"\n    data-placement=\"right\"\n    title=\"Show / hide\"\n    href=\"javascript:void(0)\"\n    (click)=\"toggleFilterSidebar()\"\n    [ngClass]=\"this.filterSidebar === 'show' && 'toggle-expanded'\"\n  >\n    <div class=\"icon-container p-0 bg-transparent\">\n      <i class=\"click-able icon shadow mdi mdi-filter-variant\"></i>\n    </div>\n  </a>\n  <aside class=\"page-aside p-4 mb-4 bg-light filter-holder\" *ngIf=\"this.filterSidebar === 'show'\">\n    <ng-content></ng-content>\n  </aside>\n</div>\n", styles: [".filter-holder{border:0px solid transparent}.toggle-filter-sidebar{position:absolute;top:25px;margin-left:-50px;z-index:1;font-size:2rem;cursor:pointer}.icon-container .icon{background-color:#fff;color:#6b6b6b;line-height:2rem;cursor:pointer}.toggle-filter-sidebar:hover .icon-container .icon{color:#ff5800}@media screen and (min-width: 768px){.toggle-filter-sidebar{margin-left:-25px}.page-aside{position:absolute;left:0;margin-top:0;height:calc(100vh - 61px)}.toggle-expanded{margin-left:255px}}\n"] }]
+            args: [{ selector: 'valtimo-filter-sidebar', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <a\n    class=\"toggle-filter-sidebar\"\n    data-toggle=\"tooltip\"\n    data-trigger=\"hover\"\n    data-placement=\"right\"\n    title=\"Show / hide\"\n    href=\"javascript:void(0)\"\n    (click)=\"toggleFilterSidebar()\"\n    [ngClass]=\"this.filterSidebar === 'show' && 'toggle-expanded'\"\n  >\n    <div class=\"icon-container p-0 bg-transparent\">\n      <i class=\"click-able icon shadow mdi mdi-filter-variant\"></i>\n    </div>\n  </a>\n  <aside class=\"page-aside p-4 mb-4 bg-light filter-holder\" *ngIf=\"this.filterSidebar === 'show'\">\n    <ng-content></ng-content>\n  </aside>\n</div>\n", styles: [".filter-holder{border:0px solid transparent}.toggle-filter-sidebar{position:absolute;top:25px;margin-left:-50px;z-index:1;font-size:2rem;cursor:pointer}.icon-container .icon{background-color:#fff;color:#6b6b6b;line-height:2rem;cursor:pointer}.toggle-filter-sidebar:hover .icon-container .icon{color:#ff5800}@media screen and (min-width:768px){.toggle-filter-sidebar{margin-left:-25px}.page-aside{position:absolute;left:0;margin-top:0;height:calc(100vh - 61px)}.toggle-expanded{margin-left:255px}}\n"] }]
         }], ctorParameters: () => [] });
 
 /*
@@ -11260,11 +11560,11 @@ class ModalComponent {
         this.observer.observe(this.scrollModal.nativeElement, config);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ModalComponent, deps: [{ token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ModalComponent, isStandalone: false, selector: "valtimo-modal", inputs: { elementId: "elementId", title: "title", subtitle: "subtitle", templateBelowSubtitle: "templateBelowSubtitle", showFooter: "showFooter" }, viewQueries: [{ propertyName: "scrollModal", first: true, predicate: ["scrollModal"], 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\n<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media (min-width: 768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ModalComponent, isStandalone: false, selector: "valtimo-modal", inputs: { elementId: "elementId", title: "title", subtitle: "subtitle", templateBelowSubtitle: "templateBelowSubtitle", showFooter: "showFooter" }, viewQueries: [{ propertyName: "scrollModal", first: true, predicate: ["scrollModal"], 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\n<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media(min-width:768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-modal', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media (min-width: 768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\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-modal', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media(min-width:768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\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: ValtimoModalService }], propDecorators: { elementId: [{
                 type: Input
             }], title: [{
@@ -13418,7 +13718,7 @@ class ObjectManagementSelectComponent {
         this.valueChange.emit(this.accumulatedSelections);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ObjectManagementSelectComponent, deps: [{ token: ObjectManagementSelectService }, { token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ObjectManagementSelectComponent, isStandalone: true, selector: "valtimo-object-management-select", inputs: { disabled: "disabled", label: "label", validate: "validate", valueFormat: "valueFormat", objectManagementId: "objectManagementId", objectManagementTitle: "objectManagementTitle", columns: "columns", pageSize: "pageSize", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "_carbonList", first: true, predicate: ["carbonList"], descendants: true }, { propertyName: "_selectionList", first: true, predicate: ["selectionList"], descendants: true }], ngImport: i0, template: "<!--\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n -->\n\n<ng-template #textFilter let-col>\n  <div class=\"search-field-container\">\n    <v-input\n      [name]=\"col.path\"\n      [title]=\"col.label | translate\"\n      [fullWidth]=\"true\"\n      [smallLabel]=\"true\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"filterValues[col.path] || ''\"\n      [clear$]=\"clearInputs$\"\n      (valueChange)=\"filterValues[col.path] = $event\"\n      (keyup.enter)=\"onSearch()\"\n    ></v-input>\n  </div>\n</ng-template>\n\n<ng-template #dropdownFilter let-col>\n  <div class=\"search-field-container\">\n    <v-input-label [title]=\"col.label | translate\" [small]=\"true\"></v-input-label>\n    <v-select\n      [items]=\"dropdownOptionsMap[col.path]\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"col.path\"\n      [disabled]=\"disabled\"\n      [defaultSelectionId]=\"filterValues[col.path] ?? null\"\n      [clearSelectionSubject$]=\"clearSelects$\"\n      (selectedChange)=\"filterValues[col.path] = $event\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </div>\n</ng-template>\n\n<ng-template #dateFilter let-col>\n  <div class=\"search-field-container\">\n    <v-date-picker\n      [title]=\"col.label | translate\"\n      [name]=\"col.path\"\n      fullWidth=\"true\"\n      [smallLabel]=\"true\"\n      [disabled]=\"disabled\"\n      [defaultDate]=\"filterValues[col.path] || ''\"\n      [clear$]=\"clearInputs$\"\n      (valueChange)=\"filterValues[col.path] = $event\"\n      (keyup.enter)=\"onSearch()\"\n    ></v-date-picker>\n  </div>\n</ng-template>\n\n<ng-template #dateRangeFilter let-col>\n  <div class=\"search-field-container search-field-container--full\">\n    <v-input-label [title]=\"col.label | translate\" [small]=\"true\"></v-input-label>\n    <div class=\"date-range-fields\">\n      <v-date-picker\n        [name]=\"col.path + '_start'\"\n        fullWidth=\"true\"\n        [disabled]=\"disabled\"\n        [defaultDate]=\"filterValues[col.path + '_start'] || ''\"\n        [clear$]=\"clearInputs$\"\n        (valueChange)=\"filterValues[col.path + '_start'] = $event\"\n        (keyup.enter)=\"onSearch()\"\n      ></v-date-picker>\n      <span class=\"to-text\">{{ 'searchFields.to' | translate }}</span>\n      <v-date-picker\n        [name]=\"col.path + '_end'\"\n        fullWidth=\"true\"\n        [disabled]=\"disabled\"\n        [defaultDate]=\"filterValues[col.path + '_end'] || ''\"\n        [clear$]=\"clearInputs$\"\n        (valueChange)=\"filterValues[col.path + '_end'] = $event\"\n        (keyup.enter)=\"onSearch()\"\n      ></v-date-picker>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"object-management-select\" data-test-id=\"object-management-select\">\n  <cds-accordion *ngIf=\"showFilters\" class=\"filter-accordion\">\n    <cds-accordion-item [title]=\"'searchFields.searchButtonText' | translate\" [expanded]=\"filtersExpanded\">\n      <div class=\"search-fields-container\">\n        <ng-container *ngFor=\"let col of filterableColumns\">\n          <ng-container *ngIf=\"col.inputType === 'text' || !col.inputType\">\n            <ng-container *ngTemplateOutlet=\"textFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'dropdown'\">\n            <ng-container *ngTemplateOutlet=\"dropdownFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'date'\">\n            <ng-container *ngTemplateOutlet=\"dateFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'dateRange'\">\n            <ng-container *ngTemplateOutlet=\"dateRangeFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <button type=\"button\" cdsButton=\"tertiary\" (click)=\"onClearFilters()\" [disabled]=\"disabled\">\n          {{ 'searchFields.clearButtonText' | translate }}\n        </button>\n        <button type=\"button\" cdsButton=\"primary\" (click)=\"onSearch()\" [disabled]=\"disabled\">\n          {{ 'searchFields.searchButtonText' | translate }}\n        </button>\n      </div>\n    </cds-accordion-item>\n  </cds-accordion>\n\n  <valtimo-carbon-list\n    #carbonList\n    [fields]=\"tableFields\"\n    [items]=\"tableItems\"\n    [loading]=\"loading\"\n    [skeletonRowCount]=\"2\"\n    [header]=\"false\"\n    [hideToolbar]=\"false\"\n    [isSearchable]=\"false\"\n    [showSelectionColumn]=\"true\"\n    [pagination]=\"pagination\"\n    [initialSortState]=\"initialSortState\"\n    (sortChanged)=\"onSort($event)\"\n    (paginationClicked)=\"onPageChange($event)\"\n    (paginationSet)=\"onPageSizeChange($event)\"\n    data-test-id=\"object-management-select-list\"\n  >\n    <button\n      type=\"button\"\n      carbonToolbarContent\n      cdsButton=\"ghost\"\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (click)=\"loadData()\"\n      [disabled]=\"loading\"\n    >\n      <svg cdsIcon=\"search\" size=\"16\"></svg>\n    </button>\n    <button\n      type=\"button\"\n      carbonToolbarActions\n      cdsButton=\"primary\"\n      (click)=\"onAddSelection()\"\n      [disabled]=\"disabled || !canAddMore\"\n      data-test-id=\"object-management-select-add-button\"\n    >\n      {{ 'interface.add' | translate }}\n    </button>\n  </valtimo-carbon-list>\n\n  <div class=\"selections-section\" *ngIf=\"accumulatedSelections.length > 0\">\n    <valtimo-carbon-list\n      #selectionList\n      [fields]=\"selectionFields\"\n      [items]=\"selectionTableItems\"\n      [header]=\"true\"\n      [hideToolbar]=\"false\"\n      [isSearchable]=\"false\"\n      [showSelectionColumn]=\"true\"\n      (sortChanged)=\"onSelectionSort($event)\"\n      data-test-id=\"object-management-select-selections\"\n    >\n      <span header>{{ 'interface.list.multipleSelect' | translate:{count: accumulatedSelections.length} }}</span>\n      <button\n        type=\"button\"\n        carbonToolbarContent\n        cdsButton=\"ghost\"\n        (click)=\"onClearSelections()\"\n        [disabled]=\"disabled\"\n      >\n        {{ 'interface.clearAll' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        carbonToolbarActions\n        cdsButton=\"danger\"\n        (click)=\"onRemoveSelectedSelections()\"\n        [disabled]=\"disabled\"\n        data-test-id=\"object-management-select-remove-button\"\n      >\n        {{ 'interface.delete' | translate }}\n      </button>\n    </valtimo-carbon-list>\n  </div>\n</div>\n", styles: [".object-management-select{display:flex;flex-direction:column;gap:0}.filter-accordion ::ng-deep .cds--accordion{background-color:var(--cds-layer)}.filter-accordion ::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle);border-block-start:1px solid var(--cds-border-subtle);border-block-end:none}.filter-accordion ::ng-deep .cds--accordion__heading{height:48px}.filter-accordion ::ng-deep .cds--accordion__content{padding:0 16px}::ng-deep .cds--table-toolbar{background-color:var(--cds-layer);border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}@media (max-width: 480px){.search-fields-container{grid-template-columns:1fr}}.search-field-container--full{grid-column:span 2}@media (max-width: 480px){.search-field-container--full{grid-column:span 1}}.date-range-fields{display:grid;grid-template-columns:5fr 2fr 5fr;align-items:center;gap:8px}@media (max-width: 480px){.date-range-fields{grid-template-columns:1fr}}.to-text{text-align:center}.buttons-container{width:100%;display:flex;justify-content:flex-end;gap:16px;padding-bottom:16px}.selections-section{margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i2$3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { 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: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: SelectModule }, { 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: "ngmodule", type: DatePickerModule }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ObjectManagementSelectComponent, isStandalone: true, selector: "valtimo-object-management-select", inputs: { disabled: "disabled", label: "label", validate: "validate", valueFormat: "valueFormat", objectManagementId: "objectManagementId", objectManagementTitle: "objectManagementTitle", columns: "columns", pageSize: "pageSize", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "_carbonList", first: true, predicate: ["carbonList"], descendants: true }, { propertyName: "_selectionList", first: true, predicate: ["selectionList"], descendants: true }], ngImport: i0, template: "<!--\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n -->\n\n<ng-template #textFilter let-col>\n  <div class=\"search-field-container\">\n    <v-input\n      [name]=\"col.path\"\n      [title]=\"col.label | translate\"\n      [fullWidth]=\"true\"\n      [smallLabel]=\"true\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"filterValues[col.path] || ''\"\n      [clear$]=\"clearInputs$\"\n      (valueChange)=\"filterValues[col.path] = $event\"\n      (keyup.enter)=\"onSearch()\"\n    ></v-input>\n  </div>\n</ng-template>\n\n<ng-template #dropdownFilter let-col>\n  <div class=\"search-field-container\">\n    <v-input-label [title]=\"col.label | translate\" [small]=\"true\"></v-input-label>\n    <v-select\n      [items]=\"dropdownOptionsMap[col.path]\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"col.path\"\n      [disabled]=\"disabled\"\n      [defaultSelectionId]=\"filterValues[col.path] ?? null\"\n      [clearSelectionSubject$]=\"clearSelects$\"\n      (selectedChange)=\"filterValues[col.path] = $event\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </div>\n</ng-template>\n\n<ng-template #dateFilter let-col>\n  <div class=\"search-field-container\">\n    <v-date-picker\n      [title]=\"col.label | translate\"\n      [name]=\"col.path\"\n      fullWidth=\"true\"\n      [smallLabel]=\"true\"\n      [disabled]=\"disabled\"\n      [defaultDate]=\"filterValues[col.path] || ''\"\n      [clear$]=\"clearInputs$\"\n      (valueChange)=\"filterValues[col.path] = $event\"\n      (keyup.enter)=\"onSearch()\"\n    ></v-date-picker>\n  </div>\n</ng-template>\n\n<ng-template #dateRangeFilter let-col>\n  <div class=\"search-field-container search-field-container--full\">\n    <v-input-label [title]=\"col.label | translate\" [small]=\"true\"></v-input-label>\n    <div class=\"date-range-fields\">\n      <v-date-picker\n        [name]=\"col.path + '_start'\"\n        fullWidth=\"true\"\n        [disabled]=\"disabled\"\n        [defaultDate]=\"filterValues[col.path + '_start'] || ''\"\n        [clear$]=\"clearInputs$\"\n        (valueChange)=\"filterValues[col.path + '_start'] = $event\"\n        (keyup.enter)=\"onSearch()\"\n      ></v-date-picker>\n      <span class=\"to-text\">{{ 'searchFields.to' | translate }}</span>\n      <v-date-picker\n        [name]=\"col.path + '_end'\"\n        fullWidth=\"true\"\n        [disabled]=\"disabled\"\n        [defaultDate]=\"filterValues[col.path + '_end'] || ''\"\n        [clear$]=\"clearInputs$\"\n        (valueChange)=\"filterValues[col.path + '_end'] = $event\"\n        (keyup.enter)=\"onSearch()\"\n      ></v-date-picker>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"object-management-select\" data-test-id=\"object-management-select\">\n  <cds-accordion *ngIf=\"showFilters\" class=\"filter-accordion\">\n    <cds-accordion-item [title]=\"'searchFields.searchButtonText' | translate\" [expanded]=\"filtersExpanded\">\n      <div class=\"search-fields-container\">\n        <ng-container *ngFor=\"let col of filterableColumns\">\n          <ng-container *ngIf=\"col.inputType === 'text' || !col.inputType\">\n            <ng-container *ngTemplateOutlet=\"textFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'dropdown'\">\n            <ng-container *ngTemplateOutlet=\"dropdownFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'date'\">\n            <ng-container *ngTemplateOutlet=\"dateFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'dateRange'\">\n            <ng-container *ngTemplateOutlet=\"dateRangeFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <button type=\"button\" cdsButton=\"tertiary\" (click)=\"onClearFilters()\" [disabled]=\"disabled\">\n          {{ 'searchFields.clearButtonText' | translate }}\n        </button>\n        <button type=\"button\" cdsButton=\"primary\" (click)=\"onSearch()\" [disabled]=\"disabled\">\n          {{ 'searchFields.searchButtonText' | translate }}\n        </button>\n      </div>\n    </cds-accordion-item>\n  </cds-accordion>\n\n  <valtimo-carbon-list\n    #carbonList\n    [fields]=\"tableFields\"\n    [items]=\"tableItems\"\n    [loading]=\"loading\"\n    [skeletonRowCount]=\"2\"\n    [header]=\"false\"\n    [hideToolbar]=\"false\"\n    [isSearchable]=\"false\"\n    [showSelectionColumn]=\"true\"\n    [pagination]=\"pagination\"\n    [initialSortState]=\"initialSortState\"\n    (sortChanged)=\"onSort($event)\"\n    (paginationClicked)=\"onPageChange($event)\"\n    (paginationSet)=\"onPageSizeChange($event)\"\n    data-test-id=\"object-management-select-list\"\n  >\n    <button\n      type=\"button\"\n      carbonToolbarContent\n      cdsButton=\"ghost\"\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (click)=\"loadData()\"\n      [disabled]=\"loading\"\n    >\n      <svg cdsIcon=\"search\" size=\"16\"></svg>\n    </button>\n    <button\n      type=\"button\"\n      carbonToolbarActions\n      cdsButton=\"primary\"\n      (click)=\"onAddSelection()\"\n      [disabled]=\"disabled || !canAddMore\"\n      data-test-id=\"object-management-select-add-button\"\n    >\n      {{ 'interface.add' | translate }}\n    </button>\n  </valtimo-carbon-list>\n\n  <div class=\"selections-section\" *ngIf=\"accumulatedSelections.length > 0\">\n    <valtimo-carbon-list\n      #selectionList\n      [fields]=\"selectionFields\"\n      [items]=\"selectionTableItems\"\n      [header]=\"true\"\n      [hideToolbar]=\"false\"\n      [isSearchable]=\"false\"\n      [showSelectionColumn]=\"true\"\n      (sortChanged)=\"onSelectionSort($event)\"\n      data-test-id=\"object-management-select-selections\"\n    >\n      <span header>{{ 'interface.list.multipleSelect' | translate:{count: accumulatedSelections.length} }}</span>\n      <button\n        type=\"button\"\n        carbonToolbarContent\n        cdsButton=\"ghost\"\n        (click)=\"onClearSelections()\"\n        [disabled]=\"disabled\"\n      >\n        {{ 'interface.clearAll' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        carbonToolbarActions\n        cdsButton=\"danger\"\n        (click)=\"onRemoveSelectedSelections()\"\n        [disabled]=\"disabled\"\n        data-test-id=\"object-management-select-remove-button\"\n      >\n        {{ 'interface.delete' | translate }}\n      </button>\n    </valtimo-carbon-list>\n  </div>\n</div>\n", styles: [".object-management-select{display:flex;flex-direction:column;gap:0}.filter-accordion ::ng-deep .cds--accordion{background-color:var(--cds-layer)}.filter-accordion ::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle);border-block-start:1px solid var(--cds-border-subtle);border-block-end:none}.filter-accordion ::ng-deep .cds--accordion__heading{height:48px}.filter-accordion ::ng-deep .cds--accordion__content{padding:0 16px}::ng-deep .cds--table-toolbar{background-color:var(--cds-layer);border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}@media(max-width:480px){.search-fields-container{grid-template-columns:1fr}}.search-field-container--full{grid-column:span 2}@media(max-width:480px){.search-field-container--full{grid-column:span 1}}.date-range-fields{display:grid;grid-template-columns:5fr 2fr 5fr;align-items:center;gap:8px}@media(max-width:480px){.date-range-fields{grid-template-columns:1fr}}.to-text{text-align:center}.buttons-container{width:100%;display:flex;justify-content:flex-end;gap:16px;padding-bottom:16px}.selections-section{margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i2$3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { 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: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: SelectModule }, { 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: "ngmodule", type: DatePickerModule }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ObjectManagementSelectComponent, decorators: [{
             type: Component,
@@ -13434,7 +13734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         InputLabelModule,
                         SelectModule,
                         DatePickerModule,
-                    ], template: "<!--\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n -->\n\n<ng-template #textFilter let-col>\n  <div class=\"search-field-container\">\n    <v-input\n      [name]=\"col.path\"\n      [title]=\"col.label | translate\"\n      [fullWidth]=\"true\"\n      [smallLabel]=\"true\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"filterValues[col.path] || ''\"\n      [clear$]=\"clearInputs$\"\n      (valueChange)=\"filterValues[col.path] = $event\"\n      (keyup.enter)=\"onSearch()\"\n    ></v-input>\n  </div>\n</ng-template>\n\n<ng-template #dropdownFilter let-col>\n  <div class=\"search-field-container\">\n    <v-input-label [title]=\"col.label | translate\" [small]=\"true\"></v-input-label>\n    <v-select\n      [items]=\"dropdownOptionsMap[col.path]\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"col.path\"\n      [disabled]=\"disabled\"\n      [defaultSelectionId]=\"filterValues[col.path] ?? null\"\n      [clearSelectionSubject$]=\"clearSelects$\"\n      (selectedChange)=\"filterValues[col.path] = $event\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </div>\n</ng-template>\n\n<ng-template #dateFilter let-col>\n  <div class=\"search-field-container\">\n    <v-date-picker\n      [title]=\"col.label | translate\"\n      [name]=\"col.path\"\n      fullWidth=\"true\"\n      [smallLabel]=\"true\"\n      [disabled]=\"disabled\"\n      [defaultDate]=\"filterValues[col.path] || ''\"\n      [clear$]=\"clearInputs$\"\n      (valueChange)=\"filterValues[col.path] = $event\"\n      (keyup.enter)=\"onSearch()\"\n    ></v-date-picker>\n  </div>\n</ng-template>\n\n<ng-template #dateRangeFilter let-col>\n  <div class=\"search-field-container search-field-container--full\">\n    <v-input-label [title]=\"col.label | translate\" [small]=\"true\"></v-input-label>\n    <div class=\"date-range-fields\">\n      <v-date-picker\n        [name]=\"col.path + '_start'\"\n        fullWidth=\"true\"\n        [disabled]=\"disabled\"\n        [defaultDate]=\"filterValues[col.path + '_start'] || ''\"\n        [clear$]=\"clearInputs$\"\n        (valueChange)=\"filterValues[col.path + '_start'] = $event\"\n        (keyup.enter)=\"onSearch()\"\n      ></v-date-picker>\n      <span class=\"to-text\">{{ 'searchFields.to' | translate }}</span>\n      <v-date-picker\n        [name]=\"col.path + '_end'\"\n        fullWidth=\"true\"\n        [disabled]=\"disabled\"\n        [defaultDate]=\"filterValues[col.path + '_end'] || ''\"\n        [clear$]=\"clearInputs$\"\n        (valueChange)=\"filterValues[col.path + '_end'] = $event\"\n        (keyup.enter)=\"onSearch()\"\n      ></v-date-picker>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"object-management-select\" data-test-id=\"object-management-select\">\n  <cds-accordion *ngIf=\"showFilters\" class=\"filter-accordion\">\n    <cds-accordion-item [title]=\"'searchFields.searchButtonText' | translate\" [expanded]=\"filtersExpanded\">\n      <div class=\"search-fields-container\">\n        <ng-container *ngFor=\"let col of filterableColumns\">\n          <ng-container *ngIf=\"col.inputType === 'text' || !col.inputType\">\n            <ng-container *ngTemplateOutlet=\"textFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'dropdown'\">\n            <ng-container *ngTemplateOutlet=\"dropdownFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'date'\">\n            <ng-container *ngTemplateOutlet=\"dateFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'dateRange'\">\n            <ng-container *ngTemplateOutlet=\"dateRangeFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <button type=\"button\" cdsButton=\"tertiary\" (click)=\"onClearFilters()\" [disabled]=\"disabled\">\n          {{ 'searchFields.clearButtonText' | translate }}\n        </button>\n        <button type=\"button\" cdsButton=\"primary\" (click)=\"onSearch()\" [disabled]=\"disabled\">\n          {{ 'searchFields.searchButtonText' | translate }}\n        </button>\n      </div>\n    </cds-accordion-item>\n  </cds-accordion>\n\n  <valtimo-carbon-list\n    #carbonList\n    [fields]=\"tableFields\"\n    [items]=\"tableItems\"\n    [loading]=\"loading\"\n    [skeletonRowCount]=\"2\"\n    [header]=\"false\"\n    [hideToolbar]=\"false\"\n    [isSearchable]=\"false\"\n    [showSelectionColumn]=\"true\"\n    [pagination]=\"pagination\"\n    [initialSortState]=\"initialSortState\"\n    (sortChanged)=\"onSort($event)\"\n    (paginationClicked)=\"onPageChange($event)\"\n    (paginationSet)=\"onPageSizeChange($event)\"\n    data-test-id=\"object-management-select-list\"\n  >\n    <button\n      type=\"button\"\n      carbonToolbarContent\n      cdsButton=\"ghost\"\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (click)=\"loadData()\"\n      [disabled]=\"loading\"\n    >\n      <svg cdsIcon=\"search\" size=\"16\"></svg>\n    </button>\n    <button\n      type=\"button\"\n      carbonToolbarActions\n      cdsButton=\"primary\"\n      (click)=\"onAddSelection()\"\n      [disabled]=\"disabled || !canAddMore\"\n      data-test-id=\"object-management-select-add-button\"\n    >\n      {{ 'interface.add' | translate }}\n    </button>\n  </valtimo-carbon-list>\n\n  <div class=\"selections-section\" *ngIf=\"accumulatedSelections.length > 0\">\n    <valtimo-carbon-list\n      #selectionList\n      [fields]=\"selectionFields\"\n      [items]=\"selectionTableItems\"\n      [header]=\"true\"\n      [hideToolbar]=\"false\"\n      [isSearchable]=\"false\"\n      [showSelectionColumn]=\"true\"\n      (sortChanged)=\"onSelectionSort($event)\"\n      data-test-id=\"object-management-select-selections\"\n    >\n      <span header>{{ 'interface.list.multipleSelect' | translate:{count: accumulatedSelections.length} }}</span>\n      <button\n        type=\"button\"\n        carbonToolbarContent\n        cdsButton=\"ghost\"\n        (click)=\"onClearSelections()\"\n        [disabled]=\"disabled\"\n      >\n        {{ 'interface.clearAll' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        carbonToolbarActions\n        cdsButton=\"danger\"\n        (click)=\"onRemoveSelectedSelections()\"\n        [disabled]=\"disabled\"\n        data-test-id=\"object-management-select-remove-button\"\n      >\n        {{ 'interface.delete' | translate }}\n      </button>\n    </valtimo-carbon-list>\n  </div>\n</div>\n", styles: [".object-management-select{display:flex;flex-direction:column;gap:0}.filter-accordion ::ng-deep .cds--accordion{background-color:var(--cds-layer)}.filter-accordion ::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle);border-block-start:1px solid var(--cds-border-subtle);border-block-end:none}.filter-accordion ::ng-deep .cds--accordion__heading{height:48px}.filter-accordion ::ng-deep .cds--accordion__content{padding:0 16px}::ng-deep .cds--table-toolbar{background-color:var(--cds-layer);border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}@media (max-width: 480px){.search-fields-container{grid-template-columns:1fr}}.search-field-container--full{grid-column:span 2}@media (max-width: 480px){.search-field-container--full{grid-column:span 1}}.date-range-fields{display:grid;grid-template-columns:5fr 2fr 5fr;align-items:center;gap:8px}@media (max-width: 480px){.date-range-fields{grid-template-columns:1fr}}.to-text{text-align:center}.buttons-container{width:100%;display:flex;justify-content:flex-end;gap:16px;padding-bottom:16px}.selections-section{margin-top:1rem}\n"] }]
+                    ], template: "<!--\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n -->\n\n<ng-template #textFilter let-col>\n  <div class=\"search-field-container\">\n    <v-input\n      [name]=\"col.path\"\n      [title]=\"col.label | translate\"\n      [fullWidth]=\"true\"\n      [smallLabel]=\"true\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"filterValues[col.path] || ''\"\n      [clear$]=\"clearInputs$\"\n      (valueChange)=\"filterValues[col.path] = $event\"\n      (keyup.enter)=\"onSearch()\"\n    ></v-input>\n  </div>\n</ng-template>\n\n<ng-template #dropdownFilter let-col>\n  <div class=\"search-field-container\">\n    <v-input-label [title]=\"col.label | translate\" [small]=\"true\"></v-input-label>\n    <v-select\n      [items]=\"dropdownOptionsMap[col.path]\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"col.path\"\n      [disabled]=\"disabled\"\n      [defaultSelectionId]=\"filterValues[col.path] ?? null\"\n      [clearSelectionSubject$]=\"clearSelects$\"\n      (selectedChange)=\"filterValues[col.path] = $event\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </div>\n</ng-template>\n\n<ng-template #dateFilter let-col>\n  <div class=\"search-field-container\">\n    <v-date-picker\n      [title]=\"col.label | translate\"\n      [name]=\"col.path\"\n      fullWidth=\"true\"\n      [smallLabel]=\"true\"\n      [disabled]=\"disabled\"\n      [defaultDate]=\"filterValues[col.path] || ''\"\n      [clear$]=\"clearInputs$\"\n      (valueChange)=\"filterValues[col.path] = $event\"\n      (keyup.enter)=\"onSearch()\"\n    ></v-date-picker>\n  </div>\n</ng-template>\n\n<ng-template #dateRangeFilter let-col>\n  <div class=\"search-field-container search-field-container--full\">\n    <v-input-label [title]=\"col.label | translate\" [small]=\"true\"></v-input-label>\n    <div class=\"date-range-fields\">\n      <v-date-picker\n        [name]=\"col.path + '_start'\"\n        fullWidth=\"true\"\n        [disabled]=\"disabled\"\n        [defaultDate]=\"filterValues[col.path + '_start'] || ''\"\n        [clear$]=\"clearInputs$\"\n        (valueChange)=\"filterValues[col.path + '_start'] = $event\"\n        (keyup.enter)=\"onSearch()\"\n      ></v-date-picker>\n      <span class=\"to-text\">{{ 'searchFields.to' | translate }}</span>\n      <v-date-picker\n        [name]=\"col.path + '_end'\"\n        fullWidth=\"true\"\n        [disabled]=\"disabled\"\n        [defaultDate]=\"filterValues[col.path + '_end'] || ''\"\n        [clear$]=\"clearInputs$\"\n        (valueChange)=\"filterValues[col.path + '_end'] = $event\"\n        (keyup.enter)=\"onSearch()\"\n      ></v-date-picker>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"object-management-select\" data-test-id=\"object-management-select\">\n  <cds-accordion *ngIf=\"showFilters\" class=\"filter-accordion\">\n    <cds-accordion-item [title]=\"'searchFields.searchButtonText' | translate\" [expanded]=\"filtersExpanded\">\n      <div class=\"search-fields-container\">\n        <ng-container *ngFor=\"let col of filterableColumns\">\n          <ng-container *ngIf=\"col.inputType === 'text' || !col.inputType\">\n            <ng-container *ngTemplateOutlet=\"textFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'dropdown'\">\n            <ng-container *ngTemplateOutlet=\"dropdownFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'date'\">\n            <ng-container *ngTemplateOutlet=\"dateFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"col.inputType === 'dateRange'\">\n            <ng-container *ngTemplateOutlet=\"dateRangeFilter; context: { $implicit: col }\"></ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <button type=\"button\" cdsButton=\"tertiary\" (click)=\"onClearFilters()\" [disabled]=\"disabled\">\n          {{ 'searchFields.clearButtonText' | translate }}\n        </button>\n        <button type=\"button\" cdsButton=\"primary\" (click)=\"onSearch()\" [disabled]=\"disabled\">\n          {{ 'searchFields.searchButtonText' | translate }}\n        </button>\n      </div>\n    </cds-accordion-item>\n  </cds-accordion>\n\n  <valtimo-carbon-list\n    #carbonList\n    [fields]=\"tableFields\"\n    [items]=\"tableItems\"\n    [loading]=\"loading\"\n    [skeletonRowCount]=\"2\"\n    [header]=\"false\"\n    [hideToolbar]=\"false\"\n    [isSearchable]=\"false\"\n    [showSelectionColumn]=\"true\"\n    [pagination]=\"pagination\"\n    [initialSortState]=\"initialSortState\"\n    (sortChanged)=\"onSort($event)\"\n    (paginationClicked)=\"onPageChange($event)\"\n    (paginationSet)=\"onPageSizeChange($event)\"\n    data-test-id=\"object-management-select-list\"\n  >\n    <button\n      type=\"button\"\n      carbonToolbarContent\n      cdsButton=\"ghost\"\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (click)=\"loadData()\"\n      [disabled]=\"loading\"\n    >\n      <svg cdsIcon=\"search\" size=\"16\"></svg>\n    </button>\n    <button\n      type=\"button\"\n      carbonToolbarActions\n      cdsButton=\"primary\"\n      (click)=\"onAddSelection()\"\n      [disabled]=\"disabled || !canAddMore\"\n      data-test-id=\"object-management-select-add-button\"\n    >\n      {{ 'interface.add' | translate }}\n    </button>\n  </valtimo-carbon-list>\n\n  <div class=\"selections-section\" *ngIf=\"accumulatedSelections.length > 0\">\n    <valtimo-carbon-list\n      #selectionList\n      [fields]=\"selectionFields\"\n      [items]=\"selectionTableItems\"\n      [header]=\"true\"\n      [hideToolbar]=\"false\"\n      [isSearchable]=\"false\"\n      [showSelectionColumn]=\"true\"\n      (sortChanged)=\"onSelectionSort($event)\"\n      data-test-id=\"object-management-select-selections\"\n    >\n      <span header>{{ 'interface.list.multipleSelect' | translate:{count: accumulatedSelections.length} }}</span>\n      <button\n        type=\"button\"\n        carbonToolbarContent\n        cdsButton=\"ghost\"\n        (click)=\"onClearSelections()\"\n        [disabled]=\"disabled\"\n      >\n        {{ 'interface.clearAll' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        carbonToolbarActions\n        cdsButton=\"danger\"\n        (click)=\"onRemoveSelectedSelections()\"\n        [disabled]=\"disabled\"\n        data-test-id=\"object-management-select-remove-button\"\n      >\n        {{ 'interface.delete' | translate }}\n      </button>\n    </valtimo-carbon-list>\n  </div>\n</div>\n", styles: [".object-management-select{display:flex;flex-direction:column;gap:0}.filter-accordion ::ng-deep .cds--accordion{background-color:var(--cds-layer)}.filter-accordion ::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle);border-block-start:1px solid var(--cds-border-subtle);border-block-end:none}.filter-accordion ::ng-deep .cds--accordion__heading{height:48px}.filter-accordion ::ng-deep .cds--accordion__content{padding:0 16px}::ng-deep .cds--table-toolbar{background-color:var(--cds-layer);border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}@media(max-width:480px){.search-fields-container{grid-template-columns:1fr}}.search-field-container--full{grid-column:span 2}@media(max-width:480px){.search-field-container--full{grid-column:span 1}}.date-range-fields{display:grid;grid-template-columns:5fr 2fr 5fr;align-items:center;gap:8px}@media(max-width:480px){.date-range-fields{grid-template-columns:1fr}}.to-text{text-align:center}.buttons-container{width:100%;display:flex;justify-content:flex-end;gap:16px;padding-bottom:16px}.selections-section{margin-top:1rem}\n"] }]
         }], ctorParameters: () => [{ type: ObjectManagementSelectService }, { type: i2$3.IconService }], propDecorators: { disabled: [{
                 type: Input
             }], label: [{