@valtimo/components 10.8.0 → 10.8.2

package/fesm2020/valtimo-components.mjs

@@ -4872,47 +4872,58 @@ class FormioComponent {
         this.route = route;
         this.translateService = translateService;
         this.modalService = modalService;
-        this.submission = {};
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.submit = new EventEmitter();
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.change = new EventEmitter();
         this.refreshForm = new EventEmitter();
-        this.errors = [];
+        this.submission$ = new BehaviorSubject(undefined);
+        this.form$ = new BehaviorSubject(undefined);
+        this.options$ = new BehaviorSubject(undefined);
+        this.readOnly$ = new BehaviorSubject(false);
+        this.errors$ = new BehaviorSubject([]);
         this.currentLanguage$ = this.translateService.stream('key').pipe(map$1(() => this.translateService.currentLang), distinctUntilChanged());
-        this.formioOptions$ = this.currentLanguage$.pipe(map$1(language => {
+        this.formioOptions$ = combineLatest([
+            this.currentLanguage$,
+            this.options$,
+        ]).pipe(map$1(([language, options]) => {
             const formioTranslations = this.translateService.instant('formioTranslations');
             return typeof formioTranslations === 'object'
                 ? {
-                    ...this.options,
-                    language,
+                    ...options,
                     i18n: {
                         [language]: this.stateService.flattenTranslationsObject(formioTranslations),
                     },
+                    language,
                 }
-                : this.options;
+                : {
+                    ...options,
+                    language,
+                };
         }));
+        this._subscriptions = new Subscription();
+    }
+    set options(optionsValue) {
+        this.options$.next(optionsValue);
+    }
+    set submission(submissionValue) {
+        this.submission$.next(submissionValue);
+    }
+    set form(formValue) {
+        this.form$.next(formValue);
+    }
+    set readOnly(readOnlyValue) {
+        this.readOnly$.next(readOnlyValue);
     }
     ngOnInit() {
-        const documentDefinitionName = this.route.snapshot.paramMap.get('documentDefinitionName');
-        const documentId = this.route.snapshot.paramMap.get('documentId');
-        this.formDefinition = this.form;
-        this.errors = [];
+        this.openRouteSubscription();
+        this.errors$.next([]);
         this.setInitialToken();
-        if (documentDefinitionName) {
-            this.stateService.setDocumentDefinitionName(documentDefinitionName);
-        }
-        if (documentId) {
-            this.stateService.setDocumentId(documentId);
-        }
         this.subscribeFormRefresh();
+        this.openReloadFormSubscription();
+        this.openReloadSubmissionSubscription();
     }
     ngOnChanges(changes) {
-        const currentForm = changes?.form?.currentValue;
-        if (currentForm) {
-            this.formDefinition = currentForm;
-            this.reloadForm();
-        }
         this.setInitialToken();
         if (changes.formDefinitionRefresh$) {
             this.unsubscribeFormRefresh();
@@ -4922,21 +4933,16 @@ class FormioComponent {
     ngOnDestroy() {
         this.unsubscribeFormRefresh();
         this.tokenRefreshTimerSubscription?.unsubscribe();
-    }
-    reloadForm() {
-        this.refreshForm.emit({
-            form: this.formDefinition,
-        });
+        this._subscriptions.unsubscribe();
     }
     showErrors(errors) {
-        this.errors = errors;
+        this.errors$.next(errors);
     }
     onSubmit(submission) {
-        this.errors = [];
+        this.errors$.next([]);
         this.submit.emit(submission);
     }
     formReady(form) {
-        this.reloadForm();
         this.stateService.currentForm = form;
     }
     onChange(object) {
@@ -4948,6 +4954,20 @@ class FormioComponent {
     prevPage() {
         this.scrollToTop();
     }
+    openReloadFormSubscription() {
+        this._subscriptions.add(this.form$.subscribe(form => {
+            this.refreshForm.emit({
+                form,
+            });
+        }));
+    }
+    openReloadSubmissionSubscription() {
+        this._subscriptions.add(this.submission$.subscribe(submission => {
+            this.refreshForm.emit({
+                submission,
+            });
+        }));
+    }
     scrollToTop() {
         this.modalService.scrollToTop();
     }
@@ -4993,18 +5013,30 @@ class FormioComponent {
             this.formRefreshSubscription.unsubscribe();
         }
     }
+    openRouteSubscription() {
+        this._subscriptions.add(this.route.params.subscribe(params => {
+            const documentDefinitionName = params.documentDefinitionName;
+            const documentId = params.documentId;
+            if (documentDefinitionName) {
+                this.stateService.setDocumentDefinitionName(documentDefinitionName);
+            }
+            if (documentId) {
+                this.stateService.setDocumentId(documentId);
+            }
+        }));
+    }
 }
 FormioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormioComponent, deps: [{ token: i3$1.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$1.ActivatedRoute }, { token: i1.TranslateService }, { token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component });
-FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormioComponent, selector: "valtimo-form-io", inputs: { form: "form", options: "options", submission: "submission", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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  <div *ngIf=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n  <formio\n    *ngIf=\"{\n      currentLanguage: currentLanguage$ | async,\n      formioOptions: formioOptions$ | async\n    } as obs\"\n    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"obs.formioOptions || options\"\n    [readOnly]=\"readOnly\"\n    [language]=\"obs.currentLanguage\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.FormioComponent, selector: "formio" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] });
+FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormioComponent, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | 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  <formio\n    *ngIf=\"obs.formioOptions && obs.form\"\n    [submission]=\"obs.submission\"\n    [form]=\"obs.form\"\n    [refresh]=\"refreshForm\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.FormioComponent, selector: "formio" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-form-io', template: "<!--\n  ~ Copyright 2015-2023 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  <div *ngIf=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n  <formio\n    *ngIf=\"{\n      currentLanguage: currentLanguage$ | async,\n      formioOptions: formioOptions$ | async\n    } as obs\"\n    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"obs.formioOptions || options\"\n    [readOnly]=\"readOnly\"\n    [language]=\"obs.currentLanguage\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n  ></formio>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i3$1.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$1.ActivatedRoute }, { type: i1.TranslateService }, { type: ValtimoModalService }]; }, propDecorators: { form: [{
-                type: Input
-            }], options: [{
+            args: [{ selector: 'valtimo-form-io', template: "<!--\n  ~ Copyright 2015-2023 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    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | 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  <formio\n    *ngIf=\"obs.formioOptions && obs.form\"\n    [submission]=\"obs.submission\"\n    [form]=\"obs.form\"\n    [refresh]=\"refreshForm\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n  ></formio>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i3$1.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$1.ActivatedRoute }, { type: i1.TranslateService }, { type: ValtimoModalService }]; }, propDecorators: { options: [{
                 type: Input
             }], submission: [{
                 type: Input
+            }], form: [{
+                type: Input
             }], readOnly: [{
                 type: Input
             }], formRefresh$: [{
@@ -5271,8 +5303,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * limitations under the License.
  */
 class DropzoneComponent {
-    constructor(translateService) {
+    constructor(translateService, renderer, document) {
         this.translateService = translateService;
+        this.renderer = renderer;
+        this.document = document;
         this.externalError$ = new BehaviorSubject('');
         this.maxFileSize = 5;
         this.showMaxFileSize = true;
@@ -5317,6 +5351,7 @@ class DropzoneComponent {
     }
     ngOnDestroy() {
         this.clearSubscription.unsubscribe();
+        this.destroyHiddenInputs();
     }
     showCamera() {
         this.showingCamera$.next(true);
@@ -5361,13 +5396,22 @@ class DropzoneComponent {
         this.clearError();
         this.fileSelected.emit(file);
     }
+    destroyHiddenInputs() {
+        const hiddenElements = this.document.getElementsByClassName('dz-hidden-input');
+        Array.from(hiddenElements).forEach(element => {
+            element.remove();
+        });
+    }
 }
-DropzoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DropzoneComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+DropzoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DropzoneComponent, deps: [{ token: i1.TranslateService }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
 DropzoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DropzoneComponent, selector: "valtimo-dropzone", inputs: { title: "title", hideTitle: "hideTitle", subtitle: "subtitle", externalError$: "externalError$", maxFileSize: "maxFileSize", showMaxFileSize: "showMaxFileSize", acceptedFiles: "acceptedFiles", clear$: "clear$", disabled: "disabled", hideFilePreview: "hideFilePreview", uploading: "uploading", camera: "camera", maxFiles: "maxFiles" }, outputs: { fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize : 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:1.69rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon,.large-icon .mdi{line-height:60px;font-size:60px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "valtimo-progress-bar" }, { kind: "component", type: WebcamComponent, selector: "valtimo-webcam", outputs: ["imageSaved"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DropzoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dropzone', template: "<!--\n  ~ Copyright 2015-2023 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<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize : 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:1.69rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon,.large-icon .mdi{line-height:60px;font-size:60px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { dropzoneRef: [{
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i0.Renderer2 }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { dropzoneRef: [{
                 type: ViewChild,
                 args: ['dropzone']
             }], title: [{
@@ -6519,6 +6563,16 @@ const formIoUploaderEditForm = () => ({
                 required: true,
             },
         },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'validate.required',
+            label: 'Required',
+            validate: {
+                required: false,
+            },
+        },
         {
             type: 'textfield',
             input: true,
@@ -6627,9 +6681,8 @@ function registerFormioUploadComponent(injector) {
     // override setValue function to allow for setting an array value
     class UploaderComponent extends originalUploadComponent {
         setValue(value) {
-            let componentValue = this._customAngularElement?.value;
-            if (componentValue) {
-                componentValue = value;
+            if (this._customAngularElement?.value) {
+                this._customAngularElement.value = value;
             }
             return true;
         }
@@ -6667,6 +6720,16 @@ const documentenApiUploaderEditForm = () => ({
                 required: true,
             },
         },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'validate.required',
+            label: 'Required',
+            validate: {
+                required: false,
+            },
+        },
         {
             type: 'textfield',
             input: true,
@@ -6965,7 +7028,9 @@ function registerDocumentenApiFormioUploadComponent(injector) {
     // override setValue function to allow for setting an array value
     class UploaderComponent extends originalUploadComponent {
         setValue(value) {
-            this._customAngularElement.value = value;
+            if (this._customAngularElement?.value) {
+                this._customAngularElement.value = value;
+            }
             return true;
         }
     }