@formio/js 5.0.0-bb.dev.3 → 5.0.0-bb.dev.6

package/lib/cjs/components/html/HTML.d.ts

@@ -14,5 +14,6 @@ export default class HTMLComponent extends Component {
     checkRefreshOn(changed: any): void;
     renderContent(): any;
     render(): any;
+    get dataReady(): any;
 }
 import Component from '../_classes/component/Component';

package/lib/cjs/components/html/HTML.js

@@ -85,8 +85,17 @@ class HTMLComponent extends Component_1.default {
     render() {
         return super.render(this.renderContent());
     }
+    get dataReady() {
+        var _a;
+        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submissionReady) || Promise.resolve();
+    }
     attach(element) {
         this.loadRefs(element, { html: 'single' });
+        this.dataReady.then(() => {
+            if (this.element) {
+                this.setContent(this.elemet, this.content);
+            }
+        });
         return super.attach(element);
     }
 }

package/lib/cjs/components/recaptcha/ReCaptcha.js

@@ -123,17 +123,17 @@ class ReCaptchaComponent extends Component_1.default {
         }
         const componentData = row[this.component.key];
         if (!componentData || !componentData.token) {
-            this.setCustomValidity('ReCAPTCHA: Token is not specified in submission');
+            this.setCustomValidity(this.t('reCaptchaTokenNotSpecifiedError'));
             return Promise.resolve(false);
         }
         if (!componentData.success) {
-            this.setCustomValidity('ReCAPTCHA: Token validation error');
+            this.setCustomValidity(this.t('reCaptchaTokenValidationError'));
             return Promise.resolve(false);
         }
         return this.hook('validateReCaptcha', componentData.token, () => Promise.resolve(true))
             .then((success) => success)
             .catch((err) => {
-            this.setCustomValidity(err.message || err);
+            this.setCustomValidity(this.t(err.message || err));
             return false;
         });
     }

package/lib/cjs/formio.form.js

@@ -167,3 +167,17 @@ exports.useModule = useModule;
  * Formio.plugins([plugin1, plugin2, etc], options);
  */
 Formio_1.Formio.use = useModule();
+// Allow simple embedding.
+Formio_1.Formio.embedForm = (embed) => Form_1.default.embed(embed);
+/**
+ * Factory that creates a new form based on the form parameters.
+ *
+ * @param element {HMTLElement} - The HTML Element to add this form to.
+ * @param form {string|Object} - The src of the form, or a form object.
+ * @param options {Object} - The options to create this form.
+ *
+ * @return {Promise} - When the form is instance is ready.
+ */
+Formio_1.Formio.createForm = (...args) => {
+    return (new Form_1.default(...args)).ready;
+};

package/lib/cjs/translations/en.d.ts

@@ -62,5 +62,7 @@ declare namespace _default {
     const previousButtonAriaLabel: string;
     const nextButtonAriaLabel: string;
     const submitButtonAriaLabel: string;
+    const reCaptchaTokenValidationError: string;
+    const reCaptchaTokenNotSpecifiedError: string;
 }
 export default _default;

package/lib/cjs/translations/en.js

@@ -64,4 +64,6 @@ exports.default = {
     previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab',
     nextButtonAriaLabel: 'Next button. Click to go to the next tab',
     submitButtonAriaLabel: 'Submit Form button. Click to submit the form',
+    reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',
+    reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',
 };

package/lib/cjs/validator/Validator.js

@@ -860,7 +860,7 @@ class ValidationChecker {
     }
     validate(component, validatorName, value, data, index, row, async, conditionallyVisible, validationObj) {
         // Skip validation for conditionally hidden components
-        if (!conditionallyVisible) {
+        if (!conditionallyVisible && !lodash_1.default.get(component.component, 'validateWhenHidden', false)) {
             return false;
         }
         const validator = this.validators[validatorName];

package/lib/mjs/Form.js

@@ -335,18 +335,3 @@ export default class Form extends Element {
         delete this.ready;
     }
 }
-// Allow simple embedding.
-Formio.embedForm = (embed) => Form.embed(embed);
-/**
- * Factory that creates a new form based on the form parameters.
- *
- * @param element {HMTLElement} - The HTML Element to add this form to.
- * @param form {string|Object} - The src of the form, or a form object.
- * @param options {Object} - The options to create this form.
- *
- * @return {Promise} - When the form is instance is ready.
- */
-Formio.createForm = (...args) => {
-    return (new Form(...args)).ready;
-};
-Formio.Form = Form;

package/lib/mjs/components/_classes/component/Component.js

@@ -1811,6 +1811,10 @@ export default class Component extends Element {
             this.setElementInvalid(this.performInputMapping(element), false);
         });
         this.setInputWidgetErrorClasses(elements, hasErrors);
+        // do not set error classes for hidden components
+        if (!this.visible) {
+            return;
+        }
         if (hasErrors) {
             // Add error classes
             elements.forEach((input) => {
@@ -2428,8 +2432,8 @@ export default class Component extends Element {
     }
     /* eslint-disable max-statements */
     calculateComponentValue(data, flags, row) {
-        // Skip value calculation for the component if we don't have entire form data set
-        if (_.isUndefined(_.get(this, 'root.data'))) {
+        // Skip value calculation for the component if we don't have entire form data set or in builder mode
+        if (this.builderMode || _.isUndefined(_.get(this, 'root.data'))) {
             return false;
         }
         // If no calculated value or
@@ -2487,6 +2491,7 @@ export default class Component extends Element {
             }
             // Check to ensure that the calculated value is different than the previously calculated value.
             if (previousCalculatedValue && previousChanged && !calculationChanged) {
+                this.calculatedValue = null;
                 return false;
             }
             if (flags.isReordered || !calculationChanged) {
@@ -2842,6 +2847,7 @@ export default class Component extends Element {
         return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));
     }
     shouldSkipValidation(data, dirty, row) {
+        const { validateWhenHidden = false } = this.component || {};
         const rules = [
             // Force valid if component is read-only
             () => this.options.readOnly,
@@ -2850,9 +2856,9 @@ export default class Component extends Element {
             // Check to see if we are editing and if so, check component persistence.
             () => this.isValueHidden(),
             // Force valid if component is hidden.
-            () => !this.visible,
+            () => !this.visible && !validateWhenHidden,
             // Force valid if component is conditionally hidden.
-            () => !this.checkCondition(row, data)
+            () => !this.checkCondition(row, data) && !validateWhenHidden
         ];
         return rules.some(pred => pred());
     }

package/lib/mjs/components/_classes/component/editForm/Component.edit.validation.js

@@ -18,6 +18,14 @@ export default [
         key: 'unique',
         input: true
     },
+    {
+        weight: 100,
+        type: 'checkbox',
+        label: 'Validate When Hidden',
+        tooltip: 'Validates the component when it is hidden/conditionally hidden. Vaildation errors are displayed in the error alert on the form submission.',
+        key: 'validateWhenHidden',
+        input: true
+    },
     {
         weight: 0,
         type: 'select',

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

@@ -526,8 +526,8 @@ export default class NestedComponent extends Field {
         row = row || this.data;
         components = components && _.isArray(components) ? components : this.getComponents();
         const isValid = components.reduce((valid, comp) => {
-            return comp.checkData(data, flags, row) && valid;
-        }, super.checkData(data, flags, row));
+            return comp.checkData(data, { ...flags }, row) && valid;
+        }, super.checkData(data, { ...flags }, row));
         this.checkModal(isValid, this.isDirty);
         return isValid;
     }

package/lib/mjs/components/datagrid/DataGrid.js

@@ -583,7 +583,8 @@ export default class DataGridComponent extends NestedArrayComponent {
         const isSettingSubmission = flags.fromSubmission && !_.isEqual(value, this.emptyValue);
         const changed = this.hasChanged(value, this.dataValue);
         this.dataValue = value;
-        if (this.initRows || isSettingSubmission) {
+        if (this.initRows || isSettingSubmission ||
+            (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {
             if (!this.createRows() && changed) {
                 this.redraw();
             }

package/lib/mjs/components/datagrid/fixtures/comp-with-allow-calculate-override.js

@@ -40,7 +40,7 @@ export default {
                     lastName: ''
                 }
             ],
-            calculateValue: "var temp = [\n    {'firstName': 'initial 1','lastName': 'initial 2'},\n    {'firstName': 'initial 1b','lastName': 'initial 2b'},\n  ];\n  if(data.select === 'a')\n  {\n    temp = [{'firstName': 'A f 1','lastName': 'A l 1'}];\n  } else if(data.select === 'b') {  \n    temp = [{'firstName': 'B f 1','lastName': 'B l 1'}  \n    ,{'firstName': 'B f 2','lastName': 'B l 2'}];\n  } else if(data.select === 'c') {  \n    temp = [{'firstName': 'C f 1','lastName': 'C l 1'}];\n  }\n  value = temp;",
+            calculateValue: "var temp = instance.defaultValue;\n  if(data.select === 'a')\n  {\n    temp = [{'firstName': 'A f 1','lastName': 'A l 1'}];\n  } else if(data.select === 'b') {  \n    temp = [{'firstName': 'B f 1','lastName': 'B l 1'}  \n    ,{'firstName': 'B f 2','lastName': 'B l 2'}];\n  } else if(data.select === 'c') {  \n    temp = [{'firstName': 'C f 1','lastName': 'C l 1'}];\n  }\n  value = temp;",
             allowCalculateOverride: true,
             key: 'dataGrid',
             type: 'datagrid',

package/lib/mjs/components/datagrid/fixtures/index.d.ts

@@ -13,4 +13,5 @@ import withLogic from './comp-with-logic';
 import withRowGroupsAndDefValue from './comp-row-groups-with-def-value';
 import modalWithRequiredFields from './comp-modal-with-required-fields';
 import withAllowCalculateOverride from './comp-with-allow-calculate-override';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride };
+import twoWithAllowCalculatedOverride from './two-comp-with-allow-calculate-override';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride };

package/lib/mjs/components/datagrid/fixtures/index.js

@@ -13,4 +13,5 @@ import withConditionalFieldsAndValidations from './comp-with-conditional-compone
 import withLogic from './comp-with-logic';
 import withCollapsibleRowGroups from './comp-with-collapsible-groups';
 import withAllowCalculateOverride from './comp-with-allow-calculate-override';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride };
+import twoWithAllowCalculatedOverride from './two-comp-with-allow-calculate-override';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride };

package/lib/mjs/components/datagrid/fixtures/two-comp-with-allow-calculate-override.d.ts

@@ -0,0 +1,53 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: ({
+        label: string;
+        widget: string;
+        tableView: boolean;
+        data: {
+            values: {
+                label: string;
+                value: string;
+            }[];
+        };
+        key: string;
+        type: string;
+        input: boolean;
+        reorder?: undefined;
+        addAnotherPosition?: undefined;
+        layoutFixed?: undefined;
+        enableRowGroups?: undefined;
+        initEmpty?: undefined;
+        defaultValue?: undefined;
+        allowCalculateOverride?: undefined;
+        components?: undefined;
+    } | {
+        label: string;
+        reorder: boolean;
+        addAnotherPosition: string;
+        layoutFixed: boolean;
+        enableRowGroups: boolean;
+        initEmpty: boolean;
+        tableView: boolean;
+        defaultValue: {
+            firstName: string;
+            lastName: string;
+        }[];
+        calculateValue: string;
+        allowCalculateOverride: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        components: {
+            label: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+        }[];
+        widget?: undefined;
+        data?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/datagrid/fixtures/two-comp-with-allow-calculate-override.js

@@ -0,0 +1,102 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            data: {
+                values: [
+                    {
+                        label: 'a',
+                        value: 'a'
+                    },
+                    {
+                        label: 'b',
+                        value: 'b'
+                    },
+                    {
+                        label: 'c',
+                        value: 'c'
+                    }
+                ]
+            },
+            key: 'select',
+            type: 'select',
+            input: true
+        },
+        {
+            label: 'Data Grid',
+            reorder: false,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: false,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {
+                    firstName: '',
+                    lastName: ''
+                }
+            ],
+            calculateValue: "var temp = instance.defaultValue;\n  if(data.select === 'a')\n  {\n    temp = [{'firstName': 'A f 1','lastName': 'A l 1'}];\n  } else if(data.select === 'b') {  \n    temp = [{'firstName': 'B f 1','lastName': 'B l 1'}  \n    ,{'firstName': 'B f 2','lastName': 'B l 2'}];\n  } else if(data.select === 'c') {  \n    temp = [{'firstName': 'C f 1','lastName': 'C l 1'}];\n  }\n  value = temp;",
+            allowCalculateOverride: true,
+            key: 'dataGrid',
+            type: 'datagrid',
+            input: true,
+            components: [
+                {
+                    label: 'First Name',
+                    tableView: true,
+                    key: 'firstName',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Last Name',
+                    tableView: true,
+                    key: 'lastName',
+                    type: 'textfield',
+                    input: true
+                }
+            ]
+        },
+        {
+            label: 'Data Grid 2',
+            reorder: false,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: false,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {
+                    firstName: '',
+                    lastName: ''
+                }
+            ],
+            calculateValue: "var temp = instance.defaultValue;\n  if(data.select === 'a')\n  {\n    temp = [{'firstName': 'A f 1','lastName': 'A l 1'}];\n  } else if(data.select === 'b') {  \n    temp = [{'firstName': 'B f 1','lastName': 'B l 1'}  \n    ,{'firstName': 'B f 2','lastName': 'B l 2'}];\n  } else if(data.select === 'c') {  \n    temp = [{'firstName': 'C f 1','lastName': 'C l 1'}];\n  }\n  value = temp;",
+            allowCalculateOverride: true,
+            key: 'dataGrid2',
+            type: 'datagrid',
+            input: true,
+            components: [
+                {
+                    label: 'First Name',
+                    tableView: true,
+                    key: 'firstName',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Last Name',
+                    tableView: true,
+                    key: 'lastName',
+                    type: 'textfield',
+                    input: true
+                }
+            ]
+        }
+    ]
+};

package/lib/mjs/components/editgrid/EditGrid.js

@@ -1064,7 +1064,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
             return false;
         }
-        else if (rowsEditing && this.saveEditMode) {
+        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
             this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
             return false;
         }
@@ -1079,7 +1079,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         return superValid;
     }
     changeState(changed, flags) {
-        if (changed || (flags.resetValue && this.component.modalEdit)) {
+        if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {
             this.rebuild();
         }
         else {
@@ -1100,7 +1100,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         }
         const changed = this.hasChanged(value, this.dataValue);
         flags.noValidate = !changed;
-        if (this.parent && !(this.options.server && !this.parent.parentVisible)) {
+        if (this.parent && !this.options.server) {
             this.parent.checkComponentConditions();
         }
         this.dataValue = value;
@@ -1133,7 +1133,10 @@ export default class EditGridComponent extends NestedArrayComponent {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        this.checkData();
+        // do not call checkData with server option, it is called when change is triggered in updateOnChange
+        if (!this.options.server) {
+            this.checkData();
+        }
         this.changeState(changed, flags);
         return changed;
     }