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

package/lib/mjs/Embed.js

@@ -1,17 +1,48 @@
 import CDN from './CDN.js';
 class Formio {
+    static FormioClass = null;
     static baseUrl;
     static projectUrl;
+    static pathType;
     static language;
     static config = {};
-    static cdn = null;
-    static proxy = true;
+    static cdn = new CDN();
+    static modules = [];
+    static icons = '';
+    static formioReady = new Promise((ready, reject) => {
+        Formio._formioReady = ready;
+        Formio._formioReadyReject = reject;
+    });
     static version = 'FORMIO_VERSION';
-    static async setBaseUrl(url) {
+    static setBaseUrl(url, norecurse) {
         Formio.baseUrl = url;
+        if (!norecurse && Formio.FormioClass) {
+            Formio.FormioClass.setBaseUrl(url);
+        }
     }
-    static async setProjectUrl(url) {
+    static setApiUrl(url, norecurse) {
+        Formio.baseUrl = url;
+        if (!norecurse && Formio.FormioClass) {
+            Formio.FormioClass.setApiUrl(url);
+        }
+    }
+    static setProjectUrl(url, norecurse) {
         Formio.projectUrl = url;
+        if (!norecurse && Formio.FormioClass) {
+            Formio.FormioClass.setProjectUrl(url);
+        }
+    }
+    static setAppUrl(url, norecurse) {
+        Formio.projectUrl = url;
+        if (!norecurse && Formio.FormioClass) {
+            Formio.FormioClass.setAppUrl(url);
+        }
+    }
+    static setPathType(type, norecurse) {
+        Formio.pathType = type;
+        if (!norecurse && Formio.FormioClass) {
+            Formio.FormioClass.setPathType(type);
+        }
     }
     static debug(...args) {
         if (Formio.config.debug) {
@@ -23,14 +54,22 @@ class Formio {
             Formio.FormioClass.clearCache();
         }
     }
-    static global(prop) {
+    static global(prop, flag = '') {
         const globalValue = window[prop];
-        if (globalValue && globalValue.proxy) {
+        if (flag && globalValue && !globalValue[flag]) {
             return null;
         }
         Formio.debug(`Getting global ${prop}`, globalValue);
         return globalValue;
     }
+    static use(module) {
+        if (Formio.FormioClass && Formio.FormioClass.isRenderer) {
+            Formio.FormioClass.use(module);
+        }
+        else {
+            Formio.modules.push(module);
+        }
+    }
     static createElement(type, attrs, children) {
         const element = document.createElement(type);
         Object.keys(attrs).forEach(key => {
@@ -41,14 +80,14 @@ class Formio {
         });
         return element;
     }
-    static async addScript(wrapper, src, name) {
+    static async addScript(wrapper, src, name, flag = '') {
         if (!src) {
             return Promise.resolve();
         }
         if (typeof src !== 'string' && src.length) {
             return Promise.all(src.map(ref => Formio.addScript(wrapper, ref)));
         }
-        if (name && Formio.global(name)) {
+        if (name && Formio.global(name, flag)) {
             Formio.debug(`${name} already loaded.`);
             return Promise.resolve(Formio.global(name));
         }
@@ -62,7 +101,7 @@ class Formio {
         return new Promise((resolve) => {
             Formio.debug(`Waiting to load ${name}`);
             const wait = setInterval(() => {
-                if (Formio.global(name)) {
+                if (Formio.global(name, flag)) {
                     clearInterval(wait);
                     Formio.debug(`${name} loaded.`);
                     resolve(Formio.global(name));
@@ -125,8 +164,8 @@ class Formio {
         return script;
     }
     // eslint-disable-next-line max-statements
-    static async init(element, builder = false) {
-        Formio.cdn = new CDN(Formio.config.cdn);
+    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,
@@ -142,10 +181,17 @@ class Formio {
         };
         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.
-        const wrapper = Formio.createElement('div', {
+        let wrapper = Formio.createElement('div', {
             'id': `"${id}-wrapper"`
         });
         element.parentNode.insertBefore(wrapper, element);
+        // If we include the libraries, then we will attempt to run this in shadow dom.
+        if (Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function') && !Formio.config.premium) {
+            wrapper = wrapper.attachShadow({
+                mode: 'open'
+            });
+            options.shadowRoot = wrapper;
+        }
         element.parentNode.removeChild(element);
         wrapper.appendChild(element);
         // Load the renderer styles.
@@ -165,10 +211,20 @@ class Formio {
                         }
                     }]
             }]));
-        Formio.FormioClass = await Formio.addScript(wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/formio.form.min.js`, builder), 'Formio');
-        Formio.FormioClass.setBaseUrl(Formio.baseUrl || Formio.config.base);
-        Formio.FormioClass.setProjectUrl(Formio.projectUrl || Formio.config.project);
+        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.setBaseUrl(options.baseUrl || Formio.baseUrl || Formio.config.base);
+        Formio.FormioClass.setProjectUrl(options.projectUrl || Formio.projectUrl || Formio.config.project);
         Formio.FormioClass.language = Formio.language;
+        Formio.modules.forEach((module) => {
+            Formio.FormioClass.use(module);
+        });
+        if (Formio.icons) {
+            Formio.FormioClass.icons = Formio.icons;
+        }
+        if (Formio.pathType) {
+            Formio.FormioClass.setPathType(Formio.pathType);
+        }
         // Add premium modules
         if (Formio.global('premium')) {
             Formio.debug('Using premium module.');
@@ -207,15 +263,16 @@ class Formio {
             Formio.debug('Using premium');
             Formio.FormioClass.use(await Formio.addScript(wrapper, Formio.config.premium.js, 'premium'));
         }
-        await Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/formio.form.min.css`, builder));
+        await Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/${renderer}.css`, builder));
         if (Formio.config.before) {
             await Formio.config.before(Formio.FormioClass, element, Formio.config);
         }
         Formio.FormioClass.license = true;
+        Formio._formioReady(Formio.FormioClass);
         return wrapper;
     }
     static async createForm(element, form, options) {
-        const wrapper = await Formio.init(element);
+        const wrapper = await Formio.init(element, options);
         return Formio.FormioClass.createForm(element, form, {
             ...options,
             ...{ noLoader: true }
@@ -241,7 +298,7 @@ class Formio {
         });
     }
     static async builder(element, form, options) {
-        const wrapper = await Formio.init(element, true);
+        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');

package/lib/mjs/Formio.d.ts

@@ -1,2 +1 @@
 export { Formio };
-import { Formio } from '@formio/core';

package/lib/mjs/Formio.js

@@ -1,11 +1,12 @@
-import { Formio } from '@formio/core';
+import { Formio } 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';
 const isNil = (val) => val === null || val === undefined;
-Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback) {
+Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {
     const requestArgs = {
         provider: storage,
         method: 'upload',
@@ -25,7 +26,7 @@ Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCa
                     if (uploadStartCallback) {
                         uploadStartCallback();
                     }
-                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback);
+                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions);
                 }
                 else {
                     throw ('Storage provider not found');
@@ -86,4 +87,11 @@ Formio.prototype.deleteFile = function (file, options) {
 };
 // 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 };

package/lib/mjs/PDF.js

@@ -235,7 +235,7 @@ export default class PDF extends Webform {
         const helpBlock = document.getElementById('submit-error');
         const submitError = this.t('submitError');
         const isSubmitErrorShown = this.refs.buttonMessage?.textContent.trim() === submitError;
-        if (!helpBlock && this.errors.length && !isSubmitErrorShown) {
+        if (!helpBlock && error.length && !isSubmitErrorShown) {
             const p = this.ce('p', { class: 'help-block' });
             this.setContent(p, submitError);
             p.addEventListener('click', () => {
@@ -245,7 +245,7 @@ export default class PDF extends Webform {
             this.appendTo(p, div);
             this.appendTo(div, this.element);
         }
-        if (!this.errors.length && helpBlock) {
+        if (!error.length && helpBlock) {
             helpBlock.remove();
         }
         super.showErrors(error, triggerEvent);

package/lib/mjs/Webform.d.ts

@@ -20,7 +20,6 @@ declare class Webform extends NestedDataComponent {
     draftEnabled: boolean;
     savingDraft: boolean;
     triggerSaveDraft: any;
-    customErrors: any[];
     set nosubmit(arg: any);
     get nosubmit(): any;
     /**
@@ -327,7 +326,7 @@ declare class Webform extends NestedDataComponent {
      * @param {Object} error - An optional additional error to display along with the component errors.
      * @returns {*}
      */
-    showErrors(error: Object, triggerEvent: any, onChange: any): any;
+    showErrors(errors: any, triggerEvent: any, onChange: any): any;
     /**
      * Called when the submission has completed, or if the submission needs to be sent to an external library.
      *
@@ -342,7 +341,7 @@ declare class Webform extends NestedDataComponent {
      *
      * @param {Object} error - The error that occured.
      */
-    onSubmissionError(error: Object): any;
+    onSubmissionError(error: Object): false | undefined;
     /**
      * Trigger the change event for this form.
      *
@@ -350,7 +349,6 @@ declare class Webform extends NestedDataComponent {
      * @param flags
      */
     onChange(flags: any, changed: any, modified: any, changes: any): void;
-    checkData(data: any, flags?: {}): any;
     /**
      * Send a delete request to the server.
      */
@@ -388,7 +386,7 @@ declare class Webform extends NestedDataComponent {
      *
      * @returns {Promise} - A promise when the form is done submitting.
      */
-    submit(before: boolean, options: any): Promise<any>;
+    submit(before: boolean, options?: {}): Promise<any>;
     submitUrl(URL: any, headers: any): void;
     triggerRecaptcha(): void;
     _nosubmit: any;
@@ -396,10 +394,9 @@ declare class Webform extends NestedDataComponent {
     get variables(): any;
 }
 declare namespace Webform {
-    const setBaseUrl: typeof Formio.setBaseUrl;
-    const setApiUrl: typeof Formio.setApiUrl;
-    const setAppUrl: typeof Formio.setAppUrl;
+    const setBaseUrl: any;
+    const setApiUrl: any;
+    const setAppUrl: any;
 }
 export default Webform;
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { Formio } from './Formio';

package/lib/mjs/Webform.js

@@ -6,7 +6,7 @@ import i18nDefaults from './i18n';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath } from './utils/utils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath, interpolateErrors } from './utils/utils';
 import { eachComponent } from './utils/formUtils';
 // Initialize the available forms.
 Formio.forms = {};
@@ -83,7 +83,6 @@ export default class Webform extends NestedDataComponent {
         else {
             this.triggerSaveDraft = this.saveDraft.bind(this);
         }
-        this.customErrors = [];
         /**
          * Determines if this form should submit the API on submit.
          * @type {boolean}
@@ -779,9 +778,9 @@ export default class Webform extends NestedDataComponent {
         this.component.input = false;
         this.addComponents();
         this.on('submitButton', options => {
-            this.submit(false, options).catch(e => e !== false && console.log(e));
+            this.submit(false, options).catch(e => e !== false && e !== undefined && console.log(e));
         }, true);
-        this.on('checkValidity', (data) => this.checkValidity(data, true, data), 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);
@@ -975,21 +974,14 @@ export default class Webform extends NestedDataComponent {
      * @returns {*}
      */
     /* eslint-disable no-unused-vars */
-    showErrors(error, triggerEvent, onChange) {
-        this.loading = false;
-        let errors = this.errors;
-        if (error) {
-            if (Array.isArray(error)) {
-                errors = errors.concat(error);
-            }
-            else {
-                errors.push(error);
-            }
+    showErrors(errors, triggerEvent, onChange) {
+        if (!errors) {
+            return;
         }
-        else {
-            errors = super.errors;
+        this.loading = false;
+        if (!Array.isArray(errors)) {
+            errors = [errors];
         }
-        errors = errors.concat(this.customErrors);
         errors = errors.concat(this.serverErrors || []);
         if (!errors.length) {
             this.setAlert(false);
@@ -1005,7 +997,7 @@ export default class Webform extends NestedDataComponent {
                 components.push(err.path);
             }
             components.forEach((path) => {
-                const originalPath = this._parentPath + getStringFromComponentPath(path);
+                const originalPath = getStringFromComponentPath(path);
                 const component = this.getComponent(path, _.identity, originalPath);
                 if (err.fromServer) {
                     if (component.serverErrors) {
@@ -1020,42 +1012,31 @@ export default class Webform extends NestedDataComponent {
             });
         });
         const displayedErrors = [];
-        errors.forEach(err => {
-            if (err) {
-                const createListItem = (message, index) => {
-                    const messageFromIndex = !_.isUndefined(index) && err.messages && err.messages[index];
-                    const keyOrPath = (messageFromIndex && messageFromIndex.formattedKeyOrPath || messageFromIndex.path) || (err.component && err.component.key) || err.fromServer && err.path;
-                    let formattedKeyOrPath = keyOrPath ? getStringFromComponentPath(keyOrPath) : '';
-                    formattedKeyOrPath = this._parentPath + formattedKeyOrPath;
-                    if (typeof err !== 'string' && !err.formattedKeyOrPath) {
-                        err.formattedKeyOrPath = formattedKeyOrPath;
-                    }
-                    return {
-                        message: unescapeHTML(message),
-                        keyOrPath: formattedKeyOrPath
-                    };
+        if (errors.length) {
+            errors = _.uniqBy(errors, error => error.message);
+            const createListItem = (message, index) => {
+                const err = errors[index];
+                const messageFromIndex = !_.isUndefined(index) && errors && errors[index];
+                const keyOrPath = (messageFromIndex?.formattedKeyOrPath || messageFromIndex?.path || messageFromIndex?.context?.path) || (err.context?.component && err.context?.component.key) || (err.component && err.component.key) || err.fromServer && err.path;
+                const formattedKeyOrPath = keyOrPath ? getStringFromComponentPath(keyOrPath) : '';
+                if (typeof err !== 'string' && !err.formattedKeyOrPath) {
+                    err.formattedKeyOrPath = formattedKeyOrPath;
+                }
+                return {
+                    message: unescapeHTML(message),
+                    keyOrPath: formattedKeyOrPath
                 };
-                err.messages = _.uniqBy(err.messages, message => message.message);
-                if (err.messages && err.messages.length) {
-                    const { component } = err;
-                    err.messages.forEach(({ message, context, fromServer }, index) => {
-                        const text = context?.hasLabel || fromServer
-                            ? this.t('alertMessage', { message: this.t(message) })
-                            : this.t('alertMessageWithLabel', {
-                                label: this.t(component.label),
-                                message: this.t(message),
-                            });
-                        displayedErrors.push(createListItem(text, index));
+            };
+            errors.forEach(({ message, context, fromServer, component }, index) => {
+                const text = !component?.label || context?.hasLabel || fromServer
+                    ? this.t('alertMessage', { message: this.t(message) })
+                    : this.t('alertMessageWithLabel', {
+                        label: this.t(component?.label),
+                        message: this.t(message),
                     });
-                }
-                else if (err) {
-                    const message = _.isObject(err)
-                        ? this.t('alertMessage', { message: this.t(err.message || '') })
-                        : this.t('alertMessage', { message: this.t(err) });
-                    displayedErrors.push(createListItem(message));
-                }
-            }
-        });
+                displayedErrors.push(createListItem(text, index));
+            });
+        }
         const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });
         this.root.setAlert('danger', errorsList);
         if (triggerEvent) {
@@ -1117,17 +1098,10 @@ export default class Webform extends NestedDataComponent {
             this.emit('change', { isValid: true }, { silent: true });
             return false;
         }
-        let errors;
-        if (this.submitted) {
-            errors = this.showErrors();
-        }
-        else {
-            errors = this.showErrors(error, true);
-        }
+        this.showErrors(error, true);
         if (this.root && this.root.alert) {
             this.scrollIntoView(this.root.alert);
         }
-        return errors;
     }
     /**
      * Trigger the change event for this form.
@@ -1138,10 +1112,6 @@ export default class Webform extends NestedDataComponent {
     onChange(flags, changed, modified, changes) {
         flags = flags || {};
         let isChangeEventEmitted = false;
-        // For any change events, clear any custom errors for that component.
-        if (changed && changed.component) {
-            this.customErrors = this.customErrors.filter(err => err.component && err.component !== changed.component.key);
-        }
         super.onChange(flags, true);
         const value = _.clone(this.submission);
         flags.changed = value.changed = changed;
@@ -1149,10 +1119,13 @@ export default class Webform extends NestedDataComponent {
         if (modified && this.pristine) {
             this.pristine = false;
         }
-        value.isValid = this.checkData(value.data, flags);
+        this.checkData(value.data, flags);
+        const shouldValidate = !flags.noValidate || flags.fromIFrame || (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
+        const errors = shouldValidate ? this.validate(value.data, { ...flags, process: 'change' }) : [];
+        value.isValid = errors.length === 0;
         this.loading = false;
         if (this.submitted) {
-            this.showErrors();
+            this.showErrors(errors);
         }
         // See if we need to save the draft of the form.
         if (modified && this.options.saveDraft) {
@@ -1168,13 +1141,6 @@ export default class Webform extends NestedDataComponent {
             this.initialized = true;
         }
     }
-    checkData(data, flags = {}) {
-        const valid = super.checkData(data, flags);
-        if ((_.isEmpty(flags) || flags.noValidate) && this.submitted) {
-            this.showErrors();
-        }
-        return valid;
-    }
     /**
      * Send a delete request to the server.
      */
@@ -1227,18 +1193,30 @@ export default class Webform extends NestedDataComponent {
             }
             const submission = fastCloneDeep(this.submission || {});
             this.setMetadata(submission);
-            submission.state = options.state || 'submitted';
+            submission.state = options.state || submission.state || 'submitted';
             const isDraft = (submission.state === 'draft');
             this.hook('beforeSubmit', { ...submission, component: options.component }, (err, data) => {
                 if (err) {
                     return reject(err);
                 }
                 submission._vnote = data && data._vnote ? data._vnote : '';
-                if (!isDraft && !submission.data) {
-                    return reject('Invalid Submission');
+                try {
+                    if (!isDraft && !options.noValidate) {
+                        if (!submission.data) {
+                            return reject('Invalid Submission');
+                        }
+                        const errors = this.validate(submission.data, {
+                            dirty: true,
+                            silentCheck: false,
+                            process: 'submit'
+                        });
+                        if (errors.length || options.beforeSubmitResults?.some((result) => result.status === 'rejected')) {
+                            return reject(errors);
+                        }
+                    }
                 }
-                if (!isDraft && !this.checkValidity(submission.data, true)) {
-                    return reject();
+                catch (err) {
+                    console.error(err);
                 }
                 this.everyComponent((comp) => {
                     if (submission._vnote && comp.type === 'form' && comp.component.reference) {
@@ -1259,9 +1237,7 @@ export default class Webform extends NestedDataComponent {
                         }
                         // Ensure err is an array.
                         err = Array.isArray(err) ? err : [err];
-                        // Set as custom errors.
-                        this.customErrors = err;
-                        return reject();
+                        return reject(err);
                     }
                     this.loading = true;
                     // Use the form action to submit the form if available.
@@ -1356,7 +1332,7 @@ export default class Webform extends NestedDataComponent {
      *
      * @returns {Promise} - A promise when the form is done submitting.
      */
-    submit(before, options) {
+    submit(before, options = {}) {
         this.submissionInProcess = true;
         if (!before) {
             return this.beforeSubmit(options).then(() => this.executeSubmit(options));

package/lib/mjs/WebformBuilder.d.ts

@@ -73,7 +73,7 @@ export default class WebformBuilder extends Component {
     setForm(form: any): any;
     keyboardActionsEnabled: any;
     populateRecaptchaSettings(form: any): void;
-    removeComponent(component: any, parent: any, original: any): boolean | undefined;
+    removeComponent(component: any, parent: any, original: any, componentInstance: any): boolean | undefined;
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;
     findRepeatablePaths(): any[];