@valtimo/iko 13.41.0 → 13.43.0

package/fesm2022/valtimo-iko.mjs

@@ -4791,7 +4791,7 @@ class IkoSearchComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IkoSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.ActivatedRoute }, { token: i3.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.25", 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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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                      valueFormat=\"iso\"\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                        valueFormat=\"iso\"\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                        valueFormat=\"iso\"\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                      valueFormat=\"iso\"\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                        valueFormat=\"iso\"\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                        valueFormat=\"iso\"\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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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", "valueFormat", "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.25", ngImport: i0, type: IkoSearchComponent, decorators: [{
             type: Component,
@@ -4818,7 +4818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", 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 (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"] }]
+                    ], 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                      valueFormat=\"iso\"\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                        valueFormat=\"iso\"\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                        valueFormat=\"iso\"\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                      valueFormat=\"iso\"\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                        valueFormat=\"iso\"\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                        valueFormat=\"iso\"\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: i3.ActivatedRoute }, { type: i3.Router }, { type: i2$2.PageTitleService }, { type: i6.IconService }, { type: IkoApiService }, { type: i5.TranslateService }], propDecorators: { searchTitle: [{
                 type: Input
             }], embedded: [{