@valtimo/components 10.8.1 → 10.8.2

package/fesm2020/valtimo-components.mjs

@@ -4872,50 +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,
+                    ...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();
@@ -4925,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) {
@@ -4951,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();
     }
@@ -4996,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  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async\n  } as obs\"\n>\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=\"obs.formioOptions\"\n    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"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" }] });
+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  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async\n  } as obs\"\n>\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=\"obs.formioOptions\"\n    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"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: { 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$: [{
@@ -6534,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,
@@ -6642,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;
         }
@@ -6682,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,
@@ -6980,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;
         }
     }