@valtimo/iko 13.25.0 → 13.26.0

package/fesm2022/valtimo-iko.mjs

@@ -1,32 +1,32 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, ViewChild, ViewContainerRef, signal, computed, effect, EventEmitter, Output, Inject, NgModule } from '@angular/core';
+import { Injectable, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, ViewChild, ViewContainerRef, EventEmitter, Output, signal, computed, effect, Inject, HostBinding, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule, DOCUMENT, AsyncPipe, NgIf, NgClass } from '@angular/common';
 import * as i2 from '@valtimo/shared';
-import { BaseApiService, InterceptorSkipHeader, getDisplayTypeParametersView, validateBsn, ROLE_ADMIN, IKO_TOKEN } from '@valtimo/shared';
+import { BaseApiService, InterceptorSkip, InterceptorSkipHeader, getDisplayTypeParametersView, validateBsn, ROLE_ADMIN, IKO_TOKEN } from '@valtimo/shared';
 import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { AuthGuardService } from '@valtimo/security';
 import * as i2$2 from '@valtimo/components';
-import { CarbonListModule, FormIoModule, FitPageDirective, RenderInPageHeaderDirective, SelectModule, CARBON_CONSTANTS, ValtimoCdsModalDirective, AutoKeyInputComponent, ConfirmationModalModule, ViewType, ValuePathSelectorPrefix, InputLabelModule, runAfterCarbonModalClosed, CarbonMultiInputModule, InputModule as InputModule$1, DatePickerModule, ParagraphModule, DateTimePickerComponent, FormModule } from '@valtimo/components';
+import { CarbonListModule, FormIoModule, FitPageDirective, RenderInPageHeaderDirective, SelectModule, CARBON_CONSTANTS, ValtimoCdsModalDirective, AutoKeyInputComponent, ConfirmationModalModule, ViewType, ValuePathSelectorPrefix, InputLabelModule, runAfterCarbonModalClosed, CarbonMultiInputModule, InputModule as InputModule$1, DatePickerModule, ParagraphModule, DateTimePickerComponent, FormModule, registerCustomFormioComponent } from '@valtimo/components';
 import * as i6 from 'carbon-components-angular';
 import { InputModule, PaginationModule, TilesModule, ButtonModule, ModalModule, TabsModule, IconModule, LayerModule, TooltipModule, DropdownModule, ToggleModule, LoadingModule, NumberModule, ProgressBarModule, CheckboxModule, FileUploaderModule, NotificationModule, TimePickerModule } from 'carbon-components-angular';
-import { BehaviorSubject, filter, of, switchMap, combineLatest, distinctUntilChanged, tap, map as map$1, startWith, take, Subscription, delay } from 'rxjs';
+import { BehaviorSubject, filter, of, switchMap, combineLatest, distinctUntilChanged, tap, map as map$1, ReplaySubject, startWith, take, Subscription, delay, catchError } from 'rxjs';
 import * as i2$1 from '@valtimo/layout';
 import { WidgetCollectionComponent, WidgetCustomComponent, WidgetFieldComponent, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetTableComponent, WidgetMapComponent, WidgetType, WidgetContainerComponent, ManagementWidgetDetailsComponent, WIDGET_MANAGEMENT_SERVICE, WidgetManagementComponent } from '@valtimo/layout';
 import * as i5 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
 import * as i1 from '@angular/common/http';
-import { HttpParams } from '@angular/common/http';
+import { HttpHeaders, HttpParams } from '@angular/common/http';
 import { map, take as take$1 } from 'rxjs/operators';
 import * as i1$1 from 'ngx-logger';
 import { isEqual } from 'lodash';
 import * as i3 from '@valtimo/case';
 import { CaseListActionsComponent, CaseListService } from '@valtimo/case';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { Information16, TrashCan16, InformationFilled16, Upload16, Search16 } from '@carbon/icons';
-import { toObservable } from '@angular/core/rxjs-interop';
+import { Information16, TrashCan16, InformationFilled16, Upload16, Search16, Launch16 } from '@carbon/icons';
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -72,7 +72,7 @@ class IkoApiService extends BaseApiService {
         return this.httpClient.get(this.getApiUrl(`/v1/iko-view/${ikoViewKey}/tab`));
     }
     getIkoSearchActions(ikoViewKey) {
-        return this.httpClient.get(this.getApiUrl(`/v1/iko-view/${ikoViewKey}/search-action`));
+        return this.httpClient.get(this.getApiUrl(`/v1/iko-view/${ikoViewKey}/search-action`), { headers: new HttpHeaders().set(InterceptorSkip, '404') });
     }
     getIkoWidget(ikoViewKey, tabKey) {
         return this.httpClient.get(this.getApiUrl(`/v1/iko-view/${ikoViewKey}/tab/${tabKey}/widget`));
@@ -1221,7 +1221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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.
@@ -1236,27 +1236,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * limitations under the License.
  */
 class IkoListComponent {
+    set searchParams(params) {
+        if (params)
+            this._searchParams$.next(params);
+    }
     constructor(breadcrumbService, ikoApiService, route, router) {
         this.breadcrumbService = breadcrumbService;
         this.ikoApiService = ikoApiService;
         this.route = route;
         this.router = router;
+        this.rowSelectedEvent = new EventEmitter();
         this.loading$ = new BehaviorSubject(true);
-        this.listConfig$ = combineLatest([
-            this.route.params,
-            this.route.queryParams,
-            this.ikoApiService.cachedMenuItems$,
-        ]).pipe(tap(() => this.loading$.next(true)), switchMap(([params, queryParams, menuItems]) => {
-            const currentMenuItem = menuItems.find(item => item.key === params.key);
-            this.breadcrumbService.setSecondBreadcrumb({
-                route: [`/iko/${params.key}`],
-                content: currentMenuItem?.title ?? '',
-                href: `/iko/${params.key}`,
-            });
-            return this.ikoApiService.searchIkoSearchAction(params.key, params.searchKey, {
-                filters: queryParams,
-            });
-        }), map$1(res => ({
+        this._searchParams$ = new ReplaySubject(1);
+        this.listConfig$ = this._searchParams$.pipe(switchMap(inputParams => {
+            if (inputParams && this.ikoViewKey) {
+                return of({
+                    ikoViewKey: this.ikoViewKey,
+                    searchKey: inputParams.paramKey,
+                    filters: inputParams.filters,
+                });
+            }
+            return combineLatest([
+                this.route.params,
+                this.route.queryParams,
+                this.ikoApiService.cachedMenuItems$,
+            ]).pipe(map$1(([params, queryParams, menuItems]) => {
+                const currentMenuItem = menuItems.find(item => item.key === params.key);
+                this.breadcrumbService.setSecondBreadcrumb({
+                    route: [`/iko/${params.key}`],
+                    content: currentMenuItem?.title ?? '',
+                    href: `/iko/${params.key}`,
+                });
+                return { ikoViewKey: params.key, searchKey: params.searchKey, filters: queryParams };
+            }));
+        }), tap(() => this.loading$.next(true)), switchMap(({ ikoViewKey, searchKey, filters }) => this.ikoApiService.searchIkoSearchAction(ikoViewKey, searchKey, { filters })), map$1(res => ({
             fields: res.headers.reduce((acc, curr) => [
                 ...acc,
                 ...(curr.displayType.type === 'hidden'
@@ -1274,23 +1287,44 @@ class IkoListComponent {
             ], []),
             items: res.rows.content.map(stuff => stuff.items.reduce((acc, curr) => ({ ...acc, [curr.key]: curr.value }), {})),
         })), tap(() => this.loading$.next(false)));
+        combineLatest([this.route.params, this.route.queryParams])
+            .pipe(takeUntilDestroyed())
+            .subscribe(([params, queryParams]) => {
+            if (!this.ikoViewKey && params?.key && params?.searchKey) {
+                this._searchParams$.next({ paramKey: params.searchKey, filters: queryParams });
+            }
+        });
     }
     ngOnDestroy() {
-        this.breadcrumbService.clearSecondBreadcrumb();
+        if (!this.ikoViewKey) {
+            this.breadcrumbService.clearSecondBreadcrumb();
+        }
     }
     onRowClicked(item) {
-        this.router.navigate([`details/${item.id}`], {
-            relativeTo: this.route,
-            queryParamsHandling: 'preserve',
-        });
+        if (this.rowSelectedEvent.observed) {
+            const keys = Object.keys(item).filter(k => k !== 'id');
+            this.rowSelectedEvent.emit({ id: item.id, label: keys.length > 0 ? item[keys[0]] : item.id, rowData: item });
+        }
+        else {
+            this.router.navigate([`details/${item.id}`], {
+                relativeTo: this.route,
+                queryParamsHandling: 'preserve',
+            });
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoListComponent, deps: [{ token: i2$2.BreadcrumbService }, { token: IkoApiService }, { token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: IkoListComponent, isStandalone: true, selector: "valtimo-iko-list", 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<valtimo-carbon-list\n  *ngIf=\"{\n    listConfig: listConfig$ | async,\n    loading: loading$ | async,\n  } as obs\"\n  [fields]=\"obs.listConfig?.fields\"\n  [items]=\"obs.listConfig?.items\"\n  [loading]=\"obs.loading\"\n  [hideToolbar]=\"true\"\n  (rowClicked)=\"onRowClicked($event)\"\n>\n  <valtimo-no-results\n    title=\"{{ 'ikoManagement.search.noResultsTitle' | translate }}\"\n    illustration=\"valtimo-layout/img/emptystate-no-result.svg\"\n    description=\"{{ 'ikoManagement.search.noResultsDescription' | translate }}\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: IkoListComponent, isStandalone: true, selector: "valtimo-iko-list", inputs: { ikoViewKey: "ikoViewKey", searchParams: "searchParams" }, outputs: { rowSelectedEvent: "rowSelectedEvent" }, 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<valtimo-carbon-list\n  *ngIf=\"{\n    listConfig: listConfig$ | async,\n    loading: loading$ | async,\n  } as obs\"\n  [fields]=\"obs.listConfig?.fields\"\n  [items]=\"obs.listConfig?.items\"\n  [loading]=\"obs.loading\"\n  [hideToolbar]=\"true\"\n  (rowClicked)=\"onRowClicked($event)\"\n>\n  <valtimo-no-results\n    title=\"{{ 'ikoManagement.search.noResultsTitle' | translate }}\"\n    illustration=\"valtimo-layout/img/emptystate-no-result.svg\"\n    description=\"{{ 'ikoManagement.search.noResultsDescription' | translate }}\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-iko-list', standalone: true, imports: [CommonModule, CarbonListModule, TranslatePipe], 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<valtimo-carbon-list\n  *ngIf=\"{\n    listConfig: listConfig$ | async,\n    loading: loading$ | async,\n  } as obs\"\n  [fields]=\"obs.listConfig?.fields\"\n  [items]=\"obs.listConfig?.items\"\n  [loading]=\"obs.loading\"\n  [hideToolbar]=\"true\"\n  (rowClicked)=\"onRowClicked($event)\"\n>\n  <valtimo-no-results\n    title=\"{{ 'ikoManagement.search.noResultsTitle' | translate }}\"\n    illustration=\"valtimo-layout/img/emptystate-no-result.svg\"\n    description=\"{{ 'ikoManagement.search.noResultsDescription' | translate }}\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n" }]
-        }], ctorParameters: () => [{ type: i2$2.BreadcrumbService }, { type: IkoApiService }, { type: i1$2.ActivatedRoute }, { type: i1$2.Router }] });
+        }], ctorParameters: () => [{ type: i2$2.BreadcrumbService }, { type: IkoApiService }, { type: i1$2.ActivatedRoute }, { type: i1$2.Router }], propDecorators: { ikoViewKey: [{
+                type: Input
+            }], searchParams: [{
+                type: Input
+            }], rowSelectedEvent: [{
+                type: Output
+            }] } });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -1814,6 +1848,38 @@ var SearchDropdownDataProvider;
     SearchDropdownDataProvider["JSON"] = "dropdownJsonFileDataProvider";
 })(SearchDropdownDataProvider || (SearchDropdownDataProvider = {}));
 
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -4276,13 +4342,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * limitations under the License.
  */
 class IkoSearchComponent {
-    constructor(route, router, pageTitleService, iconService, ikoApiService, translateService) {
+    set ikoViewKey(key) {
+        this._ikoViewKey$.next(key);
+    }
+    constructor(cdr, route, router, pageTitleService, iconService, ikoApiService, translateService) {
+        this.cdr = cdr;
         this.route = route;
         this.router = router;
         this.pageTitleService = pageTitleService;
         this.iconService = iconService;
         this.ikoApiService = ikoApiService;
         this.translateService = translateService;
+        this.embedded = false;
+        this.searchSubmitEvent = new EventEmitter();
+        this._ikoViewKey$ = new BehaviorSubject(null);
         this.formValues = {};
         this.dropdownSelectItemsMap = new Map();
         this.values$ = new BehaviorSubject({});
@@ -4297,24 +4370,37 @@ class IkoSearchComponent {
             id: type,
             text: this.translateService.instant(`searchFields.${type}`),
         }))));
-        this._key$ = this.route.params.pipe(map$1(params => params?.key), filter(key => !!key));
+        this._key$ = this._ikoViewKey$.pipe(switchMap(ikoViewKey => ikoViewKey
+            ? of(ikoViewKey)
+            : this.route.params.pipe(map$1(params => params?.key), filter(key => !!key))));
+        this.notFoundKey$ = new BehaviorSubject(null);
         this.ikoSearchActions$ = this._key$.pipe(switchMap(key => combineLatest([
             of(key),
             this.ikoApiService.cachedMenuItems$,
-            this.ikoApiService.getIkoSearchActions(key),
+            this.ikoApiService.getIkoSearchActions(key).pipe(catchError((error) => {
+                if (error.status === 404) {
+                    this.notFoundKey$.next(key);
+                    return of([]);
+                }
+                throw error;
+            })),
         ])), map$1(([key, menuItems, ikoSearchActions]) => {
-            const currentMenuItem = menuItems.find(item => item.key === key);
-            if (currentMenuItem && currentMenuItem?.title)
-                this.pageTitleService.setCustomPageTitle(currentMenuItem.title, true);
+            if (!this.embedded) {
+                const currentMenuItem = menuItems.find(item => item.key === key);
+                if (currentMenuItem && currentMenuItem?.title)
+                    this.pageTitleService.setCustomPageTitle(currentMenuItem.title, true);
+            }
             return ikoSearchActions;
-        }));
+        }), tap(() => this.cdr.detectChanges()));
         this.iconService.register(Search16);
     }
     ngOnInit() {
         this.openDropdownSubscription();
     }
     ngOnDestroy() {
-        this.pageTitleService.enableReset();
+        if (!this.embedded) {
+            this.pageTitleService.enableReset();
+        }
     }
     searchDisabled(params) {
         const hasMissingRequired = params.some(param => {
@@ -4348,10 +4434,15 @@ class IkoSearchComponent {
                     queryParams[param.key] = value;
                 }
             }
-            this.router.navigate([paramKey], {
-                relativeTo: this.route,
-                queryParams,
-            });
+            if (this.searchSubmitEvent.observed) {
+                this.searchSubmitEvent.emit({ paramKey, filters: queryParams });
+            }
+            else {
+                this.router.navigate([paramKey], {
+                    relativeTo: this.route,
+                    queryParams,
+                });
+            }
         });
     }
     singleValueChange(searchFieldKey, value, dataType) {
@@ -4477,8 +4568,8 @@ class IkoSearchComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoSearchComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i2$2.PageTitleService }, { token: i6.IconService }, { token: IkoApiService }, { token: i5.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: IkoSearchComponent, isStandalone: true, selector: "valtimo-iko-search", 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@if (ikoSearchActions$ | async; as ikoSearchActions) {\n  @if (ikoSearchActions.length === 0) {\n    <valtimo-no-results [title]=\"'iko.searchFieldsNoResults' | translate\"></valtimo-no-results>\n\n  } @else {\n    <h4>{{ 'iko.searchVia' | translate }}</h4>\n\n    <cds-tabs class=\"iko-search-tabs\" type=\"line\">\n      @for (param of ikoSearchActions; track param.key ?? param.fields?.[0]?.key) {\n        <cds-tab\n          (keyup.enter)=\"!searchDisabled(param.searchFields) && searchGroup(param.key, param.searchFields)\"\n          class=\"query-group\"\n          [heading]=\"param.title\"\n          [cdsLayer]=\"1\"\n        >\n          <div class=\"query-group__row\">\n            @for (field of param.searchFields; track field.key) {\n              <div\n                class=\"query-group__field\"\n                [ngClass]=\"{\n                  'query-group__field--time': field.dataType === 'time',\n                  'query-group__field--date': field.dataType === 'date',\n                  'query-group__field--datetime': field.dataType === 'datetime',\n                }\"\n              >\n                <v-input-label *ngIf=\"field.title\" [title]=\"field.title\"></v-input-label>\n\n                @if (field.dataType === 'text' && field.fieldType === 'single') {\n                  <v-input\n                    [dataTestId]=\"'iko-search-field-' + field.key\"\n                    [name]=\"field.key\"\n                    [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                    [defaultValue]=\"formValues[field.key]\"\n                    (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></v-input>\n                } @else if (field.dataType === 'text' && field.fieldType === 'range') {\n                  <v-form\n                    className=\"multiple-search-fields\"\n                    (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                  >\n                    <v-input\n                      name=\"start\"\n                      [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                    ></v-input>\n\n                    <div class=\"to-text\">\n                      <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                    </div>\n\n                    <v-input\n                      name=\"end\"\n                      [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                    ></v-input>\n                  </v-form>\n                } @else if (field.dataType === 'text' && (field.fieldType === 'single-select-dropdown' || field.fieldType === 'single_select_dropdown')) {\n                  <v-select\n                    *ngIf=\"dropdownSelectItemsMap[field.key]\"\n                    [items]=\"dropdownSelectItemsMap[field.key]\"\n                    [margin]=\"false\"\n                    [required]=\"field.required\"\n                    [name]=\"field.key\"\n                    [clearSelectionSubject$]=\"clear$\"\n                    (selectedChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    [appendInline]=\"false\"\n                  ></v-select>\n                } @else if (field.dataType === 'text' && (field.fieldType === 'multi-select-dropdown' || field.fieldType === 'multi_select_dropdown')) {\n                  <v-select\n                    *ngIf=\"dropdownSelectItemsMap[field.key]\"\n                    [items]=\"dropdownSelectItemsMap[field.key]\"\n                    [margin]=\"false\"\n                    [multiple]=\"true\"\n                    [required]=\"field.required\"\n                    [name]=\"field.key\"\n                    [clearSelectionSubject$]=\"clear$\"\n                    (selectedChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    [appendInline]=\"false\"\n                  ></v-select>\n                } @else if (field.dataType === 'number' && field.fieldType === 'single') {\n                  <v-input\n                    type=\"number\"\n                    [hideNumberSpinBox]=\"true\"\n                    [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                    (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></v-input>\n\n                } @else if (field.dataType === 'number' && field.fieldType === 'range') {\n                  <v-form\n                    className=\"multiple-search-fields\"\n                    (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                  >\n                    <v-input\n                      type=\"number\"\n                      name=\"start\"\n                      [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                    ></v-input>\n\n                    <div class=\"to-text\">\n                      <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                    </div>\n\n                    <v-input\n                      type=\"number\"\n                      name=\"end\"\n                      [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                    ></v-input>\n                  </v-form>\n                } @else if (field.dataType === 'boolean' && field.fieldType === 'single') {\n                  <v-select\n                    *ngIf=\"booleanItems$ | async as booleanItems\"\n                    [items]=\"booleanItems\"\n                    (selectedChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></v-select>\n                } @else if (field.dataType === 'time' && field.fieldType === 'single') {\n                  <cds-timepicker\n                    [placeholder]=\"'searchFields.timePlaceholder' | translate\"\n                    [ngModel]=\"formValues[field.key]\"\n                    (ngModelChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></cds-timepicker>\n\n                } @else if (field.dataType === 'time' && field.fieldType === 'range') {\n                  <v-form\n                    className=\"multiple-search-fields\"\n                    (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                  >\n                    <cds-timepicker [(ngModel)]=\"formValues[field.key + '_start']\"></cds-timepicker>\n\n                    <div class=\"to-text\">\n                      <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                    </div>\n\n                    <cds-timepicker [(ngModel)]=\"formValues[field.key + '_end']\"></cds-timepicker>\n                  </v-form>\n                } @else if (field.dataType === 'date' && field.fieldType === 'single') {\n                  <valtimo-date-time-picker\n                    [defaultDate]=\"formValues[field.key] ?? ''\"\n                    [enableTime]=\"false\"\n                    [showFieldLabel]=\"false\"\n                    (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></valtimo-date-time-picker>\n\n                } @else if (field.dataType === 'date' && field.fieldType === 'range') {\n                  <v-form\n                    className=\"multiple-search-fields\"\n                    (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                  >\n                    <valtimo-date-time-picker\n                      name=\"start\"\n                      [enableTime]=\"false\"\n                      [showFieldLabel]=\"false\"\n                    ></valtimo-date-time-picker>\n\n                    <div class=\"to-text\">\n                      <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                    </div>\n\n                    <valtimo-date-time-picker\n                      name=\"end\"\n                      [enableTime]=\"false\"\n                      [showFieldLabel]=\"false\"\n                    ></valtimo-date-time-picker>\n                  </v-form>\n                } @else if (field.dataType === 'datetime' && field.fieldType === 'single') {\n                  <valtimo-date-time-picker\n                    [enableTime]=\"true\"\n                    [showFieldLabel]=\"false\"\n                    (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></valtimo-date-time-picker>\n\n                } @else if (field.dataType === 'datetime' && field.fieldType === 'range') {\n                  <v-form\n                    className=\"multiple-search-fields\"\n                    (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                  >\n                    <valtimo-date-time-picker\n                      name=\"start\"\n                      [enableTime]=\"true\"\n                      [showFieldLabel]=\"false\"\n                    ></valtimo-date-time-picker>\n\n                    <div class=\"to-text\">\n                      <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                    </div>\n\n                    <valtimo-date-time-picker\n                      name=\"end\"\n                      [enableTime]=\"true\"\n                      [showFieldLabel]=\"false\"\n                    ></valtimo-date-time-picker>\n                  </v-form>\n                }\n              </div>\n            }\n          </div>\n\n          <button\n            cdsButton=\"primary\"\n            class=\"query-group__search-button\"\n            [disabled]=\"searchDisabled(param.searchFields)\"\n            (click)=\"searchGroup(param.key, param.searchFields)\"\n          >\n            {{ 'searchFields.searchButtonText' | translate }}\n            <svg cdsIcon=\"search\" size=\"16\"></svg>\n          </button>\n        </cds-tab>\n      }\n    </cds-tabs>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.query-group__row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.query-group__field{display:flex;flex-direction:column;flex:1 1 200px;max-width:320px}.query-group__field input{width:100%}.query-group__field--time,.query-group__field--date,.query-group__field--datetime{flex:0 0 auto;max-width:none}.query-group__label{font-size:14px;font-weight:600;color:var(--cds-text-primary)}.query-group__search-button{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;height:40px;max-height:40px;min-height:40px;padding:8px 16px;min-width:120px;white-space:nowrap;overflow:hidden;margin-left:auto}:host ::ng-deep .cds--tab-content{display:flex;flex-direction:column;gap:16px;outline:none!important;background:var(--cds-layer-01)}v-input{width:100%}::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}.iko-datetime{display:flex;gap:8px;align-items:flex-end}::ng-deep .iko-search-tabs .cds--tab-content{margin-top:24px}\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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$2.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i6.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i6.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i6.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: ParagraphModule }, { kind: "component", type: i2$2.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "ngmodule", type: TimePickerModule }, { kind: "component", type: i6.TimePicker, selector: "cds-timepicker, ibm-timepicker", inputs: ["invalid", "invalidText", "label", "hideLabel", "placeholder", "pattern", "id", "disabled", "value", "maxLength", "skeleton", "theme", "size"], outputs: ["valueChange"] }, { kind: "component", type: DateTimePickerComponent, selector: "valtimo-date-time-picker", inputs: ["fullWidth", "margin", "name", "title", "placeholder", "titleTranslationKey", "disabled", "tooltip", "required", "smallLabel", "enableTime", "carbonTheme", "dateFormat", "showFieldLabel", "datePlaceholder", "timePlaceholder", "labelText", "defaultDate", "defaultDateIsToday", "clear$"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i2$2.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i2$2.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2$2.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i2$2.PageTitleService }, { token: i6.IconService }, { token: IkoApiService }, { token: i5.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: IkoSearchComponent, isStandalone: true, selector: "valtimo-iko-search", inputs: { searchTitle: "searchTitle", embedded: "embedded", ikoViewKey: "ikoViewKey" }, outputs: { searchSubmitEvent: "searchSubmitEvent" }, host: { properties: { "class.embedded": "this.embedded" } }, 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@if (notFoundKey$ | async; as notFoundKey) {\n  <p class=\"iko-search-not-found\">{{ 'iko.viewNotFound' | translate: {key: notFoundKey} }}</p>\n} @else {\n  @if (ikoSearchActions$ | async; as ikoSearchActions) {\n    @if (ikoSearchActions.length === 0) {\n      <valtimo-no-results [title]=\"'iko.searchFieldsNoResults' | translate\"></valtimo-no-results>\n    } @else {\n      <h4>{{ searchTitle || ('iko.searchVia' | translate) }}</h4>\n\n      <cds-tabs class=\"iko-search-tabs\" type=\"line\">\n        @for (param of ikoSearchActions; track param.key ?? param.fields?.[0]?.key) {\n          <cds-tab\n            (keyup.enter)=\"\n              !searchDisabled(param.searchFields) && searchGroup(param.key, param.searchFields)\n            \"\n            class=\"query-group\"\n            [heading]=\"param.title\"\n            [cdsLayer]=\"1\"\n          >\n            <div class=\"query-group__row\">\n              @for (field of param.searchFields; track field.key) {\n                <div\n                  class=\"query-group__field\"\n                  [ngClass]=\"{\n                    'query-group__field--time': field.dataType === 'time',\n                    'query-group__field--date': field.dataType === 'date',\n                    'query-group__field--datetime': field.dataType === 'datetime',\n                  }\"\n                >\n                  <v-input-label *ngIf=\"field.title\" [title]=\"field.title\"></v-input-label>\n\n                  @if (field.dataType === 'text' && field.fieldType === 'single') {\n                    <v-input\n                      [dataTestId]=\"'iko-search-field-' + field.key\"\n                      [name]=\"field.key\"\n                      [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                      [defaultValue]=\"formValues[field.key]\"\n                      (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></v-input>\n                  } @else if (field.dataType === 'text' && field.fieldType === 'range') {\n                    <v-form\n                      className=\"multiple-search-fields\"\n                      (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    >\n                      <v-input\n                        name=\"start\"\n                        [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                      ></v-input>\n\n                      <div class=\"to-text\">\n                        <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                      </div>\n\n                      <v-input\n                        name=\"end\"\n                        [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                      ></v-input>\n                    </v-form>\n                  } @else if (\n                    field.dataType === 'text' &&\n                    (field.fieldType === 'single-select-dropdown' ||\n                      field.fieldType === 'single_select_dropdown')\n                  ) {\n                    <v-select\n                      *ngIf=\"dropdownSelectItemsMap[field.key]\"\n                      [items]=\"dropdownSelectItemsMap[field.key]\"\n                      [margin]=\"false\"\n                      [required]=\"field.required\"\n                      [name]=\"field.key\"\n                      [clearSelectionSubject$]=\"clear$\"\n                      (selectedChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                      [appendInline]=\"false\"\n                    ></v-select>\n                  } @else if (\n                    field.dataType === 'text' &&\n                    (field.fieldType === 'multi-select-dropdown' ||\n                      field.fieldType === 'multi_select_dropdown')\n                  ) {\n                    <v-select\n                      *ngIf=\"dropdownSelectItemsMap[field.key]\"\n                      [items]=\"dropdownSelectItemsMap[field.key]\"\n                      [margin]=\"false\"\n                      [multiple]=\"true\"\n                      [required]=\"field.required\"\n                      [name]=\"field.key\"\n                      [clearSelectionSubject$]=\"clear$\"\n                      (selectedChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                      [appendInline]=\"false\"\n                    ></v-select>\n                  } @else if (field.dataType === 'number' && field.fieldType === 'single') {\n                    <v-input\n                      type=\"number\"\n                      [hideNumberSpinBox]=\"true\"\n                      [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                      (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></v-input>\n                  } @else if (field.dataType === 'number' && field.fieldType === 'range') {\n                    <v-form\n                      className=\"multiple-search-fields\"\n                      (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    >\n                      <v-input\n                        type=\"number\"\n                        name=\"start\"\n                        [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                      ></v-input>\n\n                      <div class=\"to-text\">\n                        <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                      </div>\n\n                      <v-input\n                        type=\"number\"\n                        name=\"end\"\n                        [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                      ></v-input>\n                    </v-form>\n                  } @else if (field.dataType === 'boolean' && field.fieldType === 'single') {\n                    <v-select\n                      *ngIf=\"booleanItems$ | async as booleanItems\"\n                      [items]=\"booleanItems\"\n                      (selectedChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></v-select>\n                  } @else if (field.dataType === 'time' && field.fieldType === 'single') {\n                    <cds-timepicker\n                      [placeholder]=\"'searchFields.timePlaceholder' | translate\"\n                      [ngModel]=\"formValues[field.key]\"\n                      (ngModelChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></cds-timepicker>\n                  } @else if (field.dataType === 'time' && field.fieldType === 'range') {\n                    <v-form\n                      className=\"multiple-search-fields\"\n                      (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    >\n                      <cds-timepicker\n                        [(ngModel)]=\"formValues[field.key + '_start']\"\n                      ></cds-timepicker>\n\n                      <div class=\"to-text\">\n                        <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                      </div>\n\n                      <cds-timepicker [(ngModel)]=\"formValues[field.key + '_end']\"></cds-timepicker>\n                    </v-form>\n                  } @else if (field.dataType === 'date' && field.fieldType === 'single') {\n                    <valtimo-date-time-picker\n                      [defaultDate]=\"formValues[field.key] ?? ''\"\n                      [enableTime]=\"false\"\n                      [showFieldLabel]=\"false\"\n                      (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></valtimo-date-time-picker>\n                  } @else if (field.dataType === 'date' && field.fieldType === 'range') {\n                    <v-form\n                      className=\"multiple-search-fields\"\n                      (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    >\n                      <valtimo-date-time-picker\n                        name=\"start\"\n                        [enableTime]=\"false\"\n                        [showFieldLabel]=\"false\"\n                      ></valtimo-date-time-picker>\n\n                      <div class=\"to-text\">\n                        <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                      </div>\n\n                      <valtimo-date-time-picker\n                        name=\"end\"\n                        [enableTime]=\"false\"\n                        [showFieldLabel]=\"false\"\n                      ></valtimo-date-time-picker>\n                    </v-form>\n                  } @else if (field.dataType === 'datetime' && field.fieldType === 'single') {\n                    <valtimo-date-time-picker\n                      [enableTime]=\"true\"\n                      [showFieldLabel]=\"false\"\n                      (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></valtimo-date-time-picker>\n                  } @else if (field.dataType === 'datetime' && field.fieldType === 'range') {\n                    <v-form\n                      className=\"multiple-search-fields\"\n                      (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    >\n                      <valtimo-date-time-picker\n                        name=\"start\"\n                        [enableTime]=\"true\"\n                        [showFieldLabel]=\"false\"\n                      ></valtimo-date-time-picker>\n\n                      <div class=\"to-text\">\n                        <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                      </div>\n\n                      <valtimo-date-time-picker\n                        name=\"end\"\n                        [enableTime]=\"true\"\n                        [showFieldLabel]=\"false\"\n                      ></valtimo-date-time-picker>\n                    </v-form>\n                  }\n                </div>\n              }\n            </div>\n\n            <button\n              cdsButton=\"primary\"\n              class=\"query-group__search-button\"\n              [disabled]=\"searchDisabled(param.searchFields)\"\n              (click)=\"searchGroup(param.key, param.searchFields)\"\n            >\n              {{ 'searchFields.searchButtonText' | translate }}\n              <svg cdsIcon=\"search\" size=\"16\"></svg>\n            </button>\n          </cds-tab>\n        }\n      </cds-tabs>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.query-group__row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.query-group__field{display:flex;flex-direction:column;flex:1 1 200px;max-width:320px}.query-group__field input{width:100%}.query-group__field--time,.query-group__field--date,.query-group__field--datetime{flex:0 0 auto;max-width:none}.query-group__label{font-size:14px;font-weight:600;color:var(--cds-text-primary)}.query-group__search-button{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;height:40px;max-height:40px;min-height:40px;padding:8px 16px;min-width:120px;white-space:nowrap;overflow:hidden;margin-left:auto}:host ::ng-deep .cds--tab-content{display:flex;flex-direction:column;gap:16px;outline:none!important;background:var(--cds-layer-01)}v-input{width:100%}::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}.iko-datetime{display:flex;gap:8px;align-items:flex-end}::ng-deep .iko-search-tabs .cds--tab-content{margin-top:24px}:host.embedded{gap:8px}:host.embedded ::ng-deep .iko-search-tabs .cds--tab-content{padding:0}:host.embedded ::ng-deep .query-group__search-button{margin-left:auto}\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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$2.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i6.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i6.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i6.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: ParagraphModule }, { kind: "component", type: i2$2.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "ngmodule", type: TimePickerModule }, { kind: "component", type: i6.TimePicker, selector: "cds-timepicker, ibm-timepicker", inputs: ["invalid", "invalidText", "label", "hideLabel", "placeholder", "pattern", "id", "disabled", "value", "maxLength", "skeleton", "theme", "size"], outputs: ["valueChange"] }, { kind: "component", type: DateTimePickerComponent, selector: "valtimo-date-time-picker", inputs: ["fullWidth", "margin", "name", "title", "placeholder", "titleTranslationKey", "disabled", "tooltip", "required", "smallLabel", "enableTime", "carbonTheme", "dateFormat", "showFieldLabel", "datePlaceholder", "timePlaceholder", "labelText", "defaultDate", "defaultDateIsToday", "clear$"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i2$2.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i2$2.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2$2.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoSearchComponent, decorators: [{
             type: Component,
@@ -4505,8 +4596,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         InputModule$1,
                         FormModule,
                         SelectModule,
-                    ], 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@if (ikoSearchActions$ | async; as ikoSearchActions) {\n  @if (ikoSearchActions.length === 0) {\n    <valtimo-no-results [title]=\"'iko.searchFieldsNoResults' | translate\"></valtimo-no-results>\n\n  } @else {\n    <h4>{{ 'iko.searchVia' | translate }}</h4>\n\n    <cds-tabs class=\"iko-search-tabs\" type=\"line\">\n      @for (param of ikoSearchActions; track param.key ?? param.fields?.[0]?.key) {\n        <cds-tab\n          (keyup.enter)=\"!searchDisabled(param.searchFields) && searchGroup(param.key, param.searchFields)\"\n          class=\"query-group\"\n          [heading]=\"param.title\"\n          [cdsLayer]=\"1\"\n        >\n          <div class=\"query-group__row\">\n            @for (field of param.searchFields; track field.key) {\n              <div\n                class=\"query-group__field\"\n                [ngClass]=\"{\n                  'query-group__field--time': field.dataType === 'time',\n                  'query-group__field--date': field.dataType === 'date',\n                  'query-group__field--datetime': field.dataType === 'datetime',\n                }\"\n              >\n                <v-input-label *ngIf=\"field.title\" [title]=\"field.title\"></v-input-label>\n\n                @if (field.dataType === 'text' && field.fieldType === 'single') {\n                  <v-input\n                    [dataTestId]=\"'iko-search-field-' + field.key\"\n                    [name]=\"field.key\"\n                    [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                    [defaultValue]=\"formValues[field.key]\"\n                    (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></v-input>\n                } @else if (field.dataType === 'text' && field.fieldType === 'range') {\n                  <v-form\n                    className=\"multiple-search-fields\"\n                    (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                  >\n                    <v-input\n                      name=\"start\"\n                      [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                    ></v-input>\n\n                    <div class=\"to-text\">\n                      <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                    </div>\n\n                    <v-input\n                      name=\"end\"\n                      [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                    ></v-input>\n                  </v-form>\n                } @else if (field.dataType === 'text' && (field.fieldType === 'single-select-dropdown' || field.fieldType === 'single_select_dropdown')) {\n                  <v-select\n                    *ngIf=\"dropdownSelectItemsMap[field.key]\"\n                    [items]=\"dropdownSelectItemsMap[field.key]\"\n                    [margin]=\"false\"\n                    [required]=\"field.required\"\n                    [name]=\"field.key\"\n                    [clearSelectionSubject$]=\"clear$\"\n                    (selectedChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    [appendInline]=\"false\"\n                  ></v-select>\n                } @else if (field.dataType === 'text' && (field.fieldType === 'multi-select-dropdown' || field.fieldType === 'multi_select_dropdown')) {\n                  <v-select\n                    *ngIf=\"dropdownSelectItemsMap[field.key]\"\n                    [items]=\"dropdownSelectItemsMap[field.key]\"\n                    [margin]=\"false\"\n                    [multiple]=\"true\"\n                    [required]=\"field.required\"\n                    [name]=\"field.key\"\n                    [clearSelectionSubject$]=\"clear$\"\n                    (selectedChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    [appendInline]=\"false\"\n                  ></v-select>\n                } @else if (field.dataType === 'number' && field.fieldType === 'single') {\n                  <v-input\n                    type=\"number\"\n                    [hideNumberSpinBox]=\"true\"\n                    [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                    (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></v-input>\n\n                } @else if (field.dataType === 'number' && field.fieldType === 'range') {\n                  <v-form\n                    className=\"multiple-search-fields\"\n                    (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                  >\n                    <v-input\n                      type=\"number\"\n                      name=\"start\"\n                      [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                    ></v-input>\n\n                    <div class=\"to-text\">\n                      <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                    </div>\n\n                    <v-input\n                      type=\"number\"\n                      name=\"end\"\n                      [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                    ></v-input>\n                  </v-form>\n                } @else if (field.dataType === 'boolean' && field.fieldType === 'single') {\n                  <v-select\n                    *ngIf=\"booleanItems$ | async as booleanItems\"\n                    [items]=\"booleanItems\"\n                    (selectedChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></v-select>\n                } @else if (field.dataType === 'time' && field.fieldType === 'single') {\n                  <cds-timepicker\n                    [placeholder]=\"'searchFields.timePlaceholder' | translate\"\n                    [ngModel]=\"formValues[field.key]\"\n                    (ngModelChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></cds-timepicker>\n\n                } @else if (field.dataType === 'time' && field.fieldType === 'range') {\n                  <v-form\n                    className=\"multiple-search-fields\"\n                    (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                  >\n                    <cds-timepicker [(ngModel)]=\"formValues[field.key + '_start']\"></cds-timepicker>\n\n                    <div class=\"to-text\">\n                      <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                    </div>\n\n                    <cds-timepicker [(ngModel)]=\"formValues[field.key + '_end']\"></cds-timepicker>\n                  </v-form>\n                } @else if (field.dataType === 'date' && field.fieldType === 'single') {\n                  <valtimo-date-time-picker\n                    [defaultDate]=\"formValues[field.key] ?? ''\"\n                    [enableTime]=\"false\"\n                    [showFieldLabel]=\"false\"\n                    (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></valtimo-date-time-picker>\n\n                } @else if (field.dataType === 'date' && field.fieldType === 'range') {\n                  <v-form\n                    className=\"multiple-search-fields\"\n                    (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                  >\n                    <valtimo-date-time-picker\n                      name=\"start\"\n                      [enableTime]=\"false\"\n                      [showFieldLabel]=\"false\"\n                    ></valtimo-date-time-picker>\n\n                    <div class=\"to-text\">\n                      <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                    </div>\n\n                    <valtimo-date-time-picker\n                      name=\"end\"\n                      [enableTime]=\"false\"\n                      [showFieldLabel]=\"false\"\n                    ></valtimo-date-time-picker>\n                  </v-form>\n                } @else if (field.dataType === 'datetime' && field.fieldType === 'single') {\n                  <valtimo-date-time-picker\n                    [enableTime]=\"true\"\n                    [showFieldLabel]=\"false\"\n                    (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                  ></valtimo-date-time-picker>\n\n                } @else if (field.dataType === 'datetime' && field.fieldType === 'range') {\n                  <v-form\n                    className=\"multiple-search-fields\"\n                    (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                  >\n                    <valtimo-date-time-picker\n                      name=\"start\"\n                      [enableTime]=\"true\"\n                      [showFieldLabel]=\"false\"\n                    ></valtimo-date-time-picker>\n\n                    <div class=\"to-text\">\n                      <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                    </div>\n\n                    <valtimo-date-time-picker\n                      name=\"end\"\n                      [enableTime]=\"true\"\n                      [showFieldLabel]=\"false\"\n                    ></valtimo-date-time-picker>\n                  </v-form>\n                }\n              </div>\n            }\n          </div>\n\n          <button\n            cdsButton=\"primary\"\n            class=\"query-group__search-button\"\n            [disabled]=\"searchDisabled(param.searchFields)\"\n            (click)=\"searchGroup(param.key, param.searchFields)\"\n          >\n            {{ 'searchFields.searchButtonText' | translate }}\n            <svg cdsIcon=\"search\" size=\"16\"></svg>\n          </button>\n        </cds-tab>\n      }\n    </cds-tabs>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.query-group__row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.query-group__field{display:flex;flex-direction:column;flex:1 1 200px;max-width:320px}.query-group__field input{width:100%}.query-group__field--time,.query-group__field--date,.query-group__field--datetime{flex:0 0 auto;max-width:none}.query-group__label{font-size:14px;font-weight:600;color:var(--cds-text-primary)}.query-group__search-button{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;height:40px;max-height:40px;min-height:40px;padding:8px 16px;min-width:120px;white-space:nowrap;overflow:hidden;margin-left:auto}:host ::ng-deep .cds--tab-content{display:flex;flex-direction:column;gap:16px;outline:none!important;background:var(--cds-layer-01)}v-input{width:100%}::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}.iko-datetime{display:flex;gap:8px;align-items:flex-end}::ng-deep .iko-search-tabs .cds--tab-content{margin-top:24px}\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$2.ActivatedRoute }, { type: i1$2.Router }, { type: i2$2.PageTitleService }, { type: i6.IconService }, { type: IkoApiService }, { type: i5.TranslateService }] });
+                    ], 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@if (notFoundKey$ | async; as notFoundKey) {\n  <p class=\"iko-search-not-found\">{{ 'iko.viewNotFound' | translate: {key: notFoundKey} }}</p>\n} @else {\n  @if (ikoSearchActions$ | async; as ikoSearchActions) {\n    @if (ikoSearchActions.length === 0) {\n      <valtimo-no-results [title]=\"'iko.searchFieldsNoResults' | translate\"></valtimo-no-results>\n    } @else {\n      <h4>{{ searchTitle || ('iko.searchVia' | translate) }}</h4>\n\n      <cds-tabs class=\"iko-search-tabs\" type=\"line\">\n        @for (param of ikoSearchActions; track param.key ?? param.fields?.[0]?.key) {\n          <cds-tab\n            (keyup.enter)=\"\n              !searchDisabled(param.searchFields) && searchGroup(param.key, param.searchFields)\n            \"\n            class=\"query-group\"\n            [heading]=\"param.title\"\n            [cdsLayer]=\"1\"\n          >\n            <div class=\"query-group__row\">\n              @for (field of param.searchFields; track field.key) {\n                <div\n                  class=\"query-group__field\"\n                  [ngClass]=\"{\n                    'query-group__field--time': field.dataType === 'time',\n                    'query-group__field--date': field.dataType === 'date',\n                    'query-group__field--datetime': field.dataType === 'datetime',\n                  }\"\n                >\n                  <v-input-label *ngIf=\"field.title\" [title]=\"field.title\"></v-input-label>\n\n                  @if (field.dataType === 'text' && field.fieldType === 'single') {\n                    <v-input\n                      [dataTestId]=\"'iko-search-field-' + field.key\"\n                      [name]=\"field.key\"\n                      [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                      [defaultValue]=\"formValues[field.key]\"\n                      (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></v-input>\n                  } @else if (field.dataType === 'text' && field.fieldType === 'range') {\n                    <v-form\n                      className=\"multiple-search-fields\"\n                      (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    >\n                      <v-input\n                        name=\"start\"\n                        [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                      ></v-input>\n\n                      <div class=\"to-text\">\n                        <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                      </div>\n\n                      <v-input\n                        name=\"end\"\n                        [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n                      ></v-input>\n                    </v-form>\n                  } @else if (\n                    field.dataType === 'text' &&\n                    (field.fieldType === 'single-select-dropdown' ||\n                      field.fieldType === 'single_select_dropdown')\n                  ) {\n                    <v-select\n                      *ngIf=\"dropdownSelectItemsMap[field.key]\"\n                      [items]=\"dropdownSelectItemsMap[field.key]\"\n                      [margin]=\"false\"\n                      [required]=\"field.required\"\n                      [name]=\"field.key\"\n                      [clearSelectionSubject$]=\"clear$\"\n                      (selectedChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                      [appendInline]=\"false\"\n                    ></v-select>\n                  } @else if (\n                    field.dataType === 'text' &&\n                    (field.fieldType === 'multi-select-dropdown' ||\n                      field.fieldType === 'multi_select_dropdown')\n                  ) {\n                    <v-select\n                      *ngIf=\"dropdownSelectItemsMap[field.key]\"\n                      [items]=\"dropdownSelectItemsMap[field.key]\"\n                      [margin]=\"false\"\n                      [multiple]=\"true\"\n                      [required]=\"field.required\"\n                      [name]=\"field.key\"\n                      [clearSelectionSubject$]=\"clear$\"\n                      (selectedChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                      [appendInline]=\"false\"\n                    ></v-select>\n                  } @else if (field.dataType === 'number' && field.fieldType === 'single') {\n                    <v-input\n                      type=\"number\"\n                      [hideNumberSpinBox]=\"true\"\n                      [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                      (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></v-input>\n                  } @else if (field.dataType === 'number' && field.fieldType === 'range') {\n                    <v-form\n                      className=\"multiple-search-fields\"\n                      (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    >\n                      <v-input\n                        type=\"number\"\n                        name=\"start\"\n                        [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                      ></v-input>\n\n                      <div class=\"to-text\">\n                        <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                      </div>\n\n                      <v-input\n                        type=\"number\"\n                        name=\"end\"\n                        [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n                      ></v-input>\n                    </v-form>\n                  } @else if (field.dataType === 'boolean' && field.fieldType === 'single') {\n                    <v-select\n                      *ngIf=\"booleanItems$ | async as booleanItems\"\n                      [items]=\"booleanItems\"\n                      (selectedChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></v-select>\n                  } @else if (field.dataType === 'time' && field.fieldType === 'single') {\n                    <cds-timepicker\n                      [placeholder]=\"'searchFields.timePlaceholder' | translate\"\n                      [ngModel]=\"formValues[field.key]\"\n                      (ngModelChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></cds-timepicker>\n                  } @else if (field.dataType === 'time' && field.fieldType === 'range') {\n                    <v-form\n                      className=\"multiple-search-fields\"\n                      (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    >\n                      <cds-timepicker\n                        [(ngModel)]=\"formValues[field.key + '_start']\"\n                      ></cds-timepicker>\n\n                      <div class=\"to-text\">\n                        <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                      </div>\n\n                      <cds-timepicker [(ngModel)]=\"formValues[field.key + '_end']\"></cds-timepicker>\n                    </v-form>\n                  } @else if (field.dataType === 'date' && field.fieldType === 'single') {\n                    <valtimo-date-time-picker\n                      [defaultDate]=\"formValues[field.key] ?? ''\"\n                      [enableTime]=\"false\"\n                      [showFieldLabel]=\"false\"\n                      (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></valtimo-date-time-picker>\n                  } @else if (field.dataType === 'date' && field.fieldType === 'range') {\n                    <v-form\n                      className=\"multiple-search-fields\"\n                      (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    >\n                      <valtimo-date-time-picker\n                        name=\"start\"\n                        [enableTime]=\"false\"\n                        [showFieldLabel]=\"false\"\n                      ></valtimo-date-time-picker>\n\n                      <div class=\"to-text\">\n                        <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                      </div>\n\n                      <valtimo-date-time-picker\n                        name=\"end\"\n                        [enableTime]=\"false\"\n                        [showFieldLabel]=\"false\"\n                      ></valtimo-date-time-picker>\n                    </v-form>\n                  } @else if (field.dataType === 'datetime' && field.fieldType === 'single') {\n                    <valtimo-date-time-picker\n                      [enableTime]=\"true\"\n                      [showFieldLabel]=\"false\"\n                      (valueChange)=\"singleValueChange(field.key, $event, field.dataType)\"\n                    ></valtimo-date-time-picker>\n                  } @else if (field.dataType === 'datetime' && field.fieldType === 'range') {\n                    <v-form\n                      className=\"multiple-search-fields\"\n                      (valueChange)=\"multipleValueChange(field.key, $event, field.dataType)\"\n                    >\n                      <valtimo-date-time-picker\n                        name=\"start\"\n                        [enableTime]=\"true\"\n                        [showFieldLabel]=\"false\"\n                      ></valtimo-date-time-picker>\n\n                      <div class=\"to-text\">\n                        <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n                      </div>\n\n                      <valtimo-date-time-picker\n                        name=\"end\"\n                        [enableTime]=\"true\"\n                        [showFieldLabel]=\"false\"\n                      ></valtimo-date-time-picker>\n                    </v-form>\n                  }\n                </div>\n              }\n            </div>\n\n            <button\n              cdsButton=\"primary\"\n              class=\"query-group__search-button\"\n              [disabled]=\"searchDisabled(param.searchFields)\"\n              (click)=\"searchGroup(param.key, param.searchFields)\"\n            >\n              {{ 'searchFields.searchButtonText' | translate }}\n              <svg cdsIcon=\"search\" size=\"16\"></svg>\n            </button>\n          </cds-tab>\n        }\n      </cds-tabs>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:24px}.query-group__row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.query-group__field{display:flex;flex-direction:column;flex:1 1 200px;max-width:320px}.query-group__field input{width:100%}.query-group__field--time,.query-group__field--date,.query-group__field--datetime{flex:0 0 auto;max-width:none}.query-group__label{font-size:14px;font-weight:600;color:var(--cds-text-primary)}.query-group__search-button{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;height:40px;max-height:40px;min-height:40px;padding:8px 16px;min-width:120px;white-space:nowrap;overflow:hidden;margin-left:auto}:host ::ng-deep .cds--tab-content{display:flex;flex-direction:column;gap:16px;outline:none!important;background:var(--cds-layer-01)}v-input{width:100%}::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}.iko-datetime{display:flex;gap:8px;align-items:flex-end}::ng-deep .iko-search-tabs .cds--tab-content{margin-top:24px}:host.embedded{gap:8px}:host.embedded ::ng-deep .iko-search-tabs .cds--tab-content{padding:0}:host.embedded ::ng-deep .query-group__search-button{margin-left:auto}\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: i0.ChangeDetectorRef }, { type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i2$2.PageTitleService }, { type: i6.IconService }, { type: IkoApiService }, { type: i5.TranslateService }], propDecorators: { searchTitle: [{
+                type: Input
+            }], embedded: [{
+                type: HostBinding,
+                args: ['class.embedded']
+            }, {
+                type: Input
+            }], searchSubmitEvent: [{
+                type: Output
+            }], ikoViewKey: [{
+                type: Input
+            }] } });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -4678,6 +4780,283 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }], ctorParameters: () => [{ type: IkoMenuService }, { type: i2$2.MenuService }] });
 
+/*
+ * 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 IkoSearchFormioComponent {
+    set value(val) {
+        this._value = val;
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(iconService) {
+        this.iconService = iconService;
+        this.valueChange = new EventEmitter();
+        this.searchParams = null;
+        this.selectedItemLabel = null;
+        this.iconService.register(Launch16);
+    }
+    onSearchSubmit(event) {
+        this.searchParams = event;
+    }
+    onRowSelected(item) {
+        const resolved = this.resolvePropertyMappings(item.rowData);
+        this._value = { id: item.id, ...resolved };
+        this.selectedItemLabel = item.label;
+        this.valueChange.emit(this._value);
+    }
+    onOpenInNewTab() {
+        if (this.openInNewTabUrl && this._value?.id) {
+            const url = this.openInNewTabUrl.replace('{id}', this._value.id);
+            window.open(url, '_blank');
+        }
+    }
+    backToList() {
+        this.selectedItemLabel = null;
+        this._value = null;
+        this.valueChange.emit(null);
+    }
+    backToSearch() {
+        this.searchParams = null;
+        this.selectedItemLabel = null;
+        this._value = null;
+        this.valueChange.emit(null);
+    }
+    resolvePropertyMappings(rowData) {
+        if (!this.propertyMappings?.length)
+            return {};
+        const resolved = {};
+        for (const mapping of this.propertyMappings) {
+            if (mapping.propertyName && mapping.ikoProperty) {
+                resolved[mapping.propertyName] = rowData[mapping.ikoProperty] ?? null;
+            }
+        }
+        return resolved;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoSearchFormioComponent, deps: [{ token: i6.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: IkoSearchFormioComponent, isStandalone: true, selector: "valtimo-iko-search-formio", inputs: { disabled: "disabled", ikoViewKey: "ikoViewKey", label: "label", resultListLabel: "resultListLabel", selectedLabel: "selectedLabel", openInNewTabLabel: "openInNewTabLabel", openInNewTabUrl: "openInNewTabUrl", propertyMappings: "propertyMappings", value: "value" }, outputs: { valueChange: "valueChange" }, 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@if (selectedItemLabel) {\n  <span class=\"iko-search-formio__label\">\n    {{ selectedLabel || ('iko.formio.selectedResult' | translate) }}\n  </span>\n\n  <div class=\"iko-search-formio__selected-box\" [cdsLayer]=\"1\">\n    <span class=\"iko-search-formio__selected-value\">{{ selectedItemLabel }}</span>\n\n    @if (openInNewTabUrl) {\n      <button\n        [cdsLayer]=\"2\"\n        cdsButton=\"ghost\"\n        size=\"sm\"\n        class=\"iko-search-formio__open-tab-button\"\n        (click)=\"onOpenInNewTab()\"\n      >\n        {{ openInNewTabLabel || ('iko.formio.openInNewTab' | translate) }}\n        <svg cdsIcon=\"launch\" size=\"16\"></svg>\n      </button>\n    }\n  </div>\n\n  <div class=\"iko-search-formio__footer\">\n    <button cdsButton=\"tertiary\" size=\"sm\" (click)=\"backToList()\">\n      {{ 'iko.formio.back' | translate }}\n    </button>\n  </div>\n} @else if (searchParams) {\n  <span class=\"iko-search-formio__label\">\n    {{ resultListLabel || ('iko.formio.selectResult' | translate) }}\n  </span>\n\n  <valtimo-iko-list\n    [ikoViewKey]=\"ikoViewKey\"\n    [searchParams]=\"searchParams\"\n    (rowSelectedEvent)=\"onRowSelected($event)\"\n  ></valtimo-iko-list>\n\n  <div class=\"iko-search-formio__footer\">\n    <button cdsButton=\"tertiary\" size=\"sm\" (click)=\"backToSearch()\">\n      {{ 'iko.formio.back' | translate }}\n    </button>\n  </div>\n} @else {\n  <valtimo-iko-search\n    [ikoViewKey]=\"ikoViewKey\"\n    [searchTitle]=\"label\"\n    [embedded]=\"true\"\n    (searchSubmitEvent)=\"onSearchSubmit($event)\"\n  ></valtimo-iko-search>\n}\n", styles: [".iko-search-formio__label{display:block;font-size:14px;font-weight:600;color:var(--cds-text-primary);margin-bottom:8px}.iko-search-formio__selected-box{display:flex;align-items:center;justify-content:space-between;background-color:var(--cds-layer);padding:12px 16px;min-height:48px}.iko-search-formio__selected-value{font-size:14px;color:var(--cds-text-primary)}.iko-search-formio__open-tab-button{flex-shrink:0!important;margin-left:8px!important;display:flex!important;gap:8px!important;justify-content:center!important;align-items:center!important}.iko-search-formio__footer{display:flex;justify-content:flex-start;margin-top:16px}\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: "component", type: IkoSearchComponent, selector: "valtimo-iko-search", inputs: ["searchTitle", "embedded", "ikoViewKey"], outputs: ["searchSubmitEvent"] }, { kind: "component", type: IkoListComponent, selector: "valtimo-iko-list", inputs: ["ikoViewKey", "searchParams"], outputs: ["rowSelectedEvent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i6.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i6.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoSearchFormioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-iko-search-formio', standalone: true, imports: [
+                        CommonModule,
+                        IkoSearchComponent,
+                        IkoListComponent,
+                        ButtonModule,
+                        IconModule,
+                        TranslateModule,
+                        LayerModule,
+                    ], 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@if (selectedItemLabel) {\n  <span class=\"iko-search-formio__label\">\n    {{ selectedLabel || ('iko.formio.selectedResult' | translate) }}\n  </span>\n\n  <div class=\"iko-search-formio__selected-box\" [cdsLayer]=\"1\">\n    <span class=\"iko-search-formio__selected-value\">{{ selectedItemLabel }}</span>\n\n    @if (openInNewTabUrl) {\n      <button\n        [cdsLayer]=\"2\"\n        cdsButton=\"ghost\"\n        size=\"sm\"\n        class=\"iko-search-formio__open-tab-button\"\n        (click)=\"onOpenInNewTab()\"\n      >\n        {{ openInNewTabLabel || ('iko.formio.openInNewTab' | translate) }}\n        <svg cdsIcon=\"launch\" size=\"16\"></svg>\n      </button>\n    }\n  </div>\n\n  <div class=\"iko-search-formio__footer\">\n    <button cdsButton=\"tertiary\" size=\"sm\" (click)=\"backToList()\">\n      {{ 'iko.formio.back' | translate }}\n    </button>\n  </div>\n} @else if (searchParams) {\n  <span class=\"iko-search-formio__label\">\n    {{ resultListLabel || ('iko.formio.selectResult' | translate) }}\n  </span>\n\n  <valtimo-iko-list\n    [ikoViewKey]=\"ikoViewKey\"\n    [searchParams]=\"searchParams\"\n    (rowSelectedEvent)=\"onRowSelected($event)\"\n  ></valtimo-iko-list>\n\n  <div class=\"iko-search-formio__footer\">\n    <button cdsButton=\"tertiary\" size=\"sm\" (click)=\"backToSearch()\">\n      {{ 'iko.formio.back' | translate }}\n    </button>\n  </div>\n} @else {\n  <valtimo-iko-search\n    [ikoViewKey]=\"ikoViewKey\"\n    [searchTitle]=\"label\"\n    [embedded]=\"true\"\n    (searchSubmitEvent)=\"onSearchSubmit($event)\"\n  ></valtimo-iko-search>\n}\n", styles: [".iko-search-formio__label{display:block;font-size:14px;font-weight:600;color:var(--cds-text-primary);margin-bottom:8px}.iko-search-formio__selected-box{display:flex;align-items:center;justify-content:space-between;background-color:var(--cds-layer);padding:12px 16px;min-height:48px}.iko-search-formio__selected-value{font-size:14px;color:var(--cds-text-primary)}.iko-search-formio__open-tab-button{flex-shrink:0!important;margin-left:8px!important;display:flex!important;gap:8px!important;justify-content:center!important;align-items:center!important}.iko-search-formio__footer{display:flex;justify-content:flex-start;margin-top:16px}\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: i6.IconService }], propDecorators: { disabled: [{
+                type: Input
+            }], ikoViewKey: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], resultListLabel: [{
+                type: Input
+            }], selectedLabel: [{
+                type: Input
+            }], openInNewTabLabel: [{
+                type: Input
+            }], openInNewTabUrl: [{
+                type: Input
+            }], propertyMappings: [{
+                type: Input
+            }], value: [{
+                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.
+ */
+const ikoSearchFormioEditForm = () => ({
+    components: [
+        { key: 'type', type: 'hidden' },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'label',
+            label: 'Label',
+            placeholder: 'Label',
+            defaultValue: 'IKO Search',
+            validate: {
+                required: true,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'key',
+            label: 'Property Name',
+            placeholder: 'Property Name',
+            tooltip: 'Document path for the result object (ID + mapped properties). Dot notation, no prefixes. Example: ikoSearchResult or person.ikoResult.',
+            validate: {
+                required: true,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.ikoViewKey',
+            label: 'IKO Beeld Key',
+            placeholder: 'IKO Beeld Key',
+            tooltip: 'The IKO aggregate key used to load search actions.',
+            validate: {
+                required: true,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.resultListLabel',
+            label: 'Result List Label',
+            placeholder: 'Selecteer een persoon',
+            tooltip: 'Label shown above the results table after searching. Defaults to: Selecteer een resultaat.',
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.selectedLabel',
+            label: 'Selected Item Label',
+            placeholder: 'Geselecteerd persoon',
+            tooltip: 'Label shown above the selection box after selecting a result. Defaults to: Geselecteerd resultaat.',
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.openInNewTabLabel',
+            label: 'Open in New Tab Button Text',
+            placeholder: 'Open persoon in nieuw tabblad',
+            tooltip: 'Text for the open-in-new-tab button. Defaults to: Open in nieuw tabblad. Leave empty to hide.',
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.openInNewTabUrl',
+            label: 'Open in New Tab URL',
+            placeholder: '/iko/personen/details/{id}',
+            tooltip: 'URL template for the open-in-new-tab button. Use {id} as placeholder for the selected item ID. Leave empty to hide the button.',
+        },
+        {
+            type: 'datagrid',
+            input: true,
+            key: 'customOptions.propertyMappings',
+            label: 'Property Mappings',
+            tooltip: 'Maps table column values to document properties, stored alongside the ID on selection.',
+            reorder: false,
+            components: [
+                {
+                    type: 'textfield',
+                    input: true,
+                    key: 'ikoProperty',
+                    label: 'Table Column Key',
+                    placeholder: 'geboortedatum',
+                    tooltip: 'Exact column key from the IKO view config, no prefixes. Example: naam, adres.',
+                },
+                {
+                    type: 'textfield',
+                    input: true,
+                    key: 'propertyName',
+                    label: 'Document Property Name',
+                    placeholder: 'geboortedatum',
+                    tooltip: 'Property name in the document, relative to the component key. No prefixes. Example: geboortedatum stores at /ikoSearchResult/geboortedatum.',
+                },
+            ],
+        },
+        {
+            key: 'tableView',
+            type: 'checkbox',
+            label: 'Table View',
+            tooltip: 'If checked, this value will show up in the table view of the submissions list.',
+        },
+        {
+            key: 'hidden',
+            type: 'checkbox',
+            label: 'Hidden',
+            tooltip: 'A hidden field is still a part of the form JSON, but is hidden when the form is rendered.',
+        },
+    ],
+});
+
+/*
+ * 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.
+ */
+const COMPONENT_OPTIONS = {
+    type: 'iko-search',
+    selector: 'valtimo-iko-search-formio',
+    title: 'IKO Search',
+    group: 'advanced',
+    icon: 'search',
+    fieldOptions: ['label'],
+    editForm: ikoSearchFormioEditForm,
+    schema: {
+        label: 'IKO Search',
+        hideLabel: true,
+        tableView: true,
+    },
+};
+function registerIkoSearchFormioComponent(injector) {
+    if (!customElements.get(COMPONENT_OPTIONS.selector)) {
+        registerCustomFormioComponent(COMPONENT_OPTIONS, IkoSearchFormioComponent, injector);
+    }
+}
+
+/*
+ * 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.
+ */
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -4701,5 +5080,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { IkoModule };
+export { IkoModule, IkoSearchFormioComponent, ikoSearchFormioEditForm, registerIkoSearchFormioComponent };
 //# sourceMappingURL=valtimo-iko.mjs.map