@formio/js 5.0.0-rc.29 → 5.0.0-rc.31

package/lib/mjs/Embed.js

@@ -6,39 +6,46 @@ class Formio {
     static pathType;
     static language;
     static config = {};
-    static cdn = new CDN();
+    static cdn;
     static modules = [];
     static icons = '';
+    static license = '';
     static formioReady = new Promise((ready, reject) => {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
     static version = 'FORMIO_VERSION';
-    static setBaseUrl(url, norecurse) {
+    static setLicense(license, norecurse = false) {
+        Formio.license = license;
+        if (!norecurse && Formio.FormioClass) {
+            Formio.FormioClass.setLicense(license);
+        }
+    }
+    static setBaseUrl(url, norecurse = false) {
         Formio.baseUrl = url;
         if (!norecurse && Formio.FormioClass) {
             Formio.FormioClass.setBaseUrl(url);
         }
     }
-    static setApiUrl(url, norecurse) {
+    static setApiUrl(url, norecurse = false) {
         Formio.baseUrl = url;
         if (!norecurse && Formio.FormioClass) {
             Formio.FormioClass.setApiUrl(url);
         }
     }
-    static setProjectUrl(url, norecurse) {
+    static setProjectUrl(url, norecurse = false) {
         Formio.projectUrl = url;
         if (!norecurse && Formio.FormioClass) {
             Formio.FormioClass.setProjectUrl(url);
         }
     }
-    static setAppUrl(url, norecurse) {
+    static setAppUrl(url, norecurse = false) {
         Formio.projectUrl = url;
         if (!norecurse && Formio.FormioClass) {
             Formio.FormioClass.setAppUrl(url);
         }
     }
-    static setPathType(type, norecurse) {
+    static setPathType(type, norecurse = false) {
         Formio.pathType = type;
         if (!norecurse && Formio.FormioClass) {
             Formio.FormioClass.setPathType(type);
@@ -92,9 +99,15 @@ class Formio {
             return Promise.resolve(Formio.global(name));
         }
         Formio.debug('Adding Script', src);
-        wrapper.appendChild(Formio.createElement('script', {
-            src
-        }));
+        try {
+            wrapper.appendChild(Formio.createElement('script', {
+                src
+            }));
+        }
+        catch (err) {
+            Formio.debug(err);
+            return Promise.resolve();
+        }
         if (!name) {
             return Promise.resolve();
         }
@@ -157,32 +170,66 @@ class Formio {
     }
     // Return the full script if the builder is being used.
     static formioScript(script, builder) {
+        builder = builder || Formio.config.includeBuilder;
         if (Formio.fullAdded || builder) {
             Formio.fullAdded = true;
             return script.replace('formio.form', 'formio.full');
         }
         return script;
     }
+    static async addLibrary(wrapper, lib, name) {
+        if (!lib) {
+            return;
+        }
+        if (lib.dependencies) {
+            for (let i = 0; i < lib.dependencies.length; i++) {
+                await Formio.addLibrary(wrapper, Formio.cdn.libs[lib.dependencies[i]]);
+            }
+        }
+        if (lib.css) {
+            await Formio.addStyles(wrapper, lib.css);
+        }
+        if (lib.js) {
+            const module = await Formio.addScript(wrapper, lib.js, lib.use ? name : false);
+            if (lib.use) {
+                Formio.debug(`Using ${name}`);
+                const options = lib.options || {};
+                if (!options.license && Formio.license) {
+                    options.license = Formio.license;
+                }
+                Formio.use((typeof lib.use === 'function' ? lib.use(module) : module), options);
+            }
+        }
+    }
     // eslint-disable-next-line max-statements
     static async init(element, options = {}, builder = false) {
         Formio.cdn = new CDN(Formio.config.cdn, Formio.config.cdnUrls || {});
         Formio.config.libs = Formio.config.libs || {
             uswds: {
-                fa: true,
+                dependencies: ['fontawesome'],
                 js: `${Formio.cdn.uswds}/uswds.min.js`,
                 css: `${Formio.cdn.uswds}/uswds.min.css`,
+                use: true
             },
             fontawesome: {
                 css: `${Formio.cdn['font-awesome']}/css/font-awesome.min.css`
             },
+            bootstrap4: {
+                dependencies: ['fontawesome'],
+                css: `${Formio.cdn.bootstrap4}/css/bootstrap.min.css`
+            },
             bootstrap: {
+                dependencies: ['bootstrap-icons'],
                 css: `${Formio.cdn.bootstrap}/css/bootstrap.min.css`
+            },
+            'bootstrap-icons': {
+                css: `${Formio.cdn['bootstrap-icons']}/css/bootstrap-icons.css`
             }
         };
         const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
         // Create a new wrapper and add the element inside of a new wrapper.
         let wrapper = Formio.createElement('div', {
-            'id': `"${id}-wrapper"`
+            'id': `${id}-wrapper`
         });
         element.parentNode.insertBefore(wrapper, element);
         // If we include the libraries, then we will attempt to run this in shadow dom.
@@ -213,9 +260,11 @@ class Formio {
             }]));
         const renderer = Formio.config.debug ? 'formio.form' : 'formio.form.min';
         Formio.FormioClass = await Formio.addScript(wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');
+        Formio.FormioClass.cdn = Formio.cdn;
         Formio.FormioClass.setBaseUrl(options.baseUrl || Formio.baseUrl || Formio.config.base);
         Formio.FormioClass.setProjectUrl(options.projectUrl || Formio.projectUrl || Formio.config.project);
         Formio.FormioClass.language = Formio.language;
+        Formio.setLicense(Formio.license || Formio.config.license || false);
         Formio.modules.forEach((module) => {
             Formio.FormioClass.use(module);
         });
@@ -225,43 +274,21 @@ class Formio {
         if (Formio.pathType) {
             Formio.FormioClass.setPathType(Formio.pathType);
         }
-        // Add premium modules
-        if (Formio.global('premium')) {
-            Formio.debug('Using premium module.');
-            Formio.FormioClass.use(Formio.global('premium'));
-        }
-        if (Formio.global('vpat')) {
-            Formio.debug('Using vpat module.');
-            Formio.FormioClass.use(Formio.global('vpat'));
-        }
-        if (Formio.config.template) {
-            if (Formio.config.includeLibs) {
-                await Formio.addStyles(wrapper, Formio.config.libs[Formio.config.template].css);
-                await Formio.addScript(wrapper, Formio.config.libs[Formio.config.template].js);
-                if (Formio.config.libs[Formio.config.template].fa) {
-                    await Formio.addStyles(wrapper, Formio.config.libs.fontawesome.css);
-                }
-            }
-            if (Formio.cdn[Formio.config.template]) {
-                const templateSrc = `${Formio.cdn[Formio.config.template]}/${Formio.config.template}.min`;
-                await Formio.addStyles(wrapper, `${templateSrc}.css`);
-                Formio.debug(`Using ${Formio.config.template}`);
-                Formio.FormioClass.use(await Formio.addScript(wrapper, `${templateSrc}.js`, Formio.config.template));
-            }
-        }
-        else if (Formio.global('uswds')) {
-            Formio.debug('Using uswds module.');
-            Formio.FormioClass.use(Formio.global('uswds'));
-        }
-        // Default bootstrap + fontawesome.
-        else if (Formio.config.includeLibs) {
-            await Formio.addStyles(wrapper, Formio.config.libs.fontawesome.css);
-            await Formio.addStyles(wrapper, Formio.config.libs.bootstrap.css);
+        // Add libraries if they wish to include the libs.
+        if (Formio.config.template && Formio.config.includeLibs) {
+            await Formio.addLibrary(wrapper, Formio.config.libs[Formio.config.template], Formio.config.template);
         }
+        // Add the premium modules.
         if (Formio.config.premium) {
-            await Formio.addStyles(wrapper, Formio.config.premium.css);
-            Formio.debug('Using premium');
-            Formio.FormioClass.use(await Formio.addScript(wrapper, Formio.config.premium.js, 'premium'));
+            Formio.config.modules.premium = Formio.config.premium;
+        }
+        // Allow adding dynamic modules.
+        if (Formio.config.modules) {
+            for (const name in Formio.config.modules) {
+                const lib = Formio.config.modules[name];
+                lib.use = lib.use || true;
+                await Formio.addLibrary(wrapper, lib, name);
+            }
         }
         await Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/${renderer}.css`, builder));
         if (Formio.config.before) {
@@ -271,49 +298,54 @@ class Formio {
         Formio._formioReady(Formio.FormioClass);
         return wrapper;
     }
-    static async createForm(element, form, options) {
+    // Called after an instance has been created.
+    static async afterCreate(instance, wrapper, readyEvent) {
+        wrapper.removeChild(wrapper.querySelector('.formio-loader'));
+        Formio.FormioClass.events.emit(readyEvent, instance);
+        if (Formio.config.after) {
+            Formio.debug('Calling ready callback');
+            Formio.config.after(instance, Formio.config);
+        }
+        return instance;
+    }
+    // Create a new form.
+    static async createForm(element, form, options = {}) {
         const wrapper = await Formio.init(element, options);
         return Formio.FormioClass.createForm(element, form, {
             ...options,
             ...{ noLoader: true }
         }).then((instance) => {
-            Formio.debug('Form created', instance);
-            // Remove the loader.
-            Formio.debug('Removing loader');
-            wrapper.removeChild(wrapper.querySelector('.formio-loader'));
             // Set the default submission data.
             if (Formio.config.submission) {
                 Formio.debug('Setting submission', Formio.config.submission);
                 instance.submission = Formio.config.submission;
             }
-            // Allow them to provide additional configs.
-            Formio.debug('Triggering embed event');
-            Formio.FormioClass.events.emit('formEmbedded', instance);
-            // Trigger the after handler.
-            if (Formio.config.after) {
-                Formio.debug('Calling ready callback');
-                Formio.config.after(instance, Formio.config);
-            }
+            // Call the after create method.
+            Formio.afterCreate(instance, wrapper, 'formEmbedded');
             return instance;
         });
     }
-    static async builder(element, form, options) {
+    // Create a form builder.
+    static async builder(element, form, options = {}) {
         const wrapper = await Formio.init(element, options, true);
         return Formio.FormioClass.builder(element, form, options).then((instance) => {
-            Formio.debug('Builder created', instance);
-            Formio.debug('Removing loader');
-            wrapper.removeChild(wrapper.querySelector('.formio-loader'));
-            Formio.debug('Triggering embed event');
-            Formio.FormioClass.events.emit('builderEmbedded', instance);
-            if (Formio.config.after) {
-                Formio.debug('Calling ready callback');
-                Formio.config.after(instance, Formio.config);
-            }
+            Formio.afterCreate(instance, wrapper, 'builderEmbedded');
             return instance;
         });
     }
+    // Create a report.
+    static Report = {
+        create: async (element, submission, options = {}) => {
+            const wrapper = await Formio.init(element, options, true);
+            return Formio.FormioClass.Report.create(element, submission, options).then((instance) => {
+                Formio.afterCreate(instance, wrapper, 'reportEmbedded');
+                return instance;
+            });
+        }
+    };
 }
 export { Formio };
+CDN.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 export class Form {
     constructor(element, form, options) {
         this.form = form;

package/lib/mjs/Formio.js

@@ -1,12 +1,13 @@
-import { Formio } from '@formio/core/sdk';
+import { Formio as FormioCore } from '@formio/core/sdk';
 import { Formio as FormioEmbed } from './Embed';
 import CDN from './CDN';
 import Providers from './providers';
-Formio.cdn = new CDN();
-Formio.Providers = Providers;
-Formio.version = 'FORMIO_VERSION';
+FormioCore.cdn = new CDN();
+FormioCore.Providers = Providers;
+FormioCore.version = 'FORMIO_VERSION';
+CDN.defaultCDN = FormioCore.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 const isNil = (val) => val === null || val === undefined;
-Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {
+FormioCore.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {
     const requestArgs = {
         provider: storage,
         method: 'upload',
@@ -15,9 +16,9 @@ Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCa
         dir: dir
     };
     fileKey = fileKey || 'file';
-    const request = Formio.pluginWait('preRequest', requestArgs)
+    const request = FormioCore.pluginWait('preRequest', requestArgs)
         .then(() => {
-        return Formio.pluginGet('fileRequest', requestArgs)
+        return FormioCore.pluginGet('fileRequest', requestArgs)
             .then((result) => {
             if (storage && isNil(result)) {
                 const Provider = Providers.getProvider('storage', storage);
@@ -35,16 +36,16 @@ Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCa
             return result || { url: '' };
         });
     });
-    return Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);
+    return FormioCore.pluginAlter('wrapFileRequestPromise', request, requestArgs);
 };
-Formio.prototype.downloadFile = function (file, options) {
+FormioCore.prototype.downloadFile = function (file, options) {
     const requestArgs = {
         method: 'download',
         file: file
     };
-    const request = Formio.pluginWait('preRequest', requestArgs)
+    const request = FormioCore.pluginWait('preRequest', requestArgs)
         .then(() => {
-        return Formio.pluginGet('fileRequest', requestArgs)
+        return FormioCore.pluginGet('fileRequest', requestArgs)
             .then((result) => {
             if (file.storage && isNil(result)) {
                 const Provider = Providers.getProvider('storage', file.storage);
@@ -59,16 +60,16 @@ Formio.prototype.downloadFile = function (file, options) {
             return result || { url: '' };
         });
     });
-    return Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);
+    return FormioCore.pluginAlter('wrapFileRequestPromise', request, requestArgs);
 };
-Formio.prototype.deleteFile = function (file, options) {
+FormioCore.prototype.deleteFile = function (file, options) {
     const requestArgs = {
         method: 'delete',
         file: file
     };
-    const request = Formio.pluginWait('preRequest', requestArgs)
+    const request = FormioCore.pluginWait('preRequest', requestArgs)
         .then(() => {
-        return Formio.pluginGet('fileRequest', requestArgs)
+        return FormioCore.pluginGet('fileRequest', requestArgs)
             .then((result) => {
             if (file.storage && isNil(result)) {
                 const Provider = Providers.getProvider('storage', file.storage);
@@ -83,15 +84,24 @@ Formio.prototype.deleteFile = function (file, options) {
             return result || { url: '' };
         });
     });
-    return Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);
+    return FormioCore.pluginAlter('wrapFileRequestPromise', request, requestArgs);
 };
+// Esnure we proxy the following methods to the FormioEmbed class.
+['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {
+    const baseFn = FormioCore[fn];
+    FormioCore[fn] = function (arg) {
+        const retVal = FormioEmbed[fn](arg, true);
+        return baseFn ? baseFn.call(this, arg) : retVal;
+    };
+});
 // For reverse compatability.
-Formio.Promise = Promise;
-Formio.formioReady = FormioEmbed.formioReady;
-Formio.config = FormioEmbed.config;
-Formio.builder = FormioEmbed.builder;
-Formio.Form = FormioEmbed.Form;
-Formio.FormBuilder = FormioEmbed.FormBuilder;
-Formio.use = FormioEmbed.use;
-Formio.createForm = FormioEmbed.createForm;
-export { Formio };
+FormioCore.Promise = Promise;
+FormioCore.formioReady = FormioEmbed.formioReady;
+FormioCore.config = FormioEmbed.config;
+FormioCore.builder = FormioEmbed.builder;
+FormioCore.Report = FormioEmbed.Report;
+FormioCore.Form = FormioEmbed.Form;
+FormioCore.FormBuilder = FormioEmbed.FormBuilder;
+FormioCore.use = FormioEmbed.use;
+FormioCore.createForm = FormioEmbed.createForm;
+export { FormioCore as Formio };

package/lib/mjs/Wizard.js

@@ -777,23 +777,22 @@ export default class Wizard extends Webform {
         }
     }
     setValue(submission, flags = {}, ignoreEstablishment) {
-        const changed = this.getPages({ all: true }).reduce((changed, page) => {
-            return this.setNestedValue(page, submission.data, flags, changed) || changed;
-        }, false);
-        if (!flags.sanitize ||
+        this._submission = submission;
+        if ((flags && flags.fromSubmission && (this.options.readOnly || this.editMode) && !this.isHtmlRenderMode()) ||
             (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id) ||
             (this.options.server && (this.prefixComps.length || this.suffixComps.length))) {
-            this.mergeData(this.data, submission.data);
+            this._data = submission.data;
+        }
+        if (!ignoreEstablishment) {
+            this.establishPages(submission.data);
         }
+        const changed = this.getPages({ all: true }).reduce((changed, page) => {
+            return this.setNestedValue(page, submission.data, flags, changed) || changed;
+        }, false);
         if (changed) {
             this.pageFieldLogic(this.page);
         }
         this.setEditMode(submission);
-        submission.data = this.data;
-        this._submission = submission;
-        if (!ignoreEstablishment) {
-            this.establishPages(submission.data);
-        }
         return changed;
     }
     isClickable(page, index) {

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

@@ -1030,7 +1030,7 @@ export default class Component extends Element {
                     placement: 'right',
                     zIndex: 10000,
                     interactive: true,
-                    content: this.t(tooltipText, { _userInput: true }),
+                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
                 });
             }
         });
@@ -2903,8 +2903,6 @@ export default class Component extends Element {
         const rules = [
             // Do not validate if the flags say not too.
             () => flags.noValidate,
-            // Do not check custom validation for empty data if it is not required
-            () => this.component.validate.custom && !this.dataValue && !this.component.validate.required,
             // Force valid if component is read-only
             () => this.options.readOnly,
             // Do not check validations if component is not an input component.

package/lib/mjs/components/_classes/component/fixtures/comp5.js

@@ -0,0 +1,24 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Text Field',
+            description: "<img <img src='https://somesite' onerror='var _ee = 2' >",
+            tooltip: "<img src='https://somesite' onerror='var _ee = 1 >",
+            applyMaskOn: 'change',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            input: true
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+};

package/lib/mjs/components/_classes/component/fixtures/index.js

@@ -2,4 +2,5 @@ import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
-export { comp1, comp2, comp3, comp4 };
+import comp5 from './comp5';
+export { comp1, comp2, comp3, comp4, comp5 };

package/lib/mjs/components/columns/editForm/Columns.edit.display.js

@@ -84,24 +84,6 @@ export default [
                 key: 'width',
                 defaultValue: 6,
                 label: 'Width'
-            },
-            {
-                type: 'number',
-                key: 'offset',
-                defaultValue: 0,
-                label: 'Offset'
-            },
-            {
-                type: 'number',
-                key: 'push',
-                defaultValue: 0,
-                label: 'Push'
-            },
-            {
-                type: 'number',
-                key: 'pull',
-                defaultValue: 0,
-                label: 'Pull'
             }
         ]
     },

package/lib/mjs/components/file/File.js

@@ -688,6 +688,22 @@ export default class FileComponent extends Field {
                             }
                         }
                     }
+                    // Prep for a potential multipart upload
+                    let count = 0;
+                    const multipartOptions = this.component.useMultipartUpload && this.component.multipart ? {
+                        ...this.component.multipart,
+                        progressCallback: (total) => {
+                            count++;
+                            fileUpload.status = 'progress';
+                            fileUpload.progress = parseInt(100 * count / total);
+                            delete fileUpload.message;
+                            this.redraw();
+                        },
+                        changeMessage: (message) => {
+                            fileUpload.message = message;
+                            this.redraw();
+                        },
+                    } : false;
                     fileUpload.message = this.t('Starting upload...');
                     this.redraw();
                     const filePromise = fileService.uploadFile(storage, processedFile || file, fileName, dir, 
@@ -701,7 +717,7 @@ export default class FileComponent extends Field {
                     // Upload start callback
                     () => {
                         this.emit('fileUploadingStart', filePromise);
-                    }, (abort) => fileUpload.abort = abort).then((fileInfo) => {
+                    }, (abort) => fileUpload.abort = abort, multipartOptions).then((fileInfo) => {
                         const index = this.statuses.indexOf(fileUpload);
                         if (index !== -1) {
                             this.statuses.splice(index, 1);

package/lib/mjs/components/file/editForm/File.edit.file.js

@@ -20,6 +20,46 @@ export default [
             }
         }
     },
+    {
+        type: 'checkbox',
+        input: true,
+        key: 'useMultipartUpload',
+        label: 'Use the S3 Multipart Upload API',
+        tooltip: "The <a href='https://docs.aws.amazon.com/AmazonS3/latest/userguide/mpuoverview.html'>S3 Multipart Upload API</a> is designed to improve the upload experience for larger objects (> 5GB).",
+        conditional: {
+            json: { '===': [{ var: 'data.storage' }, 's3'] }
+        },
+    },
+    {
+        label: 'Multipart Upload',
+        tableView: false,
+        key: 'multipart',
+        type: 'container',
+        input: true,
+        components: [
+            {
+                label: 'Part Size (MB)',
+                applyMaskOn: 'change',
+                mask: false,
+                tableView: false,
+                delimiter: false,
+                requireDecimal: false,
+                inputFormat: 'plain',
+                truncateMultipleSpaces: false,
+                validate: {
+                    min: 5,
+                    max: 5000,
+                },
+                key: 'partSize',
+                type: 'number',
+                input: true,
+                defaultValue: 500,
+            },
+        ],
+        conditional: {
+            json: { '===': [{ var: 'data.useMultipartUpload' }, true] }
+        },
+    },
     {
         type: 'textfield',
         input: true,

package/lib/mjs/components/select/Select.js

@@ -347,8 +347,10 @@ export default class SelectComponent extends ListComponent {
             }
         }
         // Allow js processing (needed for form builder)
-        if (this.component.onSetItems && typeof this.component.onSetItems === 'function') {
-            const newItems = this.component.onSetItems(this, items);
+        if (this.component.onSetItems) {
+            const newItems = typeof this.component.onSetItems === 'function'
+                ? this.component.onSetItems(this, items)
+                : this.evaluate(this.component.onSetItems, { items: items }, 'items');
             if (newItems) {
                 items = newItems;
             }
@@ -805,7 +807,9 @@ export default class SelectComponent extends ListComponent {
                 this.setItems(this.selectOptions || []);
             }
             this.focusableElement = input;
-            this.addEventListener(input, 'focus', () => this.update());
+            if (this.component.dataSrc === 'custom') {
+                this.addEventListener(input, 'focus', () => this.updateCustomItems());
+            }
             this.addEventListener(input, 'keydown', (event) => {
                 const { key } = event;
                 if (['Backspace', 'Delete'].includes(key)) {

package/lib/mjs/formio.form.js

@@ -37,7 +37,9 @@ Formio.Components.setComponents(AllComponents);
  * @returns
  */
 export function registerModule(mod, defaultFn = null, options = {}) {
-    // Sanity check.
+    if (typeof mod === 'function') {
+        return registerModule(mod(Formio), defaultFn, options);
+    }
     if (typeof mod !== 'object') {
         return;
     }