@formio/js 5.0.0-dev.5822.ae2ec5b → 5.0.0-dev.5826.02fa4d9

package/lib/cjs/Webform.js

@@ -1253,7 +1253,7 @@ class Webform extends NestedDataComponent_1.default {
         const errors = shouldValidate
             ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change' }))
             : [];
-        value.isValid = errors.length === 0;
+        value.isValid = (errors || []).filter(err => !err.fromServer).length === 0;
         this.loading = false;
         if (this.submitted) {
             // show server errors while they are not cleaned/fixed

package/lib/cjs/WebformBuilder.js

@@ -914,8 +914,11 @@ class WebformBuilder extends Component_1.default {
             keyboardActionsEnabled = keyboardActionsEnabled === 'true';
         }
         this.keyboardActionsEnabled = keyboardActionsEnabled;
+        const isSubmitButton = (comp) => {
+            return (comp.type === 'button') && ((comp.action === 'submit') || !comp.action);
+        };
         const isShowSubmitButton = !this.options.noDefaultSubmitButton
-            && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));
+            && (!form.components.length || !form.components.find(comp => isSubmitButton(comp)));
         // Ensure there is at least a submit button.
         if (isShowSubmitButton) {
             form.components.push({

package/lib/cjs/components/_classes/list/ListComponent.d.ts

@@ -1,6 +1,7 @@
 export default class ListComponent extends Field {
     get isSelectURL(): boolean;
     get selectData(): any;
+    get dataReady(): any;
     get shouldLoad(): boolean;
     getTemplateKeys(): void;
     templateKeys: string[] | undefined;
@@ -10,6 +11,9 @@ export default class ListComponent extends Field {
     loadItems(): void;
     getOptionTemplate(data: any, value: any, index: any): any;
     itemTemplate(data: any, value: any, index: any): any;
+    set itemsLoaded(promise: any);
+    get itemsLoaded(): any;
+    _itemsLoaded: any;
     handleLoadingError(err: any): void;
     loading: boolean | undefined;
     networkError: boolean | undefined;

package/lib/cjs/components/_classes/list/ListComponent.js

@@ -26,6 +26,16 @@ class ListComponent extends Field_1.default {
         const selectData = lodash_1.default.get(this.root, 'submission.metadata.selectData', {});
         return lodash_1.default.get(selectData, this.path);
     }
+    get dataReady() {
+        // If the root submission has been set, and we are still not attached, then assume
+        // that our data is ready.
+        if (this.root &&
+            this.root.submissionSet &&
+            !this.attached) {
+            return Promise.resolve();
+        }
+        return this.itemsLoaded;
+    }
     get shouldLoad() {
         if (this.loadingError) {
             return false;
@@ -112,6 +122,12 @@ class ListComponent extends Field_1.default {
             return this.sanitize(JSON.stringify(data), this.shouldSanitizeValue);
         }
     }
+    get itemsLoaded() {
+        return this._itemsLoaded || Promise.resolve();
+    }
+    set itemsLoaded(promise) {
+        this._itemsLoaded = promise;
+    }
     handleLoadingError(err) {
         this.loading = false;
         if (err.networkError) {

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -683,9 +683,12 @@ class NestedComponent extends Field_1.default {
         return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));
     }
     validationProcessor({ scope, data, row, instance, component }, flags) {
+        var _a;
         const { dirty } = flags;
         if (this.root.hasExtraPages && this.page !== this.root.page) {
-            instance = this.getComponent(component.path);
+            instance = ((_a = this.childComponentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(component.path))
+                ? this.childComponentsMap[component.path]
+                : this.getComponent(component.path);
         }
         if (!instance) {
             return;

package/lib/cjs/components/day/Day.js

@@ -420,7 +420,9 @@ class DayComponent extends Field_1.default {
             DAY = null;
         }
         if (!this.showMonth) {
-            DAY = DAY === 0 ? 0 : DAY - 1;
+            if (!lodash_1.default.isNull(DAY)) {
+                DAY = DAY === 0 ? 0 : DAY - 1;
+            }
             YEAR = YEAR - 1;
             MONTH = null;
         }

package/lib/cjs/components/radio/Radio.d.ts

@@ -23,10 +23,10 @@ export default class RadioComponent extends ListComponent {
     get listData(): any;
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
-    itemsLoaded: Promise<any> | undefined;
     itemsLoadedResolve: ((value: any) => void) | undefined;
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
+    beforeSubmit(): Promise<any>;
     render(): import("../_classes/field/Field").default;
     attach(element: any): Promise<void>;
     detach(element: any): void;

package/lib/cjs/components/radio/Radio.js

@@ -126,12 +126,23 @@ class RadioComponent extends ListComponent_1.default {
         this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
-        this.optionsLoaded = false;
+        this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';
         this.loadedOptions = [];
+        if (!this.visible) {
+            this.itemsLoadedResolve();
+        }
         // Get the template keys for this radio component.
         this.getTemplateKeys();
     }
+    beforeSubmit() {
+        return new Promise(res => {
+            this.dataReady.then(() => res(true));
+        });
+    }
     render() {
+        if (!this.optionsLoaded) {
+            return super.render(this.renderTemplate('loader'));
+        }
         return super.render(this.renderTemplate('radio', {
             input: this.inputInfo,
             inline: this.component.inline,
@@ -242,12 +253,22 @@ class RadioComponent extends ListComponent_1.default {
             this.refs.input[index].checked = (inputValue === value.toString());
         }
     }
+    get shouldLoad() {
+        // do not load options if the value is empty in readOnly and we have options available in metadata
+        if (this.options.readOnly && this.isEmpty() && this.listData) {
+            return false;
+        }
+        return super.shouldLoad;
+    }
     loadItems(url, search, headers, options, method, body) {
         if (this.optionsLoaded) {
+            this.itemsLoadedResolve();
             return;
         }
         if (!this.shouldLoad && this.listData) {
             this.loadItemsFromMetadata();
+            this.itemsLoadedResolve();
+            this.optionsLoaded = true;
             return;
         }
         // Ensure we have a method and remove any body if method is get
@@ -278,6 +299,7 @@ class RadioComponent extends ListComponent_1.default {
             this.redraw();
         })
             .catch((err) => {
+            this.optionsLoaded = true;
             this.handleLoadingError(err);
         });
     }
@@ -318,6 +340,7 @@ class RadioComponent extends ListComponent_1.default {
             }
             lodash_1.default.set(submission.metadata.listData, this.path, listData);
         }
+        this.itemsLoadedResolve();
     }
     setSelectedClasses() {
         if (this.refs.wrapper) {

package/lib/cjs/components/select/Select.d.ts

@@ -54,8 +54,6 @@ export default class SelectComponent extends ListComponent {
     static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
-    set itemsLoaded(promise: any);
-    get itemsLoaded(): any;
     itemsLoadedResolve: ((value: any) => void) | undefined;
     isFromSearch: boolean | undefined;
     searchServerCount: any;
@@ -65,7 +63,6 @@ export default class SelectComponent extends ListComponent {
     defaultDownloadedResources: any;
     activated: boolean | undefined;
     shouldPositionDropdown: any;
-    get dataReady(): any;
     get emptyValue(): {};
     get valueProperty(): any;
     get inputInfo(): any;
@@ -141,7 +138,6 @@ export default class SelectComponent extends ListComponent {
     lazyLoadInit: boolean | undefined;
     isInitApiCallNeeded(hasValue: any): any;
     setChoicesValue(value: any, hasPreviousValue: any, flags?: {}): void;
-    _itemsLoaded: any;
     validateValueAvailability(setting: any, value: any): boolean;
     /**
      * Performs required transformations on the initial value to use in selectOptions

package/lib/cjs/components/select/Select.js

@@ -150,16 +150,6 @@ class SelectComponent extends ListComponent_1.default {
         // Get the template keys for this select component.
         this.getTemplateKeys();
     }
-    get dataReady() {
-        // If the root submission has been set, and we are still not attached, then assume
-        // that our data is ready.
-        if (this.root &&
-            this.root.submissionSet &&
-            !this.attached) {
-            return Promise.resolve();
-        }
-        return this.itemsLoaded;
-    }
     get defaultSchema() {
         return SelectComponent.schema();
     }
@@ -1369,12 +1359,6 @@ class SelectComponent extends ListComponent_1.default {
             }
         }
     }
-    get itemsLoaded() {
-        return this._itemsLoaded || Promise.resolve();
-    }
-    set itemsLoaded(promise) {
-        this._itemsLoaded = promise;
-    }
     validateValueAvailability(setting, value) {
         if (!(0, utils_1.boolValue)(setting) || !value) {
             return true;

package/lib/mjs/Webform.js

@@ -1259,7 +1259,7 @@ export default class Webform extends NestedDataComponent {
                 process: 'change'
             })
             : [];
-        value.isValid = errors.length === 0;
+        value.isValid = (errors || []).filter(err => !err.fromServer).length === 0;
         this.loading = false;
         if (this.submitted) {
             // show server errors while they are not cleaned/fixed

package/lib/mjs/WebformBuilder.js

@@ -898,8 +898,11 @@ export default class WebformBuilder extends Component {
             keyboardActionsEnabled = keyboardActionsEnabled === 'true';
         }
         this.keyboardActionsEnabled = keyboardActionsEnabled;
+        const isSubmitButton = (comp) => {
+            return (comp.type === 'button') && ((comp.action === 'submit') || !comp.action);
+        };
         const isShowSubmitButton = !this.options.noDefaultSubmitButton
-            && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));
+            && (!form.components.length || !form.components.find(comp => isSubmitButton(comp)));
         // Ensure there is at least a submit button.
         if (isShowSubmitButton) {
             form.components.push({

package/lib/mjs/components/_classes/list/ListComponent.d.ts

@@ -1,6 +1,7 @@
 export default class ListComponent extends Field {
     get isSelectURL(): boolean;
     get selectData(): any;
+    get dataReady(): any;
     get shouldLoad(): boolean;
     getTemplateKeys(): void;
     templateKeys: string[] | undefined;
@@ -10,6 +11,9 @@ export default class ListComponent extends Field {
     loadItems(): void;
     getOptionTemplate(data: any, value: any, index: any): any;
     itemTemplate(data: any, value: any, index: any): any;
+    set itemsLoaded(promise: any);
+    get itemsLoaded(): any;
+    _itemsLoaded: any;
     handleLoadingError(err: any): void;
     loading: boolean | undefined;
     networkError: boolean | undefined;

package/lib/mjs/components/_classes/list/ListComponent.js

@@ -21,6 +21,16 @@ export default class ListComponent extends Field {
         const selectData = _.get(this.root, 'submission.metadata.selectData', {});
         return _.get(selectData, this.path);
     }
+    get dataReady() {
+        // If the root submission has been set, and we are still not attached, then assume
+        // that our data is ready.
+        if (this.root &&
+            this.root.submissionSet &&
+            !this.attached) {
+            return Promise.resolve();
+        }
+        return this.itemsLoaded;
+    }
     get shouldLoad() {
         if (this.loadingError) {
             return false;
@@ -107,6 +117,12 @@ export default class ListComponent extends Field {
             return this.sanitize(JSON.stringify(data), this.shouldSanitizeValue);
         }
     }
+    get itemsLoaded() {
+        return this._itemsLoaded || Promise.resolve();
+    }
+    set itemsLoaded(promise) {
+        this._itemsLoaded = promise;
+    }
     handleLoadingError(err) {
         this.loading = false;
         if (err.networkError) {

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -681,7 +681,9 @@ export default class NestedComponent extends Field {
     validationProcessor({ scope, data, row, instance, component }, flags) {
         const { dirty } = flags;
         if (this.root.hasExtraPages && this.page !== this.root.page) {
-            instance = this.getComponent(component.path);
+            instance = this.childComponentsMap?.hasOwnProperty(component.path)
+                ? this.childComponentsMap[component.path]
+                : this.getComponent(component.path);
         }
         if (!instance) {
             return;

package/lib/mjs/components/day/Day.js

@@ -418,7 +418,9 @@ export default class DayComponent extends Field {
             DAY = null;
         }
         if (!this.showMonth) {
-            DAY = DAY === 0 ? 0 : DAY - 1;
+            if (!_.isNull(DAY)) {
+                DAY = DAY === 0 ? 0 : DAY - 1;
+            }
             YEAR = YEAR - 1;
             MONTH = null;
         }

package/lib/mjs/components/radio/Radio.d.ts

@@ -23,10 +23,10 @@ export default class RadioComponent extends ListComponent {
     get listData(): any;
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
-    itemsLoaded: Promise<any> | undefined;
     itemsLoadedResolve: ((value: any) => void) | undefined;
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
+    beforeSubmit(): Promise<any>;
     render(): import("../_classes/field/Field").default;
     attach(element: any): Promise<void>;
     detach(element: any): void;

package/lib/mjs/components/radio/Radio.js

@@ -126,12 +126,23 @@ export default class RadioComponent extends ListComponent {
         this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
-        this.optionsLoaded = false;
+        this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';
         this.loadedOptions = [];
+        if (!this.visible) {
+            this.itemsLoadedResolve();
+        }
         // Get the template keys for this radio component.
         this.getTemplateKeys();
     }
+    beforeSubmit() {
+        return new Promise(res => {
+            this.dataReady.then(() => res(true));
+        });
+    }
     render() {
+        if (!this.optionsLoaded) {
+            return super.render(this.renderTemplate('loader'));
+        }
         return super.render(this.renderTemplate('radio', {
             input: this.inputInfo,
             inline: this.component.inline,
@@ -242,12 +253,22 @@ export default class RadioComponent extends ListComponent {
             this.refs.input[index].checked = (inputValue === value.toString());
         }
     }
+    get shouldLoad() {
+        // do not load options if the value is empty in readOnly and we have options available in metadata
+        if (this.options.readOnly && this.isEmpty() && this.listData) {
+            return false;
+        }
+        return super.shouldLoad;
+    }
     loadItems(url, search, headers, options, method, body) {
         if (this.optionsLoaded) {
+            this.itemsLoadedResolve();
             return;
         }
         if (!this.shouldLoad && this.listData) {
             this.loadItemsFromMetadata();
+            this.itemsLoadedResolve();
+            this.optionsLoaded = true;
             return;
         }
         // Ensure we have a method and remove any body if method is get
@@ -278,6 +299,7 @@ export default class RadioComponent extends ListComponent {
             this.redraw();
         })
             .catch((err) => {
+            this.optionsLoaded = true;
             this.handleLoadingError(err);
         });
     }
@@ -318,6 +340,7 @@ export default class RadioComponent extends ListComponent {
             }
             _.set(submission.metadata.listData, this.path, listData);
         }
+        this.itemsLoadedResolve();
     }
     setSelectedClasses() {
         if (this.refs.wrapper) {

package/lib/mjs/components/select/Select.d.ts

@@ -54,8 +54,6 @@ export default class SelectComponent extends ListComponent {
     static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
-    set itemsLoaded(promise: any);
-    get itemsLoaded(): any;
     itemsLoadedResolve: ((value: any) => void) | undefined;
     isFromSearch: boolean | undefined;
     searchServerCount: any;
@@ -65,7 +63,6 @@ export default class SelectComponent extends ListComponent {
     defaultDownloadedResources: any;
     activated: boolean | undefined;
     shouldPositionDropdown: any;
-    get dataReady(): any;
     get emptyValue(): {};
     get valueProperty(): any;
     get inputInfo(): any;
@@ -141,7 +138,6 @@ export default class SelectComponent extends ListComponent {
     lazyLoadInit: boolean | undefined;
     isInitApiCallNeeded(hasValue: any): any;
     setChoicesValue(value: any, hasPreviousValue: any, flags?: {}): void;
-    _itemsLoaded: any;
     validateValueAvailability(setting: any, value: any): boolean;
     /**
      * Performs required transformations on the initial value to use in selectOptions

package/lib/mjs/components/select/Select.js

@@ -150,16 +150,6 @@ export default class SelectComponent extends ListComponent {
         // Get the template keys for this select component.
         this.getTemplateKeys();
     }
-    get dataReady() {
-        // If the root submission has been set, and we are still not attached, then assume
-        // that our data is ready.
-        if (this.root &&
-            this.root.submissionSet &&
-            !this.attached) {
-            return Promise.resolve();
-        }
-        return this.itemsLoaded;
-    }
     get defaultSchema() {
         return SelectComponent.schema();
     }
@@ -1397,12 +1387,6 @@ export default class SelectComponent extends ListComponent {
             }
         }
     }
-    get itemsLoaded() {
-        return this._itemsLoaded || Promise.resolve();
-    }
-    set itemsLoaded(promise) {
-        this._itemsLoaded = promise;
-    }
     validateValueAvailability(setting, value) {
         if (!boolValue(setting) || !value) {
             return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5822.ae2ec5b",
+  "version": "5.0.0-dev.5826.02fa4d9",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {