@formio/js 5.0.2 → 5.1.0-dev.5522.066969f

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

@@ -8,7 +8,7 @@ const lodash_1 = __importDefault(require("lodash"));
 const Component_1 = __importDefault(require("../_classes/component/Component"));
 const ComponentModal_1 = __importDefault(require("../_classes/componentModal/ComponentModal"));
 const eventemitter3_1 = __importDefault(require("eventemitter3"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 const Formio_1 = require("../../Formio");
 const Form_1 = __importDefault(require("../../Form"));
 class FormComponent extends Component_1.default {
@@ -101,8 +101,12 @@ class FormComponent extends Component_1.default {
         }
         return this.createSubForm();
     }
+    shouldConditionallyClearOnPristine() {
+        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();
+    }
     get dataReady() {
-        return this.subFormReady || Promise.resolve();
+        var _a;
+        return ((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.dataReady) || this.subFormReady || Promise.resolve();
     }
     get defaultValue() {
         // Not not provide a default value unless the subform is ready so that it will initialize correctly.
@@ -114,6 +118,10 @@ class FormComponent extends Component_1.default {
     get emptyValue() {
         return { data: {} };
     }
+    // In order for the subform values to set properly, we must always say that nested forms have a default value.
+    get hasDefaultValue() {
+        return true;
+    }
     get ready() {
         return this.subFormReady || Promise.resolve();
     }
@@ -133,24 +141,19 @@ class FormComponent extends Component_1.default {
             this.subFormRevision = undefined;
         }
     }
-    getComponent(path, fn) {
-        path = (0, utils_1.getArrayFromComponentPath)(path);
-        if (path[0] === 'data') {
-            path.shift();
-        }
-        const originalPathStr = `${this.path}.data.${(0, utils_1.getStringFromComponentPath)(path)}`;
-        if (this.subForm) {
-            return this.subForm.getComponent(path, fn, originalPathStr);
+    getComponent(path) {
+        if (!this.subForm) {
+            return null;
         }
+        return this.subForm.getComponent(path);
     }
     /* eslint-disable max-statements */
     getSubOptions(options = {}) {
         options.events = this.createEmitter();
         // Make sure to not show the submit button in wizards in the nested forms.
         lodash_1.default.set(options, 'buttonSettings.showSubmit', false);
-        // Set the parent options to the subform so those references are stable when the subform is created
+        // Set the parent option to the subform so those references are stable when the subform is created
         options.parent = this;
-        options.parentVisible = this.visible;
         if (!this.options) {
             return options;
         }
@@ -212,12 +215,13 @@ class FormComponent extends Component_1.default {
         if (this.options.skipDraftRestore) {
             options.skipDraftRestore = this.options.skipDraftRestore;
         }
+        options.parent = this;
         return options;
     }
     /* eslint-enable max-statements */
     render() {
         if (this.builderMode) {
-            return super.render(this.component.label || 'Nested form');
+            return super.render(this.t(this.component.label || 'nestedForm'));
         }
         const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');
         return super.render(subform);
@@ -230,13 +234,13 @@ class FormComponent extends Component_1.default {
      */
     getValueAsString(value, options) {
         if (!value) {
-            return 'No data provided';
+            return this.t('noDataProvided');
         }
         if (!value.data && value._id) {
             return value._id;
         }
         if (!value.data || !Object.keys(value.data).length) {
-            return 'No data provided';
+            return this.t('noDataProvided');
         }
         if (options === null || options === void 0 ? void 0 : options.email) {
             let result = (`
@@ -274,6 +278,9 @@ class FormComponent extends Component_1.default {
             if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {
                 this.createSubForm(true);
             }
+            if (!this.subFormReady) {
+                return Promise.resolve();
+            }
             return this.subFormReady.then(() => {
                 this.empty(element);
                 if (this.options.builder) {
@@ -289,17 +296,20 @@ class FormComponent extends Component_1.default {
                     }
                     this.subForm.attach(element);
                     this.valueChanged = this.hasSetValue;
-                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {
-                        this.setDefaultValue();
-                    }
-                    else {
-                        this.restoreValue();
+                    if (!this.shouldConditionallyClear()) {
+                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {
+                            this.setDefaultValue();
+                        }
+                        else {
+                            this.restoreValue();
+                        }
                     }
                 }
                 if (!this.builderMode && this.component.modalEdit) {
                     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.componentContent || this.subForm.element;
                     this.setOpenModalElement();
                 }
                 this.calculateValue();
@@ -335,6 +345,10 @@ class FormComponent extends Component_1.default {
             && lodash_1.default.isNumber(this.formObj._vid)
             && this.formObj._vid !== this.subFormRevision;
     }
+    get subFormData() {
+        var _a;
+        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};
+    }
     destroy(all = false) {
         if (this.subForm) {
             this.subForm.destroy(all);
@@ -379,10 +393,11 @@ class FormComponent extends Component_1.default {
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
+     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.
      * @returns {*} - The subform instance.
      */
-    createSubForm(fromAttach) {
-        this.subFormReady = this.loadSubForm(fromAttach).then((form) => {
+    createSubForm(fromAttach, beforeSubmit) {
+        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {
             if (!form) {
                 return;
             }
@@ -396,10 +411,17 @@ class FormComponent extends Component_1.default {
             }
             // Render the form.
             return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {
+                var _a, _b;
                 this.subForm = instance;
                 this.subForm.currentForm = this;
+                this.subForm.parentVisible = this.visible;
+                const componentsMap = this.componentsMap;
+                const formComponentsMap = this.subForm.componentsMap;
+                lodash_1.default.assign(componentsMap, formComponentsMap);
+                this.component.components = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.components;
+                this.component.display = (_b = this.subForm._form) === null || _b === void 0 ? void 0 : _b.display;
                 this.subForm.on('change', () => {
-                    if (this.subForm) {
+                    if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
                         this.triggerChange({
                             noEmit: true
@@ -414,6 +436,8 @@ class FormComponent extends Component_1.default {
                 this.valueChanged = this.hasSetValue;
                 this.onChange();
                 return this.subForm;
+            }).catch((err) => {
+                console.log(err);
             });
         }).then((subForm) => {
             this.updateSubWizards(subForm);
@@ -422,20 +446,23 @@ class FormComponent extends Component_1.default {
         return this.subFormReady;
     }
     hideSubmitButton(component) {
-        const isSubmitButton = (component.type === 'button') &&
-            ((component.action === 'submit') || !component.action);
+        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);
         if (isSubmitButton) {
             component.hidden = true;
+            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data
+            component.customConditional = 'show = false';
         }
     }
     /**
      * Load the subform.
      * @param {boolean} fromAttach - This function is being called from an `attach` method.
+     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
-    loadSubForm(fromAttach) {
+    loadSubForm(fromAttach, beforeSubmit) {
         var _a, _b, _c, _d, _e;
-        if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
+        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;
+        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -470,18 +497,6 @@ class FormComponent extends Component_1.default {
         }
         return Promise.resolve();
     }
-    get subFormData() {
-        var _a;
-        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};
-    }
-    checkComponentValidity(data, dirty, row, options, errors = []) {
-        options = options || {};
-        const silentCheck = options.silentCheck || false;
-        if (this.subForm) {
-            return this.subForm.checkValidity(this.subFormData, dirty, null, silentCheck, errors);
-        }
-        return super.checkComponentValidity(data, dirty, row, options, errors);
-    }
     checkComponentConditions(data, flags, row) {
         const visible = super.checkComponentConditions(data, flags, row);
         // Return if already hidden
@@ -489,14 +504,14 @@ class FormComponent extends Component_1.default {
             return visible;
         }
         if (this.subForm) {
-            return this.subForm.checkConditions(this.subFormData);
+            return this.subForm.checkConditions(this.subFormData, flags);
         }
         // There are few cases when subForm is not loaded when a change is triggered,
         // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode
         else if (this.subFormReady) {
             this.subFormReady.then(() => {
                 if (this.subForm) {
-                    return this.subForm.checkConditions(this.subFormData);
+                    return this.subForm.checkConditions(this.subFormData, flags);
                 }
             });
         }
@@ -519,7 +534,7 @@ class FormComponent extends Component_1.default {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
-        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.isHidden();
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();
     }
     /**
      * Returns the data for the subform.
@@ -546,7 +561,7 @@ class FormComponent extends Component_1.default {
                 }
                 this.subForm.nosubmit = false;
                 this.subForm.submitted = true;
-                return this.subForm.submitForm().then(result => {
+                return this.subForm.submitForm({}, true).then(result => {
                     this.subForm.loading = false;
                     this.subForm.showAllErrors = false;
                     this.dataValue = result.submission;
@@ -590,11 +605,19 @@ class FormComponent extends Component_1.default {
             this.dataValue = submission;
             return Promise.resolve(this.dataValue);
         }
-        return this.submitSubForm(false)
-            .then(() => {
-            return this.dataValue;
-        })
-            .then(() => super.beforeSubmit());
+        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data
+        const loadHiddenForm = !this.component.clearOnHide;
+        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading && !this.subForm) {
+            return this.createSubForm(true, true)
+                .then(() => this.submitSubForm(false))
+                .then(() => this.dataValue)
+                .then(() => super.beforeSubmit());
+        }
+        else {
+            return this.submitSubForm(false)
+                .then(() => this.dataValue)
+                .then(() => super.beforeSubmit());
+        }
     }
     isSubFormLazyLoad() {
         var _a, _b;
@@ -646,28 +669,27 @@ class FormComponent extends Component_1.default {
                 : {};
             this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, this.options), options));
             this.subForm.loadSubmission().catch((err) => {
-                console.error(`Unable to load subform submission ${submission._id}:`, err);
+                console.error(this.t('subformSubmissionLoadingError', { submissionId: submission._id }), err);
             });
         }
         else {
-            this.subForm.setValue(submission, flags);
+            this.onSetSubFormValue(submission, flags);
         }
     }
-    isEmpty(value = this.dataValue) {
-        return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));
-    }
-    areAllComponentsEmpty(data) {
-        let res = true;
-        if (this.subForm) {
-            this.subForm.everyComponent((comp) => {
-                const componentValue = lodash_1.default.get(data, comp.key);
-                res &= comp.isEmpty(componentValue);
-            });
-        }
-        else {
-            res = false;
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubFormValue(submission, flags) {
+        this.subForm.setValue(submission, flags);
+        if (flags === null || flags === void 0 ? void 0 : flags.fromSubmission) {
+            this.subForm.submissionReadyResolve(submission);
         }
-        return res;
+    }
+    isEmpty(value = this.dataValue) {
+        return value === null || lodash_1.default.isEqual(value, this.emptyValue);
     }
     getValue() {
         if (this.subForm) {
@@ -682,6 +704,13 @@ class FormComponent extends Component_1.default {
         }
         return errors;
     }
+    conditionallyHidden() {
+        const conditionallyHidden = super.conditionallyHidden();
+        if (this.subForm) {
+            this.subForm._conditionallyHidden = conditionallyHidden;
+        }
+        return conditionallyHidden;
+    }
     updateSubFormVisibility() {
         if (this.subForm) {
             this.subForm.parentVisible = this.visible;

package/lib/cjs/components/form/editForm/Form.edit.data.js

@@ -11,7 +11,7 @@ exports.default = [
     {
         weight: 140,
         type: 'checkbox',
-        label: 'Clear Value When Hidden',
+        label: 'Omit Value From Submission Data When Conditionally Hidden',
         key: 'clearOnHide',
         defaultValue: true,
         tooltip: 'When a field is hidden, clear the value.',

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

@@ -32,10 +32,11 @@ exports.default = [
         tooltip: 'if it is checked, the subform is loaded after navigation to the page with this component within the wizard.',
         input: true,
         customConditional({ instance, data }) {
-            var _a, _b, _c, _d;
-            const formInfo = (_b = (_a = instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('form')) === null || _b === void 0 ? void 0 : _b.defaultDownloadedResources.find(res => res._id === data.form);
+            var _a, _b, _c;
+            const formComp = (_a = instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('form');
+            const formInfo = formComp === null || formComp === void 0 ? void 0 : formComp.defaultDownloadedResources.find(res => res._id === data.form);
             const displayMode = 'wizard';
-            return ((_d = (_c = instance.options) === null || _c === void 0 ? void 0 : _c.editForm) === null || _d === void 0 ? void 0 : _d.display) === displayMode && formInfo && formInfo.display !== displayMode;
+            return ((_c = (_b = instance.options) === null || _b === void 0 ? void 0 : _b.editForm) === null || _c === void 0 ? void 0 : _c.display) === displayMode && ((data.form && !formInfo) || (formInfo && formInfo.display !== displayMode));
         },
     },
     {
@@ -47,7 +48,7 @@ exports.default = [
         },
         searchField: 'title__regex',
         template: '<span>{{ item._vid }}</span>',
-        valueProperty: '_id',
+        valueProperty: 'revisionId',
         authenticate: true,
         label: 'Form Revision',
         key: 'revision',
@@ -69,7 +70,7 @@ exports.default = [
         input: true,
         weight: 20,
         key: 'reference',
-        label: 'Save as reference',
-        tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.'
+        label: 'Submit as reference',
+        tooltip: 'When "Submit as reference" is enabled, the form submission will be recorded against the Parent Form as well as the Child Form. When a submission recorded with "Submit as reference" is edited, the update is applied to each submission made against the Parent Form and Child Form.'
     }
 ];

package/lib/cjs/components/hidden/Hidden.d.ts

@@ -10,7 +10,6 @@ export default class HiddenComponent extends Input {
     };
     get inputInfo(): any;
     labelIsHidden(): boolean;
-    get emptyValue(): string;
     setValue(value: any, flags?: {}): boolean;
 }
 import Input from '../_classes/input/Input';

package/lib/cjs/components/hidden/Hidden.js

@@ -48,7 +48,7 @@ class HiddenComponent extends Input_1.default {
         return true;
     }
     get emptyValue() {
-        return '';
+        return null;
     }
     setValue(value, flags = {}) {
         return this.updateValue(value, flags);

package/lib/cjs/components/hidden/editForm/Hidden.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

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

@@ -56,9 +56,20 @@ class HTMLComponent extends Component_1.default {
     }
     checkRefreshOn(changed) {
         super.checkRefreshOn(changed);
-        if (!this.builderMode && this.component.refreshOnChange && this.element &&
-            !lodash_1.default.isUndefined(changed) && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed)) &&
-            this.conditionallyVisible(this.data, this.row)) {
+        let visible;
+        if (this.hasCondition()) {
+            visible = !this.conditionallyHidden();
+        }
+        else {
+            visible = !this.component.hidden;
+        }
+        const shouldSetContent = !this.builderMode
+            && this.component.refreshOnChange
+            && this.element
+            && !lodash_1.default.isUndefined(changed)
+            && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed))
+            && visible;
+        if (shouldSetContent) {
             this.setContent(this.element, this.renderContent());
         }
     }

package/lib/cjs/components/html/editForm/HTML.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/cjs/components/number/Number.js

@@ -7,7 +7,7 @@ const text_mask_addons_1 = require("@formio/text-mask-addons");
 const vanilla_text_mask_1 = require("@formio/vanilla-text-mask");
 const lodash_1 = __importDefault(require("lodash"));
 const Input_1 = __importDefault(require("../_classes/input/Input"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils/");
 class NumberComponent extends Input_1.default {
     static schema(...extend) {
         return Input_1.default.schema({
@@ -56,7 +56,7 @@ class NumberComponent extends Input_1.default {
         }
         else {
             if (this.component.thousandsSeparator || ((_c = this.options.properties) === null || _c === void 0 ? void 0 : _c.thousandsSeparator) || this.options.thousandsSeparator) {
-                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
+                console.warn(this.t('noDelimiterSet'));
             }
             this.delimiter = '';
         }
@@ -170,14 +170,21 @@ class NumberComponent extends Input_1.default {
         if (typeof input === 'string') {
             input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');
         }
-        let value = parseFloat(input);
-        if (!lodash_1.default.isNaN(value)) {
+        let value;
+        if (!lodash_1.default.isNaN(input)) {
             // Format scientific notation
-            if (/e/i.test(String(value))) {
+            if (/[0-9]+[eE]/.test(String(input))) {
+                // Convert to exponential notation will depend on the decimal limit set in the component
+                // Example: 1.23e-5 will be converted to 1.23e-5 if decimal limit is set to 2
+                // Example: 1.23e5 will be converted to 1.23e+5 if decimal limit is set to 2
+                // if decimal limit is 3, 1.23e5 will be converted to 1.230e+5
+                // if decimal limit is not set, 1.23e5 will be converted to 1.23000000000000000000e+5
+                value = parseFloat(input);
                 value = value.toExponential(this.decimalLimit);
             }
             else {
-                value = String(value).replace('.', this.decimalSeparator);
+                value = parseFloat(input);
+                value = !lodash_1.default.isNaN(value) ? String(value).replace('.', this.decimalSeparator) : null;
             }
         }
         else {

package/lib/cjs/components/number/editForm/Number.edit.display.js

@@ -13,6 +13,18 @@ exports.default = [
         key: 'allowMultipleMasks',
         ignore: true
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/cjs/components/panel/Panel.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const NestedComponent_1 = __importDefault(require("../_classes/nested/NestedComponent"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 class PanelComponent extends NestedComponent_1.default {
     static schema(...extend) {
         return NestedComponent_1.default.schema({

package/lib/cjs/components/password/editForm/Password.edit.display.js

@@ -12,5 +12,17 @@ exports.default = [
     {
         key: 'allowMultipleMasks',
         ignore: true
-    }
+    },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
 ];

package/lib/cjs/components/phonenumber/PhoneNumber.form.js

@@ -22,7 +22,15 @@ function default_1(...extend) {
                 {
                     key: 'showCharCount',
                     ignore: true
-                }
+                },
+                {
+                    key: 'widget.type',
+                    ignore: true
+                },
+                {
+                    key: 'widget',
+                    ignore: true
+                },
             ]
         },
         {

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

@@ -28,7 +28,8 @@ export default class RadioComponent extends ListComponent {
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
     beforeSubmit(): Promise<any>;
-    render(): import("../_classes/field/Field").default;
+    convertValues(values: any): any;
+    render(): string;
     attach(element: any): Promise<void>;
     detach(element: any): void;
     validateValueProperty(): boolean;
@@ -41,5 +42,12 @@ export default class RadioComponent extends ListComponent {
     setSelectedClasses(): void;
     updateValue(value: any, flags: any): boolean;
     currentValue: any;
+    /**
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
+     */
+    convertByDataType(value: any): any;
+    normalizeValue(value: any): any;
 }
 import ListComponent from '../_classes/list/ListComponent';