@valtimo/components 13.39.0 → 13.40.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -32,7 +32,7 @@ import * as i4 from 'ngx-logger';
32
32
  import * as i6$1 from '@valtimo/security';
33
33
  import * as i11 from '@ng-bootstrap/ng-bootstrap';
34
34
  import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
35
- import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
35
+ import { autoUpdate, computePosition, offset, flip, shift, hide } from '@floating-ui/dom';
36
36
  import * as i3 from '@angular/cdk/layout';
37
37
  import { LayoutModule } from '@angular/cdk/layout';
38
38
  import { OverflowMenuVertical16, ArrowDown16, ArrowUp16, SettingsView16, Draggable16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, Save16, WarningAltFilled16, WarningFilled16, TrashCan16, DocumentRequirements16, UserFollow16, Group16, User16 } from '@carbon/icons';
@@ -4567,6 +4567,9 @@ class OverflowMenuComponent {
4567
4567
  const menu = this._portalledPane || this.menuContainer?.nativeElement;
4568
4568
  if (!reference || !menu)
4569
4569
  return;
4570
+ // Keep the pane invisible until the first position has been computed, so
4571
+ // it never flashes at an unpositioned location.
4572
+ menu.style.visibility = 'hidden';
4570
4573
  this._cleanupAutoUpdate = autoUpdate(reference, menu, () => {
4571
4574
  computePosition(reference, menu, {
4572
4575
  // The pane is rendered with `position: fixed`, so positions must be
@@ -4578,11 +4581,16 @@ class OverflowMenuComponent {
4578
4581
  offset({ mainAxis: this.offsetY, crossAxis: this.offsetX }),
4579
4582
  flip(),
4580
4583
  shift({ padding: 8 }),
4584
+ hide(),
4581
4585
  ],
4582
- }).then(({ x, y }) => {
4586
+ }).then(({ x, y, middlewareData }) => {
4583
4587
  Object.assign(menu.style, {
4584
4588
  left: `${x}px`,
4585
4589
  top: `${y}px`,
4590
+ // When the trigger is scrolled out of its clipping container (e.g. a
4591
+ // horizontally scrolled table), hide the pane instead of leaving it
4592
+ // floating detached over unrelated content.
4593
+ visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
4586
4594
  });
4587
4595
  });
4588
4596
  });
@@ -5254,6 +5262,14 @@ class LeftSidebarComponent {
5254
5262
  this._breakpointSubscription?.unsubscribe();
5255
5263
  this._menuCollapsedByDefaultSubscription?.unsubscribe();
5256
5264
  }
5265
+ /**
5266
+ * Keeps menu item views stable across menu reloads, so that the expanded state of
5267
+ * `cds-sidenav-menu` (which is internal to the Carbon component) survives a reload.
5268
+ * Keyed on the link, since titles are not guaranteed to be unique.
5269
+ */
5270
+ trackByMenuItem(_index, menuItem) {
5271
+ return Array.isArray(menuItem.link) ? menuItem.link.join('/') : menuItem.title;
5272
+ }
5257
5273
  navigateToRoute(route, event) {
5258
5274
  event.preventDefault();
5259
5275
  this.overflowMenuSequence$.next('');
@@ -5330,11 +5346,11 @@ class LeftSidebarComponent {
5330
5346
  });
5331
5347
  }
5332
5348
  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 }); }
5333
- 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" }] }); }
5349
+ 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" }] }); }
5334
5350
  }
5335
5351
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LeftSidebarComponent, decorators: [{
5336
5352
  type: Component,
5337
- 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"] }]
5353
+ 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"] }]
5338
5354
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MenuService }, { type: ShellService }, { type: i3.BreakpointObserver }, { type: i1$3.Router }, { type: i1$2.ConfigService }], propDecorators: { toggleButtonRef: [{
5339
5355
  type: ViewChild,
5340
5356
  args: ['toggleButton']
@@ -6339,12 +6355,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
6339
6355
  * See the License for the specific language governing permissions and
6340
6356
  * limitations under the License.
6341
6357
  */
6358
+ const OPEN_ATTRIBUTE_NAME = 'ng-reflect-open';
6342
6359
  class ValtimoCdsModalDirective {
6343
6360
  constructor(document, elementRef, renderer) {
6344
6361
  this.document = document;
6345
6362
  this.elementRef = elementRef;
6346
6363
  this.renderer = renderer;
6364
+ // Not `readonly`: Angular assigns inputs, and template type checking reports every binding to
6365
+ // a read-only property as TS2540 "Cannot assign to ... because it is a read-only property".
6347
6366
  this.minContentHeight = 0;
6367
+ // Content elements that already received the min-height style. The MutationObserver below
6368
+ // observes attribute changes in the same subtree that setStyle writes to, so styling must be
6369
+ // skipped for elements that were already styled — re-applying the style queues a new mutation
6370
+ // record, whose callback re-applies the style again, locking the page in an endless
6371
+ // MutationObserver microtask loop (the browser tab freezes).
6372
+ this._styledContentElements = new WeakSet();
6348
6373
  /**
6349
6374
  * Closes the modal on ESC via the same path as the close (X) button.
6350
6375
  *
@@ -6398,13 +6423,20 @@ class ValtimoCdsModalDirective {
6398
6423
  this._mutationObserver = new MutationObserver((mutations) => {
6399
6424
  this.handleMutations(mutations);
6400
6425
  });
6426
+ // Only the open/close attribute is of interest. Observing *every* attribute would include the
6427
+ // min-height this directive writes on the modal content below: that write mutates the observed
6428
+ // subtree, so it would schedule another callback, which writes again — a microtask loop that
6429
+ // starves the main thread and freezes the page. (It stayed dormant while the value was a plain
6430
+ // `<n>px`, which the CSSOM stores verbatim, so re-writing it was a no-op that recorded no
6431
+ // mutation. A value the browser re-serializes, such as `min(...)`, never compares equal to what
6432
+ // was set, so every write does record one.)
6401
6433
  this._mutationObserver.observe(this.elementRef.nativeElement, {
6402
6434
  attributes: true,
6435
+ attributeFilter: [OPEN_ATTRIBUTE_NAME],
6403
6436
  childList: true,
6404
6437
  subtree: true,
6405
- characterData: true,
6406
6438
  });
6407
- const open = this.elementRef.nativeElement.getAttribute('ng-reflect-open');
6439
+ const open = this.elementRef.nativeElement.getAttribute(OPEN_ATTRIBUTE_NAME);
6408
6440
  if (open === 'true') {
6409
6441
  this.applyDocumentOverflowHidden();
6410
6442
  }
@@ -6420,7 +6452,6 @@ class ValtimoCdsModalDirective {
6420
6452
  this.document.removeEventListener('keydown', this._onDocumentKeydown, true);
6421
6453
  }
6422
6454
  handleMutations(mutations) {
6423
- const OPEN_ATTRIBUTE_NAME = 'ng-reflect-open';
6424
6455
  for (const mutation of mutations) {
6425
6456
  if (mutation.type === 'attributes' && mutation.attributeName === OPEN_ATTRIBUTE_NAME) {
6426
6457
  const open = this.elementRef.nativeElement.getAttribute(OPEN_ATTRIBUTE_NAME);
@@ -6448,6 +6479,10 @@ class ValtimoCdsModalDirective {
6448
6479
  return;
6449
6480
  const contentElements = this.elementRef.nativeElement.querySelectorAll('.cds--modal-content');
6450
6481
  for (const element of contentElements) {
6482
+ if (this._styledContentElements.has(element)) {
6483
+ continue;
6484
+ }
6485
+ this._styledContentElements.add(element);
6451
6486
  this.renderer.setStyle(element, 'min-height', `min(${this.minContentHeight}px, calc(90dvh - 13rem))`, RendererStyleFlags2.Important);
6452
6487
  }
6453
6488
  }
@@ -7361,11 +7396,11 @@ class CarbonListComponent {
7361
7396
  }
7362
7397
  }
7363
7398
  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 }); }
7364
- 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 }); }
7399
+ 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 }); }
7365
7400
  }
7366
7401
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonListComponent, decorators: [{
7367
7402
  type: Component,
7368
- 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"] }]
7403
+ 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"] }]
7369
7404
  }], 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: [{
7370
7405
  type: ViewChild,
7371
7406
  args: ['actionsMenuTemplate']
@@ -9540,7 +9575,14 @@ class FormioComponent {
9540
9575
  };
9541
9576
  return deepmerge(defaultOptions, overrideOptions);
9542
9577
  }), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), tap$1(options => this.logger.debug('Form.IO options used', options)));
9543
- this.tokenSetInLocalStorage$ = this.localStorageService.tokenSetInLocalStorage$;
9578
+ this._storeTokenInLocalStorage = !this.configService.getFeatureToggle('disableFormioTokenInLocalStorage');
9579
+ this._inMemoryTokenSet$ = new BehaviorSubject(false);
9580
+ // The form is only rendered once a token is available. In the default (legacy) mode the token
9581
+ // is persisted to localStorage, so we wait for that; when disableFormioTokenInLocalStorage is
9582
+ // enabled the token is kept in memory only, so we wait for the in-memory token instead.
9583
+ this.tokenReady$ = this._storeTokenInLocalStorage
9584
+ ? this.localStorageService.tokenSetInLocalStorage$
9585
+ : this._inMemoryTokenSet$.asObservable();
9544
9586
  this._subscriptions = new Subscription();
9545
9587
  this._tokenTimerSubscription = new Subscription();
9546
9588
  this.setOverrideOptions(this.configService.config);
@@ -9614,10 +9656,19 @@ class FormioComponent {
9614
9656
  });
9615
9657
  }
9616
9658
  setToken(token) {
9617
- Formio.setUser(jwtDecode(token));
9618
- Formio.setToken(token);
9659
+ if (this._storeTokenInLocalStorage) {
9660
+ Formio.setUser(jwtDecode(token));
9661
+ Formio.setToken(token);
9662
+ this.localStorageService.setTokenInLocalStorage(token);
9663
+ }
9664
+ else {
9665
+ // Feature toggle 'disableFormioTokenInLocalStorage': keep the token in memory only, since
9666
+ // Formio.setToken/setUser would persist it (and the decoded user) to localStorage where any
9667
+ // script could read it. Our APIs authenticate via the Keycloak token on the HTTP interceptor.
9668
+ Formio.token = token;
9669
+ this._inMemoryTokenSet$.next(true);
9670
+ }
9619
9671
  this.setTimerForTokenRefresh(token);
9620
- this.localStorageService.setTokenInLocalStorage(token);
9621
9672
  this.logger.debug('New token set for form.io.');
9622
9673
  }
9623
9674
  setTimerForTokenRefresh(token) {
@@ -9662,11 +9713,11 @@ class FormioComponent {
9662
9713
  this._overrideOptions$.next(config.formioOptions);
9663
9714
  }
9664
9715
  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 }); }
9665
- 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" }] }); }
9716
+ 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" }] }); }
9666
9717
  }
9667
9718
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormioComponent, decorators: [{
9668
9719
  type: Component,
9669
- 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" }]
9720
+ 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" }]
9670
9721
  }], 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: [{
9671
9722
  type: Input
9672
9723
  }], submission: [{