@valtimo/components 13.45.1 → 13.47.0

package/fesm2022/valtimo-components.mjs

@@ -4,7 +4,7 @@ import { combineLatest, map, BehaviorSubject, switchMap, catchError, of, shareRe
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader, TranslateService, TranslatePipe } from '@ngx-translate/core';
 import * as i1$2 from '@valtimo/shared';
-import { BaseApiService, VERSIONS, HttpLoaderFactory, getContextObservable, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams } from '@valtimo/shared';
+import { BaseApiService, IncludeFunction, ROLE_USER, ROLE_ADMIN, ROLE_DEVELOPER, VERSIONS, HttpLoaderFactory, getContextObservable, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams, sanitizeKey, toKebabCase } from '@valtimo/shared';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { filter, map as map$1, take, tap as tap$1, debounceTime, distinctUntilChanged, takeUntil as takeUntil$1, startWith as startWith$1, switchMap as switchMap$1, delay } from 'rxjs/operators';
@@ -33,9 +33,11 @@ import * as i6$1 from '@valtimo/security';
 import * as i11 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { autoUpdate, computePosition, offset, flip, shift, hide } from '@floating-ui/dom';
-import * as i3 from '@angular/cdk/layout';
+import * as i3 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { Draggable16, OverflowMenuVertical16, ArrowDown16, ArrowUp16, SettingsView16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, Save16, WarningAltFilled16, WarningFilled16, TrashCan16, DocumentRequirements16, UserFollow16, Group16, User16 } from '@carbon/icons';
+import * as i3$1 from '@angular/cdk/layout';
 import { LayoutModule } from '@angular/cdk/layout';
-import { OverflowMenuVertical16, ArrowDown16, ArrowUp16, SettingsView16, Draggable16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, Save16, WarningAltFilled16, WarningFilled16, TrashCan16, DocumentRequirements16, UserFollow16, Group16, User16 } from '@carbon/icons';
 import localeNl from '@angular/common/locales/nl';
 import moment$1 from 'moment/moment';
 import NavigatedViewer from 'bpmn-js/lib/NavigatedViewer';
@@ -44,7 +46,7 @@ import * as i1$5 from '@valtimo/resource';
 import { S3Resource, ResourceModule, UploadProviderService } from '@valtimo/resource';
 import { jwtDecode } from 'jwt-decode';
 import Dropzone from 'dropzone';
-import * as i3$1 from '@valtimo/document';
+import * as i3$2 from '@valtimo/document';
 import { DocumentModule, InternalCaseStatusUtils, CaseTagsUtils } from '@valtimo/document';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -866,6 +868,7 @@ const POPULAR_MDI_ICONS = [
     'mdi-folder-account',
     'mdi-folder-multiple',
     'mdi-folder-star',
+    'mdi-archive',
     'mdi-file',
     'mdi-file-document',
     'mdi-file-cog',
@@ -913,7 +916,9 @@ const POPULAR_MDI_ICONS = [
     'mdi-lightbulb',
     'mdi-check',
     'mdi-check-circle',
+    'mdi-check-all',
     'mdi-close',
+    'mdi-dot-circle',
     'mdi-lock',
     'mdi-lock-open',
     'mdi-lock-check',
@@ -931,6 +936,7 @@ const POPULAR_MDI_ICONS = [
     'mdi-view-dashboard',
     'mdi-view-list',
     'mdi-view-grid',
+    'mdi-layers',
     'mdi-table',
     'mdi-chart-bar',
     'mdi-chart-line',
@@ -955,6 +961,8 @@ const POPULAR_MDI_ICONS = [
     'mdi-lan',
     'mdi-api',
     'mdi-application-braces',
+    'mdi-xml',
+    'mdi-code',
     'mdi-cube',
     'mdi-view-module',
     'mdi-puzzle',
@@ -1417,6 +1425,12 @@ class AdminSettingsService extends BaseApiService {
             }
         });
     }
+    getMenuConfiguration() {
+        return this.httpClient.get(this.getApiUrl('/v1/admin-settings/menu-configuration'));
+    }
+    updateMenuConfiguration(dto) {
+        return this.httpClient.put(this.getApiUrl('/management/v1/admin-settings/menu-configuration'), dto);
+    }
     getComputedAccentColor(cssVar) {
         return getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
     }
@@ -4650,8 +4664,8 @@ class OverflowMenuComponent {
                 // The pane is rendered with `position: fixed`, so positions must be
                 // computed against the viewport. Without this the menu is offset by the
                 // trigger's page position and lands far from lower rows (unclickable).
-                strategy: 'fixed',
                 placement: this.placement,
+                strategy: 'fixed',
                 middleware: [
                     offset({ mainAxis: this.offsetY, crossAxis: this.offsetX }),
                     flip(),
@@ -4872,7 +4886,7 @@ function menuInitializer(injector, logger) {
 }
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4886,27 +4900,55 @@ function menuInitializer(injector, logger) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class VersionService {
-    constructor(http, configService) {
-        this.http = http;
-        this.configService = configService;
-        this.valtimoEndpointUri = configService.config.valtimoApi.endpointUri;
-    }
-    getVersion() {
-        return this.http.get(`${this.valtimoEndpointUri}v1/valtimo/version`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: VersionService, deps: [{ token: i1$1.HttpClient }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: VersionService, providedIn: 'root' }); }
+/**
+ * Maps a **legacy** numeric `includeFunction` ordinal (configs saved before the switch to string
+ * names) to the current enum member. The mapping follows the order the members held their ordinals
+ * while configs were still persisted numerically: `OpenSearchEnabled` was only inserted (at
+ * ordinal 1, shifting `ZgwFeaturesEnabled` from 1 to 2) just before the switch to names, so a
+ * persisted `1` almost always predates that insertion and means `ZgwFeaturesEnabled`; a persisted
+ * `2` can only come from a post-insertion save and also means `ZgwFeaturesEnabled`.
+ */
+const LEGACY_INCLUDE_FUNCTION_BY_ORDINAL = {
+    0: IncludeFunction.ObjectManagementEnabled,
+    1: IncludeFunction.ZgwFeaturesEnabled,
+    2: IncludeFunction.ZgwFeaturesEnabled,
+};
+/**
+ * Parses a persisted `includeFunction` value — the enum member name (current format) or a legacy
+ * numeric ordinal — into the runtime `IncludeFunction`. Unknown values yield `undefined`.
+ */
+function parseIncludeFunction(value) {
+    if (value === null || value === undefined || value === '')
+        return undefined;
+    if (typeof value === 'number')
+        return LEGACY_INCLUDE_FUNCTION_BY_ORDINAL[value];
+    const parsed = IncludeFunction[value];
+    return typeof parsed === 'number' ? parsed : undefined;
+}
+/**
+ * Serialises a **persisted** include function value (enum name or legacy numeric ordinal) into the
+ * enum-name form. Numbers are interpreted as legacy ordinals (see
+ * [LEGACY_INCLUDE_FUNCTION_BY_ORDINAL]) — for a *runtime* enum value use [includeFunctionToName].
+ */
+function serializeIncludeFunction(value) {
+    const parsed = parseIncludeFunction(value);
+    return parsed === undefined ? undefined : includeFunctionToName(parsed);
+}
+/** The persisted (name) form of a **runtime** `IncludeFunction` value (current enum ordinals, no legacy mapping). */
+function includeFunctionToName(value) {
+    const name = IncludeFunction[value];
+    return typeof name === 'string' ? name : undefined;
+}
+/** Current schema version written by this client. */
+const MENU_CONFIGURATION_VERSION = 1;
+/** Whether a fetched DTO actually holds a usable saved structure (non-empty `items`). */
+function hasSavedMenuConfiguration(dto) {
+    const configuration = dto?.configuration;
+    return Array.isArray(configuration?.items) && configuration.items.length > 0;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: VersionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1$2.ConfigService }] });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4920,123 +4962,902 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class RightSidebarComponent {
-    onPageClick(targetElement) {
-        combineLatest([this.shellService.panelExpanded$, this.shellService.mouseOnTopBar$])
-            .pipe(take$1(1))
-            .subscribe(([panelExpanded, mouseOnTopBar]) => {
-            const clickedInside = this.elementRef.nativeElement.contains(targetElement) || mouseOnTopBar;
-            if (!clickedInside && panelExpanded) {
-                this.shellService.setPanelExpanded(false);
+/** The text class `environment.ts` uses for the non-link group labels inside Admin. */
+const SECTION_HEADER_TEXT_CLASS = 'text-dark font-weight-bold c-default';
+/**
+ * The curated catalog, seeded from `environment.ts`'s menu. The single source of truth for both the
+ * builder's "Available items" panel and the runtime resolver (config JSON + catalog → `MenuItem[]`).
+ */
+const MENU_ITEM_CATALOG = [
+    // Main menu items (top level)
+    {
+        itemId: 'dashboard',
+        defaultTitleKey: 'Dashboard',
+        defaultIcon: 'icon mdi mdi-view-dashboard',
+        link: '/',
+        roles: [ROLE_USER],
+        placement: 'top',
+        category: 'main',
+    },
+    {
+        itemId: 'cases',
+        defaultTitleKey: 'Cases',
+        defaultIcon: 'icon mdi mdi-layers',
+        roles: [ROLE_USER],
+        placement: 'top',
+        category: 'main',
+    },
+    {
+        itemId: 'objects',
+        defaultTitleKey: 'Objects',
+        defaultIcon: 'icon mdi mdi-archive',
+        roles: [ROLE_ADMIN],
+        includeFunction: IncludeFunction.ObjectManagementEnabled,
+        placement: 'top',
+        category: 'main',
+    },
+    {
+        itemId: 'tasks',
+        defaultTitleKey: 'Tasks',
+        defaultIcon: 'icon mdi mdi-check-all',
+        link: '/tasks',
+        roles: [ROLE_USER],
+        placement: 'top',
+        category: 'main',
+    },
+    {
+        itemId: 'analysis',
+        defaultTitleKey: 'Analysis',
+        defaultIcon: 'icon mdi mdi-chart-bar',
+        link: '/analysis',
+        roles: [ROLE_USER],
+        placement: 'top',
+        category: 'main',
+    },
+    {
+        itemId: 'teams',
+        defaultTitleKey: 'teams.title',
+        defaultIcon: 'icon mdi mdi-account-group',
+        link: '/teams',
+        roles: [ROLE_USER],
+        placement: 'top',
+        category: 'main',
+    },
+    {
+        itemId: 'admin',
+        defaultTitleKey: 'Admin',
+        defaultIcon: 'icon mdi mdi-tune',
+        roles: [ROLE_ADMIN],
+        placement: 'top',
+        category: 'main',
+        required: true,
+    },
+    {
+        itemId: 'development',
+        defaultTitleKey: 'Development',
+        defaultIcon: 'icon mdi mdi-xml',
+        roles: [ROLE_DEVELOPER, ROLE_ADMIN],
+        placement: 'top',
+        category: 'main',
+    },
+    // Admin pages (inside the Admin group)
+    {
+        itemId: 'adminSettings',
+        defaultTitleKey: 'adminSettings.title',
+        link: '/admin-settings',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+        required: true,
+    },
+    {
+        itemId: 'buildingBlockManagement',
+        defaultTitleKey: 'buildingBlockManagement.title',
+        link: '/building-block-management',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'caseManagement',
+        defaultTitleKey: 'Cases',
+        link: '/case-management',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'plugins',
+        defaultTitleKey: 'Plugins',
+        link: '/plugins',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'pluginHosts',
+        defaultTitleKey: 'Plugin hosts',
+        link: '/plugin-hosts',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'pluginApps',
+        defaultTitleKey: 'Apps',
+        link: '/plugin-apps',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'dashboardManagement',
+        defaultTitleKey: 'Dashboard',
+        link: '/dashboard-management',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'accessControl',
+        defaultTitleKey: 'Access Control',
+        link: '/access-control',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'translationManagement',
+        defaultTitleKey: 'Translations',
+        link: '/translation-management',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'choiceFields',
+        defaultTitleKey: 'Choice fields',
+        link: '/choice-fields',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'objectManagement',
+        defaultTitleKey: 'Objects',
+        link: '/object-management',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'formManagement',
+        defaultTitleKey: 'Forms',
+        link: '/form-management',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'notifications',
+        defaultTitleKey: 'Notifications',
+        link: '/notifications-api/notifications/failed',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'processes',
+        defaultTitleKey: 'Processes',
+        link: '/processes',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'decisionTables',
+        defaultTitleKey: 'Decision tables',
+        link: '/decision-tables',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'logging',
+        defaultTitleKey: 'Logs',
+        link: '/logging',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'opensearch',
+        defaultTitleKey: 'adminSettings.opensearch.title',
+        link: '/opensearch',
+        roles: [ROLE_ADMIN],
+        includeFunction: IncludeFunction.OpenSearchEnabled,
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'caseMigration',
+        defaultTitleKey: 'Case migration (beta)',
+        link: '/case-migration',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'processMigration',
+        defaultTitleKey: 'Process migration',
+        link: '/process-migration',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'taskManagement',
+        defaultTitleKey: 'Tasks (legacy)',
+        link: '/task-management',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    {
+        itemId: 'notificationTest',
+        defaultTitleKey: 'Send notification',
+        link: '/notification-test',
+        roles: [ROLE_ADMIN],
+        placement: 'admin',
+        category: 'admin',
+    },
+    // Development pages (inside the Development group)
+    {
+        itemId: 'swagger',
+        defaultTitleKey: 'Swagger',
+        defaultIcon: 'icon mdi mdi-dot-circle',
+        link: '/swagger',
+        roles: [ROLE_DEVELOPER, ROLE_ADMIN],
+        placement: 'development',
+        category: 'development',
+    },
+];
+/** Normalises a route for comparison: lower-cased, single leading slash, no trailing slash. */
+function normaliseMenuLink(link) {
+    if (!link)
+        return '';
+    const normalised = ('/' + link.toLowerCase().replace(/^\/+/, '')).replace(/\/+$/, '');
+    return normalised === '' ? '/' : normalised;
+}
+/**
+ * Joins a `MenuItem.link` array into the single route string the config stores. Multi-segment
+ * links (e.g. `['/plugin-pages', 'id', 'key']`) are joined with `/`; surplus slashes on segment
+ * boundaries are stripped so a segment that already starts with `/` never produces `//`. A single
+ * segment (`['/tasks']`, `['/']`) passes through unchanged.
+ */
+function menuLinkToString(link) {
+    if (!Array.isArray(link) || link.length === 0)
+        return '';
+    if (link.length === 1)
+        return link[0] ?? '';
+    const [first, ...rest] = link;
+    return [
+        (first ?? '').replace(/\/+$/, ''),
+        ...rest
+            .map(segment => (segment ?? '').replace(/^\/+|\/+$/g, ''))
+            .filter(segment => segment !== ''),
+    ].join('/');
+}
+const _catalogById = new Map(MENU_ITEM_CATALOG.map(entry => [entry.itemId, entry]));
+function getMenuCatalogEntry(itemId) {
+    return _catalogById.get(itemId);
+}
+/** Finds the catalog entry whose route matches the given link (linked entries only). */
+function findMenuCatalogEntryByLink(link) {
+    const normalised = normaliseMenuLink(menuLinkToString(link));
+    if (!normalised)
+        return undefined;
+    return MENU_ITEM_CATALOG.find(entry => entry.link && normaliseMenuLink(entry.link) === normalised);
+}
+/**
+ * Finds the catalog **group** entry (a top-level item with no link: Cases, Objects, Admin,
+ * Development) that matches a runtime menu item's title. Used to seed no-link group items without
+ * colliding with same-titled linked Admin pages.
+ */
+function findMenuCatalogGroupEntryByTitle(title) {
+    return MENU_ITEM_CATALOG.find(entry => !entry.link && entry.placement === 'top' && entry.defaultTitleKey === title);
+}
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/** Route prefix a `plugin-page` node resolves to (handled by the plugin-page route in @valtimo/plugin). */
+const PLUGIN_PAGE_ROUTE = '/plugin-pages';
+/**
+ * Resolves a persisted [MenuConfiguration] into the `MenuItem[]` the existing `MenuService`
+ * consumes. Catalog nodes fill `link/roles/iconClass/includeFunction/title` from the registry
+ * (overrides win); `section-header` → a non-link group label; `custom-link`/`plugin-page` → their
+ * stored values. A preserved `roles` set always wins over the catalog default, so migrating a custom
+ * item never broadens its access. Required items (Admin, Settings) are forced present so a saved
+ * config can never lock an admin out of this page. Unknown catalog ids are skipped with a warning.
+ *
+ * The optional [logger] is threaded from the caller because this is a plain function (it runs in an
+ * `APP_INITIALIZER` before a component tree exists); when absent, warnings fall back to the console.
+ */
+function resolveMenuConfiguration(configuration, logger) {
+    const pairs = (configuration?.items ?? [])
+        .map(source => ({ source, resolved: resolveMenuConfigurationItem(source, logger) }))
+        .filter((pair) => pair.resolved !== null);
+    return ensureRequiredItems(pairs);
+}
+function resolveMenuConfigurationItem(item, logger) {
+    switch (item.kind) {
+        case 'catalog':
+            return resolveCatalogItem(item, logger);
+        case 'group': {
+            const children = (item.children ?? [])
+                .map(child => resolveMenuConfigurationItem(child, logger))
+                .filter((child) => child !== null);
+            return buildMenuItem({
+                title: item.title,
+                iconClass: item.icon,
+                roles: item.roles,
+                children,
+            });
+        }
+        case 'section-header': {
+            const header = { title: item.title, textClass: SECTION_HEADER_TEXT_CLASS };
+            if (item.roles)
+                header.roles = item.roles;
+            const includeFunction = parseIncludeFunction(item.includeFunction);
+            if (includeFunction !== undefined)
+                header.includeFunction = includeFunction;
+            return header;
+        }
+        case 'custom-link':
+            return buildMenuItem({
+                title: item.title,
+                link: stringToLink(item.link),
+                iconClass: item.icon,
+                roles: item.roles,
+            });
+        case 'plugin-page':
+            // Without a configuration id the entry can never route anywhere — skip it instead of
+            // producing a broken menu entry.
+            if (!item.configurationId) {
+                warn(logger, `Plugin-page menu item "${item.title}" has no configurationId — skipping`);
+                return null;
             }
-        });
-    }
-    constructor(translateService, userProviderService, formBuilder, versionService, shellService, elementRef, configService, userSettingsService, pageHeaderService, cdsThemeService) {
-        this.translateService = translateService;
-        this.userProviderService = userProviderService;
-        this.formBuilder = formBuilder;
-        this.versionService = versionService;
-        this.shellService = shellService;
-        this.elementRef = elementRef;
-        this.configService = configService;
-        this.userSettingsService = userSettingsService;
-        this.pageHeaderService = pageHeaderService;
-        this.cdsThemeService = cdsThemeService;
-        this.testIds = RIGHT_SIDEBAR_TEST_IDS;
-        this.panelExpanded$ = this.shellService.panelExpanded$;
-        this._selectedLanguage$ = new BehaviorSubject('');
-        this._languageOptions$ = new BehaviorSubject([]);
-        this.languageListItems$ = combineLatest([
-            this._languageOptions$,
-            this._selectedLanguage$,
-            this.translateService.stream('key'),
-        ]).pipe(map$1(([languageOptions, selectedLanguage]) => languageOptions.map(languageKey => ({
-            content: this.translateService.instant('settings.language.options.' + languageKey),
-            key: languageKey,
-            selected: selectedLanguage === languageKey,
-        }))));
-        this.backendVersion$ = this.versionService.getVersion();
-        this.userSubject$ = this.userProviderService.getUserSubject();
-        this.updatingUserSettings$ = new BehaviorSubject(true);
-        this.collapsibleWidescreenMenu$ = this.shellService.collapsibleWidescreenMenu$;
-        this.compactMode$ = this.pageHeaderService.compactMode$;
-        this.showUserNameInTopBar$ = this.pageHeaderService.showUserNameInTopBar$;
-        this._preferredTheme$ = this.cdsThemeService.preferredTheme$;
-        this.showValtimoVersions = true;
-        this.themeOptions$ = combineLatest([
-            this._preferredTheme$,
-            this.translateService.stream('key'),
-        ]).pipe(map$1(([preferredTheme]) => [
-            {
-                content: this.translateService.instant('settings.interface.themes.light'),
-                key: SelectableCarbonTheme.G10,
-                selected: preferredTheme === SelectableCarbonTheme.G10,
-            },
-            {
-                content: this.translateService.instant('settings.interface.themes.dark'),
-                key: SelectableCarbonTheme.G90,
-                selected: preferredTheme === SelectableCarbonTheme.G90,
-            },
-            {
-                content: this.translateService.instant('settings.interface.themes.system'),
-                key: SelectableCarbonTheme.SYSTEM,
-                selected: preferredTheme === SelectableCarbonTheme.SYSTEM,
-            },
-        ]));
-        this.allowUserThemeSwitching$ = this.configService.getFeatureToggleObservable('allowUserThemeSwitching', true);
-        this.enableCompactModeToggle$ = this.configService.getFeatureToggleObservable('enableCompactModeToggle', true);
-        this.enableShowUserNameToggle$ = this.configService.getFeatureToggleObservable('enableUserNameInTopBarToggle');
-        this.showPlantATreeButton$ = this.configService.getFeatureToggleObservable('showPlantATreeButton');
-        this.hideValtimoVersionsForNonAdmins$ = this.configService.getFeatureToggleObservable('hideValtimoVersionsForNonAdmins');
-        this._isAdmin$ = this.userProviderService
-            .getUserSubject()
-            .pipe(map$1(userIdentity => userIdentity?.roles.includes('ROLE_ADMIN')));
-        this._subscriptions = new Subscription();
-    }
-    ngOnInit() {
-        this.initNonToggleSettings();
-        this.initFrontendVersion();
-        this.openShowVersionsSubscription();
-        this.setLanguage();
-        this.getUserSettings();
+            // TODO: an entry whose external-plugin page target no longer exists (configuration deleted,
+            // or the plugin no longer exports the page bundle) still resolves to a dead /plugin-pages
+            // route. Detecting that requires the async external-plugin page catalog, which this
+            // synchronous resolver cannot access; consider filtering such entries in the caller once the
+            // page list is available.
+            return buildMenuItem({
+                title: item.title,
+                link: item.bundleKey
+                    ? [PLUGIN_PAGE_ROUTE, item.configurationId, item.bundleKey]
+                    : [PLUGIN_PAGE_ROUTE, item.configurationId],
+                iconClass: item.icon,
+                roles: item.roles,
+            });
+        default:
+            return null;
     }
-    ngOnDestroy() {
-        this._subscriptions.unsubscribe();
+}
+function resolveCatalogItem(item, logger) {
+    const entry = getMenuCatalogEntry(item.itemId);
+    if (!entry) {
+        warn(logger, `Unknown menu catalog itemId "${item.itemId}" — skipping`);
+        return null;
     }
-    updateUserLanguage(langKey, saveSettings = true) {
-        const langKeyToUse = langKey?.item?.key
-            ? langKey?.item.key
-            : langKey;
-        this.translateService
-            .use(langKeyToUse)
-            .pipe(take$1(1))
-            .subscribe(() => {
-            localStorage.setItem('langKey', langKeyToUse);
-            this._selectedLanguage$.next(langKeyToUse);
-            if (saveSettings) {
-                this.saveUserSettings();
-            }
+    const children = item.children
+        ?.map(child => resolveMenuConfigurationItem(child, logger))
+        .filter((child) => child !== null);
+    return buildMenuItem({
+        title: item.title ?? entry.defaultTitleKey,
+        link: stringToLink(entry.link),
+        iconClass: item.icon ?? entry.defaultIcon,
+        roles: item.roles ?? entry.roles,
+        // A required item must never carry an include function — it could hide the item at runtime and
+        // lock the admin out of this page, defeating the whole point of marking it required.
+        includeFunction: entry.required
+            ? undefined
+            : (parseIncludeFunction(item.includeFunction) ?? entry.includeFunction),
+        children,
+    });
+}
+function resolveCatalogItemById(itemId, logger) {
+    return resolveCatalogItem({ kind: 'catalog', itemId }, logger);
+}
+/**
+ * Forces the required items present so a saved config can never lock an admin out of this page:
+ * the Admin section must exist, and the Settings link must be reachable **somewhere** in the menu.
+ * Because Settings is now freely placeable (top level or any section), its presence is checked
+ * across the whole tree — so moving it out of Admin never causes a duplicate to be injected. A
+ * no-op when the saved config already holds both, so a round-tripped current menu is unchanged.
+ *
+ * The Admin group is matched by its stable catalog `itemId` (via the source config node), never by
+ * title — the editor allows renaming, so a renamed Admin group must not trigger a duplicate. The
+ * title match only remains as a fallback for the (title-keyed) seed path.
+ */
+function ensureRequiredItems(pairs) {
+    const result = pairs.map(pair => pair.resolved);
+    const adminEntry = getMenuCatalogEntry('admin');
+    const settingsEntry = getMenuCatalogEntry('adminSettings');
+    if (!adminEntry || !settingsEntry)
+        return result;
+    let adminItem = 
+    // Primary: the persisted node's stable id — robust against title renames.
+    pairs.find(pair => pair.source.kind === 'catalog' && pair.source.itemId === 'admin')
+        ?.resolved ??
+        // Fallback for configs whose Admin section was captured without the catalog id (e.g. seeded as
+        // a plain group): recognise it by the catalog's default title on a link-less group.
+        result.find(item => item.title === adminEntry.defaultTitleKey && !item.link);
+    if (!adminItem) {
+        adminItem = buildMenuItem({
+            title: adminEntry.defaultTitleKey,
+            iconClass: adminEntry.defaultIcon,
+            roles: adminEntry.roles,
+            children: [],
         });
+        result.push(adminItem);
     }
-    setCollapsibleWidescreenMenu(collapsible, saveSettings = true) {
-        this.shellService.setCollapsibleWidescreenMenu(collapsible);
-        if (saveSettings) {
-            this.saveUserSettings();
-        }
+    const settingsLink = normaliseMenuLink(settingsEntry.link);
+    if (!menuContainsLink(result, settingsLink)) {
+        const settingsItem = resolveCatalogItemById('adminSettings');
+        if (settingsItem)
+            adminItem.children = [settingsItem, ...(adminItem.children ?? [])];
     }
-    setCompactMode(compactMode, saveSettings = true) {
-        this.pageHeaderService.setCompactMode(compactMode);
-        if (saveSettings) {
-            this.saveUserSettings();
-        }
+    return result;
+}
+/** Whether the resolved menu contains the given (normalised) link at any depth. */
+function menuContainsLink(items, normalisedLink) {
+    return items.some(item => {
+        if (normaliseMenuLink(menuLinkToString(item.link)) === normalisedLink)
+            return true;
+        return Array.isArray(item.children) && menuContainsLink(item.children, normalisedLink);
+    });
+}
+/** Builds a `MenuItem` with only the keys that are actually set, so resolved items match the static menu shape. */
+function buildMenuItem(parts) {
+    const item = { title: parts.title };
+    const roles = parts.roles ?? [ROLE_USER];
+    item.roles = roles;
+    if (parts.link)
+        item.link = parts.link;
+    if (parts.iconClass)
+        item.iconClass = parts.iconClass;
+    if (parts.includeFunction !== undefined)
+        item.includeFunction = parts.includeFunction;
+    if (parts.children !== undefined)
+        item.children = parts.children;
+    return item;
+}
+function stringToLink(link) {
+    return link ? [link] : undefined;
+}
+/** Warns via the injected NGXLogger when the caller supplied one, falling back to the console otherwise. */
+function warn(logger, message) {
+    if (logger) {
+        logger.warn(message);
     }
-    setShowUserName(showUserName, saveSettings = true) {
-        this.pageHeaderService.setShowUserNameInTopBar(showUserName);
-        if (saveSettings) {
-            this.saveUserSettings();
-        }
+    else {
+        console.warn(message);
     }
-    setPreferredTheme(selectedTheme, saveSettings = true) {
+}
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Maps the **live** runtime menu (`config.menu.menuItems` — whatever an installation actually has,
+ * downstream custom links included) into the editable persisted structure. Used both at runtime and
+ * in the builder when the DB has no saved config, guaranteeing nothing in the current menu is lost
+ * on first open. Round-trip safe with the resolver: `resolve(buildConfigFromRuntimeMenu(menu)) ≈ menu`.
+ *
+ * - A known route or group → a `catalog` node (title/icon recorded only when they differ from the
+ *   catalog default; `roles`/`includeFunction` preserved).
+ * - A no-link, non-group label → a `section-header`.
+ * - An unmatched link → a `custom-link` (title/link/icon/roles preserved).
+ */
+function buildMenuConfigurationFromRuntimeMenu(menuItems) {
+    return {
+        version: MENU_CONFIGURATION_VERSION,
+        items: (menuItems ?? []).map(item => seedMenuItem(item)),
+    };
+}
+function seedMenuItem(item) {
+    const hasLink = Array.isArray(item.link) && item.link.length > 0;
+    if (!hasLink) {
+        const groupEntry = findMenuCatalogGroupEntryByTitle(item.title);
+        if (groupEntry)
+            return seedCatalogNode(item, groupEntry);
+        // A no-link item that carries its own children is a custom section (group); one without
+        // children is a plain section-header label.
+        if (Array.isArray(item.children))
+            return seedGroupNode(item);
+        const header = { kind: 'section-header', title: item.title };
+        if (item.roles)
+            header.roles = item.roles;
+        const headerIncludeFunction = persistedIncludeFunctionOf(item);
+        if (headerIncludeFunction !== undefined)
+            header.includeFunction = headerIncludeFunction;
+        return header;
+    }
+    const linkEntry = findMenuCatalogEntryByLink(item.link);
+    if (linkEntry)
+        return seedCatalogNode(item, linkEntry);
+    const customLink = {
+        kind: 'custom-link',
+        title: item.title,
+        link: menuLinkToString(item.link),
+    };
+    if (item.iconClass)
+        customLink.icon = item.iconClass;
+    if (item.roles)
+        customLink.roles = item.roles;
+    return customLink;
+}
+function seedGroupNode(item) {
+    const node = { kind: 'group', title: item.title };
+    if (item.iconClass)
+        node.icon = item.iconClass;
+    if (item.roles)
+        node.roles = item.roles;
+    node.children = (item.children ?? []).map(child => seedMenuItem(child));
+    return node;
+}
+function seedCatalogNode(item, entry) {
+    const node = { kind: 'catalog', itemId: entry.itemId };
+    // Record title/icon only when they deviate from the catalog default, keeping the stored tree lean.
+    if (item.title && item.title !== entry.defaultTitleKey)
+        node.title = item.title;
+    if (item.iconClass && item.iconClass !== entry.defaultIcon)
+        node.icon = item.iconClass;
+    const includeFunction = persistedIncludeFunctionOf(item);
+    if (includeFunction !== undefined)
+        node.includeFunction = includeFunction;
+    if (item.roles)
+        node.roles = item.roles;
+    if (Array.isArray(item.children))
+        node.children = item.children.map(child => seedMenuItem(child));
+    return node;
+}
+/**
+ * The runtime item's include function in its persisted form: the enum member **name**, so the
+ * stored config survives enum reorders. The persisted config carries a single include function
+ * (the builder edits one); a runtime item may declare several, so keep the first when an array is
+ * supplied.
+ */
+function persistedIncludeFunctionOf(item) {
+    const includeFunction = Array.isArray(item.includeFunction)
+        ? item.includeFunction[0]
+        : item.includeFunction;
+    return includeFunction === undefined ? undefined : includeFunctionToName(includeFunction);
+}
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Reusable, presentational connected sortable list built on the (well-tested) Angular CDK
+ * `@angular/cdk/drag-drop`. It owns only the drag mechanics, Carbon-styled handle and
+ * placeholder/preview; the consumer renders each row via [itemTemplate] and mutates its own data in
+ * response to [droppedEvent] (re-emitted verbatim from CDK). Compose several instances — connected
+ * by [connectedTo] or a `cdkDropListGroup` wrapper — for nested or cross-list drag-and-drop.
+ *
+ * Set [sortingDisabled] on a "palette" list whose items should be copied (not moved) into another
+ * list: leave its own array untouched in the [droppedEvent] handler and clone the dragged item
+ * instead.
+ */
+class DragDropListComponent {
+    constructor(iconService) {
+        this.iconService = iconService;
+        this.items = [];
+        this.connectedTo = [];
+        this.disabled = false;
+        this.sortingDisabled = false;
+        this.showHandle = true;
+        /**
+         * When true the entire row is a drag surface (not just the handle), while interactive controls
+         * inside the row — `button`, `a`, `input`, `select`, `textarea`, `[role="button"]` or anything
+         * marked `[data-no-drag]` — never initiate a drag, so they stay clickable. The handle icon is then
+         * shown only as a visual grab cue.
+         */
+        this.wholeRowDraggable = false;
+        this.orientation = 'vertical';
+        /**
+         * Aria label for the drag handle. Accepts either an already-translated string or a translation
+         * key — the template runs the value through the `translate` pipe, which passes unknown keys
+         * (i.e. already-translated strings) through unchanged.
+         */
+        this.handleAriaLabel = 'interface.dragToReorder';
+        /**
+         * Optional content rendered *below* the styled row (e.g. a nested sub-list). It sits inside the
+         * draggable element so it moves with the item, but outside the row surface — so the row's
+         * background, hover and drag handle cover only the header, not the whole subtree.
+         */
+        this.expansionTemplate = null;
+        this.emptyTemplate = null;
+        this.enterPredicate = () => true;
+        this.dragDisabled = () => false;
+        this.droppedEvent = new EventEmitter();
+        /** Emitted when a drag begins / ends anywhere in this list, so a host can reflect a global "dragging" state. */
+        this.dragStartedEvent = new EventEmitter();
+        this.dragEndedEvent = new EventEmitter();
+        this.iconService.registerAll([Draggable16]);
+    }
+    trackByIndex(index) {
+        return index;
+    }
+    /**
+     * In whole-row mode the row element is the CDK drag surface. CDK listens for `mousedown`/
+     * `touchstart` on that element in the bubble phase, so stopping propagation here — only when the
+     * pointer went down on an interactive control — prevents a drag from starting on that control
+     * while leaving its click intact. A pointer-down anywhere else bubbles through and drags the row.
+     */
+    onContentPointerDown(event) {
+        if (!this.wholeRowDraggable)
+            return;
+        const target = event.target;
+        if (target?.closest('button, a, input, select, textarea, [role="button"], [data-no-drag]')) {
+            event.stopPropagation();
+        }
+    }
+    /**
+     * The expansion (nested sub-list) is never a drag surface for this row: swallow its pointer-downs so
+     * a drag can only start from the header row. Nested rows have their own drag surface and handle
+     * their own pointer-downs before the event reaches here.
+     */
+    onExpansionPointerDown(event) {
+        if (this.wholeRowDraggable)
+            event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DragDropListComponent, deps: [{ token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DragDropListComponent, isStandalone: true, selector: "valtimo-drag-drop-list", inputs: { items: "items", listId: "listId", connectedTo: "connectedTo", disabled: "disabled", sortingDisabled: "sortingDisabled", showHandle: "showHandle", wholeRowDraggable: "wholeRowDraggable", orientation: "orientation", handleAriaLabel: "handleAriaLabel", itemTemplate: "itemTemplate", expansionTemplate: "expansionTemplate", emptyTemplate: "emptyTemplate", enterPredicate: "enterPredicate", dragDisabled: "dragDisabled" }, outputs: { droppedEvent: "droppedEvent", dragStartedEvent: "dragStartedEvent", dragEndedEvent: "dragEndedEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  cdkDropList\n  [cdkDropListConnectedTo]=\"connectedTo\"\n  [cdkDropListData]=\"items\"\n  [cdkDropListDisabled]=\"disabled\"\n  [cdkDropListEnterPredicate]=\"enterPredicate\"\n  [cdkDropListOrientation]=\"orientation\"\n  [cdkDropListSortingDisabled]=\"sortingDisabled\"\n  [id]=\"listId\"\n  (cdkDropListDropped)=\"droppedEvent.emit($event)\"\n  class=\"valtimo-drag-drop-list\"\n  [class.valtimo-drag-drop-list--empty]=\"!items?.length\"\n>\n  @for (item of items; track trackByIndex($index)) {\n    <div\n      cdkDrag\n      [cdkDragData]=\"item\"\n      [cdkDragDisabled]=\"dragDisabled(item, $index)\"\n      class=\"valtimo-drag-drop-list__item\"\n      (cdkDragStarted)=\"dragStartedEvent.emit()\"\n      (cdkDragEnded)=\"dragEndedEvent.emit()\"\n    >\n      <div class=\"valtimo-drag-drop-list__placeholder\" *cdkDragPlaceholder></div>\n\n      <!-- The styled, draggable header row: background, hover and handle cover only this. -->\n      <div\n        class=\"valtimo-drag-drop-list__row\"\n        [class.valtimo-drag-drop-list__row--grabbable]=\"\n          wholeRowDraggable && !dragDisabled(item, $index)\n        \"\n      >\n        @if (showHandle) {\n          @if (wholeRowDraggable) {\n            <span\n              class=\"valtimo-drag-drop-list__handle valtimo-drag-drop-list__handle--static\"\n              aria-hidden=\"true\"\n            >\n              <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n            </span>\n          } @else if (!dragDisabled(item, $index)) {\n            <button\n              cdkDragHandle\n              [attr.aria-label]=\"handleAriaLabel | translate\"\n              class=\"valtimo-drag-drop-list__handle\"\n              type=\"button\"\n            >\n              <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n            </button>\n          }\n        }\n\n        <div\n          class=\"valtimo-drag-drop-list__content\"\n          (mousedown)=\"onContentPointerDown($event)\"\n          (touchstart)=\"onContentPointerDown($event)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: $index}\"\n          ></ng-container>\n        </div>\n      </div>\n\n      @if (expansionTemplate) {\n        <div\n          class=\"valtimo-drag-drop-list__expansion\"\n          (mousedown)=\"onExpansionPointerDown($event)\"\n          (touchstart)=\"onExpansionPointerDown($event)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"expansionTemplate; context: {$implicit: item, index: $index}\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n\n  @if (!items?.length && emptyTemplate) {\n    <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n  }\n</div>\n", styles: [".valtimo-drag-drop-list{display:flex;flex-direction:column;gap:var(--cds-spacing-03);min-height:var(--cds-spacing-09)}.valtimo-drag-drop-list--empty{border:1px dashed var(--cds-border-subtle);border-radius:var(--cds-spacing-02)}.valtimo-drag-drop-list.cdk-drop-list-receiving{outline:1px dashed var(--cds-border-subtle);outline-offset:calc(-1 * var(--cds-spacing-01));border-radius:var(--cds-spacing-02)}.valtimo-drag-drop-list.cdk-drop-list-dragging{outline:1px solid var(--cds-border-interactive);outline-offset:calc(-1 * var(--cds-spacing-01));border-radius:var(--cds-spacing-02)}.valtimo-drag-drop-list__item{display:flex;flex-direction:column}.valtimo-drag-drop-list__item.cdk-drag-disabled .valtimo-drag-drop-list__row{color:var(--cds-text-disabled);background-color:var(--cds-layer);cursor:default}.valtimo-drag-drop-list__row{display:flex;align-items:center;gap:var(--cds-spacing-03);padding:var(--cds-spacing-03) var(--cds-spacing-04);background-color:var(--cds-layer-02);color:var(--cds-text-primary)}.valtimo-drag-drop-list__row:hover{background-color:var(--cds-layer-hover-02)}.valtimo-drag-drop-list__row--grabbable{cursor:grab}.valtimo-drag-drop-list__row--grabbable:active{cursor:grabbing}.valtimo-drag-drop-list__handle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--cds-icon-secondary);cursor:move}.valtimo-drag-drop-list__handle:hover{color:var(--cds-icon-primary)}.valtimo-drag-drop-list__handle:focus-visible{outline:2px solid var(--cds-focus);outline-offset:1px}.valtimo-drag-drop-list__handle--static{cursor:inherit;pointer-events:none}.valtimo-drag-drop-list__content{flex:1 1 auto;min-width:0}.valtimo-drag-drop-list__placeholder{box-sizing:border-box;min-height:var(--cds-spacing-07);border:1px dashed var(--cds-border-interactive);background-color:var(--cds-layer-accent-01);border-radius:var(--cds-spacing-02)}.cdk-drag-preview{box-sizing:border-box;box-shadow:var(--cds-spacing-01) var(--cds-spacing-02) var(--cds-spacing-03) #0003}.cdk-drag-preview .valtimo-drag-drop-list__expansion{display:none}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .2s cubic-bezier(0,0,.2,1)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DragDropListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-drag-drop-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, DragDropModule, IconModule, TranslateModule], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  cdkDropList\n  [cdkDropListConnectedTo]=\"connectedTo\"\n  [cdkDropListData]=\"items\"\n  [cdkDropListDisabled]=\"disabled\"\n  [cdkDropListEnterPredicate]=\"enterPredicate\"\n  [cdkDropListOrientation]=\"orientation\"\n  [cdkDropListSortingDisabled]=\"sortingDisabled\"\n  [id]=\"listId\"\n  (cdkDropListDropped)=\"droppedEvent.emit($event)\"\n  class=\"valtimo-drag-drop-list\"\n  [class.valtimo-drag-drop-list--empty]=\"!items?.length\"\n>\n  @for (item of items; track trackByIndex($index)) {\n    <div\n      cdkDrag\n      [cdkDragData]=\"item\"\n      [cdkDragDisabled]=\"dragDisabled(item, $index)\"\n      class=\"valtimo-drag-drop-list__item\"\n      (cdkDragStarted)=\"dragStartedEvent.emit()\"\n      (cdkDragEnded)=\"dragEndedEvent.emit()\"\n    >\n      <div class=\"valtimo-drag-drop-list__placeholder\" *cdkDragPlaceholder></div>\n\n      <!-- The styled, draggable header row: background, hover and handle cover only this. -->\n      <div\n        class=\"valtimo-drag-drop-list__row\"\n        [class.valtimo-drag-drop-list__row--grabbable]=\"\n          wholeRowDraggable && !dragDisabled(item, $index)\n        \"\n      >\n        @if (showHandle) {\n          @if (wholeRowDraggable) {\n            <span\n              class=\"valtimo-drag-drop-list__handle valtimo-drag-drop-list__handle--static\"\n              aria-hidden=\"true\"\n            >\n              <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n            </span>\n          } @else if (!dragDisabled(item, $index)) {\n            <button\n              cdkDragHandle\n              [attr.aria-label]=\"handleAriaLabel | translate\"\n              class=\"valtimo-drag-drop-list__handle\"\n              type=\"button\"\n            >\n              <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n            </button>\n          }\n        }\n\n        <div\n          class=\"valtimo-drag-drop-list__content\"\n          (mousedown)=\"onContentPointerDown($event)\"\n          (touchstart)=\"onContentPointerDown($event)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: $index}\"\n          ></ng-container>\n        </div>\n      </div>\n\n      @if (expansionTemplate) {\n        <div\n          class=\"valtimo-drag-drop-list__expansion\"\n          (mousedown)=\"onExpansionPointerDown($event)\"\n          (touchstart)=\"onExpansionPointerDown($event)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"expansionTemplate; context: {$implicit: item, index: $index}\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n\n  @if (!items?.length && emptyTemplate) {\n    <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n  }\n</div>\n", styles: [".valtimo-drag-drop-list{display:flex;flex-direction:column;gap:var(--cds-spacing-03);min-height:var(--cds-spacing-09)}.valtimo-drag-drop-list--empty{border:1px dashed var(--cds-border-subtle);border-radius:var(--cds-spacing-02)}.valtimo-drag-drop-list.cdk-drop-list-receiving{outline:1px dashed var(--cds-border-subtle);outline-offset:calc(-1 * var(--cds-spacing-01));border-radius:var(--cds-spacing-02)}.valtimo-drag-drop-list.cdk-drop-list-dragging{outline:1px solid var(--cds-border-interactive);outline-offset:calc(-1 * var(--cds-spacing-01));border-radius:var(--cds-spacing-02)}.valtimo-drag-drop-list__item{display:flex;flex-direction:column}.valtimo-drag-drop-list__item.cdk-drag-disabled .valtimo-drag-drop-list__row{color:var(--cds-text-disabled);background-color:var(--cds-layer);cursor:default}.valtimo-drag-drop-list__row{display:flex;align-items:center;gap:var(--cds-spacing-03);padding:var(--cds-spacing-03) var(--cds-spacing-04);background-color:var(--cds-layer-02);color:var(--cds-text-primary)}.valtimo-drag-drop-list__row:hover{background-color:var(--cds-layer-hover-02)}.valtimo-drag-drop-list__row--grabbable{cursor:grab}.valtimo-drag-drop-list__row--grabbable:active{cursor:grabbing}.valtimo-drag-drop-list__handle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--cds-icon-secondary);cursor:move}.valtimo-drag-drop-list__handle:hover{color:var(--cds-icon-primary)}.valtimo-drag-drop-list__handle:focus-visible{outline:2px solid var(--cds-focus);outline-offset:1px}.valtimo-drag-drop-list__handle--static{cursor:inherit;pointer-events:none}.valtimo-drag-drop-list__content{flex:1 1 auto;min-width:0}.valtimo-drag-drop-list__placeholder{box-sizing:border-box;min-height:var(--cds-spacing-07);border:1px dashed var(--cds-border-interactive);background-color:var(--cds-layer-accent-01);border-radius:var(--cds-spacing-02)}.cdk-drag-preview{box-sizing:border-box;box-shadow:var(--cds-spacing-01) var(--cds-spacing-02) var(--cds-spacing-03) #0003}.cdk-drag-preview .valtimo-drag-drop-list__expansion{display:none}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .2s cubic-bezier(0,0,.2,1)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i2$3.IconService }], propDecorators: { items: [{
+                type: Input
+            }], listId: [{
+                type: Input
+            }], connectedTo: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], sortingDisabled: [{
+                type: Input
+            }], showHandle: [{
+                type: Input
+            }], wholeRowDraggable: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], handleAriaLabel: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], expansionTemplate: [{
+                type: Input
+            }], emptyTemplate: [{
+                type: Input
+            }], enterPredicate: [{
+                type: Input
+            }], dragDisabled: [{
+                type: Input
+            }], droppedEvent: [{
+                type: Output
+            }], dragStartedEvent: [{
+                type: Output
+            }], dragEndedEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class VersionService {
+    constructor(http, configService) {
+        this.http = http;
+        this.configService = configService;
+        this.valtimoEndpointUri = configService.config.valtimoApi.endpointUri;
+    }
+    getVersion() {
+        return this.http.get(`${this.valtimoEndpointUri}v1/valtimo/version`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: VersionService, deps: [{ token: i1$1.HttpClient }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: VersionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: VersionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1$2.ConfigService }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class RightSidebarComponent {
+    onPageClick(targetElement) {
+        combineLatest([this.shellService.panelExpanded$, this.shellService.mouseOnTopBar$])
+            .pipe(take$1(1))
+            .subscribe(([panelExpanded, mouseOnTopBar]) => {
+            const clickedInside = this.elementRef.nativeElement.contains(targetElement) || mouseOnTopBar;
+            if (!clickedInside && panelExpanded) {
+                this.shellService.setPanelExpanded(false);
+            }
+        });
+    }
+    constructor(translateService, userProviderService, formBuilder, versionService, shellService, elementRef, configService, userSettingsService, pageHeaderService, cdsThemeService) {
+        this.translateService = translateService;
+        this.userProviderService = userProviderService;
+        this.formBuilder = formBuilder;
+        this.versionService = versionService;
+        this.shellService = shellService;
+        this.elementRef = elementRef;
+        this.configService = configService;
+        this.userSettingsService = userSettingsService;
+        this.pageHeaderService = pageHeaderService;
+        this.cdsThemeService = cdsThemeService;
+        this.testIds = RIGHT_SIDEBAR_TEST_IDS;
+        this.panelExpanded$ = this.shellService.panelExpanded$;
+        this._selectedLanguage$ = new BehaviorSubject('');
+        this._languageOptions$ = new BehaviorSubject([]);
+        this.languageListItems$ = combineLatest([
+            this._languageOptions$,
+            this._selectedLanguage$,
+            this.translateService.stream('key'),
+        ]).pipe(map$1(([languageOptions, selectedLanguage]) => languageOptions.map(languageKey => ({
+            content: this.translateService.instant('settings.language.options.' + languageKey),
+            key: languageKey,
+            selected: selectedLanguage === languageKey,
+        }))));
+        this.backendVersion$ = this.versionService.getVersion();
+        this.userSubject$ = this.userProviderService.getUserSubject();
+        this.updatingUserSettings$ = new BehaviorSubject(true);
+        this.collapsibleWidescreenMenu$ = this.shellService.collapsibleWidescreenMenu$;
+        this.compactMode$ = this.pageHeaderService.compactMode$;
+        this.showUserNameInTopBar$ = this.pageHeaderService.showUserNameInTopBar$;
+        this._preferredTheme$ = this.cdsThemeService.preferredTheme$;
+        this.showValtimoVersions = true;
+        this.themeOptions$ = combineLatest([
+            this._preferredTheme$,
+            this.translateService.stream('key'),
+        ]).pipe(map$1(([preferredTheme]) => [
+            {
+                content: this.translateService.instant('settings.interface.themes.light'),
+                key: SelectableCarbonTheme.G10,
+                selected: preferredTheme === SelectableCarbonTheme.G10,
+            },
+            {
+                content: this.translateService.instant('settings.interface.themes.dark'),
+                key: SelectableCarbonTheme.G90,
+                selected: preferredTheme === SelectableCarbonTheme.G90,
+            },
+            {
+                content: this.translateService.instant('settings.interface.themes.system'),
+                key: SelectableCarbonTheme.SYSTEM,
+                selected: preferredTheme === SelectableCarbonTheme.SYSTEM,
+            },
+        ]));
+        this.allowUserThemeSwitching$ = this.configService.getFeatureToggleObservable('allowUserThemeSwitching', true);
+        this.enableCompactModeToggle$ = this.configService.getFeatureToggleObservable('enableCompactModeToggle', true);
+        this.enableShowUserNameToggle$ = this.configService.getFeatureToggleObservable('enableUserNameInTopBarToggle');
+        this.showPlantATreeButton$ = this.configService.getFeatureToggleObservable('showPlantATreeButton');
+        this.hideValtimoVersionsForNonAdmins$ = this.configService.getFeatureToggleObservable('hideValtimoVersionsForNonAdmins');
+        this._isAdmin$ = this.userProviderService
+            .getUserSubject()
+            .pipe(map$1(userIdentity => userIdentity?.roles.includes('ROLE_ADMIN')));
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.initNonToggleSettings();
+        this.initFrontendVersion();
+        this.openShowVersionsSubscription();
+        this.setLanguage();
+        this.getUserSettings();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    updateUserLanguage(langKey, saveSettings = true) {
+        const langKeyToUse = langKey?.item?.key
+            ? langKey?.item.key
+            : langKey;
+        this.translateService
+            .use(langKeyToUse)
+            .pipe(take$1(1))
+            .subscribe(() => {
+            localStorage.setItem('langKey', langKeyToUse);
+            this._selectedLanguage$.next(langKeyToUse);
+            if (saveSettings) {
+                this.saveUserSettings();
+            }
+        });
+    }
+    setCollapsibleWidescreenMenu(collapsible, saveSettings = true) {
+        this.shellService.setCollapsibleWidescreenMenu(collapsible);
+        if (saveSettings) {
+            this.saveUserSettings();
+        }
+    }
+    setCompactMode(compactMode, saveSettings = true) {
+        this.pageHeaderService.setCompactMode(compactMode);
+        if (saveSettings) {
+            this.saveUserSettings();
+        }
+    }
+    setShowUserName(showUserName, saveSettings = true) {
+        this.pageHeaderService.setShowUserNameInTopBar(showUserName);
+        if (saveSettings) {
+            this.saveUserSettings();
+        }
+    }
+    setPreferredTheme(selectedTheme, saveSettings = true) {
         if (selectedTheme?.item?.key) {
             this.cdsThemeService.setPreferredTheme(selectedTheme.item?.key);
         }
@@ -5349,6 +6170,12 @@ class LeftSidebarComponent {
         event.preventDefault();
         this.overflowMenuSequence$.next('');
         if (!event.ctrlKey && !event.metaKey) {
+            // Custom links may point to an external/absolute URL, which the Angular router cannot
+            // resolve — open those in a new tab instead of attempting (and failing) an internal navigation.
+            if (this.isExternalLink(route)) {
+                window.open(route[0], '_blank', 'noopener');
+                return;
+            }
             this.router.navigate(route, { queryParams: {} });
             combineLatest([
                 this.shellService.sideBarExpanded$,
@@ -5375,9 +6202,18 @@ class LeftSidebarComponent {
         });
     }
     openInNewTab(link) {
+        if (this.isExternalLink(link)) {
+            window.open(link[0], '_blank', 'noopener');
+            return;
+        }
         const url = this.router.serializeUrl(this.router.createUrlTree(link || ['/']));
         window.open(url, '_blank');
     }
+    /** A custom link whose first segment is an absolute/external URL (`http(s)://`, `//`, `mailto:`). */
+    isExternalLink(link) {
+        const first = link?.[0] ?? '';
+        return /^(https?:)?\/\//i.test(first) || /^mailto:/i.test(first);
+    }
     openBreakpointSubscription() {
         this._breakpointSubscription = this.breakpointObserver
             .observe(['(max-width: 1055px)', '(min-width: 1056px)'])
@@ -5420,13 +6256,13 @@ class LeftSidebarComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LeftSidebarComponent, deps: [{ token: i0.ElementRef }, { token: MenuService }, { token: ShellService }, { token: i3.BreakpointObserver }, { token: i1$3.Router }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵ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$1.BreakpointObserver }, { token: i1$3.Router }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: LeftSidebarComponent, isStandalone: false, selector: "valtimo-left-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n    menuItemsLoaded: menuItemsLoaded$ | async,\n    menuItems: menuItems$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n    <ng-container *ngFor=\"let menuItem of obs.menuItems; trackBy: trackByMenuItem\">\n      <ng-container *ngIf=\"!menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              menuItem: menuItem,\n              closestSequence: obs.closestSequence,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              closestSequence: obs.closestSequence,\n              menuItem: menuItem,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n\n        <div [ngClass]=\"{\n          'menu-item--hidden': menuItem.includeFunction !== undefined,\n          'menu-item--visible':\n            menuItem.includeFunction !== undefined &&\n            (includeFunctionObservables[menuItem.title] | async),\n        }\">\n          <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n          <cds-sidenav-menu\n            [title]=\"menuItem | menuItemTranslate | async\"\n            [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n          >\n            <ng-container\n              *ngFor=\"let childMenuItem of menuItem.children; trackBy: trackByMenuItem\"\n            >\n              <ng-container\n                *ngIf=\"{\n                  disableCaseCount: disableCaseCount$ | async,\n                  count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n                  sequence: '' + menuItem.sequence + '.' + childMenuItem.sequence,\n                } as vars\"\n              >\n                <cds-sidenav-item\n                  [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n                  [title]=\"\n                    menuItem.title === 'Cases' || menuItem.title === 'Dossiers'\n                      ? (childMenuItem | menuItemTranslate | async)\n                      : null\n                  \"\n                  [ngClass]=\"{\n                    'cds--side-nav__item--empty': !childMenuItem.link,\n                    'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n                    'menu-item--visible':\n                      childMenuItem.includeFunction !== undefined &&\n                      (includeFunctionObservables[childMenuItem.title] | async),\n                  }\"\n                  [active]=\"vars.sequence === obs.closestSequence\"\n                  [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n                  (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n                  (contextmenu)=\"onRightClick(vars.sequence)\"\n                  (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n                >\n                  <valtimo-menu-item-text\n                    [accent]=\"!childMenuItem.link\"\n                    [menuItem]=\"childMenuItem\"\n                    [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n                    (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n                    (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n                  ></valtimo-menu-item-text>\n\n                  <ng-container\n                    *ngTemplateOutlet=\"countTemplate; context: {count: vars.count, disableCaseCount: vars.disableCaseCount}\"\n                  ></ng-container>\n                </cds-sidenav-item>\n              </ng-container>\n            </ng-container>\n          </cds-sidenav-menu>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text>\n    </cds-sidenav-item>\n  </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\" let-disableCaseCount=\"disableCaseCount\">\n  <ng-container *ngIf=\"count && !disableCaseCount\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: ["menuItem", "accent", "showOverFlowMenu"], outputs: ["overflowMenuClosed", "openInNewTab"] }, { kind: "component", type: i2$3.SideNav, selector: "cds-sidenav, ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems", "useRouter"] }, { kind: "component", type: i2$3.SideNavItem, selector: "cds-sidenav-item, ibm-sidenav-item", inputs: ["href", "useRouter", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i2$3.SideNavMenu, selector: "cds-sidenav-menu, ibm-sidenav-menu", inputs: ["useRouter", "title", "expanded", "hasActiveChild", "menuItems"] }, { kind: "directive", type: CtrlClickDirective, selector: "[ctrl-click]", outputs: ["ctrl-click"] }, { kind: "component", type: i2$3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }, { kind: "pipe", type: CaseCountPipe, name: "caseCount" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LeftSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-left-sidebar', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n    menuItemsLoaded: menuItemsLoaded$ | async,\n    menuItems: menuItems$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n    <ng-container *ngFor=\"let menuItem of obs.menuItems; trackBy: trackByMenuItem\">\n      <ng-container *ngIf=\"!menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              menuItem: menuItem,\n              closestSequence: obs.closestSequence,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              closestSequence: obs.closestSequence,\n              menuItem: menuItem,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n\n        <div [ngClass]=\"{\n          'menu-item--hidden': menuItem.includeFunction !== undefined,\n          'menu-item--visible':\n            menuItem.includeFunction !== undefined &&\n            (includeFunctionObservables[menuItem.title] | async),\n        }\">\n          <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n          <cds-sidenav-menu\n            [title]=\"menuItem | menuItemTranslate | async\"\n            [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n          >\n            <ng-container\n              *ngFor=\"let childMenuItem of menuItem.children; trackBy: trackByMenuItem\"\n            >\n              <ng-container\n                *ngIf=\"{\n                  disableCaseCount: disableCaseCount$ | async,\n                  count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n                  sequence: '' + menuItem.sequence + '.' + childMenuItem.sequence,\n                } as vars\"\n              >\n                <cds-sidenav-item\n                  [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n                  [title]=\"\n                    menuItem.title === 'Cases' || menuItem.title === 'Dossiers'\n                      ? (childMenuItem | menuItemTranslate | async)\n                      : null\n                  \"\n                  [ngClass]=\"{\n                    'cds--side-nav__item--empty': !childMenuItem.link,\n                    'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n                    'menu-item--visible':\n                      childMenuItem.includeFunction !== undefined &&\n                      (includeFunctionObservables[childMenuItem.title] | async),\n                  }\"\n                  [active]=\"vars.sequence === obs.closestSequence\"\n                  [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n                  (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n                  (contextmenu)=\"onRightClick(vars.sequence)\"\n                  (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n                >\n                  <valtimo-menu-item-text\n                    [accent]=\"!childMenuItem.link\"\n                    [menuItem]=\"childMenuItem\"\n                    [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n                    (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n                    (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n                  ></valtimo-menu-item-text>\n\n                  <ng-container\n                    *ngTemplateOutlet=\"countTemplate; context: {count: vars.count, disableCaseCount: vars.disableCaseCount}\"\n                  ></ng-container>\n                </cds-sidenav-item>\n              </ng-container>\n            </ng-container>\n          </cds-sidenav-menu>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text>\n    </cds-sidenav-item>\n  </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\" let-disableCaseCount=\"disableCaseCount\">\n  <ng-container *ngIf=\"count && !disableCaseCount\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MenuService }, { type: ShellService }, { type: i3.BreakpointObserver }, { type: i1$3.Router }, { type: i1$2.ConfigService }], propDecorators: { toggleButtonRef: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MenuService }, { type: ShellService }, { type: i3$1.BreakpointObserver }, { type: i1$3.Router }, { type: i1$2.ConfigService }], propDecorators: { toggleButtonRef: [{
                 type: ViewChild,
                 args: ['toggleButton']
             }], onPageClick: [{
@@ -7478,11 +8314,11 @@ class CarbonListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonListComponent, deps: [{ token: EllipsisPipe }, { token: CarbonListFilterPipe }, { token: i2$3.IconService }, { token: i4.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }, { token: KeyStateService }, { token: CarbonListDragAndDropService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", skeletonRowCount: "skeletonRowCount", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", initialSearchValue: "initialSearchValue", searchDebounceMs: "searchDebounceMs", invalidSearchFields: "invalidSearchFields", searchFields: "searchFields", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled", expandedRowTemplate: "expandedRowTemplate", expandedRowKey: "expandedRowKey", trackByKey: "trackByKey" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, descendants: true }], ngImport: i0, template: "<!--\n  ~ /*\n  ~  * Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~  *\n  ~  * Licensed under EUPL, Version 1.2 (the \"License\");\n  ~  * you may not use this file except in compliance with the License.\n  ~  * You may obtain a copy of the License at\n  ~  *\n  ~  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~  *\n  ~  * Unless required by applicable law or agreed to in writing, software\n  ~  * distributed under the License is distributed on an \"AS IS\" basis,\n  ~  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~  * See the License for the specific language governing permissions and\n  ~  * limitations under the License.\n  ~  */\n  -->\n<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n        <cds-table-toolbar-search\n          #toolbarSearch\n          [expandable]=\"false\"\n          [formControl]=\"searchFormControl\"\n          [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n          data-test-id=\"carbonListSearch\"\n          (input)=\"updateAutocomplete()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          (clear)=\"onSearchClear()\"\n          (open)=\"onSearchOpenChange($event)\"\n        ></cds-table-toolbar-search>\n        <div\n          class=\"valtimo-search-overlay\"\n          aria-hidden=\"true\"\n        ><span\n            *ngFor=\"let segment of getSearchSegments()\"\n            [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n          >{{ segment.text }}</span></div>\n        <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n          <li\n            *ngFor=\"let field of filteredSuggestions; let i = index\"\n            [class.selected]=\"i === selectedSuggestionIndex\"\n            (mousedown)=\"selectSuggestion(field)\"\n          >{{ field.title || field.key }}</li>\n        </ul>\n      </div>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\" data-test-id=\"carbonListNoResults\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n    data-test-id=\"carbonListPagination\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <v-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    [portalToBody]=\"true\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    placement=\"bottom-end\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </v-overflow-menu-option>\n    }\n  </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showExpandAllToggle", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact", "label"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionItemDisabledPipe, name: "actionItemDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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    [portalToBody]=\"true\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </v-overflow-menu-option>\n    }\n  </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showExpandAllToggle", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact", "label"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionItemDisabledPipe, name: "actionItemDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonListComponent, decorators: [{
             type: Component,
-            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"] }]
+            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    [portalToBody]=\"true\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n    @for (action of data.actions; track action.label) {\n      <v-overflow-menu-option\n        [disabled]=\"action | actionItemDisabled: data.item | async\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </v-overflow-menu-option>\n    }\n  </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n      data-test-id=\"carbonListMoveUp\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n      data-test-id=\"carbonListMoveDown\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n      data-test-id=\"carbonListDragHandle\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n          data-test-id=\"carbonListExpandTags\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: EllipsisPipe }, { type: CarbonListFilterPipe }, { type: i2$3.IconService }, { type: i4.NGXLogger }, { type: i1.TranslateService }, { type: ViewContentService }, { type: KeyStateService }, { type: CarbonListDragAndDropService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { actionsMenuTemplate: [{
                 type: ViewChild,
                 args: ['actionsMenuTemplate']
@@ -9661,7 +10497,7 @@ class FormioComponent {
             const formioTranslations = this.translateService.instant('formioTranslations');
             const defaultOptions = {
                 ...options,
-                ...(formioTranslations === 'object' && {
+                ...(typeof formioTranslations === 'object' && {
                     i18n: {
                         [language]: this.stateService.flattenTranslationsObject(formioTranslations),
                     },
@@ -9669,6 +10505,8 @@ class FormioComponent {
             };
             return deepmerge(defaultOptions, overrideOptions);
         }), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), tap$1(options => this.logger.debug('Form.IO options used', options)));
+        // Only renderOptions reaches form.io itself; getRendererOptions() drops everything else.
+        this.renderOptions$ = this.currentLanguage$.pipe(map$1(language => ({ language })));
         this._storeTokenInLocalStorage = !this.configService.getFeatureToggle('disableFormioTokenInLocalStorage');
         this._inMemoryTokenSet$ = new BehaviorSubject(false);
         // The form is only rendered once a token is available. In the default (legacy) mode the token
@@ -9807,11 +10645,11 @@ class FormioComponent {
         this._overrideOptions$.next(config.formioOptions);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormioComponent, deps: [{ token: i6$1.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$3.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i1$2.ConfigService }, { token: FormIoTagsService }, { token: i0.Injector }, { token: FormioTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", errors: "errors", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    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" }] }); }
+    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    renderOptions: renderOptions$ | 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    [renderOptions]=\"obs.renderOptions\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FormioComponent, selector: "formio" }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    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" }]
+            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    renderOptions: renderOptions$ | 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    [renderOptions]=\"obs.renderOptions\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i6$1.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$3.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i1$2.ConfigService }, { type: FormIoTagsService }, { type: i0.Injector }, { type: FormioTranslationService }], propDecorators: { options: [{
                 type: Input
             }], submission: [{
@@ -9952,7 +10790,8 @@ class FormioBuilderComponent {
             const formioTranslations = this.translateService.instant('formioTranslations');
             const defaultOptions = {
                 ...options,
-                ...(formioTranslations === 'object' && {
+                language,
+                ...(typeof formioTranslations === 'object' && {
                     i18n: {
                         [language]: this.stateService.flattenTranslationsObject(formioTranslations),
                     },
@@ -11202,13 +12041,20 @@ class ValuePathSelectorComponent {
                     this.onPathSelected(mappedOption);
                 return mappedOption;
             });
-        }), tap(() => this.loadingValuePathItems$.next(false)));
+        }), tap(() => {
+            this.loadingValuePathItems$.next(false);
+            this.scheduleDisplayFlush();
+        }));
         this._subscriptions = new Subscription();
+        this._destroyed = false;
     }
     ngOnInit() {
         this._subscriptions.add(this._selectedPath$.subscribe(path => this.valueChangeEvent.emit(path)));
     }
     ngOnDestroy() {
+        this._destroyed = true;
+        if (this._displayFlushTimeoutId !== undefined)
+            clearTimeout(this._displayFlushTimeoutId);
         this._subscriptions.unsubscribe();
     }
     writeValue(value) {
@@ -11217,6 +12063,28 @@ class ValuePathSelectorComponent {
             this._inputMode$.next(ValuePathSelectorInputMode.DROPDOWN);
             this.clearComboBoxSearch();
         }
+        this.scheduleDisplayFlush();
+    }
+    /**
+     * The Carbon combobox computes its displayed value asynchronously after receiving items with a
+     * `selected` entry. Under an OnPush ancestor that is not marked dirty, neither the items binding
+     * nor Carbon's internal display update is ever flushed to the DOM, so the control's state is
+     * correct while its input renders empty until the user interacts. Flush in two passes after
+     * every options emission or written value: the first detectChanges renders the emission into the
+     * combobox (which then schedules its internal update), the nested one flushes that update.
+     */
+    scheduleDisplayFlush() {
+        if (this._displayFlushTimeoutId !== undefined)
+            clearTimeout(this._displayFlushTimeoutId);
+        this._displayFlushTimeoutId = setTimeout(() => {
+            if (this._destroyed)
+                return;
+            this.changeDetectorRef.detectChanges();
+            this._displayFlushTimeoutId = setTimeout(() => {
+                if (!this._destroyed)
+                    this.changeDetectorRef.detectChanges();
+            });
+        });
     }
     registerOnChange(fn) {
         this._onChangeFunction = fn;
@@ -11308,7 +12176,7 @@ class ValuePathSelectorComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ValuePathSelectorComponent, deps: [{ token: ValuePathSelectorService }, { token: i2.FormBuilder }, { token: i3$1.DocumentService }, { token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ValuePathSelectorComponent, deps: [{ token: ValuePathSelectorService }, { token: i2.FormBuilder }, { token: i3$2.DocumentService }, { token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ValuePathSelectorComponent, isStandalone: true, selector: "valtimo-value-path-selector", inputs: { name: "name", appendInline: "appendInline", margin: "margin", marginLg: "marginLg", marginXl: "marginXl", disabled: "disabled", caseDefinitionKey: "caseDefinitionKey", caseDefinitionVersionTag: "caseDefinitionVersionTag", buildingBlockDefinitionKey: "buildingBlockDefinitionKey", buildingBlockDefinitionVersionTag: "buildingBlockDefinitionVersionTag", prefixes: "prefixes", excludePrefixes: "excludePrefixes", label: "label", tooltip: "tooltip", required: "required", showCaseDefinitionSelector: "showCaseDefinitionSelector", notation: "notation", dropUp: "dropUp", defaultValue: "defaultValue", type: "type", parentItem: "parentItem", filterItems: "filterItems" }, outputs: { valueChangeEvent: "valueChangeEvent", collectionSelected: "collectionSelected" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class.value-path-selector--margin-bottom": "this._showMargin", "class.value-path-selector--margin-bottom-lg": "this._showMarginLg", "class.value-path-selector--margin-bottom-xl": "this._showMarginXl" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -11337,7 +12205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                             useExisting: forwardRef(() => ValuePathSelectorComponent),
                         },
                     ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n    showToggle: showToggle$ | async,\n  } as obs\"\n>\n  <v-input-label *ngIf=\"!!label\" [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\">\n  </v-input-label>\n\n  <form\n    [formGroup]=\"formGroup\"\n    [ngClass]=\"{\n      'value-path-selector__form--case-def-input':\n        showCaseDefinitionSelector && obs.inputModeIsDropdown && !obs.showToggle,\n    }\"\n    class=\"value-path-selector__form\"\n  >\n    <cds-toggle\n      *ngIf=\"obs.showToggle\"\n      [attr.data-test-id]=\"testIds.toggle\"\n      size=\"sm\"\n      [disabled]=\"obs.disabled\"\n      [onText]=\"'valuePathSelector.dropdown' | translate\"\n      [offText]=\"'valuePathSelector.manual' | translate\"\n      [checked]=\"obs.inputModeIsDropdown\"\n      (checkedChange)=\"onInputModeChange($event)\"\n    ></cds-toggle>\n\n    @if (obs.inputModeIsDropdown && obs.showToggle) {\n      <cds-combo-box\n        [attr.data-test-id]=\"testIds.path\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"\n          obs.disabled ||\n          obs.loadingValuePathItems ||\n          !obs.valuePathListItems ||\n          (obs.valuePathListItems || []).length === 0\n        \"\n        [dropUp]=\"dropUp\"\n        (selected)=\"onPathSelected($event)\"\n        (clear)=\"onPathCleared()\"\n        [placeholder]=\"'valuePathSelector.placeholder' | translate\"\n      >\n        <cds-dropdown-list [items]=\"obs.valuePathListItems || []\"></cds-dropdown-list>\n      </cds-combo-box>\n    } @else {\n      <input\n        [attr.data-test-id]=\"testIds.input\"\n        cdsText\n        type=\"text\"\n        formControlName=\"selectedPath\"\n      />\n    }\n  </form>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}::ng-deep .value-path-selector--margin-bottom{margin-bottom:16px}::ng-deep .value-path-selector--margin-bottom-lg{margin-bottom:24px}::ng-deep .value-path-selector--margin-bottom-xl{margin-bottom:34px}.value-path-selector__form{display:flex;width:100%;align-items:center;gap:16px}::ng-deep .value-path-selector__form--case-def-input{display:flex!important}.value-path-selector__form ::ng-deep cds-dropdown,.value-path-selector__form ::ng-deep cds-combo-box{width:100%;min-width:0}.value-path-selector__form ::ng-deep .cds--toggle__label-text{display:none}.value-path-selector__form ::ng-deep .cds--toggle__label{display:flex}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: ValuePathSelectorService }, { type: i2.FormBuilder }, { type: i3$1.DocumentService }, { type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { _showMargin: [{
+        }], ctorParameters: () => [{ type: ValuePathSelectorService }, { type: i2.FormBuilder }, { type: i3$2.DocumentService }, { type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { _showMargin: [{
                 type: HostBinding,
                 args: ['class.value-path-selector--margin-bottom']
             }], _showMarginLg: [{
@@ -13493,6 +14361,7 @@ class SelectComponent {
                 content: translated,
             };
         })));
+        this._destroyed = false;
         this._onChange = () => { };
         this._onTouched = () => { };
     }
@@ -13500,17 +14369,10 @@ class SelectComponent {
         this.setDefaultSelection();
         this.openSelectedSubscription();
         this.openClearSubjectSubscription();
+        this.openDisplayFlushSubscription();
     }
     ngAfterViewInit() {
-        // The underlying Carbon combobox computes its displayed value asynchronously, in a setTimeout
-        // scheduled during its own view initialization. When this component lives under an OnPush
-        // ancestor that is not marked dirty, that update is never flushed to the DOM, so a preselected
-        // value only becomes visible after the user interacts with the control. Because this setTimeout
-        // is scheduled after the combobox's (lifecycle hooks of child views run first), it runs once
-        // the combobox has set its display value, and detectChanges() flushes it to the DOM. A
-        // setTimeout is used instead of NgZone.onStable so the flush also works in apps with
-        // long-running background tasks that keep the zone from ever stabilizing.
-        this._displayFlushTimeoutId = setTimeout(() => this.changeDetectorRef.detectChanges());
+        this.scheduleDisplayFlush();
     }
     ngOnChanges(changes) {
         if (changes?.items?.currentValue ||
@@ -13521,8 +14383,10 @@ class SelectComponent {
         }
     }
     ngOnDestroy() {
+        this._destroyed = true;
         this._selectedSubscription?.unsubscribe();
         this._clearSubjectSubscription?.unsubscribe();
+        this._displayFlushSubscription?.unsubscribe();
         if (this._displayFlushTimeoutId !== undefined)
             clearTimeout(this._displayFlushTimeoutId);
     }
@@ -13589,6 +14453,35 @@ class SelectComponent {
             });
         }
     }
+    /**
+     * The underlying Carbon combobox computes its displayed value asynchronously, in a setTimeout it
+     * schedules while processing an items change. When this component lives under an OnPush ancestor
+     * that is not marked dirty, that update is never flushed to the DOM, so a (pre)selected value
+     * only becomes visible after the user interacts with the control. This applies to every items or
+     * selection change — not only the first render: a value written or items arriving after view
+     * init (prefill, late-loaded options, wizard step switches) hit the same race. Hence a flush is
+     * scheduled on every emission, in two passes: the first detectChanges renders the emission into
+     * the combobox (which then schedules its own internal display update), the nested one flushes
+     * that internal update — covering both orderings of the competing timeouts. setTimeout is used
+     * instead of NgZone.onStable so the flush also works in apps with long-running background tasks
+     * that keep the zone from ever stabilizing.
+     */
+    openDisplayFlushSubscription() {
+        this._displayFlushSubscription = combineLatest([this._listItems$, this.selected$]).subscribe(() => this.scheduleDisplayFlush());
+    }
+    scheduleDisplayFlush() {
+        if (this._displayFlushTimeoutId !== undefined)
+            clearTimeout(this._displayFlushTimeoutId);
+        this._displayFlushTimeoutId = setTimeout(() => {
+            if (this._destroyed)
+                return;
+            this.changeDetectorRef.detectChanges();
+            this._displayFlushTimeoutId = setTimeout(() => {
+                if (!this._destroyed)
+                    this.changeDetectorRef.detectChanges();
+            });
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectComponent, deps: [{ token: i1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectComponent, isStandalone: false, selector: "v-select", inputs: { items: "items", defaultSelection: "defaultSelection", defaultSelectionId: "defaultSelectionId", defaultSelectionIds: "defaultSelectionIds", disabled: "disabled", dropUp: "dropUp", invalid: "invalid", multiple: "multiple", margin: "margin", widthInPx: "widthInPx", notFoundText: "notFoundText", clearAllText: "clearAllText", clearText: "clearText", clearable: "clearable", name: "name", title: "title", titleTranslationKey: "titleTranslationKey", clearSelectionSubject$: "clearSelectionSubject$", tooltip: "tooltip", required: "required", loading: "loading", loadingText: "loadingText", placeholder: "placeholder", smallMargin: "smallMargin", carbonTheme: "carbonTheme", appendInline: "appendInline", warn: "warn", warnText: "warnText", dataTestId: "dataTestId" }, outputs: { selectedChange: "selectedChange" }, providers: [
             {
@@ -15174,6 +16067,12 @@ class CarbonMultiInputComponent {
         this.addButtonType = 'primary';
         this.addRowTranslationKey = '';
         this._defaultValues$ = new BehaviorSubject([]);
+        /**
+         * Carbon paints a danger button red in its resting state. A form with one delete button per row
+         * can therefore read as a form full of errors, which 'danger--ghost' avoids without giving up the
+         * destructive styling on hover.
+         */
+        this.deleteButtonType = 'danger';
         this.deleteRowText = '';
         this.deleteRowTranslationKey = '';
         this.$disabled = signal(false);
@@ -15385,13 +16284,13 @@ class CarbonMultiInputComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonMultiInputComponent, isStandalone: false, selector: "valtimo-carbon-multi-input", inputs: { addRowText: "addRowText", addButtonType: "addButtonType", addRowTranslationKey: "addRowTranslationKey", arbitraryAmountTitles: "arbitraryAmountTitles", arbitraryValueAmount: "arbitraryValueAmount", defaultValues: "defaultValues", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", dropdownColumnTitle: "dropdownColumnTitle", dropdownItems: "dropdownItems", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", hideAddButton: "hideAddButton", hideDeleteButton: "hideDeleteButton", initialAmountOfRows: "initialAmountOfRows", keyColumnTitle: "keyColumnTitle", margin: "margin", maxRows: "maxRows", minimumAmountOfRows: "minimumAmountOfRows", name: "name", required: "required", title: "title", titleTranslationKey: "titleTranslationKey", tooltip: "tooltip", type: "type", valueColumnTitle: "valueColumnTitle", valuePathSelectorCaseDefinitionKey: "valuePathSelectorCaseDefinitionKey", valuePathSelectorPrefixes: "valuePathSelectorPrefixes", valuePathSelectorShowCaseDefinitionSelector: "valuePathSelectorShowCaseDefinitionSelector", valuePathSelectorNotation: "valuePathSelectorNotation", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange", allValuesValidEvent: "allValuesValidEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonMultiInputComponent, isStandalone: false, selector: "valtimo-carbon-multi-input", inputs: { addRowText: "addRowText", addButtonType: "addButtonType", addRowTranslationKey: "addRowTranslationKey", arbitraryAmountTitles: "arbitraryAmountTitles", arbitraryValueAmount: "arbitraryValueAmount", defaultValues: "defaultValues", deleteButtonType: "deleteButtonType", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", dropdownColumnTitle: "dropdownColumnTitle", dropdownItems: "dropdownItems", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", hideAddButton: "hideAddButton", hideDeleteButton: "hideDeleteButton", initialAmountOfRows: "initialAmountOfRows", keyColumnTitle: "keyColumnTitle", margin: "margin", maxRows: "maxRows", minimumAmountOfRows: "minimumAmountOfRows", name: "name", required: "required", title: "title", titleTranslationKey: "titleTranslationKey", tooltip: "tooltip", type: "type", valueColumnTitle: "valueColumnTitle", valuePathSelectorCaseDefinitionKey: "valuePathSelectorCaseDefinitionKey", valuePathSelectorPrefixes: "valuePathSelectorPrefixes", valuePathSelectorShowCaseDefinitionSelector: "valuePathSelectorShowCaseDefinitionSelector", valuePathSelectorNotation: "valuePathSelectorNotation", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange", allValuesValidEvent: "allValuesValidEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CarbonMultiInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      @switch (type) {\n        @case ('value') {\n          <valtimo-single-value\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, 'value')\"\n          ></valtimo-single-value>\n        }\n        @case ('keyValue') {\n          <valtimo-key-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value>\n        }\n        @case ('keyDropdownValue') {\n          <valtimo-key-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-dropdown-value>\n        }\n        @case ('arbitraryAmount') {\n          <valtimo-arbitrary-amount-value\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [arbitraryAmountTitles]=\"arbitraryAmountTitles\"\n            [amountOfArbitraryValuesArray$]=\"amountOfArbitraryValuesArray$\"\n            (valueChange)=\"\n              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)\n            \"\n          ></valtimo-arbitrary-amount-value>\n        }\n        @case ('keyValuePathSelector') {\n          <valtimo-key-value-path-selector\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value-path-selector>\n        }\n        @case ('valuePathSelectorValue') {\n          <valtimo-value-path-selector-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n            [attr.data-test-id]=\"'multiInputValuePathSelectorValue-' + i\"\n          ></valtimo-value-path-selector-value>\n        }\n        @case ('valuePathSelectorDropdownValue') {\n          <valtimo-value-path-selector-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n            [attr.data-test-id]=\"'multiInputValuePathSelectorDropdownValue-' + i\"\n          ></valtimo-value-path-selector-dropdown-value>\n        }\n      }\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || $disabled()\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n        [attr.data-test-id]=\"testIds.deleteButtonAt(i)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        [cdsButton]=\"addButtonType\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || $disabled()\"\n        (click)=\"addRow()\"\n        [attr.data-test-id]=\"name ? testIds.addButtonNamed(name) : testIds.addButton\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\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: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: KeyValueComponent, selector: "valtimo-key-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: SingleValueComponent, selector: "valtimo-single-value", inputs: ["value", "fullWidth", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: KeyDropdownValueComponent, selector: "valtimo-key-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ArbitraryAmountValueComponent, selector: "valtimo-arbitrary-amount-value", inputs: ["index", "value", "fullWidth", "disabled", "arbitraryAmountTitles", "amountOfArbitraryValuesArray$"], outputs: ["valueChange"] }, { kind: "component", type: KeyValuePathSelectorComponent, selector: "valtimo-key-value-path-selector", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorValueComponent, selector: "valtimo-value-path-selector-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorDropdownValueComponent, selector: "valtimo-value-path-selector-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      @switch (type) {\n        @case ('value') {\n          <valtimo-single-value\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, 'value')\"\n          ></valtimo-single-value>\n        }\n        @case ('keyValue') {\n          <valtimo-key-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value>\n        }\n        @case ('keyDropdownValue') {\n          <valtimo-key-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-dropdown-value>\n        }\n        @case ('arbitraryAmount') {\n          <valtimo-arbitrary-amount-value\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [arbitraryAmountTitles]=\"arbitraryAmountTitles\"\n            [amountOfArbitraryValuesArray$]=\"amountOfArbitraryValuesArray$\"\n            (valueChange)=\"\n              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)\n            \"\n          ></valtimo-arbitrary-amount-value>\n        }\n        @case ('keyValuePathSelector') {\n          <valtimo-key-value-path-selector\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value-path-selector>\n        }\n        @case ('valuePathSelectorValue') {\n          <valtimo-value-path-selector-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n            [attr.data-test-id]=\"'multiInputValuePathSelectorValue-' + i\"\n          ></valtimo-value-path-selector-value>\n        }\n        @case ('valuePathSelectorDropdownValue') {\n          <valtimo-value-path-selector-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n            [attr.data-test-id]=\"'multiInputValuePathSelectorDropdownValue-' + i\"\n          ></valtimo-value-path-selector-dropdown-value>\n        }\n      }\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        [cdsButton]=\"deleteButtonType\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || $disabled()\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n        [attr.data-test-id]=\"testIds.deleteButtonAt(i)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        [cdsButton]=\"addButtonType\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || $disabled()\"\n        (click)=\"addRow()\"\n        [attr.data-test-id]=\"name ? testIds.addButtonNamed(name) : testIds.addButton\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\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: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: KeyValueComponent, selector: "valtimo-key-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: SingleValueComponent, selector: "valtimo-single-value", inputs: ["value", "fullWidth", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: KeyDropdownValueComponent, selector: "valtimo-key-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ArbitraryAmountValueComponent, selector: "valtimo-arbitrary-amount-value", inputs: ["index", "value", "fullWidth", "disabled", "arbitraryAmountTitles", "amountOfArbitraryValuesArray$"], outputs: ["valueChange"] }, { kind: "component", type: KeyValuePathSelectorComponent, selector: "valtimo-key-value-path-selector", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorValueComponent, selector: "valtimo-value-path-selector-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorDropdownValueComponent, selector: "valtimo-value-path-selector-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonMultiInputComponent, decorators: [{
             type: Component,
@@ -15401,7 +16300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                             useExisting: forwardRef(() => CarbonMultiInputComponent),
                             multi: true,
                         },
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      @switch (type) {\n        @case ('value') {\n          <valtimo-single-value\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, 'value')\"\n          ></valtimo-single-value>\n        }\n        @case ('keyValue') {\n          <valtimo-key-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value>\n        }\n        @case ('keyDropdownValue') {\n          <valtimo-key-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-dropdown-value>\n        }\n        @case ('arbitraryAmount') {\n          <valtimo-arbitrary-amount-value\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [arbitraryAmountTitles]=\"arbitraryAmountTitles\"\n            [amountOfArbitraryValuesArray$]=\"amountOfArbitraryValuesArray$\"\n            (valueChange)=\"\n              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)\n            \"\n          ></valtimo-arbitrary-amount-value>\n        }\n        @case ('keyValuePathSelector') {\n          <valtimo-key-value-path-selector\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value-path-selector>\n        }\n        @case ('valuePathSelectorValue') {\n          <valtimo-value-path-selector-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n            [attr.data-test-id]=\"'multiInputValuePathSelectorValue-' + i\"\n          ></valtimo-value-path-selector-value>\n        }\n        @case ('valuePathSelectorDropdownValue') {\n          <valtimo-value-path-selector-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n            [attr.data-test-id]=\"'multiInputValuePathSelectorDropdownValue-' + i\"\n          ></valtimo-value-path-selector-dropdown-value>\n        }\n      }\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || $disabled()\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n        [attr.data-test-id]=\"testIds.deleteButtonAt(i)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        [cdsButton]=\"addButtonType\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || $disabled()\"\n        (click)=\"addRow()\"\n        [attr.data-test-id]=\"name ? testIds.addButtonNamed(name) : testIds.addButton\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      @switch (type) {\n        @case ('value') {\n          <valtimo-single-value\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, 'value')\"\n          ></valtimo-single-value>\n        }\n        @case ('keyValue') {\n          <valtimo-key-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value>\n        }\n        @case ('keyDropdownValue') {\n          <valtimo-key-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-dropdown-value>\n        }\n        @case ('arbitraryAmount') {\n          <valtimo-arbitrary-amount-value\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [arbitraryAmountTitles]=\"arbitraryAmountTitles\"\n            [amountOfArbitraryValuesArray$]=\"amountOfArbitraryValuesArray$\"\n            (valueChange)=\"\n              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)\n            \"\n          ></valtimo-arbitrary-amount-value>\n        }\n        @case ('keyValuePathSelector') {\n          <valtimo-key-value-path-selector\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value-path-selector>\n        }\n        @case ('valuePathSelectorValue') {\n          <valtimo-value-path-selector-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n            [attr.data-test-id]=\"'multiInputValuePathSelectorValue-' + i\"\n          ></valtimo-value-path-selector-value>\n        }\n        @case ('valuePathSelectorDropdownValue') {\n          <valtimo-value-path-selector-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n            [attr.data-test-id]=\"'multiInputValuePathSelectorDropdownValue-' + i\"\n          ></valtimo-value-path-selector-dropdown-value>\n        }\n      }\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        [cdsButton]=\"deleteButtonType\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || $disabled()\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n        [attr.data-test-id]=\"testIds.deleteButtonAt(i)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        [cdsButton]=\"addButtonType\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || $disabled()\"\n        (click)=\"addRow()\"\n        [attr.data-test-id]=\"name ? testIds.addButtonNamed(name) : testIds.addButton\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], propDecorators: { addRowText: [{
                 type: Input
             }], addButtonType: [{
@@ -15414,6 +16313,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], defaultValues: [{
                 type: Input
+            }], deleteButtonType: [{
+                type: Input
             }], deleteRowText: [{
                 type: Input
             }], deleteRowTranslationKey: [{
@@ -15759,51 +16660,271 @@ class RadioComponent {
             this.valueChange.emit(value);
         });
     }
-    openClearSubscription() {
-        if (this.clear$) {
-            this.clearSubscription = this.clear$.subscribe(() => {
-                this.onValueChange('');
-            });
+    openClearSubscription() {
+        if (this.clear$) {
+            this.clearSubscription = this.clear$.subscribe(() => {
+                this.onValueChange('');
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: RadioComponent, isStandalone: false, selector: "v-radio", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", defaultValue: "defaultValue", widthPx: "widthPx", fullWidth: "fullWidth", margin: "margin", smallMargin: "smallMargin", disabled: "disabled", tooltip: "tooltip", required: "required", smallLabel: "smallLabel", rows: "rows", clear$: "clear$", radioValues: "radioValues" }, outputs: { valueChange: "valueChange" }, 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=\"v-input-container\"\n  [ngClass]=\"{\n    'v-input--margin': margin,\n    'v-input--small-margin': smallMargin,\n  }\"\n  (click)=\"stopRadioEventPropagation($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"radioInput\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #radioInput>\n  <cds-radio-group\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"radioValue$ | async\"\n    (ngModelChange)=\"onValueChange($event)\"\n  >\n    <cds-radio *ngFor=\"let radio of radioValues\" [value]=\"radio.value\" [disabled]=\"radio.disabled\">\n      {{ radio.titleTranslationKey ? (radio.titleTranslationKey | translate) : radio.title }}\n    </cds-radio>\n  </cds-radio-group>\n</ng-template>\n", styles: [".v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i2$3.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i2$3.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'v-radio', 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=\"v-input-container\"\n  [ngClass]=\"{\n    'v-input--margin': margin,\n    'v-input--small-margin': smallMargin,\n  }\"\n  (click)=\"stopRadioEventPropagation($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"radioInput\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #radioInput>\n  <cds-radio-group\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"radioValue$ | async\"\n    (ngModelChange)=\"onValueChange($event)\"\n  >\n    <cds-radio *ngFor=\"let radio of radioValues\" [value]=\"radio.value\" [disabled]=\"radio.disabled\">\n      {{ radio.titleTranslationKey ? (radio.titleTranslationKey | translate) : radio.title }}\n    </cds-radio>\n  </cds-radio-group>\n</ng-template>\n", styles: [".v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], titleTranslationKey: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }], widthPx: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], smallMargin: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], smallLabel: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], clear$: [{
+                type: Input
+            }], radioValues: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class AutoKeyInputComponent {
+    set disabled(value) {
+        this.$disabled.set(value);
+    }
+    // Seeds the value outside reactive forms, where writeValue is never called
+    set defaultValue(value) {
+        if (value)
+            this.setValue(value);
+    }
+    set mode(value) {
+        this._mode$.next(value);
+    }
+    get mode$() {
+        return this._mode$.pipe(filter(mode => !!mode));
+    }
+    set usedKeys(value) {
+        this._usedKeys$.next(value || []);
+    }
+    set sourceText(value) {
+        this._sourceText$.next(value || '');
+    }
+    constructor(iconService) {
+        this.iconService = iconService;
+        this.labelTranslationKey = 'Key';
+        this.placeholderTranslationKey = '';
+        this.dataTestId = AUTO_KEY_INPUT_TEST_IDS.input;
+        // Read by the legacy v-form, which keys its output by component name
+        this.name = '';
+        this.margin = false;
+        this.testIds = AUTO_KEY_INPUT_TEST_IDS;
+        // Value stream the legacy v-form collects; the reactive-forms path uses onChange
+        this.inputValue$ = new BehaviorSubject('');
+        this._mode$ = new BehaviorSubject(null);
+        this._usedKeys$ = new BehaviorSubject([]);
+        this._sourceText$ = new BehaviorSubject('');
+        this.$disabled = signal(false);
+        this.value = '';
+        this.editingKey$ = new BehaviorSubject(true);
+        this.duplicateInitialized = false;
+        this.idError$ = new BehaviorSubject(null);
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        this.onValidatorChange = () => { };
+        this.validate = (control) => this.idError$.getValue() ? { idError: { value: this.idError$.getValue() } } : null;
+        this.subscription = new Subscription();
+        this.iconService.registerAll([Edit16, Close16]);
+        this.subscription.add(this.mode$.subscribe(mode => {
+            this.editingKey$.next(mode === 'edit');
+            if (mode === 'duplicate') {
+                this.duplicateInitialized = false;
+            }
+        }));
+        this.subscription.add(combineLatest([this.mode$, this.editingKey$, this._usedKeys$, this._sourceText$]).subscribe(([mode, editingKey, usedKeys, sourceText]) => {
+            if (mode === 'add' || mode === 'duplicate') {
+                this.updateKey(mode, editingKey, usedKeys, sourceText);
+            }
+        }));
+    }
+    ngOnChanges() {
+        this.onValidatorChange();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+        this.duplicateInitialized = false;
+        this.idError$.next(null);
+    }
+    setDisabledState(disabled) {
+        this.$disabled.set(disabled);
+    }
+    writeValue(value) {
+        if (value === null || value === '') {
+            this.resetInternalState();
+            return;
+        }
+        this.setValue(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    onInputChange(event) {
+        const input = event.target;
+        const key = sanitizeKey(input.value);
+        if (input.value !== key)
+            this.reflectSanitizedKey(input, key);
+        const usedKeys = this._usedKeys$.getValue();
+        this.idError$.next(usedKeys.includes(key) ? 'caseManagement.statuses.keyDuplicated' : null);
+        this.setValue(key);
+        this.onChange(this.value);
+    }
+    enableKeyEditing() {
+        this.editingKey$.next(true);
+    }
+    disableKeyEditing() {
+        this.editingKey$.next(false);
+    }
+    getUniqueKey(sourceText, usedKeys) {
+        const baseKey = toKebabCase(sourceText);
+        if (!usedKeys.includes(baseKey) || this._mode$.getValue() === 'edit') {
+            return baseKey;
+        }
+        return this.getUniqueKeyWithNumber(baseKey, usedKeys);
+    }
+    // Stripping a character leaves the model unchanged, so Angular skips the [value] binding
+    reflectSanitizedKey(input, key) {
+        const removed = input.value.length - key.length;
+        const caret = Math.max((input.selectionStart ?? input.value.length) - removed, 0);
+        input.value = key;
+        input.setSelectionRange(caret, caret);
+    }
+    setValue(value) {
+        this.value = value;
+        if (this.inputValue$.getValue() !== value)
+            this.inputValue$.next(value);
+    }
+    resetInternalState() {
+        this.setValue('');
+        this.idError$.next(null);
+        this.disableKeyEditing();
+        this.duplicateInitialized = false;
+    }
+    updateKey(mode, editingKey, usedKeys, sourceText) {
+        if (editingKey) {
+            return;
+        }
+        let newKey = sourceText ? this.getUniqueKey(sourceText, usedKeys) : '';
+        if (mode === 'duplicate' && !this.duplicateInitialized && newKey) {
+            newKey = `${newKey}-duplicate`;
+            this.duplicateInitialized = true;
+        }
+        this.setValue(newKey);
+        this.onChange(newKey);
+    }
+    getUniqueKeyWithNumber(base, usedKeys, suffix = 1) {
+        const newKey = `${base}-${suffix}`;
+        if (usedKeys.includes(newKey)) {
+            return this.getUniqueKeyWithNumber(base, usedKeys, suffix + 1);
         }
+        return newKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: RadioComponent, isStandalone: false, selector: "v-radio", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", defaultValue: "defaultValue", widthPx: "widthPx", fullWidth: "fullWidth", margin: "margin", smallMargin: "smallMargin", disabled: "disabled", tooltip: "tooltip", required: "required", smallLabel: "smallLabel", rows: "rows", clear$: "clear$", radioValues: "radioValues" }, outputs: { valueChange: "valueChange" }, 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=\"v-input-container\"\n  [ngClass]=\"{\n    'v-input--margin': margin,\n    'v-input--small-margin': smallMargin,\n  }\"\n  (click)=\"stopRadioEventPropagation($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"radioInput\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #radioInput>\n  <cds-radio-group\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"radioValue$ | async\"\n    (ngModelChange)=\"onValueChange($event)\"\n  >\n    <cds-radio *ngFor=\"let radio of radioValues\" [value]=\"radio.value\" [disabled]=\"radio.disabled\">\n      {{ radio.titleTranslationKey ? (radio.titleTranslationKey | translate) : radio.title }}\n    </cds-radio>\n  </cds-radio-group>\n</ng-template>\n", styles: [".v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i2$3.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i2$3.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutoKeyInputComponent, deps: [{ token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: AutoKeyInputComponent, isStandalone: true, selector: "valtimo-auto-key-input", inputs: { labelTranslationKey: "labelTranslationKey", placeholderTranslationKey: "placeholderTranslationKey", dataTestId: "dataTestId", name: "name", disabled: "disabled", defaultValue: "defaultValue", margin: "margin", mode: "mode", usedKeys: "usedKeys", sourceText: "sourceText" }, host: { properties: { "class.auto-key-input--margin": "this.margin" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AutoKeyInputComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => AutoKeyInputComponent),
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-label\n  *ngIf=\"{\n    mode: mode$ | async,\n    idError: idError$ | async,\n    editingKey: editingKey$ | async,\n  } as obs\"\n  [invalid]=\"!!obs.idError\"\n  [invalidText]=\"obs.idError | translate\"\n>\n  <span class=\"auto-key-label\">\n    {{ labelTranslationKey | translate }}\n\n    <ng-content></ng-content>\n  </span>\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        obs.mode === 'add' && !obs.editingKey\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!obs.editingKey || obs.mode === 'edit'\"\n      [invalid]=\"!!obs.idError\"\n      [attr.data-test-id]=\"dataTestId\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(obs.mode === 'add' || obs.mode === 'duplicate') && !obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      [attr.data-test-id]=\"testIds.editButton\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n      size=\"md\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"obs.mode === 'add' && obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n      size=\"md\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".auto-key-label{display:flex;align-items:center}:host(.auto-key-input--margin){display:block;margin-block-end:var(--v-input-margin)}.edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description", "showTooltipWhenDisabled"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutoKeyInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-radio', 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=\"v-input-container\"\n  [ngClass]=\"{\n    'v-input--margin': margin,\n    'v-input--small-margin': smallMargin,\n  }\"\n  (click)=\"stopRadioEventPropagation($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"radioInput\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #radioInput>\n  <cds-radio-group\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"radioValue$ | async\"\n    (ngModelChange)=\"onValueChange($event)\"\n  >\n    <cds-radio *ngFor=\"let radio of radioValues\" [value]=\"radio.value\" [disabled]=\"radio.disabled\">\n      {{ radio.titleTranslationKey ? (radio.titleTranslationKey | translate) : radio.title }}\n    </cds-radio>\n  </cds-radio-group>\n</ng-template>\n", styles: [".v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], titleTranslationKey: [{
-                type: Input
-            }], defaultValue: [{
-                type: Input
-            }], widthPx: [{
+            args: [{ selector: 'valtimo-auto-key-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        InputModule$1,
+                        ButtonModule,
+                        IconModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AutoKeyInputComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => AutoKeyInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-label\n  *ngIf=\"{\n    mode: mode$ | async,\n    idError: idError$ | async,\n    editingKey: editingKey$ | async,\n  } as obs\"\n  [invalid]=\"!!obs.idError\"\n  [invalidText]=\"obs.idError | translate\"\n>\n  <span class=\"auto-key-label\">\n    {{ labelTranslationKey | translate }}\n\n    <ng-content></ng-content>\n  </span>\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        obs.mode === 'add' && !obs.editingKey\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!obs.editingKey || obs.mode === 'edit'\"\n      [invalid]=\"!!obs.idError\"\n      [attr.data-test-id]=\"dataTestId\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(obs.mode === 'add' || obs.mode === 'duplicate') && !obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      [attr.data-test-id]=\"testIds.editButton\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n      size=\"md\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"obs.mode === 'add' && obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n      size=\"md\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".auto-key-label{display:flex;align-items:center}:host(.auto-key-input--margin){display:block;margin-block-end:var(--v-input-margin)}.edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i2$3.IconService }], propDecorators: { labelTranslationKey: [{
                 type: Input
-            }], fullWidth: [{
+            }], placeholderTranslationKey: [{
                 type: Input
-            }], margin: [{
+            }], dataTestId: [{
                 type: Input
-            }], smallMargin: [{
+            }], name: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], tooltip: [{
-                type: Input
-            }], required: [{
+            }], defaultValue: [{
                 type: Input
-            }], smallLabel: [{
+            }], margin: [{
+                type: HostBinding,
+                args: ['class.auto-key-input--margin']
+            }, {
                 type: Input
-            }], rows: [{
+            }], mode: [{
                 type: Input
-            }], clear$: [{
+            }], usedKeys: [{
                 type: Input
-            }], radioValues: [{
+            }], sourceText: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 /*
@@ -15846,6 +16967,7 @@ class FormComponent {
             ...this.multiInputFormComponents?.toArray(),
             ...this.radioComponents?.toArray(),
             ...this.valuePathSelectorComponents?.toArray(),
+            ...this.autoKeyInputComponents?.toArray(),
         ];
         this.componentValuesSubscription = combineLatest(valueComponents.map(component => {
             const inputComponent = component;
@@ -15902,13 +17024,14 @@ class FormComponent {
             this.multiInputFormComponents.changes.pipe(startWith(null)),
             this.radioComponents.changes.pipe(startWith(null)),
             this.valuePathSelectorComponents.changes.pipe(startWith(null)),
+            this.autoKeyInputComponents.changes.pipe(startWith(null)),
         ]).subscribe(() => {
             this.closeComponentValuesSubscription();
             this.openComponentValuesSubscription();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormComponent, isStandalone: false, selector: "v-form", inputs: { className: "className" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "inputComponents", predicate: InputComponent }, { propertyName: "selectComponents", predicate: SelectComponent }, { propertyName: "multiInputComponents", predicate: CarbonMultiInputComponent }, { propertyName: "datePickerComponents", predicate: DatePickerComponent }, { propertyName: "multiInputFormComponents", predicate: MultiInputFormComponent }, { propertyName: "radioComponents", predicate: RadioComponent }, { propertyName: "valuePathSelectorComponents", predicate: ValuePathSelectorComponent }], 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<form [ngClass]=\"'v-form ' + className\" onsubmit=\"return false;\">\n  <ng-content></ng-content>\n</form>\n", styles: [".v-form{display:flex;flex-direction:column}\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormComponent, isStandalone: false, selector: "v-form", inputs: { className: "className" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "inputComponents", predicate: InputComponent }, { propertyName: "selectComponents", predicate: SelectComponent }, { propertyName: "multiInputComponents", predicate: CarbonMultiInputComponent }, { propertyName: "datePickerComponents", predicate: DatePickerComponent }, { propertyName: "multiInputFormComponents", predicate: MultiInputFormComponent }, { propertyName: "radioComponents", predicate: RadioComponent }, { propertyName: "valuePathSelectorComponents", predicate: ValuePathSelectorComponent }, { propertyName: "autoKeyInputComponents", predicate: AutoKeyInputComponent }], 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<form [ngClass]=\"'v-form ' + className\" onsubmit=\"return false;\">\n  <ng-content></ng-content>\n</form>\n", styles: [".v-form{display:flex;flex-direction:column}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -15934,6 +17057,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], valuePathSelectorComponents: [{
                 type: ContentChildren,
                 args: [ValuePathSelectorComponent]
+            }], autoKeyInputComponents: [{
+                type: ContentChildren,
+                args: [AutoKeyInputComponent]
             }], className: [{
                 type: Input
             }], valueChange: [{
@@ -16159,13 +17285,13 @@ class SearchFieldsComponent {
             this.expand();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i3$1.DocumentService }, { token: i1.TranslateService }, { token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i3$2.DocumentService }, { token: i1.TranslateService }, { token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SearchFieldsComponent, isStandalone: false, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", caseDefinitionKey: "caseDefinitionKey", setValuesSubject$: "setValuesSubject$", clearValuesSubject$: "clearValuesSubject$", defaultValues: "defaultValues", disableSaveSearch: "disableSaveSearch", inputDisabled: "inputDisabled", externalSearchField: "externalSearchField", canSaveSearch: "canSaveSearch" }, outputs: { doSearch: "doSearch", saveSearchEvent: "saveSearchEvent", clearEvent: "clearEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!loading\">\n  <cds-accordion>\n    <cds-accordion-item\n      [attr.data-test-id]=\"testIds.accordionItem\"\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (selected)=\"toggleExpanded()\"\n      [expanded]=\"expanded$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n    </cds-accordion-item>\n  </cds-accordion>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\"><cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <ng-container *ngIf=\"searchFields$ | async as searchFields\">\n    <ng-container\n      *ngIf=\"{\n        noSearchFields: (!searchFields || searchFields.length === 0) && !externalSearchField,\n      } as vars\"\n    >\n      <div\n        *ngIf=\"!vars.noSearchFields\"\n        class=\"search-fields-container\"\n        [ngClass]=\"{'search-fields-container--hidden': (expanded$ | async) === false}\"\n        [cdsLayer]=\"1\"\n      >\n        <ng-content></ng-content>\n\n        <ng-container *ngFor=\"let searchField of searchFields\">\n          <div class=\"search-field-container\">\n            <ng-container\n              *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n            ></ng-container>\n          </div>\n        </ng-container>\n      </div>\n\n      <div class=\"meta-container\" *ngIf=\"expanded$ | async\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate; context: {noSearchFields: vars.noSearchFields}\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      values: values$ | async,\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key),\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateSingleSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateMultiSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [attr.data-test-id]=\"searchFieldTestIdPrefix + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateSingleSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'single-select-dropdown' ||\n        searchField.fieldType === 'single_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateMultiSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'multi-select-dropdown' ||\n        searchField.fieldType === 'multi_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [multiple]=\"true\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div\n    class=\"buttons-container\"\n    *ngIf=\"\n      !noSearchFields && {expanded: expanded$ | async, isSearchEmpty: isSearchEmpty$ | async} as obs\n    \"\n  >\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        [attr.data-test-id]=\"testIds.clearButton\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded && canSaveSearch\"\n        cdsButton=\"secondary\"\n        data-testid=\"search-fields-save-button\"\n        [attr.data-test-id]=\"testIds.saveButton\"\n        [disabled]=\"disableSaveSearch && obs.isSearchEmpty\"\n        (click)=\"saveSearch()\"\n        type=\"button\"\n        id=\"save\"\n      >\n        <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.saveButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        [attr.data-test-id]=\"testIds.searchButton\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [attr.data-test-id]=\"testIds.noFieldsMessage\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "component", type: FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "placeholder", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime", "carbonTheme"], outputs: ["valueChange"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i2$3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i2$3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { 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: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SearchFieldsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-search-fields', 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<ng-container *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!loading\">\n  <cds-accordion>\n    <cds-accordion-item\n      [attr.data-test-id]=\"testIds.accordionItem\"\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (selected)=\"toggleExpanded()\"\n      [expanded]=\"expanded$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n    </cds-accordion-item>\n  </cds-accordion>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\"><cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <ng-container *ngIf=\"searchFields$ | async as searchFields\">\n    <ng-container\n      *ngIf=\"{\n        noSearchFields: (!searchFields || searchFields.length === 0) && !externalSearchField,\n      } as vars\"\n    >\n      <div\n        *ngIf=\"!vars.noSearchFields\"\n        class=\"search-fields-container\"\n        [ngClass]=\"{'search-fields-container--hidden': (expanded$ | async) === false}\"\n        [cdsLayer]=\"1\"\n      >\n        <ng-content></ng-content>\n\n        <ng-container *ngFor=\"let searchField of searchFields\">\n          <div class=\"search-field-container\">\n            <ng-container\n              *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n            ></ng-container>\n          </div>\n        </ng-container>\n      </div>\n\n      <div class=\"meta-container\" *ngIf=\"expanded$ | async\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate; context: {noSearchFields: vars.noSearchFields}\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      values: values$ | async,\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key),\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateSingleSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateMultiSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [attr.data-test-id]=\"searchFieldTestIdPrefix + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateSingleSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'single-select-dropdown' ||\n        searchField.fieldType === 'single_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateMultiSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'multi-select-dropdown' ||\n        searchField.fieldType === 'multi_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [multiple]=\"true\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div\n    class=\"buttons-container\"\n    *ngIf=\"\n      !noSearchFields && {expanded: expanded$ | async, isSearchEmpty: isSearchEmpty$ | async} as obs\n    \"\n  >\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        [attr.data-test-id]=\"testIds.clearButton\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded && canSaveSearch\"\n        cdsButton=\"secondary\"\n        data-testid=\"search-fields-save-button\"\n        [attr.data-test-id]=\"testIds.saveButton\"\n        [disabled]=\"disableSaveSearch && obs.isSearchEmpty\"\n        (click)=\"saveSearch()\"\n        type=\"button\"\n        id=\"save\"\n      >\n        <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.saveButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        [attr.data-test-id]=\"testIds.searchButton\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [attr.data-test-id]=\"testIds.noFieldsMessage\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i3$1.DocumentService }, { type: i1.TranslateService }, { type: i2$3.IconService }], propDecorators: { loading: [{
+        }], ctorParameters: () => [{ type: i3$2.DocumentService }, { type: i1.TranslateService }, { type: i2$3.IconService }], propDecorators: { loading: [{
                 type: Input
             }], searchFields: [{
                 type: Input
@@ -17645,13 +18771,13 @@ class TableComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableComponent, deps: [{ token: i3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableComponent, deps: [{ token: i3$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TableComponent, isStandalone: false, selector: "v-table", inputs: { items: "items", columns: "columns", loading: "loading", showEditButtons: "showEditButtons", showPagination: "showPagination", editButtonTranslationKey: "editButtonTranslationKey", itemsTranslationKey: "itemsTranslationKey", noResultsTranslationKey: "noResultsTranslationKey", mobileBreakpointPx: "mobileBreakpointPx", amountOfLoadingRows: "amountOfLoadingRows", collectionSize: "collectionSize", page: "page", size: "size" }, outputs: { editButtonClicked: "editButtonClicked", paginationSizeSet: "paginationSizeSet", paginationPageSet: "paginationPageSet" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" (click)=\"editButtonClicked.emit(item)\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)',\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" [disabled]=\"true\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)',\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('previous')\" [disabled]=\"loading\">\n        {{ 'interface.previous' | translate }}\n      </button>\n    </span>\n\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('next')\" [disabled]=\"loading\">\n        {{ 'interface.nextArrow' | translate }}\n      </button>\n    </span>\n  </div>\n</ng-template>\n", styles: [".v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-table', 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<ng-container *ngIf=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" (click)=\"editButtonClicked.emit(item)\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)',\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" [disabled]=\"true\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)',\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('previous')\" [disabled]=\"loading\">\n        {{ 'interface.previous' | translate }}\n      </button>\n    </span>\n\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('next')\" [disabled]=\"loading\">\n        {{ 'interface.nextArrow' | translate }}\n      </button>\n    </span>\n  </div>\n</ng-template>\n", styles: [".v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i3.BreakpointObserver }], propDecorators: { items: [{
+        }], ctorParameters: () => [{ type: i3$1.BreakpointObserver }], propDecorators: { items: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -18698,186 +19824,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Output
             }] } });
 
-/*
- * Copyright 2015-2026 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class AutoKeyInputComponent {
-    set mode(value) {
-        this._mode$.next(value);
-    }
-    get mode$() {
-        return this._mode$.pipe(filter(mode => !!mode));
-    }
-    set usedKeys(value) {
-        this._usedKeys$.next(value || []);
-    }
-    set sourceText(value) {
-        this._sourceText$.next(value || '');
-    }
-    constructor(iconService) {
-        this.iconService = iconService;
-        this.labelTranslationKey = 'Key';
-        this.placeholderTranslationKey = '';
-        this.testIds = AUTO_KEY_INPUT_TEST_IDS;
-        this._mode$ = new BehaviorSubject(null);
-        this._usedKeys$ = new BehaviorSubject([]);
-        this._sourceText$ = new BehaviorSubject('');
-        this.$disabled = signal(false);
-        this.value = '';
-        this.editingKey$ = new BehaviorSubject(true);
-        this.duplicateInitialized = false;
-        this.idError$ = new BehaviorSubject(null);
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
-        this.onValidatorChange = () => { };
-        this.validate = (control) => this.idError$.getValue() ? { idError: { value: this.idError$.getValue() } } : null;
-        this.subscription = new Subscription();
-        this.iconService.registerAll([Edit16, Close16]);
-        this.subscription.add(this.mode$.subscribe(mode => {
-            this.editingKey$.next(mode === 'edit');
-            if (mode === 'duplicate') {
-                this.duplicateInitialized = false;
-            }
-        }));
-        this.subscription.add(combineLatest([this.mode$, this.editingKey$, this._usedKeys$, this._sourceText$]).subscribe(([mode, editingKey, usedKeys, sourceText]) => {
-            if (mode === 'add' || mode === 'duplicate') {
-                this.updateKey(mode, editingKey, usedKeys, sourceText);
-            }
-        }));
-    }
-    ngOnChanges() {
-        this.onValidatorChange();
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-        this.duplicateInitialized = false;
-        this.idError$.next(null);
-    }
-    setDisabledState(disabled) {
-        this.$disabled.set(disabled);
-    }
-    writeValue(value) {
-        if (value === null || value === '') {
-            this.resetInternalState();
-            return;
-        }
-        this.value = value ?? '';
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    registerOnValidatorChange(fn) {
-        this.onValidatorChange = fn;
-    }
-    onInputChange(event) {
-        const usedKeys = this._usedKeys$.getValue();
-        this.idError$.next(usedKeys.includes(event.target.value) ? 'caseManagement.statuses.keyDuplicated' : null);
-        this.onChange((this.value = event.target.value));
-    }
-    enableKeyEditing() {
-        this.editingKey$.next(true);
-    }
-    disableKeyEditing() {
-        this.editingKey$.next(false);
-    }
-    getUniqueKey(sourceText, usedKeys) {
-        const baseKey = sourceText
-            .toLowerCase()
-            .replace(/[^a-z0-9-_]+|-[^a-z0-9]+/g, '-')
-            .replace(/_[-_]+/g, '_')
-            .replace(/^[^a-z]+/g, '');
-        if (!usedKeys.includes(baseKey) || this._mode$.getValue() === 'edit') {
-            return baseKey;
-        }
-        return this.getUniqueKeyWithNumber(baseKey, usedKeys);
-    }
-    resetInternalState() {
-        this.value = '';
-        this.idError$.next(null);
-        this.disableKeyEditing();
-        this.duplicateInitialized = false;
-    }
-    updateKey(mode, editingKey, usedKeys, sourceText) {
-        if (editingKey) {
-            return;
-        }
-        let newKey = sourceText ? this.getUniqueKey(sourceText, usedKeys) : '';
-        if (mode === 'duplicate' && !this.duplicateInitialized && newKey) {
-            newKey = `${newKey}-duplicate`;
-            this.duplicateInitialized = true;
-        }
-        this.value = newKey;
-        this.onChange(newKey);
-    }
-    getUniqueKeyWithNumber(base, usedKeys, suffix = 1) {
-        const newKey = `${base}-${suffix}`;
-        if (usedKeys.includes(newKey)) {
-            return this.getUniqueKeyWithNumber(base, usedKeys, suffix + 1);
-        }
-        return newKey;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutoKeyInputComponent, deps: [{ token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: AutoKeyInputComponent, isStandalone: true, selector: "valtimo-auto-key-input", inputs: { labelTranslationKey: "labelTranslationKey", placeholderTranslationKey: "placeholderTranslationKey", mode: "mode", usedKeys: "usedKeys", sourceText: "sourceText" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AutoKeyInputComponent),
-                multi: true,
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => AutoKeyInputComponent),
-                multi: true,
-            },
-        ], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-label\n  *ngIf=\"{\n    mode: mode$ | async,\n    idError: idError$ | async,\n    editingKey: editingKey$ | async,\n  } as obs\"\n  [invalid]=\"!!obs.idError\"\n  [invalidText]=\"obs.idError | translate\"\n>\n  {{ labelTranslationKey | translate }}\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        obs.mode === 'add' && !obs.editingKey\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!obs.editingKey || obs.mode === 'edit'\"\n      [invalid]=\"!!obs.idError\"\n      [attr.data-test-id]=\"testIds.input\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(obs.mode === 'add' || obs.mode === 'duplicate') && !obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      [attr.data-test-id]=\"testIds.editButton\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"obs.mode === 'add' && obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description", "showTooltipWhenDisabled"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutoKeyInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-auto-key-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        TranslateModule,
-                        InputModule$1,
-                        ButtonModule,
-                        IconModule,
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AutoKeyInputComponent),
-                            multi: true,
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => AutoKeyInputComponent),
-                            multi: true,
-                        },
-                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-label\n  *ngIf=\"{\n    mode: mode$ | async,\n    idError: idError$ | async,\n    editingKey: editingKey$ | async,\n  } as obs\"\n  [invalid]=\"!!obs.idError\"\n  [invalidText]=\"obs.idError | translate\"\n>\n  {{ labelTranslationKey | translate }}\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        obs.mode === 'add' && !obs.editingKey\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!obs.editingKey || obs.mode === 'edit'\"\n      [invalid]=\"!!obs.idError\"\n      [attr.data-test-id]=\"testIds.input\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(obs.mode === 'add' || obs.mode === 'duplicate') && !obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      [attr.data-test-id]=\"testIds.editButton\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"obs.mode === 'add' && obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.IconService }], propDecorators: { labelTranslationKey: [{
-                type: Input
-            }], placeholderTranslationKey: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], usedKeys: [{
-                type: Input
-            }], sourceText: [{
-                type: Input
-            }] } });
-
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -19245,7 +20191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19267,6 +20213,7 @@ class MdiIconSelectorComponent {
         this.placeholderTranslationKey = 'interface.iconPlaceholder';
         this.appendInline = true;
         this.dropUp = false;
+        this.fullWidth = false;
         this.$disabled = signal(false);
         this.value$ = new BehaviorSubject(null);
         this.items$ = combineLatest([
@@ -19297,13 +20244,13 @@ class MdiIconSelectorComponent {
         this.onChangeFn(event.key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MdiIconSelectorComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: MdiIconSelectorComponent, isStandalone: true, selector: "valtimo-mdi-icon-selector", inputs: { labelTranslationKey: "labelTranslationKey", tooltipTranslationKey: "tooltipTranslationKey", placeholderTranslationKey: "placeholderTranslationKey", appendInline: "appendInline", dropUp: "dropUp" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: MdiIconSelectorComponent, isStandalone: true, selector: "valtimo-mdi-icon-selector", inputs: { labelTranslationKey: "labelTranslationKey", tooltipTranslationKey: "tooltipTranslationKey", placeholderTranslationKey: "placeholderTranslationKey", appendInline: "appendInline", dropUp: "dropUp", fullWidth: "fullWidth" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MdiIconSelectorComponent),
                 multi: 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-text-label>\n  <v-input-label\n    [title]=\"labelTranslationKey | translate\"\n    [tooltip]=\"tooltipTranslationKey | translate\"\n  >\n  </v-input-label>\n\n  <div class=\"mdi-icon-selector\">\n    <span class=\"mdi-icon-preview mdi\" [ngClass]=\"(value$ | async) || 'mdi-minus'\"></span>\n\n    <cds-combo-box\n      [items]=\"(items$ | async) || []\"\n      [placeholder]=\"placeholderTranslationKey | translate\"\n      [disabled]=\"$disabled()\"\n      (selected)=\"onSelected($event)\"\n      [appendInline]=\"appendInline\"\n      [dropUp]=\"dropUp\"\n      (blur)=\"onTouched()\"\n    >\n      <cds-dropdown-list [listTpl]=\"iconListTemplate\"></cds-dropdown-list>\n    </cds-combo-box>\n  </div>\n</cds-text-label>\n\n<ng-template #iconListTemplate let-item=\"item\">\n  <div class=\"mdi-list-item\">\n    <span class=\"mdi\" [ngClass]=\"item.key\" aria-hidden=\"true\"></span>\n\n    <span>{{ item.content }}</span>\n  </div>\n</ng-template>\n", styles: [".mdi-icon-selector{display:flex;align-items:center;gap:8px;width:350px}.mdi-icon-selector cds-combo-box{flex:1 1 auto;min-width:0}:host ::ng-deep .cds--list-box{background:var(--cds-layer-01)}.mdi-icon-preview{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:18px}.mdi-list-item{display:flex;flex-direction:row;gap:8px;align-items:center}.mdi-list-item .mdi{font-size:16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i2$3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-text-label>\n  <v-input-label\n    [title]=\"labelTranslationKey | translate\"\n    [tooltip]=\"tooltipTranslationKey | translate\"\n  >\n  </v-input-label>\n\n  <div class=\"mdi-icon-selector\" [class.mdi-icon-selector--full-width]=\"fullWidth\">\n    <span class=\"mdi-icon-preview mdi\" [ngClass]=\"(value$ | async) || 'mdi-minus'\"></span>\n\n    <cds-combo-box\n      [items]=\"(items$ | async) || []\"\n      [placeholder]=\"placeholderTranslationKey | translate\"\n      [disabled]=\"$disabled()\"\n      (selected)=\"onSelected($event)\"\n      [appendInline]=\"appendInline\"\n      [dropUp]=\"dropUp\"\n      (blur)=\"onTouched()\"\n    >\n      <cds-dropdown-list [listTpl]=\"iconListTemplate\"></cds-dropdown-list>\n    </cds-combo-box>\n  </div>\n</cds-text-label>\n\n<ng-template #iconListTemplate let-item=\"item\">\n  <div class=\"mdi-list-item\">\n    <span class=\"mdi\" [ngClass]=\"item.key\" aria-hidden=\"true\"></span>\n\n    <span>{{ item.content }}</span>\n  </div>\n</ng-template>\n", styles: [".mdi-icon-selector{display:flex;align-items:center;gap:8px;width:350px}.mdi-icon-selector cds-combo-box{flex:1 1 auto;min-width:0}.mdi-icon-selector--full-width{width:100%}:host ::ng-deep .cds--list-box{background:var(--cds-field)}.mdi-icon-preview{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:18px}.mdi-list-item{display:flex;flex-direction:row;gap:8px;align-items:center}.mdi-list-item .mdi{font-size:16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i2$3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MdiIconSelectorComponent, decorators: [{
             type: Component,
@@ -19322,7 +20269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                             useExisting: forwardRef(() => MdiIconSelectorComponent),
                             multi: true,
                         },
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-text-label>\n  <v-input-label\n    [title]=\"labelTranslationKey | translate\"\n    [tooltip]=\"tooltipTranslationKey | translate\"\n  >\n  </v-input-label>\n\n  <div class=\"mdi-icon-selector\">\n    <span class=\"mdi-icon-preview mdi\" [ngClass]=\"(value$ | async) || 'mdi-minus'\"></span>\n\n    <cds-combo-box\n      [items]=\"(items$ | async) || []\"\n      [placeholder]=\"placeholderTranslationKey | translate\"\n      [disabled]=\"$disabled()\"\n      (selected)=\"onSelected($event)\"\n      [appendInline]=\"appendInline\"\n      [dropUp]=\"dropUp\"\n      (blur)=\"onTouched()\"\n    >\n      <cds-dropdown-list [listTpl]=\"iconListTemplate\"></cds-dropdown-list>\n    </cds-combo-box>\n  </div>\n</cds-text-label>\n\n<ng-template #iconListTemplate let-item=\"item\">\n  <div class=\"mdi-list-item\">\n    <span class=\"mdi\" [ngClass]=\"item.key\" aria-hidden=\"true\"></span>\n\n    <span>{{ item.content }}</span>\n  </div>\n</ng-template>\n", styles: [".mdi-icon-selector{display:flex;align-items:center;gap:8px;width:350px}.mdi-icon-selector cds-combo-box{flex:1 1 auto;min-width:0}:host ::ng-deep .cds--list-box{background:var(--cds-layer-01)}.mdi-icon-preview{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:18px}.mdi-list-item{display:flex;flex-direction:row;gap:8px;align-items:center}.mdi-list-item .mdi{font-size:16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-text-label>\n  <v-input-label\n    [title]=\"labelTranslationKey | translate\"\n    [tooltip]=\"tooltipTranslationKey | translate\"\n  >\n  </v-input-label>\n\n  <div class=\"mdi-icon-selector\" [class.mdi-icon-selector--full-width]=\"fullWidth\">\n    <span class=\"mdi-icon-preview mdi\" [ngClass]=\"(value$ | async) || 'mdi-minus'\"></span>\n\n    <cds-combo-box\n      [items]=\"(items$ | async) || []\"\n      [placeholder]=\"placeholderTranslationKey | translate\"\n      [disabled]=\"$disabled()\"\n      (selected)=\"onSelected($event)\"\n      [appendInline]=\"appendInline\"\n      [dropUp]=\"dropUp\"\n      (blur)=\"onTouched()\"\n    >\n      <cds-dropdown-list [listTpl]=\"iconListTemplate\"></cds-dropdown-list>\n    </cds-combo-box>\n  </div>\n</cds-text-label>\n\n<ng-template #iconListTemplate let-item=\"item\">\n  <div class=\"mdi-list-item\">\n    <span class=\"mdi\" [ngClass]=\"item.key\" aria-hidden=\"true\"></span>\n\n    <span>{{ item.content }}</span>\n  </div>\n</ng-template>\n", styles: [".mdi-icon-selector{display:flex;align-items:center;gap:8px;width:350px}.mdi-icon-selector cds-combo-box{flex:1 1 auto;min-width:0}.mdi-icon-selector--full-width{width:100%}:host ::ng-deep .cds--list-box{background:var(--cds-field)}.mdi-icon-preview{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:18px}.mdi-list-item{display:flex;flex-direction:row;gap:8px;align-items:center}.mdi-list-item .mdi{font-size:16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { labelTranslationKey: [{
                 type: Input
             }], tooltipTranslationKey: [{
@@ -19333,6 +20280,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], dropUp: [{
                 type: Input
+            }], fullWidth: [{
+                type: Input
             }] } });
 
 /*
@@ -21079,5 +22028,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARBITRARY_AMOUNT_VALUE_TEST_IDS, AUTO_KEY_INPUT_TEST_IDS, AdminSettingsService, Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, AssignmentComponent, AutoKeyInputComponent, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, COLOR_PICKER_TEST_IDS, CONFIRMATION_MODAL_TEST_IDS, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CaseCountPipe, CaseTagsSelectorComponent, CdsThemeService, ChoiceFieldService, ColorPickerComponent, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, ContextMenuDirective, CtrlClickDirective, CurrentCarbonTheme, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DateTimePickerComponent, DigitOnlyDirective, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, EllipsisPipe, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoMailPreviewComponent, FormIoModule, FormIoStateService, FormIoTagsService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, JSON_EDITOR_TEST_IDS, JsonEditorComponent, KEY_DROPDOWN_VALUE_TEST_IDS, KEY_VALUE_PATH_SELECTOR_TEST_IDS, KEY_VALUE_TEST_IDS, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, ListColumnViewComponent, MULTI_INPUT_TEST_IDS, MdiIconSelectorComponent, MdiIconViewerComponent, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, ObjectManagementSelectComponent, ObjectManagementSelectService, ObserveSizeDirective, OverflowMenuComponent, OverflowMenuModule, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, POPULAR_MDI_ICONS, PageHeaderComponent, PageHeaderModule, PageHeaderService, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, QUICK_SEARCH_SERVICE, QuickSearchComponent, QuickSearchStateService, RIGHT_SIDEBAR_TEST_IDS, RadioComponent, RadioModule, ReadOnlyDirective, RemoveClassnamesDirective, RenderInBodyComponent, RenderInPageHeaderDirective, RenderPageHeaderDirective, RightSidebarComponent, RightSidebarModule, SCHEMA_EDITOR_REQUIRED_PROPERTY_TEST_ID_PREFIX, SCHEMA_EDITOR_TEST_IDS, SEARCH_FIELDS_TEST_IDS, SEARCH_FIELD_TEST_ID_PREFIX, SINGLE_VALUE_TEST_IDS, STEPPER_FOOTER_STEP_TEST_IDS, SchemaEditorComponent, SearchFieldsComponent, SearchFieldsModule, SelectComponent, SelectModule, SelectableCarbonTheme, ShellService, SpinnerComponent, SpinnerModule, StatusSelectorComponent, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TAG_ELLIPSIS_LIMIT, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VALUE_PATH_SELECTOR_DROPDOWN_VALUE_TEST_IDS, VALUE_PATH_SELECTOR_TEST_IDS, VALUE_PATH_SELECTOR_VALUE_TEST_IDS, VModalComponent, VModalModule, ValtimoCdsModalDirective, ValtimoModalService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ValuePathType, ViewContentService, ViewType, WIDGET_LAYOUT_TRANSLATION_KEYS, WIDGET_LAYOUT_VALUES, WIDGET_ROW_HEIGHT_DEFAULT, WIDGET_ROW_HEIGHT_GAP_FREE, WebcamComponent, WebcamModule, WidgetComponent, WidgetLayout, WidgetLayoutInfoComponent, WidgetModule, applyDataGridPatch, collectObjectLevels, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, menuInitializer, muuriGapFreeLayout, pendingChangesGuard, registerCustomFormioComponent, registerCustomTag, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioMailPreviewComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent, registerObjectManagementSelectFormioComponent, resolveWidgetLayout, runAfterCarbonModalClosed, setRequiredOnSchema };
+export { ARBITRARY_AMOUNT_VALUE_TEST_IDS, AUTO_KEY_INPUT_TEST_IDS, AdminSettingsService, Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, AssignmentComponent, AutoKeyInputComponent, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, COLOR_PICKER_TEST_IDS, CONFIRMATION_MODAL_TEST_IDS, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CaseCountPipe, CaseTagsSelectorComponent, CdsThemeService, ChoiceFieldService, ColorPickerComponent, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, ContextMenuDirective, CtrlClickDirective, CurrentCarbonTheme, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DateTimePickerComponent, DigitOnlyDirective, DragDropListComponent, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, EllipsisPipe, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoMailPreviewComponent, FormIoModule, FormIoStateService, FormIoTagsService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, JSON_EDITOR_TEST_IDS, JsonEditorComponent, KEY_DROPDOWN_VALUE_TEST_IDS, KEY_VALUE_PATH_SELECTOR_TEST_IDS, KEY_VALUE_TEST_IDS, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, ListColumnViewComponent, MENU_CONFIGURATION_VERSION, MENU_ITEM_CATALOG, MULTI_INPUT_TEST_IDS, MdiIconSelectorComponent, MdiIconViewerComponent, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, ObjectManagementSelectComponent, ObjectManagementSelectService, ObserveSizeDirective, OverflowMenuComponent, OverflowMenuModule, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, PLUGIN_PAGE_ROUTE, POPULAR_MDI_ICONS, PageHeaderComponent, PageHeaderModule, PageHeaderService, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, QUICK_SEARCH_SERVICE, QuickSearchComponent, QuickSearchStateService, RIGHT_SIDEBAR_TEST_IDS, RadioComponent, RadioModule, ReadOnlyDirective, RemoveClassnamesDirective, RenderInBodyComponent, RenderInPageHeaderDirective, RenderPageHeaderDirective, RightSidebarComponent, RightSidebarModule, SCHEMA_EDITOR_REQUIRED_PROPERTY_TEST_ID_PREFIX, SCHEMA_EDITOR_TEST_IDS, SEARCH_FIELDS_TEST_IDS, SEARCH_FIELD_TEST_ID_PREFIX, SECTION_HEADER_TEXT_CLASS, SINGLE_VALUE_TEST_IDS, STEPPER_FOOTER_STEP_TEST_IDS, SchemaEditorComponent, SearchFieldsComponent, SearchFieldsModule, SelectComponent, SelectModule, SelectableCarbonTheme, ShellService, SpinnerComponent, SpinnerModule, StatusSelectorComponent, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TAG_ELLIPSIS_LIMIT, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VALUE_PATH_SELECTOR_DROPDOWN_VALUE_TEST_IDS, VALUE_PATH_SELECTOR_TEST_IDS, VALUE_PATH_SELECTOR_VALUE_TEST_IDS, VModalComponent, VModalModule, ValtimoCdsModalDirective, ValtimoModalService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ValuePathType, ViewContentService, ViewType, WIDGET_LAYOUT_TRANSLATION_KEYS, WIDGET_LAYOUT_VALUES, WIDGET_ROW_HEIGHT_DEFAULT, WIDGET_ROW_HEIGHT_GAP_FREE, WebcamComponent, WebcamModule, WidgetComponent, WidgetLayout, WidgetLayoutInfoComponent, WidgetModule, applyDataGridPatch, buildMenuConfigurationFromRuntimeMenu, collectObjectLevels, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, findMenuCatalogEntryByLink, findMenuCatalogGroupEntryByTitle, getMenuCatalogEntry, hasSavedMenuConfiguration, includeFunctionToName, menuInitializer, menuLinkToString, muuriGapFreeLayout, normaliseMenuLink, parseIncludeFunction, pendingChangesGuard, registerCustomFormioComponent, registerCustomTag, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioMailPreviewComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent, registerObjectManagementSelectFormioComponent, resolveMenuConfiguration, resolveWidgetLayout, runAfterCarbonModalClosed, serializeIncludeFunction, setRequiredOnSchema };
 //# sourceMappingURL=valtimo-components.mjs.map