@formio/js 5.0.0-dev.5914.479573c → 5.0.0-dev.5914.76c64d9

package/lib/cjs/WebformBuilder.js

@@ -901,13 +901,16 @@ 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 => isSubmitButton(comp)));
+        const { display, noAddSubmitButton, noDefaultSubmitButton } = this.options;
+        const { _id, components } = form;
+        const isSubmitButton = ({ type, action }) => type === 'button' && (action === 'submit' || !action);
+        const hasSubmitButton = components.some(isSubmitButton);
+        // Add submit button if form display was switched from wizard
+        // Don't add if there is noAddSubmitButton flag passed, or the form has id, or the form has a submit button already
+        const shouldAddSubmitButton = (display === 'wizard' && !hasSubmitButton) ||
+            (!noAddSubmitButton && !_id && !hasSubmitButton);
         // Ensure there is at least a submit button.
-        if (isShowSubmitButton) {
+        if (!noDefaultSubmitButton && shouldAddSubmitButton) {
             form.components.push({
                 type: 'button',
                 label: 'Submit',
@@ -1056,6 +1059,7 @@ class WebformBuilder extends Component_1.default {
                     'conditional',
                     'customConditional',
                     'id',
+                    'logic',
                     'fields.day.required',
                     'fields.month.required',
                     'fields.year.required',
@@ -1081,6 +1085,12 @@ class WebformBuilder extends Component_1.default {
                     parentComponent.tabs[tabIndex].splice(index, 1, newComp);
                     newComp.checkValidity = () => true;
                     newComp.build(defaultValueComponent.element);
+                    if (this.preview && !this.preview.defaultChanged) {
+                        const defaultValue = lodash_1.default.get(this.preview._data, this.editForm._data.key);
+                        if (lodash_1.default.isObject(defaultValue) && !lodash_1.default.isArray(defaultValue)) {
+                            this.editForm._data.defaultValue = defaultValue;
+                        }
+                    }
                 }
             }
             else {
@@ -1091,6 +1101,7 @@ class WebformBuilder extends Component_1.default {
                     path.unshift(component.key);
                     dataPath = (0, utils_1.getStringFromComponentPath)(path);
                 }
+                this.preview.defaultChanged = true;
                 lodash_1.default.set(this.preview._data, dataPath, changed.value);
                 lodash_1.default.set(this.webform._data, dataPath, changed.value);
             }

package/lib/cjs/Wizard.d.ts

@@ -105,7 +105,6 @@ declare class Wizard extends Webform {
     pageId(page: any): any;
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
-    showErrors(errors: any, triggerEvent: any): void | any[];
     focusOnComponent(key: any): void | Promise<void>;
 }
 declare namespace Wizard {

package/lib/cjs/Wizard.js

@@ -602,9 +602,10 @@ class Wizard extends Webform_1.default {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
-                this.validateCurrentPage({
-                    dirty: this.submitted
-                });
+                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
+                if (this.alert) {
+                    this.showErrors(errors, true, true);
+                }
             });
             return Promise.resolve();
         }
@@ -701,9 +702,11 @@ class Wizard extends Webform_1.default {
                 });
             });
         }
-        // Validate the form, before go to the next page
-        const errors = this.validateCurrentPage({ dirty: true });
-        if (errors.length === 0) {
+        // Validate the form before going to the next page
+        const currentPageErrors = this.validateCurrentPage({ dirty: true });
+        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;
+        // allow going to the next page if the current page is valid, even if there are form level errors
+        if (currentPageErrors.length === 0) {
             this.checkData(this.submission.data);
             return this.beforePage(true).then(() => {
                 return this.setPage(this.getNextPage()).then(() => {
@@ -718,13 +721,14 @@ class Wizard extends Webform_1.default {
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
             this.scrollIntoView(this.element, true);
-            return Promise.reject(super.showErrors(errors, true));
+            return Promise.reject(this.showErrors(errors, true));
         }
     }
     validateCurrentPage(flags = {}) {
-        var _a;
+        var _a, _b;
+        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);
         // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
-        return (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.parent.validateComponents(this.currentPage.component.components, this.root.data, flags);
+        return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.root.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -866,7 +870,8 @@ class Wizard extends Webform_1.default {
     onChange(flags, changed, modified, changes) {
         var _a, _b;
         super.onChange(flags, changed, modified, changes);
-        const errors = this.validate(this.localData, { dirty: false });
+        // The onChange loop doesn't need all components for wizards
+        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
         if (this.alert) {
             this.showErrors(errors, true, true);
         }
@@ -914,20 +919,7 @@ class Wizard extends Webform_1.default {
         return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {
-        if (!this.isLastPage()) {
-            return this.currentPage.errors;
-        }
-        return super.errors;
-    }
-    showErrors(errors, triggerEvent) {
-        if (this.hasExtraPages) {
-            this.subWizards.forEach((subWizard) => {
-                if (Array.isArray(subWizard.errors)) {
-                    errors = [...errors, ...subWizard.errors];
-                }
-            });
-        }
-        return super.showErrors(errors, triggerEvent);
+        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;
     }
     focusOnComponent(key) {
         const component = this.getComponent(key);

package/lib/cjs/components/_classes/componentModal/ComponentModal.d.ts

@@ -22,6 +22,7 @@ export default class ComponentModal {
         modalOverlay: string;
         modalContents: string;
         modalClose: string;
+        componentContent: string;
         openModalWrapper: string;
         openModal: string;
         modalSave: string;

package/lib/cjs/components/_classes/componentModal/ComponentModal.js

@@ -64,6 +64,7 @@ class ComponentModal {
             modalOverlay: 'single',
             modalContents: 'single',
             modalClose: 'single',
+            componentContent: 'single',
             openModalWrapper: 'single',
             openModal: 'single',
             modalSave: 'single',

package/lib/cjs/components/form/Form.js

@@ -294,7 +294,7 @@ class FormComponent extends Component_1.default {
                     const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
                     const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
                     this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
-                    this.subForm.element = this.componentModal.refs.modalContents;
+                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;
                     this.setOpenModalElement();
                 }
                 this.calculateValue();
@@ -396,6 +396,7 @@ class FormComponent extends Component_1.default {
                 const componentsMap = this.componentsMap;
                 const formComponentsMap = this.subForm.componentsMap;
                 lodash_1.default.assign(componentsMap, formComponentsMap);
+                this.component.components = this.subForm.components.map((comp) => comp.component);
                 this.subForm.parent = this;
                 this.subForm.parentVisible = this.visible;
                 this.subForm.on('change', () => {

package/lib/cjs/components/selectboxes/SelectBoxes.js

@@ -139,6 +139,14 @@ class SelectBoxesComponent extends Radio_1.default {
             checkedValues.forEach((value) => selectData.push(this.templateData[value]));
             lodash_1.default.set(submission.metadata.selectData, this.path, selectData);
         }
+        // Ensure that for dataSrc == 'values' that there are not any other superfluous values.
+        if (this.component.dataSrc === 'values') {
+            for (const key in value) {
+                if (!this.component.values.find((val) => val.value === key)) {
+                    delete value[key];
+                }
+            }
+        }
         return value;
     }
     /**

package/lib/mjs/WebformBuilder.js

@@ -885,13 +885,16 @@ 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 => isSubmitButton(comp)));
+        const { display, noAddSubmitButton, noDefaultSubmitButton } = this.options;
+        const { _id, components } = form;
+        const isSubmitButton = ({ type, action }) => type === 'button' && (action === 'submit' || !action);
+        const hasSubmitButton = components.some(isSubmitButton);
+        // Add submit button if form display was switched from wizard
+        // Don't add if there is noAddSubmitButton flag passed, or the form has id, or the form has a submit button already
+        const shouldAddSubmitButton = (display === 'wizard' && !hasSubmitButton) ||
+            (!noAddSubmitButton && !_id && !hasSubmitButton);
         // Ensure there is at least a submit button.
-        if (isShowSubmitButton) {
+        if (!noDefaultSubmitButton && shouldAddSubmitButton) {
             form.components.push({
                 type: 'button',
                 label: 'Submit',
@@ -1040,6 +1043,7 @@ export default class WebformBuilder extends Component {
                     'conditional',
                     'customConditional',
                     'id',
+                    'logic',
                     'fields.day.required',
                     'fields.month.required',
                     'fields.year.required',
@@ -1065,6 +1069,12 @@ export default class WebformBuilder extends Component {
                     parentComponent.tabs[tabIndex].splice(index, 1, newComp);
                     newComp.checkValidity = () => true;
                     newComp.build(defaultValueComponent.element);
+                    if (this.preview && !this.preview.defaultChanged) {
+                        const defaultValue = _.get(this.preview._data, this.editForm._data.key);
+                        if (_.isObject(defaultValue) && !_.isArray(defaultValue)) {
+                            this.editForm._data.defaultValue = defaultValue;
+                        }
+                    }
                 }
             }
             else {
@@ -1075,6 +1085,7 @@ export default class WebformBuilder extends Component {
                     path.unshift(component.key);
                     dataPath = getStringFromComponentPath(path);
                 }
+                this.preview.defaultChanged = true;
                 _.set(this.preview._data, dataPath, changed.value);
                 _.set(this.webform._data, dataPath, changed.value);
             }

package/lib/mjs/Wizard.d.ts

@@ -105,7 +105,6 @@ declare class Wizard extends Webform {
     pageId(page: any): any;
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
-    showErrors(errors: any, triggerEvent: any): void | any[];
     focusOnComponent(key: any): void | Promise<void>;
 }
 declare namespace Wizard {

package/lib/mjs/Wizard.js

@@ -594,9 +594,10 @@ export default class Wizard extends Webform {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
-                this.validateCurrentPage({
-                    dirty: this.submitted
-                });
+                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
+                if (this.alert) {
+                    this.showErrors(errors, true, true);
+                }
             });
             return Promise.resolve();
         }
@@ -691,9 +692,11 @@ export default class Wizard extends Webform {
                 });
             });
         }
-        // Validate the form, before go to the next page
-        const errors = this.validateCurrentPage({ dirty: true });
-        if (errors.length === 0) {
+        // Validate the form before going to the next page
+        const currentPageErrors = this.validateCurrentPage({ dirty: true });
+        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;
+        // allow going to the next page if the current page is valid, even if there are form level errors
+        if (currentPageErrors.length === 0) {
             this.checkData(this.submission.data);
             return this.beforePage(true).then(() => {
                 return this.setPage(this.getNextPage()).then(() => {
@@ -708,12 +711,13 @@ export default class Wizard extends Webform {
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
             this.scrollIntoView(this.element, true);
-            return Promise.reject(super.showErrors(errors, true));
+            return Promise.reject(this.showErrors(errors, true));
         }
     }
     validateCurrentPage(flags = {}) {
+        const components = this.currentPage?.components.map((component) => component.component);
         // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
-        return this.currentPage?.parent.validateComponents(this.currentPage.component.components, this.root.data, flags);
+        return this.currentPage?.parent.validateComponents(components, this.root.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -854,7 +858,8 @@ export default class Wizard extends Webform {
     }
     onChange(flags, changed, modified, changes) {
         super.onChange(flags, changed, modified, changes);
-        const errors = this.validate(this.localData, { dirty: false });
+        // The onChange loop doesn't need all components for wizards
+        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
         if (this.alert) {
             this.showErrors(errors, true, true);
         }
@@ -902,20 +907,7 @@ export default class Wizard extends Webform {
         return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {
-        if (!this.isLastPage()) {
-            return this.currentPage.errors;
-        }
-        return super.errors;
-    }
-    showErrors(errors, triggerEvent) {
-        if (this.hasExtraPages) {
-            this.subWizards.forEach((subWizard) => {
-                if (Array.isArray(subWizard.errors)) {
-                    errors = [...errors, ...subWizard.errors];
-                }
-            });
-        }
-        return super.showErrors(errors, triggerEvent);
+        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;
     }
     focusOnComponent(key) {
         const component = this.getComponent(key);

package/lib/mjs/components/_classes/componentModal/ComponentModal.d.ts

@@ -22,6 +22,7 @@ export default class ComponentModal {
         modalOverlay: string;
         modalContents: string;
         modalClose: string;
+        componentContent: string;
         openModalWrapper: string;
         openModal: string;
         modalSave: string;

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -61,6 +61,7 @@ export default class ComponentModal {
             modalOverlay: 'single',
             modalContents: 'single',
             modalClose: 'single',
+            componentContent: 'single',
             openModalWrapper: 'single',
             openModal: 'single',
             modalSave: 'single',

package/lib/mjs/components/form/Form.js

@@ -291,7 +291,7 @@ export default class FormComponent extends Component {
                     const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
                     const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
                     this.componentModal = new ComponentModal(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
-                    this.subForm.element = this.componentModal.refs.modalContents;
+                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;
                     this.setOpenModalElement();
                 }
                 this.calculateValue();
@@ -392,6 +392,7 @@ export default class FormComponent extends Component {
                 const componentsMap = this.componentsMap;
                 const formComponentsMap = this.subForm.componentsMap;
                 _.assign(componentsMap, formComponentsMap);
+                this.component.components = this.subForm.components.map((comp) => comp.component);
                 this.subForm.parent = this;
                 this.subForm.parentVisible = this.visible;
                 this.subForm.on('change', () => {

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -141,6 +141,14 @@ export default class SelectBoxesComponent extends RadioComponent {
             checkedValues.forEach((value) => selectData.push(this.templateData[value]));
             _.set(submission.metadata.selectData, this.path, selectData);
         }
+        // Ensure that for dataSrc == 'values' that there are not any other superfluous values.
+        if (this.component.dataSrc === 'values') {
+            for (const key in value) {
+                if (!this.component.values.find((val) => val.value === key)) {
+                    delete value[key];
+                }
+            }
+        }
         return value;
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5914.479573c",
+  "version": "5.0.0-dev.5914.76c64d9",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -80,9 +80,9 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "3.0.0-dev.98.17ba6ea",
+    "@formio/bootstrap": "3.0.0-dev.111.ae7f187",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "2.1.0-dev.193.dc60547",
+    "@formio/core": "2.1.0-dev.193.68cf8c3",
     "@formio/text-mask-addons": "3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",