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

package/lib/cjs/Embed.js

@@ -1,355 +1,258 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.embed = void 0;
-const CDN_1 = __importDefault(require("./CDN"));
-// eslint-disable-next-line max-statements
-function embed(config = {}) {
-    const scripts = document.getElementsByTagName('script');
-    config = Object.assign(config, window.FormioConfig);
-    let thisScript = null;
-    let i = scripts.length;
-    const scriptName = config.scriptName || 'formio.embed.';
-    while (i--) {
-        if (scripts[i].src && (scripts[i].src.indexOf(scriptName) !== -1)) {
-            thisScript = scripts[i];
-            break;
-        }
+exports.Formio = void 0;
+const CDN_js_1 = __importDefault(require("./CDN.js"));
+class Formio {
+    static setBaseUrl(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            Formio.baseUrl = url;
+        });
     }
-    if (thisScript) {
-        const query = {};
-        const queryString = thisScript.src.replace(/^[^?]+\??/, '');
-        queryString.replace(/\?/g, '&').split('&').forEach((item) => {
-            query[item.split('=')[0]] = item.split('=')[1] && decodeURIComponent(item.split('=')[1]);
+    static setProjectUrl(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            Formio.projectUrl = url;
         });
-        let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
-        scriptSrc.pop();
-        if (config.formioPath) {
-            config.formioPath(scriptSrc);
+    }
+    static debug(...args) {
+        if (Formio.config.debug) {
+            console.log(...args);
         }
-        scriptSrc = scriptSrc.join('/');
-        query.script = query.script || (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.form.min.js`);
-        query.styles = query.styles || (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.form.min.css`);
-        const cdn = query.cdn || 'https://cdn.jsdelivr.net/npm';
-        const resolveLibs = (cdn) => {
-            const libs = {
-                uswds: {
-                    fa: true,
-                    js: `${cdn}/uswds@2.10.0/dist/js/uswds.min.js`,
-                    css: `${cdn}/uswds@2.10.0/dist/css/uswds.min.css`
-                },
-                fontawesome: {
-                    css: `${cdn}/font-awesome@4.7.0/css/font-awesome.min.css`
-                },
-                bootstrap: {
-                    css: `${cdn}/bootstrap@4.6.0/dist/css/bootstrap.min.css`
-                }
-            };
-            // Check if using cdn.form.io standart folders format
-            if (cdn instanceof CDN_1.default) {
-                const url = cdn.baseUrl;
-                libs.uswds.js = `${url}/uswds/${cdn.getVersion('uswds')}/uswds.min.js`;
-                libs.uswds.css = `${url}/uswds/${cdn.getVersion('uswds')}/uswds.min.css`;
-                libs.fontawesome.css = `${url}/font-awesome/${cdn.getVersion('font-awesome')}/css/font-awesome.min.css`;
-                libs.bootstrap.css = `${url}/bootstrap/${cdn.getVersion('bootstrap')}/css/bootstrap.min.css`;
+    }
+    static global(prop) {
+        const globalValue = window[prop];
+        if (globalValue && globalValue.proxy) {
+            return null;
+        }
+        Formio.debug(`Getting global ${prop}`, globalValue);
+        return globalValue;
+    }
+    static createElement(type, attrs, children) {
+        const element = document.createElement(type);
+        Object.keys(attrs).forEach(key => {
+            element.setAttribute(key, attrs[key]);
+        });
+        (children || []).forEach(child => {
+            element.appendChild(Formio.createElement(child.tag, child.attrs, child.children));
+        });
+        return element;
+    }
+    static addScript(src, name) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!src) {
+                return Promise.resolve();
             }
-            return libs;
-        };
-        config = Object.assign({
-            script: query.script,
-            style: query.styles,
-            class: (query.class || 'formio-form-wrapper'),
-            src: query.src,
-            form: null,
-            submission: null,
-            project: query.project,
-            base: query.base,
-            submit: query.submit,
-            includeLibs: (query.libs === 'true' || query.libs === '1'),
-            template: query.template,
-            debug: (query.debug === 'true' || query.debug === '1'),
-            config: {},
-            redirect: (query.return || query.redirect),
-            before: () => { },
-            after: () => { }
-        }, config);
-        /**
-         * Print debug statements.
-         *
-         * @param  {...any} args Arguments to pass to the console.log method.
-         */
-        const debug = (...args) => {
-            if (config.debug) {
-                console.log(...args);
+            if (typeof src !== 'string' && src.length) {
+                return Promise.all(src.map(ref => Formio.addScript(ref)));
             }
-        };
-        /**
-         * Creates a new DOM element.
-         *
-         * @param {string} tag The HTMLElement to add to the wrapper or shadow dom.
-         * @param {Object} attrs The attributes to add to this element.
-         * @param {Array<Object>} children The children attached to this element.
-         */
-        const createElement = (tag, attrs, children) => {
-            const element = document.createElement(tag);
-            for (const attr in attrs) {
-                if (attrs.hasOwnProperty(attr)) {
-                    element.setAttribute(attr, attrs[attr]);
-                }
+            if (name && Formio.global(name)) {
+                Formio.debug(`${name} already loaded.`);
+                return Promise.resolve(Formio.global(name));
             }
-            (children || []).forEach(child => {
-                element.appendChild(createElement(child.tag, child.attrs, child.children));
+            Formio.debug('Adding Script', src);
+            Formio.wrapper.appendChild(Formio.createElement('script', {
+                src
+            }));
+            if (!name) {
+                return Promise.resolve();
+            }
+            return new Promise((resolve) => {
+                Formio.debug(`Waiting to load ${name}`);
+                const wait = setInterval(() => {
+                    if (Formio.global(name)) {
+                        clearInterval(wait);
+                        Formio.debug(`${name} loaded.`);
+                        resolve(Formio.global(name));
+                    }
+                }, 100);
             });
-            return element;
-        };
-        debug('Embedding Configuration', config);
-        if (config.addPremiumLib) {
-            config.addPremiumLib(config, scriptSrc);
-        }
-        // The id for this embedded form.
-        const id = `formio-${Math.random().toString(36).substring(7)}`;
-        config.id = id;
-        debug('Creating form wrapper');
-        let wrapper = createElement('div', {
-            'id': `"${id}-wrapper"`
         });
-        // insertAfter doesn't exist, but effect is identical.
-        thisScript.parentNode.insertBefore(wrapper, thisScript.parentNode.firstElementChild.nextSibling);
-        // If we include the libraries, then we will attempt to run this in shadow dom.
-        if (config.includeLibs && (typeof wrapper.attachShadow === 'function') && !config.premium) {
-            wrapper = wrapper.attachShadow({
-                mode: 'open'
-            });
-            config.config.shadowRoot = wrapper;
-        }
-        const global = (name) => {
-            const globalValue = window[name];
-            debug(`Getting global ${name}`, globalValue);
-            return globalValue;
-        };
-        const addStyles = (href, global) => {
+    }
+    static addStyles(href, addGlobally = false) {
+        return __awaiter(this, void 0, void 0, function* () {
             if (!href) {
                 return;
             }
             if (typeof href !== 'string' && href.length) {
-                href.forEach(ref => addStyles(ref));
+                href.forEach(ref => Formio.addStyles(ref));
                 return;
             }
-            debug('Adding Styles', href);
-            const link = createElement('link', {
+            Formio.debug('Adding Styles', href);
+            const link = Formio.createElement('link', {
                 rel: 'stylesheet',
                 href
             });
-            if (global) {
+            if (addGlobally) {
                 // Add globally as well.
                 document.head.appendChild(link);
             }
-            wrapper.appendChild(createElement('link', {
+            Formio.wrapper.appendChild(Formio.createElement('link', {
                 rel: 'stylesheet',
                 href
             }));
-        };
-        const addScript = (src, globalProp, onReady) => {
-            if (!src) {
-                return;
-            }
-            if (typeof src !== 'string' && src.length) {
-                src.forEach(ref => addScript(ref));
-                return;
+        });
+    }
+    static submitDone(instance, submission) {
+        return __awaiter(this, void 0, void 0, function* () {
+            Formio.debug('Submision Complete', submission);
+            let returnUrl = Formio.config.redirect;
+            // Allow form based configuration for return url.
+            if (!returnUrl &&
+                (instance._form &&
+                    instance._form.settings &&
+                    (instance._form.settings.returnUrl ||
+                        instance._form.settings.redirect))) {
+                Formio.debug('Return url found in form configuration');
+                returnUrl = instance._form.settings.returnUrl || instance._form.settings.redirect;
             }
-            if (globalProp && global(globalProp)) {
-                debug(`${globalProp} already loaded.`);
-                return global(globalProp);
+            if (returnUrl) {
+                const formSrc = instance.formio ? instance.formio.formUrl : '';
+                const hasQuery = !!returnUrl.match(/\?/);
+                const isOrigin = returnUrl.indexOf(location.origin) === 0;
+                returnUrl += hasQuery ? '&' : '?';
+                returnUrl += `sub=${submission._id}`;
+                if (!isOrigin && formSrc) {
+                    returnUrl += `&form=${encodeURIComponent(formSrc)}`;
+                }
+                Formio.debug('Return URL', returnUrl);
+                window.location.href = returnUrl;
+                if (isOrigin) {
+                    window.location.reload();
+                }
             }
-            debug('Adding Script', src);
-            wrapper.appendChild(createElement('script', {
-                src
-            }));
-            if (globalProp && onReady) {
-                debug(`Waiting to load ${globalProp}`);
-                const wait = setInterval(() => {
-                    if (global(globalProp)) {
-                        clearInterval(wait);
-                        debug(`${globalProp} loaded.`);
-                        onReady(global(globalProp));
-                    }
-                }, 100);
+        });
+    }
+    static renderForm(form, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (Formio.config.before) {
+                yield Formio.config.before(Formio.FormioClass, Formio.element, Formio.config);
             }
-        };
-        // Create a loader
-        addStyles(`${config.updatePath ? config.updatePath() : scriptSrc}/formio.embed.min.css`);
-        debug('Creating loader');
-        const loader = createElement('div', {
-            'class': 'formio-loader'
-        }, [{
-                tag: 'div',
-                attrs: {
-                    class: 'loader-wrapper'
-                },
-                children: [{
-                        tag: 'div',
-                        attrs: {
-                            class: 'loader text-center'
-                        }
-                    }]
-            }]);
-        wrapper.appendChild(loader);
-        // Add the wrapper for the rendered form.
-        debug('Creating form element');
-        const formElement = createElement('div', {
-            class: config.class
+            Formio.FormioClass.license = true;
+            return Formio.FormioClass.createForm(Formio.element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {
+                Formio.debug('Form created', instance);
+                // Remove the loader.
+                Formio.debug('Removing loader');
+                Formio.wrapper.removeChild(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);
+                }
+                return instance;
+            });
         });
-        wrapper.appendChild(formElement);
-        // Add the main formio script.
-        addScript(config.script, 'Formio', (Formio) => {
-            const renderForm = () => {
-                addStyles(config.style);
-                const isReady = config.before(Formio, formElement, config) || Formio.Promise.resolve();
-                const form = (config.form || config.src);
-                debug('Creating form', form, config.config);
-                isReady.then(() => {
-                    Formio.license = true;
-                    Formio.createForm(formElement, form, config.config).then((instance) => {
-                        const submitDone = (submission) => {
-                            debug('Submision Complete', submission);
-                            let returnUrl = config.redirect;
-                            // Allow form based configuration for return url.
-                            if (!returnUrl &&
-                                (instance._form &&
-                                    instance._form.settings &&
-                                    (instance._form.settings.returnUrl ||
-                                        instance._form.settings.redirect))) {
-                                debug('Return url found in form configuration');
-                                returnUrl = instance._form.settings.returnUrl || instance._form.settings.redirect;
-                            }
-                            if (returnUrl) {
-                                const formSrc = instance.formio ? instance.formio.formUrl : '';
-                                const hasQuery = !!returnUrl.match(/\?/);
-                                const isOrigin = returnUrl.indexOf(location.origin) === 0;
-                                returnUrl += hasQuery ? '&' : '?';
-                                returnUrl += `sub=${submission._id}`;
-                                if (!isOrigin && formSrc) {
-                                    returnUrl += `&form=${encodeURIComponent(formSrc)}`;
-                                }
-                                debug('Return URL', returnUrl);
-                                window.location.href = returnUrl;
-                                if (isOrigin) {
-                                    window.location.reload();
-                                }
-                            }
-                        };
-                        if (config.submit) {
-                            instance.nosubmit = true;
-                        }
-                        debug('Form created', instance);
-                        // Remove the loader.
-                        debug('Removing loader');
-                        wrapper.removeChild(loader);
-                        // Set the default submission data.
-                        if (config.submission) {
-                            debug('Setting submission', config.submission);
-                            instance.submission = config.submission;
-                        }
-                        // Allow them to provide additional configs.
-                        debug('Triggering embed event');
-                        Formio.events.emit('formEmbedded', instance);
-                        debug('Calling ready callback');
-                        config.after(instance, config);
-                        // Configure a redirect.
-                        instance.on('submit', (submission) => {
-                            debug("on('submit')", submission);
-                            if (config.submit) {
-                                debug(`Sending submission to ${config.submit}`);
-                                const headers = {
-                                    'content-type': 'application/json'
-                                };
-                                const token = Formio.getToken();
-                                if (token) {
-                                    headers['x-jwt-token'] = token;
-                                }
-                                Formio.fetch(config.submit, {
-                                    body: JSON.stringify(submission),
-                                    headers: headers,
-                                    method: 'POST',
-                                    mode: 'cors',
-                                })
-                                    .then(resp => resp.json())
-                                    .then(submission => submitDone(submission));
-                            }
-                            else {
-                                submitDone(submission);
-                            }
-                        });
-                    });
-                });
+    }
+    // eslint-disable-next-line max-statements
+    static createForm(element, form, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            Formio.element = element;
+            Formio.cdn = new CDN_js_1.default(Formio.config.cdn);
+            Formio.config.libs = Formio.config.libs || {
+                uswds: {
+                    fa: true,
+                    js: `${Formio.cdn.uswds}/uswds.min.js`,
+                    css: `${Formio.cdn.uswds}/uswds.min.css`,
+                },
+                fontawesome: {
+                    css: `${Formio.cdn['font-awesome']}/css/font-awesome.min.css`
+                },
+                bootstrap: {
+                    css: `${Formio.cdn.bootstrap}/css/bootstrap.min.css`
+                }
             };
-            if (config.base) {
-                Formio.setBaseUrl(config.base);
-            }
-            if (config.project) {
-                Formio.setProjectUrl(config.project);
-            }
+            Formio.config.id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
+            // Create a new wrapper and add the element inside of a new wrapper.
+            Formio.wrapper = Formio.createElement('div', {
+                'id': `"${Formio.config.id}-wrapper"`
+            });
+            element.parentNode.insertBefore(Formio.wrapper, element);
+            element.parentNode.removeChild(element);
+            Formio.wrapper.appendChild(element);
+            // Load the renderer styles.
+            yield Formio.addStyles(Formio.config.embedCSS || `${Formio.cdn.js}/formio.embed.css`);
+            Formio.loader = Formio.createElement('div', {
+                'class': 'formio-loader'
+            }, [{
+                    tag: 'div',
+                    attrs: {
+                        class: 'loader-wrapper'
+                    },
+                    children: [{
+                            tag: 'div',
+                            attrs: {
+                                class: 'loader text-center'
+                            }
+                        }]
+                }]);
+            Formio.wrapper.appendChild(Formio.loader);
+            Formio.FormioClass = yield Formio.addScript(Formio.config.script || `${Formio.cdn.js}/formio.form.min.js`, 'Formio');
+            Formio.FormioClass.setBaseUrl(Formio.baseUrl || Formio.config.base);
+            Formio.FormioClass.setProjectUrl(Formio.projectUrl || Formio.config.project);
+            Formio.FormioClass.language = Formio.language;
             // Add premium modules
-            if (global('premium')) {
-                debug('Using premium module.');
-                Formio.use(global('premium'));
+            if (Formio.global('premium')) {
+                Formio.debug('Using premium module.');
+                Formio.FormioClass.use(Formio.global('premium'));
             }
-            if (global('vpat')) {
-                debug('Using vpat module.');
-                Formio.use(global('vpat'));
+            if (Formio.global('vpat')) {
+                Formio.debug('Using vpat module.');
+                Formio.FormioClass.use(Formio.global('vpat'));
             }
-            if (config.template) {
-                if (config.includeLibs) {
-                    addStyles(config.libs[config.template].css);
-                    addScript(config.libs[config.template].js);
-                    if (config.libs[config.template].fa) {
-                        addStyles(config.libs.fontawesome.css, true);
+            if (Formio.config.template) {
+                if (Formio.config.includeLibs) {
+                    yield Formio.addStyles(Formio.config.libs[Formio.config.template].css);
+                    yield Formio.addScript(Formio.config.libs[Formio.config.template].js);
+                    if (Formio.config.libs[Formio.config.template].fa) {
+                        yield Formio.addStyles(Formio.config.libs.fontawesome.css, true);
                     }
                 }
-                let templateSrc;
-                if (cdn instanceof CDN_1.default) {
-                    templateSrc = `${cdn[config.template]}/${config.template}.min`;
-                }
-                else {
-                    templateSrc = `${cdn}/@formio/${config.template}@latest/dist/${config.template}.min`;
+                if (Formio.cdn[Formio.config.template]) {
+                    const templateSrc = `${Formio.cdn[Formio.config.template]}/${Formio.config.template}.min`;
+                    yield Formio.addStyles(`${templateSrc}.css`);
+                    Formio.debug(`Using ${Formio.config.template}`);
+                    Formio.FormioClass.use(yield Formio.addScript(`${templateSrc}.js`, Formio.config.template));
                 }
-                addStyles(`${templateSrc}.css`);
-                addScript(`${templateSrc}.js`, config.template, (template) => {
-                    debug(`Using ${config.template}`);
-                    Formio.use(template);
-                    renderForm();
-                });
             }
-            else if (global('uswds')) {
-                debug('Using uswds module.');
-                Formio.use(global('uswds'));
+            else if (Formio.global('uswds')) {
+                Formio.debug('Using uswds module.');
+                Formio.FormioClass.use(Formio.global('uswds'));
             }
             // Default bootstrap + fontawesome.
-            else if (config.includeLibs) {
-                Formio.cdn = new CDN_1.default();
-                config.libs = resolveLibs(query.cdn || Formio.cdn);
-                addStyles(config.libs.fontawesome.css, true);
-                addStyles(config.libs.bootstrap.css);
+            else if (Formio.config.includeLibs) {
+                yield Formio.addStyles(Formio.config.libs.fontawesome.css, true);
+                yield Formio.addStyles(Formio.config.libs.bootstrap.css);
             }
-            if (config.premium) {
-                addStyles(config.premium.css);
-                addScript(config.premium.js, 'premium', (premium) => {
-                    debug('Using premium');
-                    Formio.use(premium);
-                    renderForm();
-                });
-            }
-            // Render the form if no template is provided.
-            if (!config.template && !config.premium) {
-                renderForm();
+            if (Formio.config.premium) {
+                yield Formio.addStyles(Formio.config.premium.css);
+                Formio.debug('Using premium');
+                Formio.FormioClass.use(yield Formio.addScript(Formio.config.premium.js, 'premium'));
             }
+            yield Formio.addStyles(Formio.config.style || `${Formio.cdn.js}/formio.form.min.css`);
+            return yield Formio.renderForm(form, options);
         });
     }
-    else {
-        // Show an error if the script cannot be found.
-        document.write('<span>Could not locate the Embedded form.</span>');
-    }
 }
-exports.embed = embed;
+Formio.config = {};
+Formio.loader = null;
+Formio.cdn = null;
+Formio.proxy = true;
+exports.Formio = Formio;

package/lib/cjs/Form.d.ts

@@ -1,5 +1,5 @@
 export default class Form extends Element {
-    static embed(embed: any): any;
+    static embed(embed: any): Promise<any>;
     /**
      * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.
      *
@@ -12,18 +12,21 @@ 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();
      */
     constructor(...args: any[]);
-    ready: any;
-    readyResolve: any;
-    readyReject: any;
+    ready: Promise<any>;
+    readyResolve: (value: any) => void;
+    readyReject: (reason?: any) => void;
     instance: any;
     element: any;
     options: any;
     display: string;
+    createElement(tag: any, attrs: any, children: any): any;
+    set loading(arg: any);
+    loader: any;
     /**
      * Create a new form instance provided the display of the form.
      *
@@ -84,7 +87,7 @@ export default class Form extends Element {
      * @return {Promise<T>}
      */
     build(): Promise<T>;
-    render(): any;
+    render(): Promise<any>;
     attach(element: any): any;
 }
 import Element from './Element';