@formio/js 5.0.0-rc.19 → 5.0.0-rc.21

package/lib/cjs/Form.js

@@ -31,7 +31,6 @@ const Formio_1 = require("./Formio");
 const displays_1 = __importDefault(require("./displays"));
 const templates_1 = __importDefault(require("./templates"));
 const FormioUtils = __importStar(require("./utils/utils"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 class Form extends Element_1.default {
     /**
      * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.
@@ -45,7 +44,7 @@ class Form extends Element_1.default {
      * @param {boolean} options.template - Provides a way to inject custom logic into the creation of every element rendered within the form.
      *
      * @example
-     * import Form from 'formiojs/Form';
+     * import Form from '@formio/js/Form';
      * const form = new Form(document.getElementById('formio'), 'https://examples.form.io/example');
      * form.build();
      */
@@ -58,7 +57,7 @@ class Form extends Element_1.default {
         if (this.options.useSessionToken) {
             Formio_1.Formio.useSessionToken(this.options);
         }
-        this.ready = new native_promise_only_1.default((resolve, reject) => {
+        this.ready = new Promise((resolve, reject) => {
             this.readyResolve = resolve;
             this.readyReject = reject;
         });
@@ -89,6 +88,47 @@ class Form extends Element_1.default {
         }
         this.display = '';
     }
+    createElement(tag, attrs, children) {
+        const element = document.createElement(tag);
+        for (const attr in attrs) {
+            if (attrs.hasOwnProperty(attr)) {
+                element.setAttribute(attr, attrs[attr]);
+            }
+        }
+        (children || []).forEach(child => {
+            element.appendChild(this.createElement(child.tag, child.attrs, child.children));
+        });
+        return element;
+    }
+    set loading(load) {
+        if (!this.element || this.options.noLoader) {
+            return;
+        }
+        if (load) {
+            if (this.loader) {
+                return;
+            }
+            this.loader = this.createElement('div', {
+                'class': 'formio-loader'
+            }, [{
+                    tag: 'div',
+                    attrs: {
+                        class: 'loader-wrapper'
+                    },
+                    children: [{
+                            tag: 'div',
+                            attrs: {
+                                class: 'loader text-center'
+                            }
+                        }]
+                }]);
+            this.element.appendChild(this.loader);
+        }
+        else if (this.loader) {
+            this.element.removeChild(this.loader);
+            this.loader = null;
+        }
+    }
     /**
      * Create a new form instance provided the display of the form.
      *
@@ -144,6 +184,7 @@ class Form extends Element_1.default {
         if (typeof formParam === 'string') {
             const formio = new Formio_1.Formio(formParam);
             let error;
+            this.loading = true;
             result = this.getSubmission(formio, this.options)
                 .catch((err) => {
                 error = err;
@@ -159,6 +200,7 @@ class Form extends Element_1.default {
                     if (error) {
                         form = this.errorForm(error);
                     }
+                    this.loading = false;
                     this.instance = this.instance || this.create(form.display);
                     this.instance.url = formParam;
                     this.instance.nosubmit = false;
@@ -191,7 +233,7 @@ class Form extends Element_1.default {
         if (formio.submissionId) {
             return formio.loadSubmission(null, opts);
         }
-        return native_promise_only_1.default.resolve();
+        return Promise.resolve();
     }
     /**
      * Returns the loaded forms JSON.
@@ -209,7 +251,7 @@ class Form extends Element_1.default {
      */
     setDisplay(display) {
         if ((this.display === display) && this.instance) {
-            return native_promise_only_1.default.resolve(this.instance);
+            return Promise.resolve(this.instance);
         }
         this.form.display = display;
         this.instance.destroy();
@@ -224,7 +266,7 @@ class Form extends Element_1.default {
         }
     }
     static embed(embed) {
-        return new native_promise_only_1.default((resolve) => {
+        return new Promise((resolve) => {
             if (!embed || !embed.src) {
                 resolve();
             }
@@ -271,10 +313,10 @@ class Form extends Element_1.default {
      */
     build() {
         if (!this.instance) {
-            return native_promise_only_1.default.reject('Form not ready. Use form.ready promise');
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
         if (!this.element) {
-            return native_promise_only_1.default.reject('No DOM element for form.');
+            return Promise.reject('No DOM element for form.');
         }
         // Add temporary loader.
         const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';
@@ -291,9 +333,9 @@ class Form extends Element_1.default {
     }
     render() {
         if (!this.instance) {
-            return native_promise_only_1.default.reject('Form not ready. Use form.ready promise');
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
-        return native_promise_only_1.default.resolve(this.instance.render())
+        return Promise.resolve(this.instance.render())
             .then((param) => {
             this.emit('render', param);
             return param;
@@ -301,7 +343,7 @@ class Form extends Element_1.default {
     }
     attach(element) {
         if (!this.instance) {
-            return native_promise_only_1.default.reject('Form not ready. Use form.ready promise');
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
         if (this.element) {
             delete this.element.component;

package/lib/cjs/PDF.d.ts

@@ -4,9 +4,10 @@ export default class PDF extends Webform {
     init(): void;
     submitButton: any;
     attachComponents(element: any, components: any, container: any): Promise<void>;
-    iframeReady: any;
-    iframeReadyResolve: any;
-    iframeReadyReject: any;
+    attach(element: any): Promise<void>;
+    iframeReady: Promise<any> | undefined;
+    iframeReadyResolve: ((value: any) => void) | undefined;
+    iframeReadyReject: ((reason?: any) => void) | undefined;
     iframeElement: any;
     /**
      * Get the submission from the iframe.
@@ -14,6 +15,13 @@ export default class PDF extends Webform {
      * @return {Promise<any>}
      */
     getSubmission(): Promise<any>;
+    /**
+     * Ensure we have the submission from the iframe before we submit the form.
+     *
+     * @param options
+     * @return {*}
+     */
+    submitForm(options?: {}): any;
     getSrc(): string;
     setForm(form: any, flags?: {}): any;
     /**

package/lib/cjs/PDF.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const Formio_1 = require("./Formio");
 const Webform_1 = __importDefault(require("./Webform"));
 const utils_1 = require("./utils/utils");
@@ -61,7 +60,7 @@ class PDF extends Webform_1.default {
     }
     redraw() {
         this.postMessage({ name: 'redraw' });
-        return this.builderMode ? native_promise_only_1.default.resolve() : super.redraw();
+        return this.builderMode ? Promise.resolve() : super.redraw();
     }
     destroy(all = false) {
         if (this.iframeElement) {
@@ -74,7 +73,7 @@ class PDF extends Webform_1.default {
         if (this.attached && this.builderMode && this.component.components) {
             this.destroyComponents();
             this.addComponents();
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
         this.postMessage({ name: 'redraw' });
         return super.rebuild();
@@ -99,7 +98,7 @@ class PDF extends Webform_1.default {
             this.submitButton.refs = Object.assign({}, this.refs);
             this.submitButton.attachButton();
             // Reset the iframeReady promise.
-            this.iframeReady = new native_promise_only_1.default((resolve, reject) => {
+            this.iframeReady = new Promise((resolve, reject) => {
                 this.iframeReadyResolve = resolve;
                 this.iframeReadyReject = reject;
             });
@@ -148,7 +147,7 @@ class PDF extends Webform_1.default {
      * @return {Promise<any>}
      */
     getSubmission() {
-        return new native_promise_only_1.default((resolve) => {
+        return new Promise((resolve) => {
             this.once('iframe-submission', resolve);
             this.postMessage({ name: 'getSubmission' });
         });

package/lib/cjs/PDFBuilder.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const Formio_1 = require("./Formio");
 const WebformBuilder_1 = __importDefault(require("./WebformBuilder"));
 const utils_1 = require("./utils/utils");
@@ -157,7 +156,7 @@ class PDFBuilder extends WebformBuilder_1.default {
                     this.refs.hiddenFileInputElement.value = '';
                 });
             }
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
         // Normal PDF Builder
         return super.attach(element).then(() => {
@@ -417,7 +416,7 @@ class PDFBuilder extends WebformBuilder_1.default {
         if (!this.dropEvent) {
             // a 'drop' event may not be emited in the chrome browser when using a Mac, therefore an additional check has been added
             // eslint-disable-next-line no-undef
-            if (!this.dropEmitted && (0, utils_1.getBrowserInfo)().chrome && globalThis.navigator.userAgentData.platform === 'macOS' && iframeRect.left < e.clientX && iframeRect.top < e.clientY) {
+            if (!this.dropEmitted && ((0, utils_1.getBrowserInfo)().chrome || (0, utils_1.getBrowserInfo)().edge) && globalThis.navigator.userAgentData.platform === 'macOS' && iframeRect.left < e.clientX && iframeRect.top < e.clientY) {
                 this.dropEvent = e;
                 this.dropEvent.dataTransfer.effectAllowed = 'all';
                 this.dropEmitted = true;

package/lib/cjs/Webform.d.ts

@@ -65,7 +65,7 @@ declare class Webform extends NestedDataComponent {
      * @type {Promise}
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.formReady.then(() => {
      *   console.log('The form is ready!');
@@ -90,7 +90,7 @@ declare class Webform extends NestedDataComponent {
      * @type {Promise}
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.submissionReady.then(() => {
      *   console.log('The submission is ready!');
@@ -132,11 +132,6 @@ declare class Webform extends NestedDataComponent {
      * @return {*}
      */
     addLanguage(code: any, lang: any, active?: boolean): any;
-    /**
-     * Perform the localization initialization.
-     * @returns {*}
-     */
-    localize(): any;
     keyboardCatchableElement(element: any): boolean;
     executeShortcuts: (event: any) => void;
     /**
@@ -145,7 +140,7 @@ declare class Webform extends NestedDataComponent {
      * @param {string} value - The value of the form embed url.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.formReady.then(() => {
      *   console.log('The form is formReady!');
@@ -212,7 +207,7 @@ declare class Webform extends NestedDataComponent {
      * Sets the JSON schema for the form to be rendered.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.setForm({
      *   components: [
@@ -262,7 +257,7 @@ declare class Webform extends NestedDataComponent {
      * Sets the submission of a form.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.src = 'https://examples.form.io/example';
      * form.submission = {data: {
@@ -308,6 +303,8 @@ declare class Webform extends NestedDataComponent {
     build(element: any): Promise<any>;
     getClassName(): string;
     render(): any;
+    redraw(): Promise<void> | Promise<boolean>;
+    attach(element: any): Promise<boolean>;
     hasRequiredFields(): boolean;
     /**
      * Sets a new alert to display in the error dialog of the form.
@@ -365,17 +362,17 @@ declare class Webform extends NestedDataComponent {
      */
     cancel(noconfirm: any): boolean;
     setMetadata(submission: any): void;
-    submitForm(options?: {}): any;
+    submitForm(options?: {}): Promise<any>;
     setServerErrors(error: any): void;
     serverErrors: any;
-    executeSubmit(options: any): any;
+    executeSubmit(options: any): Promise<object>;
     submissionInProcess: boolean | undefined;
     clearServerErrors(): void;
     /**
      * Submits the form.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.src = 'https://examples.form.io/example';
      * form.submission = {data: {

package/lib/cjs/Webform.js

@@ -9,7 +9,6 @@ const compare_versions_1 = require("compare-versions");
 const EventEmitter_1 = __importDefault(require("./EventEmitter"));
 const i18n_1 = __importDefault(require("./i18n"));
 const Formio_1 = require("./Formio");
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const Components_1 = __importDefault(require("./components/Components"));
 const NestedDataComponent_1 = __importDefault(require("./components/_classes/nesteddata/NestedDataComponent"));
 const utils_1 = require("./utils/utils");
@@ -100,42 +99,6 @@ class Webform extends NestedDataComponent_1.default {
         if (this.options.baseUrl) {
             Formio_1.Formio.setBaseUrl(this.options.baseUrl);
         }
-        /**
-         * The i18n configuration for this component.
-         */
-        let i18n = i18n_1.default;
-        if (options && options.i18n && !options.i18nReady) {
-            // Support legacy way of doing translations.
-            if (options.i18n.resources) {
-                i18n = options.i18n;
-            }
-            else {
-                lodash_1.default.each(options.i18n, (lang, code) => {
-                    if (code === 'options') {
-                        lodash_1.default.merge(i18n, lang);
-                    }
-                    else if (!i18n.resources[code]) {
-                        // extend the default translations (validations, buttons etc.) in case they are not in the options.
-                        i18n.resources[code] = { translation: lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang) };
-                    }
-                    else {
-                        lodash_1.default.assign(i18n.resources[code].translation, lang);
-                    }
-                });
-            }
-            options.i18n = i18n;
-            options.i18nReady = true;
-        }
-        if (options && options.i18n) {
-            this.options.i18n = options.i18n;
-        }
-        else {
-            this.options.i18n = i18n;
-        }
-        // Set the language.
-        if (this.options.language) {
-            this.options.i18n.lng = this.options.language;
-        }
         /**
          * The type of this element.
          * @type {string}
@@ -200,14 +163,14 @@ class Webform extends NestedDataComponent_1.default {
          * @type {Promise}
          *
          * @example
-         * import Webform from 'formiojs/Webform';
+         * import Webform from '@formio/js/Webform';
          * let form = new Webform(document.getElementById('formio'));
          * form.formReady.then(() => {
          *   console.log('The form is ready!');
          * });
          * form.src = 'https://examples.form.io/example';
          */
-        this.formReady = new native_promise_only_1.default((resolve, reject) => {
+        this.formReady = new Promise((resolve, reject) => {
             /**
              * Called when the formReady state of this form has been resolved.
              *
@@ -226,14 +189,14 @@ class Webform extends NestedDataComponent_1.default {
          * @type {Promise}
          *
          * @example
-         * import Webform from 'formiojs/Webform';
+         * import Webform from '@formio/js/Webform';
          * let form = new Webform(document.getElementById('formio'));
          * form.submissionReady.then(() => {
          *   console.log('The submission is ready!');
          * });
          * form.src = 'https://examples.form.io/example/submission/234234234234234243';
          */
-        this.submissionReady = new native_promise_only_1.default((resolve, reject) => {
+        this.submissionReady = new Promise((resolve, reject) => {
             /**
              * Called when the formReady state of this form has been resolved.
              *
@@ -249,9 +212,7 @@ class Webform extends NestedDataComponent_1.default {
         });
         this.shortcuts = [];
         // Set language after everything is established.
-        this.localize().then(() => {
-            this.language = this.options.language;
-        });
+        this.language = this.i18next.language;
         // See if we need to restore the draft from a user.
         if (this.options.saveDraft && !this.options.skipDraftRestore) {
             const user = Formio_1.Formio.getUser();
@@ -285,32 +246,17 @@ class Webform extends NestedDataComponent_1.default {
         if (!this.i18next) {
             return;
         }
-        let cleanupThis = this;
-        if (!cleanupThis) {
-            return;
-        }
-        cleanupThis.options.language = lang;
-        if (cleanupThis.i18next.language === lang) {
-            cleanupThis = null;
-            return;
-        }
-        try {
-            cleanupThis.i18next.changeLanguage(lang, (err) => {
-                if (err) {
-                    cleanupThis = null;
-                    return;
-                }
-                if (cleanupThis) {
-                    cleanupThis.rebuild();
-                    cleanupThis.emit('languageChanged');
-                    cleanupThis = null;
-                }
-            });
-        }
-        catch (err) {
-            cleanupThis = null;
+        this.options.language = lang;
+        if (this.i18next.language === lang) {
             return;
         }
+        this.i18next.changeLanguage(lang, (err) => {
+            if (err) {
+                return;
+            }
+            this.rebuild();
+            this.emit('languageChanged');
+        });
     }
     get componentComponents() {
         return this.form.components;
@@ -335,45 +281,6 @@ class Webform extends NestedDataComponent_1.default {
             }
         }
     }
-    /**
-     * Perform the localization initialization.
-     * @returns {*}
-     */
-    localize() {
-        if (!this.i18next) {
-            return native_promise_only_1.default.resolve(null);
-        }
-        if (this.i18next.initialized) {
-            return native_promise_only_1.default.resolve(this.i18next);
-        }
-        this.i18next.initialized = true;
-        let cleanupThis = this;
-        return new native_promise_only_1.default((resolve, reject) => {
-            try {
-                if (!cleanupThis) {
-                    return;
-                }
-                cleanupThis.i18next.init(Object.assign(Object.assign({}, cleanupThis.options.i18n), { compatibilityJSON: 'v3' }), (err) => {
-                    if (!cleanupThis) {
-                        reject(new Error('Lost reference to `this` while initializing i18next.'));
-                    }
-                    // Get language but remove any ;q=1 that might exist on it.
-                    cleanupThis.options.language = cleanupThis.i18next.language.split(';')[0];
-                    if (err) {
-                        cleanupThis = null;
-                        return reject(err);
-                    }
-                    const i18next = cleanupThis.i18next;
-                    cleanupThis = null;
-                    resolve(i18next);
-                });
-            }
-            catch (err) {
-                cleanupThis = null;
-                return reject(err);
-            }
-        });
-    }
     keyboardCatchableElement(element) {
         if (element.nodeName === 'TEXTAREA') {
             return false;
@@ -458,7 +365,7 @@ class Webform extends NestedDataComponent_1.default {
                 this.formReadyReject(err);
             });
         }
-        return native_promise_only_1.default.resolve();
+        return Promise.resolve();
     }
     /**
      * Set the Form source, which is typically the Form.io embed URL.
@@ -466,7 +373,7 @@ class Webform extends NestedDataComponent_1.default {
      * @param {string} value - The value of the form embed url.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.formReady.then(() => {
      *   console.log('The form is formReady!');
@@ -571,7 +478,7 @@ class Webform extends NestedDataComponent_1.default {
      * Sets the JSON schema for the form to be rendered.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.setForm({
      *   components: [
@@ -608,7 +515,7 @@ class Webform extends NestedDataComponent_1.default {
         try {
             // Do not set the form again if it has been already set
             if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {
-                return native_promise_only_1.default.resolve();
+                return Promise.resolve();
             }
             // Create the form.
             this._form = (flags === null || flags === void 0 ? void 0 : flags.keepAsReference) ? form : lodash_1.default.cloneDeep(form);
@@ -616,13 +523,13 @@ class Webform extends NestedDataComponent_1.default {
                 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 native_promise_only_1.default.resolve();
+                return Promise.resolve();
             }
         }
         catch (err) {
             console.warn(err);
             // If provided form is not a valid JSON object, do not set it too
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
         // Allow the form to provide component overrides.
         if (form && form.settings && form.settings.components) {
@@ -659,7 +566,7 @@ class Webform extends NestedDataComponent_1.default {
             }
         }
         this.initialized = false;
-        const rebuild = this.rebuild() || native_promise_only_1.default.resolve();
+        const rebuild = this.rebuild() || Promise.resolve();
         return rebuild.then(() => {
             this.emit('formLoad', form);
             this.triggerRecaptcha();
@@ -705,7 +612,7 @@ class Webform extends NestedDataComponent_1.default {
      * Sets the submission of a form.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.src = 'https://examples.form.io/example';
      * form.submission = {data: {
@@ -812,7 +719,10 @@ class Webform extends NestedDataComponent_1.default {
     }
     setValue(submission, flags = {}) {
         if (!submission || !submission.data) {
-            submission = { data: {} };
+            submission = {
+                data: {},
+                metadata: submission.metadata,
+            };
         }
         // Metadata needs to be available before setValue
         this._submission.metadata = submission.metadata || {};
@@ -846,7 +756,14 @@ class Webform extends NestedDataComponent_1.default {
      * Build the form.
      */
     init() {
-        this._submission = this._submission || { data: {} };
+        if (this.options.submission) {
+            const submission = lodash_1.default.extend({}, this.options.submission);
+            this._submission = submission;
+            this._data = submission.data;
+        }
+        else {
+            this._submission = this._submission || { data: {} };
+        }
         // Remove any existing components.
         if (this.components && this.components.length) {
             this.destroyComponents();
@@ -927,7 +844,7 @@ class Webform extends NestedDataComponent_1.default {
     redraw() {
         // Don't bother if we have not built yet.
         if (!this.element) {
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
         this.clear();
         this.setContent(this.element, this.render());
@@ -1301,7 +1218,7 @@ class Webform extends NestedDataComponent_1.default {
     }
     submitForm(options = {}) {
         this.clearServerErrors();
-        return new native_promise_only_1.default((resolve, reject) => {
+        return new Promise((resolve, reject) => {
             // Read-only forms should never submit.
             if (this.options.readOnly) {
                 return resolve({
@@ -1325,6 +1242,9 @@ class Webform extends NestedDataComponent_1.default {
                     return reject();
                 }
                 this.everyComponent((comp) => {
+                    if (submission._vnote && comp.type === 'form' && comp.component.reference) {
+                        lodash_1.default.get(submission.data, comp.path, {})._vnote = submission._vnote;
+                    }
                     const { persistent } = comp.component;
                     if (persistent === 'client-only') {
                         lodash_1.default.unset(submission.data, comp.path);
@@ -1402,7 +1322,7 @@ class Webform extends NestedDataComponent_1.default {
         })
             .catch((err) => {
             this.submissionInProcess = false;
-            return native_promise_only_1.default.reject(this.onSubmissionError(err));
+            return Promise.reject(this.onSubmissionError(err));
         });
     }
     clearServerErrors() {
@@ -1422,7 +1342,7 @@ class Webform extends NestedDataComponent_1.default {
      * Submits the form.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.src = 'https://examples.form.io/example';
      * form.submission = {data: {
@@ -1469,10 +1389,11 @@ class Webform extends NestedDataComponent_1.default {
                 this.emit('requestDone');
                 this.setAlert('success', '<p> Success </p>');
             }).catch((e) => {
-                this.showErrors(`${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`);
-                this.emit('error', `${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`);
-                console.error(`${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`);
-                this.setAlert('danger', `<p> ${e.statusText ? e.statusText : ''} ${e.status ? e.status : e} </p>`);
+                const message = `${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`;
+                this.emit('error', message);
+                console.error(message);
+                this.setAlert('danger', `<p> ${message} </p>`);
+                return Promise.reject(this.onSubmissionError(e));
             });
         }
         else {