@valtimo/components 13.0.1 → 13.1.1

package/fesm2022/valtimo-components.mjs

@@ -13,10 +13,10 @@ import { HttpClient } from '@angular/common/http';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd, NavigationStart, ResolveEnd, RouterModule } from '@angular/router';
 import { deepmerge } from 'deepmerge-ts';
-import { isEqual, isNil, clone, isArray, cloneDeep, get } from 'lodash';
+import { isEqual, isNil, clone, isArray, cloneDeep, get, cloneDeepWith } from 'lodash';
 import { Components, Utils, Formio } from 'formiojs';
 import { createCustomElement } from '@angular/elements';
-import * as i11$1 from '@formio/angular';
+import * as i9$1 from '@formio/angular';
 import { CustomTagsService, FormioModule, FormioAppConfig } from '@formio/angular';
 import * as i2$1 from '@angular/forms';
 import { Validators, UntypedFormControl, ReactiveFormsModule, FormControl, FormsModule, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -7729,55 +7729,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class FormIoLocalStorageService {
-    constructor() {
-        this._FORMIO_TOKEN_LOCAL_STORAGE_KEY = 'formioToken';
-        this._tokenSetInLocalStorage$ = new BehaviorSubject(false);
-    }
-    get tokenSetInLocalStorage$() {
-        return this._tokenSetInLocalStorage$.asObservable();
+class FormioTranslationService {
+    constructor(translateService) {
+        this.translateService = translateService;
     }
-    setTokenInLocalStorage(token) {
-        setTimeout(() => {
-            localStorage.setItem(this._FORMIO_TOKEN_LOCAL_STORAGE_KEY, token);
-            this.checkIfTokenExistsInLocalStorage();
+    translateFormDefinition(definition) {
+        return cloneDeepWith(definition, value => {
+            if (typeof value === 'string') {
+                if (value.startsWith('translate:')) {
+                    return this.translateOrFallback(value.substring('translate:'.length));
+                }
+                if (value.includes('translate:')) {
+                    return value.replace(/translate:([a-zA-Z0-9_.-]+)/g, (_, key) => this.translateOrFallback(key));
+                }
+            }
+            return undefined;
         });
     }
-    clearTokenFromLocalStorage() {
-        localStorage.removeItem(this._FORMIO_TOKEN_LOCAL_STORAGE_KEY);
-        this.checkIfTokenIsRemovedFromLocalStorage();
-    }
-    getTokenFromLocalStorage() {
-        return localStorage.getItem(this._FORMIO_TOKEN_LOCAL_STORAGE_KEY);
-    }
-    checkIfTokenExistsInLocalStorage() {
-        const maxChecks = 100;
-        let checks = 0;
-        if (this.getTokenFromLocalStorage()) {
-            this._tokenSetInLocalStorage$.next(true);
-        }
-        else if (checks <= maxChecks) {
-            checks++;
-            this.checkIfTokenExistsInLocalStorage();
-        }
-    }
-    checkIfTokenIsRemovedFromLocalStorage() {
-        const maxChecks = 100;
-        let checks = 0;
-        if (this.getTokenFromLocalStorage() && checks <= maxChecks) {
-            checks++;
-            this.checkIfTokenIsRemovedFromLocalStorage();
-        }
-        else {
-            this._tokenSetInLocalStorage$.next(false);
-        }
+    translateOrFallback(key) {
+        const translated = this.translateService.instant(key);
+        return translated && translated !== key
+            ? translated
+            : this.translateService.instant('interface.noTranslationFound');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoLocalStorageService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormioTranslationService, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormioTranslationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoLocalStorageService, decorators: [{
-            type: Injectable
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormioTranslationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.TranslateService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -7798,8 +7781,12 @@ class FormIoStateService {
     constructor() {
         this._documentDefinitionName$ = new BehaviorSubject(undefined);
         this._documentId$ = new BehaviorSubject(undefined);
+        this._$processInstanceId = signal('');
         this._currentForm$ = new BehaviorSubject(undefined);
     }
+    get processInstanceId() {
+        return this._$processInstanceId();
+    }
     get documentDefinitionName$() {
         return this._documentDefinitionName$.asObservable();
     }
@@ -7809,6 +7796,9 @@ class FormIoStateService {
     get documentId$() {
         return this._documentId$.asObservable();
     }
+    get documentId() {
+        return this._documentId$.getValue();
+    }
     setDocumentId(documentId) {
         this._documentId$.next(documentId);
     }
@@ -7835,6 +7825,9 @@ class FormIoStateService {
         }
         return flattened;
     }
+    setProcessInstanceId(id) {
+        this._$processInstanceId.set(id);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoStateService, providedIn: 'root' }); }
 }
@@ -7845,6 +7838,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormIoDomService {
+    constructor(stateService) {
+        this.stateService = stateService;
+    }
+    toggleSubmitButton(disabled) {
+        this.stateService.currentForm$.pipe(take(1)).subscribe(form => {
+            const button = form.formioElement.nativeElement
+                .getElementsByClassName('formio-component-submit')[0]
+                .getElementsByClassName('btn-primary')[0];
+            button.disabled = disabled;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoDomService, deps: [{ token: FormIoStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoDomService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoDomService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FormIoStateService }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormIoLocalStorageService {
+    constructor() {
+        this._FORMIO_TOKEN_LOCAL_STORAGE_KEY = 'formioToken';
+        this._tokenSetInLocalStorage$ = new BehaviorSubject(false);
+    }
+    get tokenSetInLocalStorage$() {
+        return this._tokenSetInLocalStorage$.asObservable();
+    }
+    setTokenInLocalStorage(token) {
+        setTimeout(() => {
+            localStorage.setItem(this._FORMIO_TOKEN_LOCAL_STORAGE_KEY, token);
+            this.checkIfTokenExistsInLocalStorage();
+        });
+    }
+    clearTokenFromLocalStorage() {
+        localStorage.removeItem(this._FORMIO_TOKEN_LOCAL_STORAGE_KEY);
+        this.checkIfTokenIsRemovedFromLocalStorage();
+    }
+    getTokenFromLocalStorage() {
+        return localStorage.getItem(this._FORMIO_TOKEN_LOCAL_STORAGE_KEY);
+    }
+    checkIfTokenExistsInLocalStorage() {
+        const maxChecks = 100;
+        let checks = 0;
+        if (this.getTokenFromLocalStorage()) {
+            this._tokenSetInLocalStorage$.next(true);
+        }
+        else if (checks <= maxChecks) {
+            checks++;
+            this.checkIfTokenExistsInLocalStorage();
+        }
+    }
+    checkIfTokenIsRemovedFromLocalStorage() {
+        const maxChecks = 100;
+        let checks = 0;
+        if (this.getTokenFromLocalStorage() && checks <= maxChecks) {
+            checks++;
+            this.checkIfTokenIsRemovedFromLocalStorage();
+        }
+        else {
+            this._tokenSetInLocalStorage$.next(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoLocalStorageService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoLocalStorageService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -7876,7 +7984,7 @@ class FormioComponent {
     handleBeforeUnload() {
         this.localStorageService.clearTokenFromLocalStorage();
     }
-    constructor(userProviderService, logger, stateService, route, translateService, localStorageService, modalService, configService, tagsService, injector) {
+    constructor(userProviderService, logger, stateService, route, translateService, localStorageService, modalService, configService, tagsService, injector, formioTranslationService) {
         this.userProviderService = userProviderService;
         this.logger = logger;
         this.stateService = stateService;
@@ -7887,6 +7995,7 @@ class FormioComponent {
         this.configService = configService;
         this.tagsService = tagsService;
         this.injector = injector;
+        this.formioTranslationService = formioTranslationService;
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.submit = new EventEmitter();
         // eslint-disable-next-line @angular-eslint/no-output-native
@@ -7895,7 +8004,7 @@ class FormioComponent {
         this.refreshForm = new EventEmitter();
         this.submission$ = new BehaviorSubject({});
         this._form$ = new BehaviorSubject(undefined);
-        this.form$ = this._form$.pipe(filter(form => !!form), distinctUntilChanged((prev, curr) => isEqual(prev, curr)));
+        this.form$ = combineLatest([this._form$, this.translateService.stream('key')]).pipe(filter(([form]) => !!form), map$1(([form]) => this.formioTranslationService.translateFormDefinition(form)), distinctUntilChanged((prev, curr) => isEqual(prev, curr)));
         this.options$ = new BehaviorSubject(undefined);
         this.readOnly$ = new BehaviorSubject(false);
         this.errors$ = new BehaviorSubject([]);
@@ -7921,7 +8030,7 @@ class FormioComponent {
         this.tokenSetInLocalStorage$ = this.localStorageService.tokenSetInLocalStorage$;
         this._subscriptions = new Subscription();
         this._tokenTimerSubscription = new Subscription();
-        this.setOverrideOptions(configService.config);
+        this.setOverrideOptions(this.configService.config);
         this.tagsService.reregisterTags(this.injector);
     }
     ngOnInit() {
@@ -8038,13 +8147,13 @@ class FormioComponent {
             return;
         this._overrideOptions$.next(config.formioOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormioComponent, deps: [{ token: i8.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$2.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i2.ConfigService }, { token: FormIoTagsService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11$1.FormioComponent, selector: "formio" }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormioComponent, deps: [{ token: i8.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$2.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i2.ConfigService }, { token: FormIoTagsService }, { token: i0.Injector }, { token: FormioTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9$1.FormioComponent, selector: "formio" }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i8.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$2.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i2.ConfigService }, { type: FormIoTagsService }, { type: i0.Injector }], propDecorators: { options: [{
+        }], ctorParameters: () => [{ type: i8.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$2.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i2.ConfigService }, { type: FormIoTagsService }, { type: i0.Injector }, { type: FormioTranslationService }], propDecorators: { options: [{
                 type: Input
             }], submission: [{
                 type: Input
@@ -8194,7 +8303,7 @@ class FormioBuilderComponent {
         this._overrideOptions$.next(config.formioOptions);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormioBuilderComponent, deps: [{ token: i1.TranslateService }, { token: FormIoStateService }, { token: i2.ConfigService }, { token: i0.Injector }, { token: FormIoTagsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormioBuilderComponent, isStandalone: false, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"(editFormModified$ | async) && form$ | async as formDefinition\"\n>\n  <form-builder\n    [form]=\"formDefinition\"\n    [options]=\"formioOptions$ | async\"\n    [rebuild]=\"triggerRebuild\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11$1.FormBuilderComponent, selector: "form-builder", inputs: ["form", "options", "formbuilder", "noeval", "refresh", "rebuild"], outputs: ["change"] }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormioBuilderComponent, isStandalone: false, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"(editFormModified$ | async) && form$ | async as formDefinition\"\n>\n  <form-builder\n    [form]=\"formDefinition\"\n    [options]=\"formioOptions$ | async\"\n    [rebuild]=\"triggerRebuild\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9$1.FormBuilderComponent, selector: "form-builder", inputs: ["form", "options", "formbuilder", "noeval", "refresh", "rebuild"], outputs: ["change"] }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormioBuilderComponent, decorators: [{
             type: Component,
@@ -8230,40 +8339,6 @@ const getFormioAppConfig = (config) => {
     };
 };
 
-/*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class FormIoDomService {
-    constructor(stateService) {
-        this.stateService = stateService;
-    }
-    toggleSubmitButton(disabled) {
-        this.stateService.currentForm$.pipe(take(1)).subscribe(form => {
-            const button = form.formioElement.nativeElement
-                .getElementsByClassName('formio-component-submit')[0]
-                .getElementsByClassName('btn-primary')[0];
-            button.disabled = disabled;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoDomService, deps: [{ token: FormIoStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoDomService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormIoDomService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FormIoStateService }] });
-
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -11351,6 +11426,7 @@ class SelectComponent {
         this.disabled = false;
         this.multiple = false;
         this.margin = false;
+        this.clearable = true;
         this.name = '';
         this.title = '';
         this.titleTranslationKey = '';
@@ -11454,11 +11530,11 @@ class SelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SelectComponent, isStandalone: false, selector: "v-select", inputs: { items: "items", defaultSelection: "defaultSelection", defaultSelectionId: "defaultSelectionId", defaultSelectionIds: "defaultSelectionIds", disabled: "disabled", dropUp: "dropUp", multiple: "multiple", margin: "margin", widthInPx: "widthInPx", notFoundText: "notFoundText", clearAllText: "clearAllText", clearText: "clearText", name: "name", title: "title", titleTranslationKey: "titleTranslationKey", clearSelectionSubject$: "clearSelectionSubject$", tooltip: "tooltip", required: "required", loading: "loading", loadingText: "loadingText", placeholder: "placeholder", smallMargin: "smallMargin", carbonTheme: "carbonTheme", appendInline: "appendInline", dataTestId: "dataTestId" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async,\n  } as vars\"\n  [ngClass]=\"{'--margin': margin, '--small-margin': smallMargin}\"\n  class=\"v-select-container\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n  <cds-combo-box\n    [attr.data-testid]=\"dataTestId\"\n    [appendInline]=\"appendInline\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"disabled || loading || vars.items.length === 0\"\n    [dropUp]=\"dropUp\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : vars.items.length === 0\n          ? vars.notFoundText\n          : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"vars.items\"></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: [".v-select-container.--margin{margin-block-end:var(--v-input-margin)}.v-select-container.--small-margin{margin-block-end:var(--v-input-small-margin)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SelectComponent, isStandalone: false, selector: "v-select", inputs: { items: "items", defaultSelection: "defaultSelection", defaultSelectionId: "defaultSelectionId", defaultSelectionIds: "defaultSelectionIds", disabled: "disabled", dropUp: "dropUp", multiple: "multiple", margin: "margin", widthInPx: "widthInPx", notFoundText: "notFoundText", clearAllText: "clearAllText", clearText: "clearText", clearable: "clearable", name: "name", title: "title", titleTranslationKey: "titleTranslationKey", clearSelectionSubject$: "clearSelectionSubject$", tooltip: "tooltip", required: "required", loading: "loading", loadingText: "loadingText", placeholder: "placeholder", smallMargin: "smallMargin", carbonTheme: "carbonTheme", appendInline: "appendInline", dataTestId: "dataTestId" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async,\n  } as vars\"\n  class=\"v-select-container\"\n  [ngClass]=\"{\n    'v-select-container--margin': margin,\n    'v-select-container--small-margin': smallMargin,\n    'v-select-container--not-clearable': !clearable,\n  }\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n  <cds-combo-box\n    [attr.data-testid]=\"dataTestId\"\n    [appendInline]=\"appendInline\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"disabled || loading || vars.items.length === 0\"\n    [dropUp]=\"dropUp\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : vars.items.length === 0\n          ? vars.notFoundText\n          : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"vars.items\"></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: [".v-select-container--margin{margin-block-end:var(--v-input-margin)}.v-select-container--small-margin{margin-block-end:var(--v-input-small-margin)}.v-select-container--not-clearable .cds--list-box.cds--combo-box .cds--list-box__field>.cds--list-box__selection{display:none!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-select', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async,\n  } as vars\"\n  [ngClass]=\"{'--margin': margin, '--small-margin': smallMargin}\"\n  class=\"v-select-container\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n  <cds-combo-box\n    [attr.data-testid]=\"dataTestId\"\n    [appendInline]=\"appendInline\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"disabled || loading || vars.items.length === 0\"\n    [dropUp]=\"dropUp\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : vars.items.length === 0\n          ? vars.notFoundText\n          : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"vars.items\"></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: [".v-select-container.--margin{margin-block-end:var(--v-input-margin)}.v-select-container.--small-margin{margin-block-end:var(--v-input-small-margin)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ selector: 'v-select', standalone: false, encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async,\n  } as vars\"\n  class=\"v-select-container\"\n  [ngClass]=\"{\n    'v-select-container--margin': margin,\n    'v-select-container--small-margin': smallMargin,\n    'v-select-container--not-clearable': !clearable,\n  }\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n  <cds-combo-box\n    [attr.data-testid]=\"dataTestId\"\n    [appendInline]=\"appendInline\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"disabled || loading || vars.items.length === 0\"\n    [dropUp]=\"dropUp\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : vars.items.length === 0\n          ? vars.notFoundText\n          : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"vars.items\"></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: [".v-select-container--margin{margin-block-end:var(--v-input-margin)}.v-select-container--small-margin{margin-block-end:var(--v-input-small-margin)}.v-select-container--not-clearable .cds--list-box.cds--combo-box .cds--list-box__field>.cds--list-box__selection{display:none!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { items: [{
                 type: Input
             }], defaultSelection: [{
@@ -11483,6 +11559,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], clearText: [{
                 type: Input
+            }], clearable: [{
+                type: Input
             }], name: [{
                 type: Input
             }], title: [{
@@ -13083,7 +13161,7 @@ class SearchFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i2$3.DocumentService }, { token: i1.TranslateService }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SearchFieldsComponent, isStandalone: false, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", caseDefinitionKey: "caseDefinitionKey", setValuesSubject$: "setValuesSubject$", clearValuesSubject$: "clearValuesSubject$", defaultValues: "defaultValues", inputDisabled: "inputDisabled", externalSearchField: "externalSearchField" }, outputs: { doSearch: "doSearch" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!loading\">\n  <cds-accordion>\n    <cds-accordion-item\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (selected)=\"toggleExpanded()\"\n      [expanded]=\"expanded$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n    </cds-accordion-item>\n  </cds-accordion>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\"><cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <ng-container *ngIf=\"searchFields$ | async as searchFields\">\n    <ng-container\n      *ngIf=\"{\n        noSearchFields: (!searchFields || searchFields.length === 0) && !externalSearchField,\n      } as vars\"\n    >\n      <div\n        *ngIf=\"!vars.noSearchFields\"\n        class=\"search-fields-container\"\n        [ngClass]=\"{'search-fields-container--hidden': (expanded$ | async) === false}\"\n        [cdsLayer]=\"1\"\n      >\n        <ng-content></ng-content>\n\n        <ng-container *ngFor=\"let searchField of searchFields\">\n          <div class=\"search-field-container\">\n            <ng-container\n              *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n            ></ng-container>\n          </div>\n        </ng-container>\n      </div>\n\n      <div class=\"meta-container\" *ngIf=\"expanded$ | async\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate; context: {noSearchFields: vars.noSearchFields}\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      values: values$ | async,\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key),\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateSingleSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateMultiSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateSingleSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'single-select-dropdown' ||\n        searchField.fieldType === 'single_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateMultiSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'multi-select-dropdown' ||\n        searchField.fieldType === 'multi_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [multiple]=\"true\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div class=\"buttons-container\" *ngIf=\"!noSearchFields && {expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim"], outputs: ["valueChange"] }, { kind: "component", type: FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime", "carbonTheme"], outputs: ["valueChange"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SearchFieldsComponent, isStandalone: false, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", caseDefinitionKey: "caseDefinitionKey", setValuesSubject$: "setValuesSubject$", clearValuesSubject$: "clearValuesSubject$", defaultValues: "defaultValues", inputDisabled: "inputDisabled", externalSearchField: "externalSearchField" }, outputs: { doSearch: "doSearch" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!loading\">\n  <cds-accordion>\n    <cds-accordion-item\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (selected)=\"toggleExpanded()\"\n      [expanded]=\"expanded$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n    </cds-accordion-item>\n  </cds-accordion>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\"><cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <ng-container *ngIf=\"searchFields$ | async as searchFields\">\n    <ng-container\n      *ngIf=\"{\n        noSearchFields: (!searchFields || searchFields.length === 0) && !externalSearchField,\n      } as vars\"\n    >\n      <div\n        *ngIf=\"!vars.noSearchFields\"\n        class=\"search-fields-container\"\n        [ngClass]=\"{'search-fields-container--hidden': (expanded$ | async) === false}\"\n        [cdsLayer]=\"1\"\n      >\n        <ng-content></ng-content>\n\n        <ng-container *ngFor=\"let searchField of searchFields\">\n          <div class=\"search-field-container\">\n            <ng-container\n              *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n            ></ng-container>\n          </div>\n        </ng-container>\n      </div>\n\n      <div class=\"meta-container\" *ngIf=\"expanded$ | async\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate; context: {noSearchFields: vars.noSearchFields}\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      values: values$ | async,\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key),\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateSingleSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateMultiSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateSingleSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'single-select-dropdown' ||\n        searchField.fieldType === 'single_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateMultiSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'multi-select-dropdown' ||\n        searchField.fieldType === 'multi_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [multiple]=\"true\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div class=\"buttons-container\" *ngIf=\"!noSearchFields && {expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim"], outputs: ["valueChange"] }, { kind: "component", type: FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime", "carbonTheme"], outputs: ["valueChange"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchFieldsComponent, decorators: [{
             type: Component,
@@ -14389,7 +14467,7 @@ class TableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, deps: [{ token: i3$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TableComponent, isStandalone: false, selector: "v-table", inputs: { items: "items", columns: "columns", loading: "loading", showEditButtons: "showEditButtons", showPagination: "showPagination", editButtonTranslationKey: "editButtonTranslationKey", itemsTranslationKey: "itemsTranslationKey", noResultsTranslationKey: "noResultsTranslationKey", mobileBreakpointPx: "mobileBreakpointPx", amountOfLoadingRows: "amountOfLoadingRows", collectionSize: "collectionSize", page: "page", size: "size" }, outputs: { editButtonClicked: "editButtonClicked", paginationSizeSet: "paginationSizeSet", paginationPageSet: "paginationPageSet" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" (click)=\"editButtonClicked.emit(item)\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)',\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" [disabled]=\"true\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)',\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('previous')\" [disabled]=\"loading\">\n        {{ 'interface.previous' | translate }}\n      </button>\n    </span>\n\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('next')\" [disabled]=\"loading\">\n        {{ 'interface.nextArrow' | translate }}\n      </button>\n    </span>\n  </div>\n</ng-template>\n", styles: [".v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$2.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TableComponent, isStandalone: false, selector: "v-table", inputs: { items: "items", columns: "columns", loading: "loading", showEditButtons: "showEditButtons", showPagination: "showPagination", editButtonTranslationKey: "editButtonTranslationKey", itemsTranslationKey: "itemsTranslationKey", noResultsTranslationKey: "noResultsTranslationKey", mobileBreakpointPx: "mobileBreakpointPx", amountOfLoadingRows: "amountOfLoadingRows", collectionSize: "collectionSize", page: "page", size: "size" }, outputs: { editButtonClicked: "editButtonClicked", paginationSizeSet: "paginationSizeSet", paginationPageSet: "paginationPageSet" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" (click)=\"editButtonClicked.emit(item)\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)',\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" [disabled]=\"true\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)',\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('previous')\" [disabled]=\"loading\">\n        {{ 'interface.previous' | translate }}\n      </button>\n    </span>\n\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('next')\" [disabled]=\"loading\">\n        {{ 'interface.nextArrow' | translate }}\n      </button>\n    </span>\n  </div>\n</ng-template>\n", styles: [".v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$2.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,