@valtimo/components 13.39.0 → 13.41.0

package/fesm2022/valtimo-components.mjs

@@ -32,7 +32,7 @@ import * as i4 from 'ngx-logger';
 import * as i6$1 from '@valtimo/security';
 import * as i11 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
+import { autoUpdate, computePosition, offset, flip, shift, hide } from '@floating-ui/dom';
 import * as i3 from '@angular/cdk/layout';
 import { LayoutModule } from '@angular/cdk/layout';
 import { OverflowMenuVertical16, ArrowDown16, ArrowUp16, SettingsView16, Draggable16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, Save16, WarningAltFilled16, WarningFilled16, TrashCan16, DocumentRequirements16, UserFollow16, Group16, User16 } from '@carbon/icons';
@@ -51,11 +51,11 @@ import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$6 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay } from '@angular/cdk/overlay';
 import Currency from '@tadashi/currency';
+import flatpickr from 'flatpickr';
+import { Dutch } from 'flatpickr/dist/l10n/nl';
 import * as i2$4 from 'ngx-spinner';
 import { NgxSpinnerModule } from 'ngx-spinner';
 import Search16 from '@carbon/icons/es/search/16';
-import flatpickr from 'flatpickr';
-import { Dutch } from 'flatpickr/dist/l10n/nl';
 import { German } from 'flatpickr/dist/l10n/de';
 import { english } from 'flatpickr/dist/l10n/default';
 import * as i2$5 from 'ng-multiselect-dropdown';
@@ -4567,6 +4567,9 @@ class OverflowMenuComponent {
         const menu = this._portalledPane || this.menuContainer?.nativeElement;
         if (!reference || !menu)
             return;
+        // Keep the pane invisible until the first position has been computed, so
+        // it never flashes at an unpositioned location.
+        menu.style.visibility = 'hidden';
         this._cleanupAutoUpdate = autoUpdate(reference, menu, () => {
             computePosition(reference, menu, {
                 // The pane is rendered with `position: fixed`, so positions must be
@@ -4578,11 +4581,16 @@ class OverflowMenuComponent {
                     offset({ mainAxis: this.offsetY, crossAxis: this.offsetX }),
                     flip(),
                     shift({ padding: 8 }),
+                    hide(),
                 ],
-            }).then(({ x, y }) => {
+            }).then(({ x, y, middlewareData }) => {
                 Object.assign(menu.style, {
                     left: `${x}px`,
                     top: `${y}px`,
+                    // When the trigger is scrolled out of its clipping container (e.g. a
+                    // horizontally scrolled table), hide the pane instead of leaving it
+                    // floating detached over unrelated content.
+                    visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
                 });
             });
         });
@@ -5254,6 +5262,14 @@ class LeftSidebarComponent {
         this._breakpointSubscription?.unsubscribe();
         this._menuCollapsedByDefaultSubscription?.unsubscribe();
     }
+    /**
+     * Keeps menu item views stable across menu reloads, so that the expanded state of
+     * `cds-sidenav-menu` (which is internal to the Carbon component) survives a reload.
+     * Keyed on the link, since titles are not guaranteed to be unique.
+     */
+    trackByMenuItem(_index, menuItem) {
+        return Array.isArray(menuItem.link) ? menuItem.link.join('/') : menuItem.title;
+    }
     navigateToRoute(route, event) {
         event.preventDefault();
         this.overflowMenuSequence$.next('');
@@ -5330,11 +5346,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; trackBy: trackByMenuItem\">\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\n              *ngFor=\"let childMenuItem of menuItem.children; trackBy: trackByMenuItem\"\n            >\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; trackBy: trackByMenuItem\">\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\n              *ngFor=\"let childMenuItem of menuItem.children; trackBy: trackByMenuItem\"\n            >\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']
@@ -6219,6 +6235,10 @@ class ViewContentService {
         if (!definition.viewType) {
             definition.viewType = typeof value;
         }
+        // converters render '-' for an empty value, which a definition can opt out of
+        if (!value && definition.emptyPlaceholder !== undefined) {
+            return definition.emptyPlaceholder;
+        }
         if (definition.viewType.includes(separator)) {
             // Get the substring of the string after the separator (:) and assign it to a new key
             definition.format = definition.viewType.slice(this.getSeparatorIndex(definition, separator) + 1);
@@ -6339,12 +6359,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const OPEN_ATTRIBUTE_NAME = 'ng-reflect-open';
 class ValtimoCdsModalDirective {
     constructor(document, elementRef, renderer) {
         this.document = document;
         this.elementRef = elementRef;
         this.renderer = renderer;
+        // Not `readonly`: Angular assigns inputs, and template type checking reports every binding to
+        // a read-only property as TS2540 "Cannot assign to ... because it is a read-only property".
         this.minContentHeight = 0;
+        // Content elements that already received the min-height style. The MutationObserver below
+        // observes attribute changes in the same subtree that setStyle writes to, so styling must be
+        // skipped for elements that were already styled — re-applying the style queues a new mutation
+        // record, whose callback re-applies the style again, locking the page in an endless
+        // MutationObserver microtask loop (the browser tab freezes).
+        this._styledContentElements = new WeakSet();
         /**
          * Closes the modal on ESC via the same path as the close (X) button.
          *
@@ -6398,13 +6427,20 @@ class ValtimoCdsModalDirective {
         this._mutationObserver = new MutationObserver((mutations) => {
             this.handleMutations(mutations);
         });
+        // Only the open/close attribute is of interest. Observing *every* attribute would include the
+        // min-height this directive writes on the modal content below: that write mutates the observed
+        // subtree, so it would schedule another callback, which writes again — a microtask loop that
+        // starves the main thread and freezes the page. (It stayed dormant while the value was a plain
+        // `<n>px`, which the CSSOM stores verbatim, so re-writing it was a no-op that recorded no
+        // mutation. A value the browser re-serializes, such as `min(...)`, never compares equal to what
+        // was set, so every write does record one.)
         this._mutationObserver.observe(this.elementRef.nativeElement, {
             attributes: true,
+            attributeFilter: [OPEN_ATTRIBUTE_NAME],
             childList: true,
             subtree: true,
-            characterData: true,
         });
-        const open = this.elementRef.nativeElement.getAttribute('ng-reflect-open');
+        const open = this.elementRef.nativeElement.getAttribute(OPEN_ATTRIBUTE_NAME);
         if (open === 'true') {
             this.applyDocumentOverflowHidden();
         }
@@ -6420,7 +6456,6 @@ class ValtimoCdsModalDirective {
         this.document.removeEventListener('keydown', this._onDocumentKeydown, true);
     }
     handleMutations(mutations) {
-        const OPEN_ATTRIBUTE_NAME = 'ng-reflect-open';
         for (const mutation of mutations) {
             if (mutation.type === 'attributes' && mutation.attributeName === OPEN_ATTRIBUTE_NAME) {
                 const open = this.elementRef.nativeElement.getAttribute(OPEN_ATTRIBUTE_NAME);
@@ -6448,6 +6483,10 @@ class ValtimoCdsModalDirective {
             return;
         const contentElements = this.elementRef.nativeElement.querySelectorAll('.cds--modal-content');
         for (const element of contentElements) {
+            if (this._styledContentElements.has(element)) {
+                continue;
+            }
+            this._styledContentElements.add(element);
             this.renderer.setStyle(element, 'min-height', `min(${this.minContentHeight}px, calc(90dvh - 13rem))`, RendererStyleFlags2.Important);
         }
     }
@@ -7361,11 +7400,11 @@ class CarbonListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonListComponent, deps: [{ token: EllipsisPipe }, { token: CarbonListFilterPipe }, { token: i2$3.IconService }, { token: i4.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }, { token: KeyStateService }, { token: CarbonListDragAndDropService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", skeletonRowCount: "skeletonRowCount", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", initialSearchValue: "initialSearchValue", searchDebounceMs: "searchDebounceMs", invalidSearchFields: "invalidSearchFields", searchFields: "searchFields", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled", expandedRowTemplate: "expandedRowTemplate", expandedRowKey: "expandedRowKey", trackByKey: "trackByKey" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, descendants: true }], ngImport: i0, template: "<!--\n  ~ /*\n  ~  * Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~  *\n  ~  * Licensed under EUPL, Version 1.2 (the \"License\");\n  ~  * you may not use this file except in compliance with the License.\n  ~  * You may obtain a copy of the License at\n  ~  *\n  ~  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~  *\n  ~  * Unless required by applicable law or agreed to in writing, software\n  ~  * distributed under the License is distributed on an \"AS IS\" basis,\n  ~  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~  * See the License for the specific language governing permissions and\n  ~  * limitations under the License.\n  ~  */\n  -->\n<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n        <cds-table-toolbar-search\n          #toolbarSearch\n          [expandable]=\"false\"\n          [formControl]=\"searchFormControl\"\n          [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n          data-test-id=\"carbonListSearch\"\n          (input)=\"updateAutocomplete()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          (clear)=\"onSearchClear()\"\n          (open)=\"onSearchOpenChange($event)\"\n        ></cds-table-toolbar-search>\n        <div\n          class=\"valtimo-search-overlay\"\n          aria-hidden=\"true\"\n        ><span\n            *ngFor=\"let segment of getSearchSegments()\"\n            [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n          >{{ segment.text }}</span></div>\n        <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n          <li\n            *ngFor=\"let field of filteredSuggestions; let i = index\"\n            [class.selected]=\"i === selectedSuggestionIndex\"\n            (mousedown)=\"selectSuggestion(field)\"\n          >{{ field.title || field.key }}</li>\n        </ul>\n      </div>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\" data-test-id=\"carbonListNoResults\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n    data-test-id=\"carbonListPagination\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <v-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    placement=\"bottom-end\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </v-overflow-menu-option>\n    }\n  </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showExpandAllToggle", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionItemDisabledPipe, name: "actionItemDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", skeletonRowCount: "skeletonRowCount", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", initialSearchValue: "initialSearchValue", searchDebounceMs: "searchDebounceMs", invalidSearchFields: "invalidSearchFields", searchFields: "searchFields", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled", expandedRowTemplate: "expandedRowTemplate", expandedRowKey: "expandedRowKey", trackByKey: "trackByKey" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, descendants: true }], ngImport: i0, template: "<!--\n  ~ /*\n  ~  * Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~  *\n  ~  * Licensed under EUPL, Version 1.2 (the \"License\");\n  ~  * you may not use this file except in compliance with the License.\n  ~  * You may obtain a copy of the License at\n  ~  *\n  ~  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~  *\n  ~  * Unless required by applicable law or agreed to in writing, software\n  ~  * distributed under the License is distributed on an \"AS IS\" basis,\n  ~  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~  * See the License for the specific language governing permissions and\n  ~  * limitations under the License.\n  ~  */\n  -->\n<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n        <cds-table-toolbar-search\n          #toolbarSearch\n          [expandable]=\"false\"\n          [formControl]=\"searchFormControl\"\n          [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n          data-test-id=\"carbonListSearch\"\n          (input)=\"updateAutocomplete()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          (clear)=\"onSearchClear()\"\n          (open)=\"onSearchOpenChange($event)\"\n        ></cds-table-toolbar-search>\n        <div\n          class=\"valtimo-search-overlay\"\n          aria-hidden=\"true\"\n        ><span\n            *ngFor=\"let segment of getSearchSegments()\"\n            [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n          >{{ segment.text }}</span></div>\n        <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n          <li\n            *ngFor=\"let field of filteredSuggestions; let i = index\"\n            [class.selected]=\"i === selectedSuggestionIndex\"\n            (mousedown)=\"selectSuggestion(field)\"\n          >{{ field.title || field.key }}</li>\n        </ul>\n      </div>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\" data-test-id=\"carbonListNoResults\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n    data-test-id=\"carbonListPagination\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <v-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    [portalToBody]=\"true\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    placement=\"bottom-end\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </v-overflow-menu-option>\n    }\n  </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showExpandAllToggle", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { 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  ~ /*\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"] }]
+            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    [portalToBody]=\"true\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    placement=\"bottom-end\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </v-overflow-menu-option>\n    }\n  </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], 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']
@@ -9540,7 +9579,14 @@ class FormioComponent {
             };
             return deepmerge(defaultOptions, overrideOptions);
         }), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), tap$1(options => this.logger.debug('Form.IO options used', options)));
-        this.tokenSetInLocalStorage$ = this.localStorageService.tokenSetInLocalStorage$;
+        this._storeTokenInLocalStorage = !this.configService.getFeatureToggle('disableFormioTokenInLocalStorage');
+        this._inMemoryTokenSet$ = new BehaviorSubject(false);
+        // The form is only rendered once a token is available. In the default (legacy) mode the token
+        // is persisted to localStorage, so we wait for that; when disableFormioTokenInLocalStorage is
+        // enabled the token is kept in memory only, so we wait for the in-memory token instead.
+        this.tokenReady$ = this._storeTokenInLocalStorage
+            ? this.localStorageService.tokenSetInLocalStorage$
+            : this._inMemoryTokenSet$.asObservable();
         this._subscriptions = new Subscription();
         this._tokenTimerSubscription = new Subscription();
         this.setOverrideOptions(this.configService.config);
@@ -9614,10 +9660,19 @@ class FormioComponent {
         });
     }
     setToken(token) {
-        Formio.setUser(jwtDecode(token));
-        Formio.setToken(token);
+        if (this._storeTokenInLocalStorage) {
+            Formio.setUser(jwtDecode(token));
+            Formio.setToken(token);
+            this.localStorageService.setTokenInLocalStorage(token);
+        }
+        else {
+            // Feature toggle 'disableFormioTokenInLocalStorage': keep the token in memory only, since
+            // Formio.setToken/setUser would persist it (and the decoded user) to localStorage where any
+            // script could read it. Our APIs authenticate via the Keycloak token on the HTTP interceptor.
+            Formio.token = token;
+            this._inMemoryTokenSet$.next(true);
+        }
         this.setTimerForTokenRefresh(token);
-        this.localStorageService.setTokenInLocalStorage(token);
         this.logger.debug('New token set for form.io.');
     }
     setTimerForTokenRefresh(token) {
@@ -9662,11 +9717,11 @@ class FormioComponent {
         this._overrideOptions$.next(config.formioOptions);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormioComponent, deps: [{ token: i6$1.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$3.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i1$2.ConfigService }, { token: FormIoTagsService }, { token: i0.Injector }, { token: FormioTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", errors: "errors", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-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  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FormioComponent, selector: "formio" }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", errors: "errors", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-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  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenReady: tokenReady$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenReady\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FormioComponent, selector: "formio" }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], 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  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n" }]
+            args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], 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  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenReady: tokenReady$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenReady\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i6$1.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$3.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i1$2.ConfigService }, { type: FormIoTagsService }, { type: i0.Injector }, { type: FormioTranslationService }], propDecorators: { options: [{
                 type: Input
             }], submission: [{
@@ -11499,6 +11554,68 @@ function applyDataGridPatch() {
     Components.setComponent('datagrid', PatchedDataGrid);
 }
 
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Formio only set the language on the first load.
+ * This script can change the language of all active datepickers.
+ * For all active datepickers, the new language is set and the component instance is reloaded.
+ * The new language is immediately visible without a window reload.
+ */
+const DEFAULT_LOCALE_KEY = 'en';
+const SUPPORTED_LOCALES = new Proxy({
+    en: flatpickr.l10ns.default,
+    nl: Dutch,
+}, {
+    get: (target, prop) => target[prop] ?? target[DEFAULT_LOCALE_KEY],
+});
+let activeLocale = DEFAULT_LOCALE_KEY;
+const activeInstances = new Set();
+function getLocaleConfig(locale) {
+    return SUPPORTED_LOCALES[locale];
+}
+function setFormioFlatpickrLocale(langKey) {
+    activeLocale = langKey in SUPPORTED_LOCALES ? langKey : DEFAULT_LOCALE_KEY;
+    const localeConfig = getLocaleConfig(activeLocale);
+    activeInstances.forEach(instance => instance.set('locale', localeConfig));
+}
+function registerFormioFlatpickr() {
+    Object.entries(SUPPORTED_LOCALES).forEach(([key, config]) => {
+        flatpickr.l10ns[key] = config;
+    });
+    const formioFlatpickr = function (element, config) {
+        const result = flatpickr(element, { ...config, locale: activeLocale });
+        const instances = Array.isArray(result) ? result : [result];
+        instances.forEach(instance => {
+            if (!instance) {
+                return;
+            }
+            activeInstances.add(instance);
+            instance.config.onDestroy.push(() => activeInstances.delete(instance));
+        });
+        return result;
+    };
+    Object.assign(formioFlatpickr, flatpickr);
+    window.flatpickr = formioFlatpickr;
+    Formio.libraries['flatpickr-nl'] = {
+        loaded: true,
+        ready: Promise.resolve(Dutch),
+    };
+}
+
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
@@ -11517,7 +11634,13 @@ function applyDataGridPatch() {
 // Apply FormIO patches before any form renders
 applyDataGridPatch();
 class FormIoModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    constructor(translateService) {
+        this.translateService = translateService;
+        registerFormioFlatpickr();
+        setFormioFlatpickrLocale((this.translateService.currentLang));
+        this.translateService.onLangChange.subscribe(({ lang }) => setFormioFlatpickrLocale(lang));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormIoModule, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: FormIoModule, declarations: [FormioComponent,
             FormioBuilderComponent,
             FormIoUploaderComponent,
@@ -11601,7 +11724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         },
                     ],
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i1.TranslateService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.