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

package/lib/mjs/Form.js

@@ -3,7 +3,6 @@ import { Formio } from './Formio';
 import Displays from './displays';
 import templates from './templates';
 import * as FormioUtils from './utils/utils';
-import NativePromise from 'native-promise-only';
 export default class Form extends Element {
     /**
      * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.
@@ -17,7 +16,7 @@ export default class Form extends Element {
      * @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();
      */
@@ -30,7 +29,7 @@ export default class Form extends Element {
         if (this.options.useSessionToken) {
             Formio.useSessionToken(this.options);
         }
-        this.ready = new NativePromise((resolve, reject) => {
+        this.ready = new Promise((resolve, reject) => {
             this.readyResolve = resolve;
             this.readyReject = reject;
         });
@@ -61,6 +60,47 @@ export default class Form extends Element {
         }
         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.
      *
@@ -116,6 +156,7 @@ export default class Form extends Element {
         if (typeof formParam === 'string') {
             const formio = new Formio(formParam);
             let error;
+            this.loading = true;
             result = this.getSubmission(formio, this.options)
                 .catch((err) => {
                 error = err;
@@ -131,6 +172,7 @@ export default class Form extends Element {
                     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;
@@ -163,7 +205,7 @@ export default class Form extends Element {
         if (formio.submissionId) {
             return formio.loadSubmission(null, opts);
         }
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     /**
      * Returns the loaded forms JSON.
@@ -181,7 +223,7 @@ export default class Form extends Element {
      */
     setDisplay(display) {
         if ((this.display === display) && this.instance) {
-            return NativePromise.resolve(this.instance);
+            return Promise.resolve(this.instance);
         }
         this.form.display = display;
         this.instance.destroy();
@@ -196,7 +238,7 @@ export default class Form extends Element {
         }
     }
     static embed(embed) {
-        return new NativePromise((resolve) => {
+        return new Promise((resolve) => {
             if (!embed || !embed.src) {
                 resolve();
             }
@@ -243,10 +285,10 @@ export default class Form extends Element {
      */
     build() {
         if (!this.instance) {
-            return NativePromise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
         if (!this.element) {
-            return NativePromise.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';
@@ -263,9 +305,9 @@ export default class Form extends Element {
     }
     render() {
         if (!this.instance) {
-            return NativePromise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
-        return NativePromise.resolve(this.instance.render())
+        return Promise.resolve(this.instance.render())
             .then((param) => {
             this.emit('render', param);
             return param;
@@ -273,7 +315,7 @@ export default class Form extends Element {
     }
     attach(element) {
         if (!this.instance) {
-            return NativePromise.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/mjs/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/mjs/PDF.js

@@ -1,4 +1,3 @@
-import NativePromise from 'native-promise-only';
 import { Formio } from './Formio';
 import Webform from './Webform';
 import { fastCloneDeep, eachComponent } from './utils/utils';
@@ -56,7 +55,7 @@ export default class PDF extends Webform {
     }
     redraw() {
         this.postMessage({ name: 'redraw' });
-        return this.builderMode ? NativePromise.resolve() : super.redraw();
+        return this.builderMode ? Promise.resolve() : super.redraw();
     }
     destroy(all = false) {
         if (this.iframeElement) {
@@ -69,7 +68,7 @@ export default class PDF extends Webform {
         if (this.attached && this.builderMode && this.component.components) {
             this.destroyComponents();
             this.addComponents();
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         this.postMessage({ name: 'redraw' });
         return super.rebuild();
@@ -94,7 +93,7 @@ export default class PDF extends Webform {
             this.submitButton.refs = { ...this.refs };
             this.submitButton.attachButton();
             // Reset the iframeReady promise.
-            this.iframeReady = new NativePromise((resolve, reject) => {
+            this.iframeReady = new Promise((resolve, reject) => {
                 this.iframeReadyResolve = resolve;
                 this.iframeReadyReject = reject;
             });
@@ -143,7 +142,7 @@ export default class PDF extends Webform {
      * @return {Promise<any>}
      */
     getSubmission() {
-        return new NativePromise((resolve) => {
+        return new Promise((resolve) => {
             this.once('iframe-submission', resolve);
             this.postMessage({ name: 'getSubmission' });
         });

package/lib/mjs/PDFBuilder.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import NativePromise from 'native-promise-only';
 import { Formio } from './Formio';
 import WebformBuilder from './WebformBuilder';
 import { fastCloneDeep, getElementRect, getBrowserInfo } from './utils/utils';
@@ -152,7 +151,7 @@ export default class PDFBuilder extends WebformBuilder {
                     this.refs.hiddenFileInputElement.value = '';
                 });
             }
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         // Normal PDF Builder
         return super.attach(element).then(() => {
@@ -411,7 +410,7 @@ export default class PDFBuilder extends WebformBuilder {
         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 && getBrowserInfo().chrome && globalThis.navigator.userAgentData.platform === 'macOS' && iframeRect.left < e.clientX && iframeRect.top < e.clientY) {
+            if (!this.dropEmitted && (getBrowserInfo().chrome || 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/mjs/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/mjs/Webform.js

@@ -4,7 +4,6 @@ import { compareVersions } from 'compare-versions';
 import EventEmitter from './EventEmitter';
 import i18nDefaults from './i18n';
 import { Formio } from './Formio';
-import NativePromise from 'native-promise-only';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
 import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath } from './utils/utils';
@@ -68,42 +67,6 @@ export default class Webform extends NestedDataComponent {
         if (this.options.baseUrl) {
             Formio.setBaseUrl(this.options.baseUrl);
         }
-        /**
-         * The i18n configuration for this component.
-         */
-        let i18n = i18nDefaults;
-        if (options && options.i18n && !options.i18nReady) {
-            // Support legacy way of doing translations.
-            if (options.i18n.resources) {
-                i18n = options.i18n;
-            }
-            else {
-                _.each(options.i18n, (lang, code) => {
-                    if (code === 'options') {
-                        _.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: _.assign(fastCloneDeep(i18nDefaults.resources.en.translation), lang) };
-                    }
-                    else {
-                        _.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}
@@ -168,14 +131,14 @@ export default 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!');
          * });
          * form.src = 'https://examples.form.io/example';
          */
-        this.formReady = new NativePromise((resolve, reject) => {
+        this.formReady = new Promise((resolve, reject) => {
             /**
              * Called when the formReady state of this form has been resolved.
              *
@@ -194,14 +157,14 @@ export default 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!');
          * });
          * form.src = 'https://examples.form.io/example/submission/234234234234234243';
          */
-        this.submissionReady = new NativePromise((resolve, reject) => {
+        this.submissionReady = new Promise((resolve, reject) => {
             /**
              * Called when the formReady state of this form has been resolved.
              *
@@ -217,9 +180,7 @@ export default class Webform extends NestedDataComponent {
         });
         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.getUser();
@@ -253,32 +214,17 @@ export default class Webform extends NestedDataComponent {
         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;
@@ -303,48 +249,6 @@ export default class Webform extends NestedDataComponent {
             }
         }
     }
-    /**
-     * Perform the localization initialization.
-     * @returns {*}
-     */
-    localize() {
-        if (!this.i18next) {
-            return NativePromise.resolve(null);
-        }
-        if (this.i18next.initialized) {
-            return NativePromise.resolve(this.i18next);
-        }
-        this.i18next.initialized = true;
-        let cleanupThis = this;
-        return new NativePromise((resolve, reject) => {
-            try {
-                if (!cleanupThis) {
-                    return;
-                }
-                cleanupThis.i18next.init({
-                    ...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;
@@ -456,7 +360,7 @@ export default class Webform extends NestedDataComponent {
                 this.formReadyReject(err);
             });
         }
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     /**
      * Set the Form source, which is typically the Form.io embed URL.
@@ -464,7 +368,7 @@ export default 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!');
@@ -569,7 +473,7 @@ export default 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: [
@@ -605,7 +509,7 @@ export default class Webform extends NestedDataComponent {
         try {
             // Do not set the form again if it has been already set
             if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {
-                return NativePromise.resolve();
+                return Promise.resolve();
             }
             // Create the form.
             this._form = flags?.keepAsReference ? form : _.cloneDeep(form);
@@ -613,13 +517,13 @@ export default class Webform extends NestedDataComponent {
                 this.onSetForm(_.cloneDeep(this._form), form);
             }
             if (this.parent?.component?.modalEdit) {
-                return NativePromise.resolve();
+                return Promise.resolve();
             }
         }
         catch (err) {
             console.warn(err);
             // If provided form is not a valid JSON object, do not set it too
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         // Allow the form to provide component overrides.
         if (form && form.settings && form.settings.components) {
@@ -656,7 +560,7 @@ export default class Webform extends NestedDataComponent {
             }
         }
         this.initialized = false;
-        const rebuild = this.rebuild() || NativePromise.resolve();
+        const rebuild = this.rebuild() || Promise.resolve();
         return rebuild.then(() => {
             this.emit('formLoad', form);
             this.triggerRecaptcha();
@@ -702,7 +606,7 @@ export default 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: {
@@ -815,7 +719,10 @@ export default class Webform extends NestedDataComponent {
     }
     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 || {};
@@ -849,7 +756,14 @@ export default class Webform extends NestedDataComponent {
      * Build the form.
      */
     init() {
-        this._submission = this._submission || { data: {} };
+        if (this.options.submission) {
+            const submission = _.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();
@@ -930,7 +844,7 @@ export default class Webform extends NestedDataComponent {
     redraw() {
         // Don't bother if we have not built yet.
         if (!this.element) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         this.clear();
         this.setContent(this.element, this.render());
@@ -1303,7 +1217,7 @@ export default class Webform extends NestedDataComponent {
     }
     submitForm(options = {}) {
         this.clearServerErrors();
-        return new NativePromise((resolve, reject) => {
+        return new Promise((resolve, reject) => {
             // Read-only forms should never submit.
             if (this.options.readOnly) {
                 return resolve({
@@ -1327,6 +1241,9 @@ export default class Webform extends NestedDataComponent {
                     return reject();
                 }
                 this.everyComponent((comp) => {
+                    if (submission._vnote && comp.type === 'form' && comp.component.reference) {
+                        _.get(submission.data, comp.path, {})._vnote = submission._vnote;
+                    }
                     const { persistent } = comp.component;
                     if (persistent === 'client-only') {
                         _.unset(submission.data, comp.path);
@@ -1404,7 +1321,7 @@ export default class Webform extends NestedDataComponent {
         })
             .catch((err) => {
             this.submissionInProcess = false;
-            return NativePromise.reject(this.onSubmissionError(err));
+            return Promise.reject(this.onSubmissionError(err));
         });
     }
     clearServerErrors() {
@@ -1423,7 +1340,7 @@ export default class Webform extends NestedDataComponent {
      * 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: {
@@ -1470,10 +1387,11 @@ export default class Webform extends NestedDataComponent {
                 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 {