@formio/js 5.0.2-rc.3 → 5.1.0-dev.5936.fa0f253

package/lib/cjs/Webform.js

@@ -17,7 +17,6 @@ const formUtils_1 = require("./utils/formUtils");
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
 }
-const dragula_1 = __importDefault(require("dragula"));
 // Initialize the available forms.
 Formio_1.Formio.forms = {};
 // Allow people to register components.
@@ -28,10 +27,10 @@ Formio_1.Formio.registerComponent = Components_1.default.setComponent;
  * @returns {any} - The icon set.
  */
 function getIconSet(icons) {
-    if (icons === "fontawesome") {
-        return "fa";
+    if (icons === 'fontawesome') {
+        return 'fa';
     }
-    return icons || "";
+    return icons || '';
 }
 /**
  *
@@ -46,7 +45,7 @@ function getOptions(options) {
         saveDraft: false,
         alwaysDirty: false,
         saveDraftThrottle: 5000,
-        display: "form",
+        display: 'form',
         cdnUrl: Formio_1.Formio.cdn.baseUrl,
     });
     if (!options.events) {
@@ -90,10 +89,10 @@ function getOptions(options) {
  */
 /**
  * @typedef {object} ButtonSettings
- * @property {boolean} [showPrevious] - Show the "Previous" button.
- * @property {boolean} [showNext] - Show the "Next" button.
- * @property {boolean} [showCancel] - Show the "Cancel" button.
- * @property {boolean} [showSubmit] - Show the "Submit" button.
+ * @property {boolean} [showPrevious] - Show the 'Previous' button.
+ * @property {boolean} [showNext] - Show the 'Next' button.
+ * @property {boolean} [showCancel] - Show the 'Cancel' button.
+ * @property {boolean} [showSubmit] - Show the 'Submit' button.
  */
 /**
  * @typedef {object} FormOptions
@@ -162,15 +161,15 @@ class Webform extends NestedDataComponent_1.default {
             }
             const ctrl = event.ctrlKey || event.metaKey;
             const keyCode = event.keyCode;
-            let char = "";
+            let char = '';
             if (65 <= keyCode && keyCode <= 90) {
                 char = String.fromCharCode(keyCode);
             }
             else if (keyCode === 13) {
-                char = "Enter";
+                char = 'Enter';
             }
             else if (keyCode === 27) {
-                char = "Esc";
+                char = 'Esc';
             }
             lodash_1.default.each(this.shortcuts, (shortcut) => {
                 if (shortcut.ctrl && !ctrl) {
@@ -193,8 +192,8 @@ class Webform extends NestedDataComponent_1.default {
          * The type of this element.
          * @type {string}
          */
-        this.type = "form";
-        this._src = "";
+        this.type = 'form';
+        this._src = '';
         this._loading = false;
         this._form = {};
         this.draftEnabled = false;
@@ -314,15 +313,26 @@ class Webform extends NestedDataComponent_1.default {
         // Ensure the root is set to this component.
         this.root = this;
         this.localRoot = this;
-        this.root.dragulaLib = dragula_1.default;
     }
     /* eslint-enable max-statements */
+    beforeInit() {
+        this.executeFormController = lodash_1.default.once(this._executeFormController);
+    }
     get language() {
         return this.options.language;
     }
     get emptyValue() {
         return null;
     }
+    get shouldCallFormController() {
+        // If no controller value or
+        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
+        return (this.form &&
+            this.form.controller &&
+            !((!this.visible || this.component.hidden) &&
+                this.component.clearOnHide &&
+                !this.rootPristine));
+    }
     componentContext() {
         return this._data;
     }
@@ -343,7 +353,7 @@ class Webform extends NestedDataComponent_1.default {
                 return;
             }
             this.rebuild();
-            this.emit("languageChanged");
+            this.emit('languageChanged');
         });
     }
     get componentComponents() {
@@ -361,18 +371,18 @@ class Webform extends NestedDataComponent_1.default {
     addLanguage(code, lang, active = false) {
         if (this.i18next) {
             var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);
-            this.i18next.addResourceBundle(code, "translation", translations, true, true);
+            this.i18next.addResourceBundle(code, 'translation', translations, true, true);
             if (active) {
                 this.language = code;
             }
         }
     }
     keyboardCatchableElement(element) {
-        if (element.nodeName === "TEXTAREA") {
+        if (element.nodeName === 'TEXTAREA') {
             return false;
         }
-        if (element.nodeName === "INPUT") {
-            return ["text", "email", "password"].indexOf(element.type) === -1;
+        if (element.nodeName === 'INPUT') {
+            return ['text', 'email', 'password'].indexOf(element.type) === -1;
         }
         return true;
     }
@@ -381,9 +391,9 @@ class Webform extends NestedDataComponent_1.default {
             return;
         }
         shortcut = lodash_1.default.capitalize(shortcut);
-        if (shortcut === "Enter" || shortcut === "Esc") {
+        if (shortcut === 'Enter' || shortcut === 'Esc') {
             // Restrict Enter and Esc only for buttons
-            if (element.tagName !== "BUTTON") {
+            if (element.tagName !== 'BUTTON') {
                 return;
             }
             this.shortcuts.push({
@@ -483,13 +493,13 @@ class Webform extends NestedDataComponent_1.default {
      * @returns {boolean} - TRUE means the url was set, FALSE otherwise.
      */
     setUrl(value, options) {
-        if (!value || typeof value !== "string" || value === this._src) {
+        if (!value || typeof value !== 'string' || value === this._src) {
             return false;
         }
         this._src = value;
         this.nosubmit = true;
         this.formio = this.options.formio = new Formio_1.Formio(value, options);
-        if (this.type === "form") {
+        if (this.type === 'form') {
             // Set the options source so this can be passed to other components.
             this.options.src = value;
         }
@@ -522,17 +532,17 @@ class Webform extends NestedDataComponent_1.default {
     }
     /**
      * Set the loading state for this form, and also show the loader spinner.
-     * @param {boolean} loading - If this form should be "loading" or not.
+     * @param {boolean} loading - If this form should be 'loading' or not.
      */
     set loading(loading) {
         if (this._loading !== loading) {
             this._loading = loading;
             if (!this.loader && loading) {
-                this.loader = this.ce("div", {
-                    class: "loader-wrapper",
+                this.loader = this.ce('div', {
+                    class: 'loader-wrapper',
                 });
-                const spinner = this.ce("div", {
-                    class: "loader text-center",
+                const spinner = this.ce('div', {
+                    class: 'loader text-center',
                 });
                 this.loader.appendChild(spinner);
             }
@@ -587,11 +597,12 @@ class Webform extends NestedDataComponent_1.default {
      * @returns {Promise} - The promise that is triggered when the form is set.
      */
     setForm(form, flags = {}) {
-        var _a, _b, _c;
+        var _a;
         const isFormAlreadySet = this._form && ((_a = this._form.components) === null || _a === void 0 ? void 0 : _a.length);
         try {
             // Do not set the form again if it has been already set
             if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {
+                this.formReadyResolve();
                 return Promise.resolve();
             }
             // Create the form.
@@ -599,13 +610,11 @@ class Webform extends NestedDataComponent_1.default {
             if (this.onSetForm) {
                 this.onSetForm(lodash_1.default.cloneDeep(this._form), form);
             }
-            if ((_c = (_b = this.parent) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.modalEdit) {
-                return Promise.resolve();
-            }
         }
         catch (err) {
             console.warn(err);
             // If provided form is not a valid JSON object, do not set it too
+            this.formReadyReject(err);
             return Promise.resolve();
         }
         // Allow the form to provide component overrides.
@@ -618,18 +627,18 @@ class Webform extends NestedDataComponent_1.default {
         // Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options
         if (!this.options.sanitizeConfig && !this.builderMode) {
             this.options.sanitizeConfig =
-                lodash_1.default.get(form, "settings.sanitizeConfig") ||
-                    lodash_1.default.get(form, "globalSettings.sanitizeConfig");
+                lodash_1.default.get(form, 'settings.sanitizeConfig') ||
+                    lodash_1.default.get(form, 'globalSettings.sanitizeConfig');
         }
-        if ("schema" in form && (0, compare_versions_1.compareVersions)(form.schema, "1.x") > 0) {
+        if ('schema' in form && (0, compare_versions_1.compareVersions)(form.schema, '1.x') > 0) {
             this.ready.then(() => {
-                this.setAlert("alert alert-danger", "Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.");
+                this.setAlert('alert alert-danger', this.t('newFormSchema'));
             });
         }
         // See if they pass a module, and evaluate it if so.
         if (form && form.module) {
             let formModule = null;
-            if (typeof form.module === "string") {
+            if (typeof form.module === 'string') {
                 try {
                     formModule = this.evaluate(`return ${form.module}`);
                 }
@@ -651,8 +660,10 @@ class Webform extends NestedDataComponent_1.default {
         this.initialized = false;
         const rebuild = this.rebuild() || Promise.resolve();
         return rebuild.then(() => {
-            this.emit("formLoad", form);
-            this.triggerCaptcha();
+            this.emit('formLoad', form);
+            if (!this.options.server) {
+                this.triggerCaptcha();
+            }
             // Make sure to trigger onChange after a render event occurs to speed up form rendering.
             setTimeout(() => {
                 this.onChange(flags);
@@ -704,6 +715,18 @@ class Webform extends NestedDataComponent_1.default {
     set submission(submission) {
         this.setSubmission(submission);
     }
+    /**
+     * Sets the submission 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}
+     */
+    onSetSubmission(submission, flags = {}) {
+        this.submissionSet = true;
+        this.triggerChange(flags);
+        this.emit('beforeSetSubmission', submission);
+        this.setValue(submission, flags);
+    }
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param {any} submission - The submission to set.
@@ -711,41 +734,39 @@ class Webform extends NestedDataComponent_1.default {
      * @returns {Promise} - The promise that is triggered when the submission is set.
      */
     setSubmission(submission, flags = {}) {
-        flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, "fromSubmission") ? flags.fromSubmission : true });
+        flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, 'fromSubmission') ? flags.fromSubmission : true });
         return (this.onSubmission = this.formReady
             .then((resolveFlags) => {
             if (resolveFlags) {
                 flags = Object.assign(Object.assign({}, flags), resolveFlags);
             }
-            this.submissionSet = true;
-            this.triggerChange(flags);
-            this.emit("beforeSetSubmission", submission);
-            this.setValue(submission, flags);
+            this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err))
             .catch((err) => this.submissionReadyReject(err)));
     }
     handleDraftError(errName, errDetails, restoreDraft) {
-        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || ""}`);
+        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || ''}`);
         console.warn(errorMessage);
-        this.emit(restoreDraft ? "restoreDraftError" : "saveDraftError", errDetails || errorMessage);
+        this.emit(restoreDraft ? 'restoreDraftError' : 'saveDraftError', errDetails || errorMessage);
     }
     saveDraft() {
-        if (!this.draftEnabled) {
+        var _a;
+        if (!this.draftEnabled || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.component.reference) === false) {
             return;
         }
         if (!this.formio) {
-            this.handleDraftError("saveDraftInstanceError");
+            this.handleDraftError('saveDraftInstanceError');
             return;
         }
         if (!Formio_1.Formio.getUser()) {
-            this.handleDraftError("saveDraftAuthError");
+            this.handleDraftError('saveDraftAuthError');
             return;
         }
         const draft = (0, utils_1.fastCloneDeep)(this.submission);
-        draft.state = "draft";
+        draft.state = 'draft';
         if (!this.savingDraft && !this.submitting) {
-            this.emit("saveDraftBegin");
+            this.emit('saveDraftBegin');
             this.savingDraft = true;
             this.formio
                 .saveSubmission(draft)
@@ -753,11 +774,11 @@ class Webform extends NestedDataComponent_1.default {
                 // Set id to submission to avoid creating new draft submission
                 this.submission._id = sub._id;
                 this.savingDraft = false;
-                this.emit("saveDraft", sub);
+                this.emit('saveDraft', sub);
             })
                 .catch((err) => {
                 this.savingDraft = false;
-                this.handleDraftError("saveDraftError", err);
+                this.handleDraftError('saveDraftError', err);
             });
         }
     }
@@ -768,7 +789,7 @@ class Webform extends NestedDataComponent_1.default {
     restoreDraft(userId) {
         const formio = this.formio || this.options.formio;
         if (!formio) {
-            this.handleDraftError("restoreDraftInstanceError", null, true);
+            this.handleDraftError('restoreDraftInstanceError', null, true);
             return;
         }
         this.savingDraft = true;
@@ -786,22 +807,22 @@ class Webform extends NestedDataComponent_1.default {
                 return this.setSubmission(draft).then(() => {
                     this.draftEnabled = true;
                     this.savingDraft = false;
-                    this.emit("restoreDraft", draft);
+                    this.emit('restoreDraft', draft);
                 });
             }
             // Enable drafts so that we can keep track of changes.
             this.draftEnabled = true;
             this.savingDraft = false;
-            this.emit("restoreDraft", null);
+            this.emit('restoreDraft', null);
         })
             .catch((err) => {
             this.draftEnabled = true;
             this.savingDraft = false;
-            this.handleDraftError("restoreDraftError", err, true);
+            this.handleDraftError('restoreDraftError', err, true);
         });
     }
     get schema() {
-        const schema = (0, utils_1.fastCloneDeep)(lodash_1.default.omit(this._form, ["components"]));
+        const schema = (0, utils_1.fastCloneDeep)(lodash_1.default.omit(this._form, ['components']));
         schema.components = [];
         this.eachComponent((component) => schema.components.push(component.schema));
         return schema;
@@ -839,6 +860,9 @@ class Webform extends NestedDataComponent_1.default {
         return changed;
     }
     getValue() {
+        if (!this._submission) {
+            this._submission = {};
+        }
         if (!this._submission.data) {
             this._submission.data = {};
         }
@@ -873,33 +897,28 @@ class Webform extends NestedDataComponent_1.default {
         else {
             this.component = this.form;
         }
-        this.component.type = "form";
+        this.component.type = 'form';
         this.component.input = false;
         this.addComponents();
-        this.on("submitButton", (options) => {
+        this.on('submitButton', (options) => {
             this.submit(false, options).catch((e) => {
-                options.instance.loading = false;
+                if (options === null || options === void 0 ? void 0 : options.instance) {
+                    options.instance.loading = false;
+                }
                 return e !== false && e !== undefined && console.log(e);
             });
         }, true);
-        this.on("checkValidity", (data) => this.validate(data, { dirty: true, process: "change" }), true);
-        this.on("requestUrl", (args) => this.submitUrl(args.url, args.headers), true);
-        this.on("resetForm", () => this.resetValue(), true);
-        this.on("deleteSubmission", () => this.deleteSubmission(), true);
-        this.on("refreshData", () => this.updateValue(), true);
-        this.executeFormController();
+        this.on('checkValidity', (data) => this.validate(data, { dirty: true, process: 'change' }), true);
+        this.on('requestUrl', (args) => this.submitUrl(args.url, args.headers), true);
+        this.on('resetForm', () => this.resetValue(), true);
+        this.on('deleteSubmission', () => this.deleteSubmission(), true);
+        this.on('refreshData', () => this.updateValue(), true);
+        if (this.shouldCallFormController) {
+            this.executeFormController();
+        }
         return this.formReady;
     }
-    executeFormController() {
-        // If no controller value or
-        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
-        if (!this.form ||
-            !this.form.controller ||
-            ((!this.visible || this.component.hidden) &&
-                this.component.clearOnHide &&
-                !this.rootPristine)) {
-            return false;
-        }
+    _executeFormController() {
         this.formReady.then(() => {
             this.evaluate(this.form.controller, {
                 components: this.components,
@@ -911,19 +930,19 @@ class Webform extends NestedDataComponent_1.default {
      *
      */
     teardown() {
-        this.emit("formDelete", this.id);
+        this.emit('formDelete', this.id);
         delete Formio_1.Formio.forms[this.id];
         delete this.executeShortcuts;
         delete this.triggerSaveDraft;
         super.teardown();
     }
     destroy(all = false) {
-        this.off("submitButton");
-        this.off("checkValidity");
-        this.off("requestUrl");
-        this.off("resetForm");
-        this.off("deleteSubmission");
-        this.off("refreshData");
+        this.off('submitButton');
+        this.off('checkValidity');
+        this.off('requestUrl');
+        this.off('resetForm');
+        this.off('deleteSubmission');
+        this.off('refreshData');
         return super.destroy(all);
     }
     build(element) {
@@ -936,17 +955,17 @@ class Webform extends NestedDataComponent_1.default {
         return this.ready;
     }
     getClassName() {
-        let classes = "formio-form";
+        let classes = 'formio-form';
         if (this.options.readOnly) {
-            classes += " formio-read-only";
+            classes += ' formio-read-only';
         }
         return classes;
     }
     render() {
-        return super.render(this.renderTemplate("webform", {
+        return super.render(this.renderTemplate('webform', {
             classes: this.getClassName(),
             children: this.renderComponents(),
-        }), this.builderMode ? "builder" : "form", true);
+        }), this.builderMode ? 'builder' : 'form', true);
     }
     redraw() {
         // Don't bother if we have not built yet.
@@ -959,13 +978,13 @@ class Webform extends NestedDataComponent_1.default {
     }
     attach(element) {
         this.setElement(element);
-        this.loadRefs(element, { webform: "single" });
+        this.loadRefs(element, { webform: 'single' });
         const childPromise = this.attachComponents(this.refs.webform);
-        this.addEventListener(document, "keydown", this.executeShortcuts);
+        this.addEventListener(document, 'keydown', this.executeShortcuts);
         this.currentForm = this;
-        this.hook("attachWebform", element, this);
+        this.hook('attachWebform', element, this);
         return childPromise.then(() => {
-            this.emit("render", this.element);
+            this.emit('render', this.element);
             return this.setValue(this._submission, {
                 noUpdateEvent: true,
             });
@@ -988,7 +1007,7 @@ class Webform extends NestedDataComponent_1.default {
     }
     /**
      * Sets a new alert to display in the error dialog of the form.
-     * @param {string} type - The type of alert to display. "danger", "success", "warning", etc.
+     * @param {string} type - The type of alert to display. 'danger', 'success', 'warning', etc.
      * @param {string} message - The message to show in the alert.
      * @param {object} options - The options for the alert.
      */
@@ -997,8 +1016,8 @@ class Webform extends NestedDataComponent_1.default {
             if (this.alert) {
                 if (this.refs.errorRef && this.refs.errorRef.length) {
                     this.refs.errorRef.forEach((el) => {
-                        this.removeEventListener(el, "click");
-                        this.removeEventListener(el, "keypress");
+                        this.removeEventListener(el, 'click');
+                        this.removeEventListener(el, 'keypress');
                     });
                 }
                 this.removeChild(this.alert);
@@ -1008,7 +1027,7 @@ class Webform extends NestedDataComponent_1.default {
         }
         if (this.options.noAlerts) {
             if (!message) {
-                this.emit("error", false);
+                this.emit('error', false);
             }
             return;
         }
@@ -1016,8 +1035,8 @@ class Webform extends NestedDataComponent_1.default {
             try {
                 if (this.refs.errorRef && this.refs.errorRef.length) {
                     this.refs.errorRef.forEach((el) => {
-                        this.removeEventListener(el, "click");
-                        this.removeEventListener(el, "keypress");
+                        this.removeEventListener(el, 'click');
+                        this.removeEventListener(el, 'keypress');
                     });
                 }
                 this.removeChild(this.alert);
@@ -1037,19 +1056,19 @@ class Webform extends NestedDataComponent_1.default {
                 attrs: attrs,
                 type,
             };
-            this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate("alert", templateOptions), `#${attrs.id}`);
+            this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate('alert', templateOptions), `#${attrs.id}`);
         }
         if (!this.alert) {
             return;
         }
-        this.loadRefs(this.alert, { errorRef: "multiple" });
+        this.loadRefs(this.alert, { errorRef: 'multiple' });
         if (this.refs.errorRef && this.refs.errorRef.length) {
             this.refs.errorRef.forEach((el) => {
-                this.addEventListener(el, "click", (e) => {
+                this.addEventListener(el, 'click', (e) => {
                     const key = e.currentTarget.dataset.componentKey;
                     this.focusOnComponent(key);
                 });
-                this.addEventListener(el, "keydown", (e) => {
+                this.addEventListener(el, 'keydown', (e) => {
                     if (e.keyCode === 13) {
                         e.preventDefault();
                         const key = e.currentTarget.dataset.componentKey;
@@ -1098,29 +1117,24 @@ class Webform extends NestedDataComponent_1.default {
             return;
         }
         // Mark any components as invalid if in a custom message.
+        const componentErrors = {};
         errors.forEach((err) => {
-            const { components = [] } = err;
-            if (err.component) {
-                components.push(err.component);
-            }
-            if (err.path) {
-                components.push(err.path);
+            var _a, _b;
+            const path = err.path || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);
+            if (!componentErrors[path]) {
+                componentErrors[path] = [];
             }
-            components.forEach((path) => {
-                const originalPath = (0, utils_1.getStringFromComponentPath)(path);
-                const component = this.getComponent(path, lodash_1.default.identity, originalPath);
-                if (err.fromServer) {
-                    if (component.serverErrors) {
-                        component.serverErrors.push(err);
-                    }
-                    else {
-                        component.serverErrors = [err];
-                    }
-                }
-                const components = lodash_1.default.compact(Array.isArray(component) ? component : [component]);
-                components.forEach((component) => component.setCustomValidity(err.message, true));
-            });
+            componentErrors[path].push(err);
         });
+        // Iterate through all of our component errors and apply them to the components.
+        for (let path in componentErrors) {
+            const component = this.getComponent(path);
+            const errors = componentErrors[path];
+            if (component) {
+                component.serverErrors = errors.filter((err) => err.fromServer);
+                component.setCustomValidity(errors, true);
+            }
+        }
         const displayedErrors = [];
         if (errors.length) {
             errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });
@@ -1134,8 +1148,8 @@ class Webform extends NestedDataComponent_1.default {
                     (((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) ||
                     (err.component && err.component.key) ||
                     (err.fromServer && err.path);
-                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : "";
-                if (typeof err !== "string" && !err.formattedKeyOrPath) {
+                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : '';
+                if (typeof err !== 'string' && !err.formattedKeyOrPath) {
                     err.formattedKeyOrPath = formattedKeyOrPath;
                 }
                 return {
@@ -1145,18 +1159,15 @@ class Webform extends NestedDataComponent_1.default {
             };
             errors.forEach(({ message, context, fromServer, component }, index) => {
                 const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer
-                    ? this.t("alertMessage", { message: this.t(message) })
-                    : this.t("alertMessageWithLabel", {
-                        label: this.t(component === null || component === void 0 ? void 0 : component.label),
-                        message: this.t(message),
-                    });
+                    ? this.t(message)
+                    : `${this.t(component === null || component === void 0 ? void 0 : component.label)}: ${this.t(message)}`;
                 displayedErrors.push(createListItem(text, index));
             });
         }
-        const errorsList = this.renderTemplate("errorsList", { errors: displayedErrors });
-        this.root.setAlert("danger", errorsList);
+        const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });
+        this.root.setAlert('danger', errorsList);
         if (triggerEvent) {
-            this.emit("error", errors);
+            this.emit('error', errors);
         }
         return errors;
     }
@@ -1177,23 +1188,23 @@ class Webform extends NestedDataComponent_1.default {
             noValidate: true,
             noCheck: true,
         });
-        this.setAlert("success", `<p>${this.t("complete")}</p>`);
+        this.setAlert('success', `<p>${this.t('complete')}</p>`);
         // Cancel triggered saveDraft to prevent overriding the submitted state
         if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {
             this.triggerSaveDraft.cancel();
         }
-        this.emit("submit", submission, saved);
+        this.emit('submit', submission, saved);
         if (saved) {
-            this.emit("submitDone", submission);
+            this.emit('submitDone', submission);
         }
         return submission;
     }
     normalizeError(error) {
         if (error) {
-            if (typeof error === "object" && "details" in error) {
+            if (typeof error === 'object' && 'details' in error) {
                 error = error.details;
             }
-            if (typeof error === "string") {
+            if (typeof error === 'string') {
                 error = { message: error };
             }
         }
@@ -1208,10 +1219,10 @@ class Webform extends NestedDataComponent_1.default {
         error = this.normalizeError(error);
         this.submitting = false;
         this.setPristine(false);
-        this.emit("submitError", error || this.errors);
+        this.emit('submitError', error || this.errors);
         // Allow for silent cancellations (no error message, no submit button error state)
         if (error && error.silent) {
-            this.emit("change", { isValid: true }, { silent: true });
+            this.emit('change', { isValid: true }, { silent: true });
             return false;
         }
         const errors = this.showErrors(error, true);
@@ -1262,12 +1273,12 @@ class Webform extends NestedDataComponent_1.default {
             this.triggerSaveDraft();
         }
         if (!flags || !flags.noEmit) {
-            this.emit("change", value, flags, modified);
+            this.emit('change', value, flags, modified);
             isChangeEventEmitted = true;
         }
         // The form is initialized after the first change event occurs.
         if (isChangeEventEmitted && !this.initialized) {
-            this.emit("initialized");
+            this.emit('initialized');
             this.initialized = true;
         }
     }
@@ -1277,7 +1288,7 @@ class Webform extends NestedDataComponent_1.default {
      */
     deleteSubmission() {
         return this.formio.deleteSubmission().then(() => {
-            this.emit("submissionDeleted", this.submission);
+            this.emit('submissionDeleted', this.submission);
             this.resetValue();
         });
     }
@@ -1288,13 +1299,13 @@ class Webform extends NestedDataComponent_1.default {
      * @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.
      */
     cancel(noconfirm) {
-        const shouldReset = this.hook("beforeCancel", true);
-        if (shouldReset && (noconfirm || confirm(this.t("confirmCancel")))) {
+        const shouldReset = this.hook('beforeCancel', true);
+        if (shouldReset && (noconfirm || confirm(this.t('confirmCancel')))) {
             this.resetValue();
             return true;
         }
         else {
-            this.emit("cancelSubmit");
+            this.emit('cancelSubmit');
             return false;
         }
     }
@@ -1302,8 +1313,8 @@ class Webform extends NestedDataComponent_1.default {
         // Add in metadata about client submitting the form
         submission.metadata = submission.metadata || {};
         lodash_1.default.defaults(submission.metadata, {
-            timezone: lodash_1.default.get(this, "_submission.metadata.timezone", (0, utils_1.currentTimezone)()),
-            offset: parseInt(lodash_1.default.get(this, "_submission.metadata.offset", (0, moment_1.default)().utcOffset()), 10),
+            timezone: lodash_1.default.get(this, '_submission.metadata.timezone', (0, utils_1.currentTimezone)()),
+            offset: parseInt(lodash_1.default.get(this, '_submission.metadata.offset', (0, moment_1.default)().utcOffset()), 10),
             origin: document.location.origin,
             referrer: document.referrer,
             browserName: navigator.appName,
@@ -1312,7 +1323,7 @@ class Webform extends NestedDataComponent_1.default {
             onLine: navigator.onLine,
         });
     }
-    submitForm(options = {}) {
+    submitForm(options = {}, local = false) {
         this.clearServerErrors();
         return new Promise((resolve, reject) => {
             // Read-only forms should never submit.
@@ -1324,26 +1335,27 @@ class Webform extends NestedDataComponent_1.default {
             }
             const submission = (0, utils_1.fastCloneDeep)(this.submission || {});
             this.setMetadata(submission);
-            submission.state = options.state || submission.state || "submitted";
-            const isDraft = submission.state === "draft";
-            this.hook("beforeSubmit", Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {
+            submission.state = options.state || submission.state || 'submitted';
+            const isDraft = submission.state === 'draft';
+            this.hook('beforeSubmit', Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {
                 var _a;
                 if (err) {
                     return reject(err);
                 }
-                submission._vnote = data && data._vnote ? data._vnote : "";
+                submission._vnote = data && data._vnote ? data._vnote : '';
                 try {
                     if (!isDraft && !options.noValidate) {
                         if (!submission.data) {
-                            return reject("Invalid Submission");
+                            return reject('Invalid Submission');
                         }
                         const errors = this.validate(submission.data, {
+                            local,
                             dirty: true,
                             silentCheck: false,
-                            process: "submit",
+                            process: 'submit',
                         });
                         if (errors.length ||
-                            ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === "rejected"))) {
+                            ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === 'rejected'))) {
                             return reject(errors);
                         }
                     }
@@ -1352,18 +1364,19 @@ class Webform extends NestedDataComponent_1.default {
                     console.error(err);
                 }
                 this.everyComponent((comp) => {
-                    if (submission._vnote && comp.type === "form" && comp.component.reference) {
-                        lodash_1.default.get(submission.data, comp.path, {})._vnote = submission._vnote;
+                    var _a, _b;
+                    if (submission._vnote && comp.type === 'form' && comp.component.reference) {
+                        lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;
                     }
                     const { persistent } = comp.component;
-                    if (persistent === "client-only") {
-                        lodash_1.default.unset(submission.data, comp.path);
+                    if (persistent === 'client-only') {
+                        lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);
                     }
                 });
-                this.hook("customValidation", Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {
+                this.hook('customValidation', Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {
                     if (err) {
                         // If string is returned, cast to object.
-                        if (typeof err === "string") {
+                        if (typeof err === 'string') {
                             err = {
                                 message: err,
                             };
@@ -1377,8 +1390,8 @@ class Webform extends NestedDataComponent_1.default {
                     if (this._form && this._form.action) {
                         const method = submission.data._id &&
                             this._form.action.includes(submission.data._id)
-                            ? "PUT"
-                            : "POST";
+                            ? 'PUT'
+                            : 'POST';
                         return Formio_1.Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})
                             .then((result) => resolve({
                             submission: result,
@@ -1398,8 +1411,8 @@ class Webform extends NestedDataComponent_1.default {
                     }
                     // If this is an actionUrl, then make sure to save the action and not the submission.
                     const submitMethod = submitFormio.actionUrl
-                        ? "saveAction"
-                        : "saveSubmission";
+                        ? 'saveAction'
+                        : 'saveSubmission';
                     submitFormio[submitMethod](submission)
                         .then((result) => resolve({
                         submission: result,
@@ -1416,14 +1429,14 @@ class Webform extends NestedDataComponent_1.default {
     setServerErrors(error) {
         if (error.details) {
             this.serverErrors = error.details
-                .filter((err) => (err.level ? err.level === "error" : err))
+                .filter((err) => (err.level ? err.level === 'error' : err))
                 .map((err) => {
                 err.fromServer = true;
                 return err;
             });
         }
-        else if (typeof error === "string") {
-            this.serverErrors = [{ fromServer: true, level: "error", message: error }];
+        else if (typeof error === 'string') {
+            this.serverErrors = [{ fromServer: true, level: 'error', message: error }];
         }
     }
     executeSubmit(options) {
@@ -1482,17 +1495,17 @@ class Webform extends NestedDataComponent_1.default {
     }
     submitUrl(URL, headers) {
         if (!URL) {
-            return console.warn("Missing URL argument");
+            return console.warn(this.t('missingUrl'));
         }
         const submission = this.submission || {};
         const API_URL = URL;
         const settings = {
-            method: "POST",
+            method: 'POST',
             headers: {},
         };
         if (headers && headers.length > 0) {
             headers.map((e) => {
-                if (e.header !== "" && e.value !== "") {
+                if (e.header !== '' && e.value !== '') {
                     settings.headers[e.header] = this.interpolate(e.value, submission);
                 }
             });
@@ -1502,40 +1515,51 @@ class Webform extends NestedDataComponent_1.default {
                 headers: settings.headers,
             })
                 .then(() => {
-                this.emit("requestDone");
-                this.setAlert("success", "<p> Success </p>");
+                this.emit('requestDone');
+                this.setAlert('success', `<p> ${this.t('success')} </p>`);
             })
                 .catch((e) => {
-                const message = `${e.statusText ? e.statusText : ""} ${e.status ? e.status : e}`;
-                this.emit("error", message);
+                const message = `${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`;
+                this.emit('error', message);
                 console.error(message);
-                this.setAlert("danger", `<p> ${message} </p>`);
+                this.setAlert('danger', `<p> ${message} </p>`);
                 return Promise.reject(this.onSubmissionError(e));
             });
         }
         else {
-            this.emit("error", "You should add a URL to this button.");
-            this.setAlert("warning", "You should add a URL to this button.");
-            return console.warn("You should add a URL to this button.");
+            const message = this.t('urlNotAttachedToBtn');
+            this.emit('error', message);
+            this.setAlert('warning', message);
+            return console.warn(message);
         }
     }
-    triggerCaptcha() {
-        if (!this || !this.components) {
+    triggerCaptcha(components = null) {
+        if (!this || !this.components || this.options.preview) {
             return;
         }
         const captchaComponent = [];
-        (0, formUtils_1.eachComponent)(this.components, (component) => {
+        (0, formUtils_1.eachComponent)(components || this.components, (component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }
-        });
+        }, true);
         if (captchaComponent.length > 0) {
-            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+            if (captchaComponent[0].component.provider === 'google' && components) {
+                return;
+            }
+            if (this.parent) {
+                this.parent.subFormReady.then(() => {
+                    captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+                });
+            }
+            else {
+                captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+            }
         }
     }
     set nosubmit(value) {
         this._nosubmit = !!value;
-        this.emit("nosubmit", this._nosubmit);
+        this.emit('nosubmit', this._nosubmit);
     }
     get nosubmit() {
         return this._nosubmit || false;