@valtimo/components 13.16.0 → 13.17.0

package/fesm2022/valtimo-components.mjs

@@ -7,7 +7,7 @@ import { filter, map as map$1, take, tap, debounceTime, distinctUntilChanged, ta
 import * as i1$1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i1$2 from '@valtimo/shared';
-import { BaseApiService, VERSIONS, HttpLoaderFactory, getContextObservable, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams, UrlUtils, ConfigService } from '@valtimo/shared';
+import { BaseApiService, VERSIONS, HttpLoaderFactory, getContextObservable, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams } from '@valtimo/shared';
 import * as i1$4 from '@angular/common';
 import { DOCUMENT, CommonModule, registerLocaleData, CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
 import * as i1$3 from '@angular/router';
@@ -40,11 +40,11 @@ import moment$1 from 'moment/moment';
 import BpmnViewer from 'bpmn-js';
 import heatmap from 'heatmap.js-fixed/build/heatmap.js';
 import * as i1$6 from '@valtimo/resource';
-import { S3Resource, ResourceModule } from '@valtimo/resource';
+import { S3Resource, ResourceModule, UploadProviderService } from '@valtimo/resource';
 import { jwtDecode } from 'jwt-decode';
 import Dropzone from 'dropzone';
 import * as i3$1 from '@valtimo/document';
-import { DocumentModule, DocumentService, InternalCaseStatusUtils, CaseTagsUtils } from '@valtimo/document';
+import { DocumentModule, InternalCaseStatusUtils, CaseTagsUtils } from '@valtimo/document';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$7 from '@angular/cdk/overlay';
@@ -286,7 +286,7 @@ var MonacoTheme;
 })(MonacoTheme || (MonacoTheme = {}));
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -8188,7 +8188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  */
 class FormIoStateService {
     constructor() {
-        this._documentDefinitionName$ = new BehaviorSubject(undefined);
+        this._caseDefinitionKey$ = new BehaviorSubject(undefined);
         this._documentId$ = new BehaviorSubject(undefined);
         this._$processInstanceId = signal('');
         this._currentForm$ = new BehaviorSubject(undefined);
@@ -8196,11 +8196,11 @@ class FormIoStateService {
     get processInstanceId() {
         return this._$processInstanceId();
     }
-    get documentDefinitionName$() {
-        return this._documentDefinitionName$.asObservable();
+    get caseDefinitionKey$() {
+        return this._caseDefinitionKey$.asObservable();
     }
-    setDocumentDefinitionName(documentDefinitionName) {
-        this._documentDefinitionName$.next(documentDefinitionName);
+    setCaseDefinitionKey(caseDefinitionKey) {
+        this._caseDefinitionKey$.next(caseDefinitionKey);
     }
     get documentId$() {
         return this._documentId$.asObservable();
@@ -8443,11 +8443,9 @@ class FormioComponent {
         this.tagsService.reregisterTags(this.injector);
     }
     ngOnInit() {
-        if (!Formio.projectUrlSet) {
-            Formio.setBaseUrl(location.origin);
-            Formio.setProjectUrl(location.origin);
-            Formio.authUrl = location.origin;
-        }
+        Formio.setBaseUrl(location.origin);
+        Formio.setProjectUrl(location.origin);
+        Formio.authUrl = location.origin;
         this.openRouteSubscription();
         this.errors$.next([]);
         this.setInitialToken();
@@ -8544,10 +8542,10 @@ class FormioComponent {
     }
     openRouteSubscription() {
         this._subscriptions.add(this.route.params.subscribe(params => {
-            const documentDefinitionName = params.documentDefinitionName;
+            const caseDefinitionKey = params.caseDefinitionKey;
             const documentId = params.documentId;
-            if (documentDefinitionName) {
-                this.stateService.setDocumentDefinitionName(documentDefinitionName);
+            if (caseDefinitionKey) {
+                this.stateService.setCaseDefinitionKey(caseDefinitionKey);
             }
             if (documentId) {
                 this.stateService.setDocumentId(documentId);
@@ -8587,7 +8585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -8601,8 +8599,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-let formioParams;
-const modiyEditFormApiKeyInput = (editForm) => {
+const formioParams$ = new BehaviorSubject(null);
+let formioParamsSubscription = null;
+const modifyEditFormApiKeyInput = (editForm) => {
     const keyField = editForm?.components
         ?.find(element => element?.key === 'tabs')
         ?.components?.find(element => element?.key === 'api')
@@ -8611,10 +8610,17 @@ const modiyEditFormApiKeyInput = (editForm) => {
         delete keyField.validate;
     return editForm;
 };
-const addValueResolverSelectorToEditform = (editForm, params) => {
+const addValueResolverSelectorToEditform = (editForm, params$) => {
     const valtimoWindow = window;
     const valueResolverTabKey = 'valueResolver';
-    formioParams = params;
+    // Unsubscribe from the previous subscription if it exists
+    if (formioParamsSubscription) {
+        formioParamsSubscription.unsubscribe();
+    }
+    // Subscribe to the params Observable and forward values to the BehaviorSubject
+    formioParamsSubscription = params$.subscribe(params => {
+        formioParams$.next(params);
+    });
     if (valtimoWindow?.flags?.formioValueResolverSelectorComponentRegistered) {
         const tabComponents = editForm?.components?.find(element => element.key === 'tabs')?.components;
         const hasValueResolverTab = tabComponents?.find(component => component.key === valueResolverTabKey);
@@ -8652,7 +8658,7 @@ const addValueResolverSelectorToEditform = (editForm, params) => {
 };
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -8719,7 +8725,7 @@ class FormioBuilderComponent {
             const originalEditForm = Components.baseEditForm;
             Components.baseEditForm = function (...extend) {
                 const editForm = originalEditForm(...extend);
-                modiyEditFormApiKeyInput(editForm);
+                modifyEditFormApiKeyInput(editForm);
                 addValueResolverSelectorToEditform(editForm, params$);
                 return editForm;
             };
@@ -8766,11 +8772,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const getFormioAppConfig = (config) => {
-    const baseUrl = UrlUtils.formatUrlTrailingSlash(`${window.location.origin}${config.valtimoApi.endpointUri}`, false);
+const getFormioAppConfig = () => {
     return {
-        appUrl: baseUrl,
-        apiUrl: baseUrl,
+        appUrl: window.location.origin,
+        apiUrl: window.location.origin,
         icons: 'fontawesome',
         formOnly: false,
     };
@@ -8994,6 +8999,12 @@ class DropzoneComponent {
         this.showingCamera$.next(false);
     }
     initDropzone() {
+        if (!this.dropzoneRef || !this.dropzoneRef.nativeElement) {
+            return;
+        }
+        if (this.dropzone) {
+            this.dropzone.destroy();
+        }
         this.dropzone = new Dropzone(this.dropzoneRef.nativeElement, {
             url: '/',
             maxFilesize: this._maxFileSize,
@@ -9120,8 +9131,8 @@ class FormIoUploaderComponent {
     fileSelected(file) {
         this.domService.toggleSubmitButton(true);
         this.uploading$.next(true);
-        this.stateService.documentDefinitionName$.pipe(take(1)).subscribe(name => {
-            this.uploadProviderService.uploadFile(file, name).subscribe(result => {
+        this.stateService.caseDefinitionKey$.pipe(take(1)).subscribe(caseDefinitionKey => {
+            this.uploadProviderService.uploadFile(file, caseDefinitionKey).subscribe(result => {
                 this.domService.toggleSubmitButton(false);
                 this.uploading$.next(false);
                 this._value.push(result);
@@ -10101,7 +10112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2026 Ritense BV, the Netherlands.
+ * 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.
@@ -10121,11 +10132,11 @@ class FormioValueResolverSelectorComponent {
         this.resolverType = 'source';
         this.valueChange = new EventEmitter();
         this.defaultValue$ = new BehaviorSubject('');
-        this.context$ = formioParams.pipe(map(params => params?.context));
-        this.caseDefinitionKey$ = formioParams.pipe(map(params => params?.caseDefinitionKey));
-        this.caseDefinitionVersionTag$ = formioParams.pipe(map(params => params?.caseDefinitionVersionTag));
-        this.buildingBlockDefinitionKey$ = formioParams.pipe(map(params => params?.buildingBlockDefinitionKey));
-        this.buildingBlockDefinitionVersionTag$ = formioParams.pipe(map(params => params?.buildingBlockDefinitionVersionTag));
+        this.context$ = formioParams$.pipe(map(params => params?.context));
+        this.caseDefinitionKey$ = formioParams$.pipe(filter(params => !!params), map(params => params?.caseDefinitionKey));
+        this.caseDefinitionVersionTag$ = formioParams$.pipe(filter(params => !!params), map(params => params?.caseDefinitionVersionTag));
+        this.buildingBlockDefinitionKey$ = formioParams$.pipe(filter(params => !!params), map(params => params?.buildingBlockDefinitionKey));
+        this.buildingBlockDefinitionVersionTag$ = formioParams$.pipe(filter(params => !!params), map(params => params?.buildingBlockDefinitionVersionTag));
         this.isIndependentContext$ = this.context$.pipe(map(context => context !== 'case' && context !== 'buildingBlock'));
         this.ValuePathSelectorPrefix = ValuePathSelectorPrefix;
     }
@@ -10364,8 +10375,7 @@ class FormIoModule {
             FormIoDomService,
             {
                 provide: FormioAppConfig,
-                deps: [ConfigService],
-                useFactory: (configService) => getFormioAppConfig(configService.config),
+                useFactory: () => getFormioAppConfig(),
             },
         ], imports: [CommonModule,
             FormioModule,
@@ -10417,8 +10427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         FormIoDomService,
                         {
                             provide: FormioAppConfig,
-                            deps: [ConfigService],
-                            useFactory: (configService) => getFormioAppConfig(configService.config),
+                            useFactory: () => getFormioAppConfig(),
                         },
                     ],
                 }]
@@ -11259,7 +11268,7 @@ function registerFormioCurrencyComponent(injector) {
  */
 const SelectComponent$1 = Components.components.select;
 function registerFormioFileSelectorComponent(injector) {
-    const documentService = injector.get(DocumentService);
+    const uploadProviderService = injector.get(UploadProviderService);
     const stateService = injector.get(FormIoStateService);
     const unavailableMessage = {
         label: 'could not retrieve documents',
@@ -11271,12 +11280,12 @@ function registerFormioFileSelectorComponent(injector) {
                 resolve([unavailableMessage]);
             });
         }
-        return documentService
-            .getDocument(documentId)
+        return uploadProviderService
+            .getResources(documentId)
             .toPromise()
-            .then(document => document.relatedFiles.map(relatedFile => ({
-            label: relatedFile.fileName,
-            value: relatedFile.fileId,
+            .then(resources => resources.map(resourceReference => ({
+            label: resourceReference.filename,
+            value: resourceReference.id,
         })))
             .catch(() => new Promise(resolve => {
             resolve([unavailableMessage]);
@@ -12033,7 +12042,9 @@ class SelectComponent {
             this.selected$,
             this.translateService.stream('key'),
         ]).pipe(map$1(([listItems, selected]) => listItems.map(listItem => {
-            const translation = this.translateService.instant(listItem.content);
+            const translation = listItem.content
+                ? this.translateService.instant(listItem.content)
+                : '-';
             const isSelected = Array.isArray(selected)
                 ? selected.includes(listItem.id)
                 : selected === listItem.id;
@@ -14119,13 +14130,14 @@ class DateTimePickerComponent {
         this.defaultDateIsToday = false;
         this.valueChange = new EventEmitter();
         this.dateValue$ = new BehaviorSubject('');
-        this.timeValueInternal = '';
+        this.timeValue$ = new BehaviorSubject('');
         this.subscriptions = new Subscription();
     }
     set defaultDate(value) {
-        if (value) {
-            this.dateValue$.next(value);
-        }
+        const dateTimeValue = value ?? '';
+        const { date, time } = this.splitDateTime(dateTimeValue);
+        this.dateValue$.next(date);
+        this.timeValue$.next(time);
     }
     ngAfterViewInit() {
         if (this.defaultDateIsToday) {
@@ -14134,30 +14146,49 @@ class DateTimePickerComponent {
         if (this.clear$) {
             this.subscriptions.add(this.clear$.subscribe(() => {
                 this.dateValue$.next('');
-                this.timeValueInternal = '';
+                this.timeValue$.next('');
                 this.valueChange.emit('');
             }));
         }
-        this.subscriptions.add(this.dateValue$.subscribe(date => this.emitValue(date, this.timeValueInternal)));
+        this.subscriptions.add(combineLatest([this.dateValue$, this.timeValue$]).subscribe(([date, time]) => {
+            if (!date) {
+                this.valueChange.emit('');
+                return;
+            }
+            const fullValue = this.enableTime && time ? `${date} ${time}` : date;
+            this.valueChange.emit(fullValue);
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
     }
     onDateSelected(value) {
         const formatted = Array.isArray(value) ? value[0] : value;
         this.dateValue$.next(this.normalizeDate(formatted));
     }
     onTimeSelected(value) {
-        this.timeValueInternal = value;
-        this.emitValue(this.dateValue$.getValue(), value);
-    }
-    get timeValue() {
-        return this.timeValueInternal;
+        this.timeValue$.next(this.normalizeTime(value));
+    }
+    normalizeTime(value) {
+        if (typeof value === 'string')
+            return value;
+        if (value && typeof value === 'object') {
+            if (typeof value.value === 'string')
+                return value.value;
+            if (typeof value.target?.value === 'string')
+                return value.target.value;
+        }
+        return '';
     }
-    emitValue(date, time) {
-        if (!date) {
-            this.valueChange.emit('');
-            return;
+    splitDateTime(value) {
+        const trimmed = (value ?? '').trim();
+        if (!trimmed)
+            return { date: '', time: '' };
+        const parts = trimmed.split(' ');
+        if (parts.length >= 2) {
+            return { date: parts[0] ?? '', time: parts.slice(1).join(' ') ?? '' };
         }
-        const fullValue = this.enableTime && time ? `${date} ${time}` : date;
-        this.valueChange.emit(fullValue);
+        return { date: trimmed, time: '' };
     }
     normalizeDate(date) {
         if (typeof date === 'string')
@@ -14170,7 +14201,7 @@ class DateTimePickerComponent {
         return date.toLocaleDateString('nl-NL');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: DateTimePickerComponent, isStandalone: true, selector: "valtimo-date-time-picker", inputs: { fullWidth: "fullWidth", margin: "margin", name: "name", title: "title", placeholder: "placeholder", titleTranslationKey: "titleTranslationKey", disabled: "disabled", tooltip: "tooltip", required: "required", smallLabel: "smallLabel", enableTime: "enableTime", carbonTheme: "carbonTheme", dateFormat: "dateFormat", showFieldLabel: "showFieldLabel", datePlaceholder: "datePlaceholder", timePlaceholder: "timePlaceholder", labelText: "labelText", defaultDate: "defaultDate", defaultDateIsToday: "defaultDateIsToday", clear$: "clear$" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.valtimo-date-time-picker": "this.hostClass", "class.full-width": "this.fullWidth", "class.margin": "this.margin" } }, 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<v-input-label\n  *ngIf=\"showFieldLabel && (title || titleTranslationKey)\"\n  [name]=\"name\"\n  [required]=\"required\"\n  [small]=\"smallLabel\"\n  [titleTranslationKey]=\"titleTranslationKey\"\n  [title]=\"title\"\n  [tooltip]=\"tooltip\"\n>\n</v-input-label>\n\n<div class=\"valtimo-date-time-picker__wrapper\">\n  <cds-date-picker\n    class=\"date-only\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [label]=\"labelText\"\n    [placeholder]=\"datePlaceholder || 'dd-mm-yyyy'\"\n    [dateFormat]=\"dateFormat\"\n    [disabled]=\"disabled\"\n    (valueChange)=\"onDateSelected($event)\"\n  ></cds-date-picker>\n\n  <cds-timepicker\n    *ngIf=\"enableTime\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [placeholder]=\"timePlaceholder || 'hh:mm'\"\n    [value]=\"timeValue\"\n    [disabled]=\"disabled\"\n    (valueChange)=\"onTimeSelected($event)\"\n  >\n  </cds-timepicker>\n</div>\n", styles: [".valtimo-date-time-picker{display:flex;flex-direction:column;gap:8px}.valtimo-date-time-picker.full-width{width:100%}.valtimo-date-time-picker.margin{margin-bottom:16px}.valtimo-date-time-picker__wrapper{display:flex;align-items:flex-end;gap:16px}.valtimo-date-time-picker ::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important}.valtimo-date-time-picker ::ng-deep .cds--date-picker__input,.valtimo-date-time-picker ::ng-deep .cds--time-picker__input-field{background-color:var(--cds-field-01)!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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputModule$1 }, { kind: "ngmodule", type: DatePickerModule$1 }, { kind: "component", type: i2$2.DatePicker, selector: "cds-date-picker, ibm-date-picker", inputs: ["range", "dateFormat", "language", "label", "helperText", "rangeHelperText", "rangeLabel", "placeholder", "ariaLabel", "inputPattern", "id", "value", "theme", "disabled", "readonly", "invalid", "invalidText", "warn", "warnText", "size", "rangeInvalid", "rangeInvalidText", "rangeWarn", "rangeWarnText", "skeleton", "plugins", "flatpickrOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: TimePickerModule }, { kind: "component", type: i2$2.TimePicker, selector: "cds-timepicker, ibm-timepicker", inputs: ["invalid", "invalidText", "label", "hideLabel", "placeholder", "pattern", "id", "disabled", "value", "maxLength", "skeleton", "theme", "size"], outputs: ["valueChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: DateTimePickerComponent, isStandalone: true, selector: "valtimo-date-time-picker", inputs: { fullWidth: "fullWidth", margin: "margin", name: "name", title: "title", placeholder: "placeholder", titleTranslationKey: "titleTranslationKey", disabled: "disabled", tooltip: "tooltip", required: "required", smallLabel: "smallLabel", enableTime: "enableTime", carbonTheme: "carbonTheme", dateFormat: "dateFormat", showFieldLabel: "showFieldLabel", datePlaceholder: "datePlaceholder", timePlaceholder: "timePlaceholder", labelText: "labelText", defaultDate: "defaultDate", defaultDateIsToday: "defaultDateIsToday", clear$: "clear$" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.valtimo-date-time-picker": "this.hostClass", "class.full-width": "this.fullWidth", "class.margin": "this.margin" } }, 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<v-input-label\n  *ngIf=\"showFieldLabel && (title || titleTranslationKey)\"\n  [name]=\"name\"\n  [required]=\"required\"\n  [small]=\"smallLabel\"\n  [titleTranslationKey]=\"titleTranslationKey\"\n  [title]=\"title\"\n  [tooltip]=\"tooltip\"\n>\n</v-input-label>\n\n<div class=\"valtimo-date-time-picker__wrapper\">\n  <cds-date-picker\n    class=\"date-only\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [label]=\"labelText\"\n    [placeholder]=\"datePlaceholder || 'dd-mm-yyyy'\"\n    [dateFormat]=\"dateFormat\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"dateValue$ | async\"\n    (ngModelChange)=\"onDateSelected($event)\"\n  ></cds-date-picker>\n\n  <cds-timepicker\n    *ngIf=\"enableTime\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [placeholder]=\"timePlaceholder || 'hh:mm'\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"timeValue$ | async\"\n    (ngModelChange)=\"onTimeSelected($event)\"\n  ></cds-timepicker>\n</div>\n", styles: [".valtimo-date-time-picker{display:flex;flex-direction:column;gap:8px}.valtimo-date-time-picker.full-width{width:100%}.valtimo-date-time-picker.margin{margin-bottom:16px}.valtimo-date-time-picker__wrapper{display:flex;align-items:flex-end;gap:16px}.valtimo-date-time-picker ::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important}.valtimo-date-time-picker ::ng-deep .cds--date-picker__input,.valtimo-date-time-picker ::ng-deep .cds--time-picker__input-field{background-color:var(--cds-field-01)!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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputModule$1 }, { kind: "ngmodule", type: DatePickerModule$1 }, { kind: "component", type: i2$2.DatePicker, selector: "cds-date-picker, ibm-date-picker", inputs: ["range", "dateFormat", "language", "label", "helperText", "rangeHelperText", "rangeLabel", "placeholder", "ariaLabel", "inputPattern", "id", "value", "theme", "disabled", "readonly", "invalid", "invalidText", "warn", "warnText", "size", "rangeInvalid", "rangeInvalidText", "rangeWarn", "rangeWarnText", "skeleton", "plugins", "flatpickrOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: TimePickerModule }, { kind: "component", type: i2$2.TimePicker, selector: "cds-timepicker, ibm-timepicker", inputs: ["invalid", "invalidText", "label", "hideLabel", "placeholder", "pattern", "id", "disabled", "value", "maxLength", "skeleton", "theme", "size"], outputs: ["valueChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -14183,7 +14214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         DatePickerModule$1,
                         TimePickerModule,
                         LayerModule,
-                    ], 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<v-input-label\n  *ngIf=\"showFieldLabel && (title || titleTranslationKey)\"\n  [name]=\"name\"\n  [required]=\"required\"\n  [small]=\"smallLabel\"\n  [titleTranslationKey]=\"titleTranslationKey\"\n  [title]=\"title\"\n  [tooltip]=\"tooltip\"\n>\n</v-input-label>\n\n<div class=\"valtimo-date-time-picker__wrapper\">\n  <cds-date-picker\n    class=\"date-only\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [label]=\"labelText\"\n    [placeholder]=\"datePlaceholder || 'dd-mm-yyyy'\"\n    [dateFormat]=\"dateFormat\"\n    [disabled]=\"disabled\"\n    (valueChange)=\"onDateSelected($event)\"\n  ></cds-date-picker>\n\n  <cds-timepicker\n    *ngIf=\"enableTime\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [placeholder]=\"timePlaceholder || 'hh:mm'\"\n    [value]=\"timeValue\"\n    [disabled]=\"disabled\"\n    (valueChange)=\"onTimeSelected($event)\"\n  >\n  </cds-timepicker>\n</div>\n", styles: [".valtimo-date-time-picker{display:flex;flex-direction:column;gap:8px}.valtimo-date-time-picker.full-width{width:100%}.valtimo-date-time-picker.margin{margin-bottom:16px}.valtimo-date-time-picker__wrapper{display:flex;align-items:flex-end;gap:16px}.valtimo-date-time-picker ::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important}.valtimo-date-time-picker ::ng-deep .cds--date-picker__input,.valtimo-date-time-picker ::ng-deep .cds--time-picker__input-field{background-color:var(--cds-field-01)!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"] }]
+                    ], 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<v-input-label\n  *ngIf=\"showFieldLabel && (title || titleTranslationKey)\"\n  [name]=\"name\"\n  [required]=\"required\"\n  [small]=\"smallLabel\"\n  [titleTranslationKey]=\"titleTranslationKey\"\n  [title]=\"title\"\n  [tooltip]=\"tooltip\"\n>\n</v-input-label>\n\n<div class=\"valtimo-date-time-picker__wrapper\">\n  <cds-date-picker\n    class=\"date-only\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [label]=\"labelText\"\n    [placeholder]=\"datePlaceholder || 'dd-mm-yyyy'\"\n    [dateFormat]=\"dateFormat\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"dateValue$ | async\"\n    (ngModelChange)=\"onDateSelected($event)\"\n  ></cds-date-picker>\n\n  <cds-timepicker\n    *ngIf=\"enableTime\"\n    [cdsLayer]=\"1\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n    [placeholder]=\"timePlaceholder || 'hh:mm'\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"timeValue$ | async\"\n    (ngModelChange)=\"onTimeSelected($event)\"\n  ></cds-timepicker>\n</div>\n", styles: [".valtimo-date-time-picker{display:flex;flex-direction:column;gap:8px}.valtimo-date-time-picker.full-width{width:100%}.valtimo-date-time-picker.margin{margin-bottom:16px}.valtimo-date-time-picker__wrapper{display:flex;align-items:flex-end;gap:16px}.valtimo-date-time-picker ::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important}.valtimo-date-time-picker ::ng-deep .cds--date-picker__input,.valtimo-date-time-picker ::ng-deep .cds--time-picker__input-field{background-color:var(--cds-field-01)!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"] }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.valtimo-date-time-picker']