@valtimo/iko 13.9.1 → 13.10.0

package/fesm2022/valtimo-iko.mjs

@@ -4429,7 +4429,7 @@ class IkoSearchComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", 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.17", 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 class=\"query-group\" [heading]=\"param.title\" [cdsLayer]=\"1\">\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\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                }\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                }\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                }\n\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                }\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                }\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: 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", "dataTestId"], outputs: ["selectedChange"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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\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                }\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                }\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                }\n\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                }\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                }\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: 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", "dataTestId"], outputs: ["selectedChange"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: IkoSearchComponent, decorators: [{
             type: Component,
@@ -4456,7 +4456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         InputLabelModule,
                         InputModule$1,
                         FormModule,
-                    ], 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 class=\"query-group\" [heading]=\"param.title\" [cdsLayer]=\"1\">\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\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                }\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                }\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                }\n\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                }\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                }\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"] }]
+                    ], 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\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                }\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                }\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                }\n\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                }\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                }\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 }] });
 
 /*