@formio/js 5.0.0-rc.24 → 5.0.0-rc.26

package/dist/formio.min.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
 
-/*! formiojs v5.0.0-rc.24 | https://unpkg.com/formiojs@5.0.0-rc.24/LICENSE.txt */
+/*! formiojs v5.0.0-rc.25 | https://unpkg.com/formiojs@5.0.0-rc.25/LICENSE.txt */
 
 /**
  * @license

package/dist/formio.utils.min.js.LICENSE.txt

@@ -12,7 +12,7 @@
 
 /*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
 
-/*! formiojs v5.0.0-rc.24 | https://unpkg.com/formiojs@5.0.0-rc.24/LICENSE.txt */
+/*! formiojs v5.0.0-rc.25 | https://unpkg.com/formiojs@5.0.0-rc.25/LICENSE.txt */
 
 /**
  * @license

package/lib/cjs/Embed.d.ts

@@ -2,22 +2,41 @@ export class Formio {
     static baseUrl: any;
     static projectUrl: any;
     static language: any;
-    static wrapper: any;
-    static element: any;
     static config: {};
-    static loader: null;
     static cdn: null;
     static proxy: boolean;
     static setBaseUrl(url: any): Promise<void>;
     static setProjectUrl(url: any): Promise<void>;
     static debug(...args: any[]): void;
+    static clearCache(): void;
     static global(prop: any): any;
     static createElement(type: any, attrs: any, children: any): any;
-    static addScript(src: any, name: any): Promise<any>;
-    static addStyles(href: any): Promise<void>;
+    static addScript(wrapper: any, src: any, name: any): Promise<any>;
+    static addStyles(wrapper: any, href: any): Promise<void>;
     static submitDone(instance: any, submission: any): Promise<void>;
     static formioScript(script: any, builder: any): any;
-    static init(element: any, builder?: boolean): Promise<void>;
+    static init(element: any, builder?: boolean): Promise<any>;
     static createForm(element: any, form: any, options: any): Promise<any>;
     static builder(element: any, form: any, options: any): Promise<any>;
 }
+export namespace Formio {
+    export { Form };
+    export { FormBuilder };
+}
+export class Form {
+    constructor(element: any, form: any, options: any);
+    form: any;
+    element: any;
+    options: any;
+    instance: {
+        proxy: boolean;
+        ready: Promise<any> | undefined;
+        destroy: () => void;
+    };
+    init(): void;
+    ready: Promise<any> | undefined;
+    create(): Promise<any>;
+    setDisplay(display: any): Promise<any> | undefined;
+}
+export class FormBuilder extends Form {
+}

package/lib/cjs/Embed.js

@@ -12,7 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Formio = void 0;
+exports.FormBuilder = exports.Form = exports.Formio = void 0;
 const CDN_js_1 = __importDefault(require("./CDN.js"));
 class Formio {
     static setBaseUrl(url) {
@@ -30,6 +30,11 @@ class Formio {
             console.log(...args);
         }
     }
+    static clearCache() {
+        if (Formio.FormioClass) {
+            Formio.FormioClass.clearCache();
+        }
+    }
     static global(prop) {
         const globalValue = window[prop];
         if (globalValue && globalValue.proxy) {
@@ -48,20 +53,20 @@ class Formio {
         });
         return element;
     }
-    static addScript(src, name) {
+    static addScript(wrapper, src, name) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!src) {
                 return Promise.resolve();
             }
             if (typeof src !== 'string' && src.length) {
-                return Promise.all(src.map(ref => Formio.addScript(ref)));
+                return Promise.all(src.map(ref => Formio.addScript(wrapper, ref)));
             }
             if (name && Formio.global(name)) {
                 Formio.debug(`${name} already loaded.`);
                 return Promise.resolve(Formio.global(name));
             }
             Formio.debug('Adding Script', src);
-            Formio.wrapper.appendChild(Formio.createElement('script', {
+            wrapper.appendChild(Formio.createElement('script', {
                 src
             }));
             if (!name) {
@@ -79,17 +84,17 @@ class Formio {
             });
         });
     }
-    static addStyles(href) {
+    static addStyles(wrapper, href) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!href) {
                 return;
             }
             if (typeof href !== 'string' && href.length) {
-                href.forEach(ref => Formio.addStyles(ref));
+                href.forEach(ref => Formio.addStyles(wrapper, ref));
                 return;
             }
             Formio.debug('Adding Styles', href);
-            Formio.wrapper.appendChild(Formio.createElement('link', {
+            wrapper.appendChild(Formio.createElement('link', {
                 rel: 'stylesheet',
                 href
             }));
@@ -98,6 +103,10 @@ class Formio {
     static submitDone(instance, submission) {
         return __awaiter(this, void 0, void 0, function* () {
             Formio.debug('Submision Complete', submission);
+            const successMessage = (Formio.config.success || '').toString();
+            if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {
+                instance.element.innerHTML = `<div class="alert-success" role="alert">${successMessage}</div>`;
+            }
             let returnUrl = Formio.config.redirect;
             // Allow form based configuration for return url.
             if (!returnUrl &&
@@ -132,7 +141,6 @@ class Formio {
     // eslint-disable-next-line max-statements
     static init(element, builder = false) {
         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: {
@@ -147,17 +155,18 @@ class Formio {
                     css: `${Formio.cdn.bootstrap}/css/bootstrap.min.css`
                 }
             };
-            Formio.config.id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
+            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.
-            Formio.wrapper = Formio.createElement('div', {
-                'id': `"${Formio.config.id}-wrapper"`
+            const wrapper = Formio.createElement('div', {
+                'id': `"${id}-wrapper"`
             });
-            element.parentNode.insertBefore(Formio.wrapper, element);
+            element.parentNode.insertBefore(wrapper, element);
             element.parentNode.removeChild(element);
-            Formio.wrapper.appendChild(element);
+            wrapper.appendChild(element);
             // Load the renderer styles.
-            yield Formio.addStyles(Formio.config.embedCSS || `${Formio.cdn.js}/formio.embed.css`);
-            Formio.loader = Formio.createElement('div', {
+            yield Formio.addStyles(wrapper, Formio.config.embedCSS || `${Formio.cdn.js}/formio.embed.css`);
+            // Add a loader.
+            wrapper.appendChild(Formio.createElement('div', {
                 'class': 'formio-loader'
             }, [{
                     tag: 'div',
@@ -170,9 +179,8 @@ class Formio {
                                 class: 'loader text-center'
                             }
                         }]
-                }]);
-            Formio.wrapper.appendChild(Formio.loader);
-            Formio.FormioClass = yield Formio.addScript(Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/formio.form.min.js`, builder), 'Formio');
+                }]));
+            Formio.FormioClass = yield 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);
             Formio.FormioClass.language = Formio.language;
@@ -187,17 +195,17 @@ class Formio {
             }
             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);
+                    yield Formio.addStyles(wrapper, Formio.config.libs[Formio.config.template].css);
+                    yield Formio.addScript(wrapper, Formio.config.libs[Formio.config.template].js);
                     if (Formio.config.libs[Formio.config.template].fa) {
-                        yield Formio.addStyles(Formio.config.libs.fontawesome.css);
+                        yield 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`;
-                    yield Formio.addStyles(`${templateSrc}.css`);
+                    yield Formio.addStyles(wrapper, `${templateSrc}.css`);
                     Formio.debug(`Using ${Formio.config.template}`);
-                    Formio.FormioClass.use(yield Formio.addScript(`${templateSrc}.js`, Formio.config.template));
+                    Formio.FormioClass.use(yield Formio.addScript(wrapper, `${templateSrc}.js`, Formio.config.template));
                 }
             }
             else if (Formio.global('uswds')) {
@@ -206,29 +214,30 @@ class Formio {
             }
             // Default bootstrap + fontawesome.
             else if (Formio.config.includeLibs) {
-                yield Formio.addStyles(Formio.config.libs.fontawesome.css);
-                yield Formio.addStyles(Formio.config.libs.bootstrap.css);
+                yield Formio.addStyles(wrapper, Formio.config.libs.fontawesome.css);
+                yield Formio.addStyles(wrapper, Formio.config.libs.bootstrap.css);
             }
             if (Formio.config.premium) {
-                yield Formio.addStyles(Formio.config.premium.css);
+                yield Formio.addStyles(wrapper, Formio.config.premium.css);
                 Formio.debug('Using premium');
-                Formio.FormioClass.use(yield Formio.addScript(Formio.config.premium.js, 'premium'));
+                Formio.FormioClass.use(yield Formio.addScript(wrapper, Formio.config.premium.js, 'premium'));
             }
-            yield Formio.addStyles(Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/formio.form.min.css`, builder));
+            yield Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/formio.form.min.css`, builder));
             if (Formio.config.before) {
-                yield Formio.config.before(Formio.FormioClass, Formio.element, Formio.config);
+                yield Formio.config.before(Formio.FormioClass, element, Formio.config);
             }
             Formio.FormioClass.license = true;
+            return wrapper;
         });
     }
     static createForm(element, form, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield Formio.init(element);
-            return Formio.FormioClass.createForm(Formio.element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {
+            const wrapper = yield Formio.init(element);
+            return Formio.FormioClass.createForm(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);
+                wrapper.removeChild(wrapper.querySelector('.formio-loader'));
                 // Set the default submission data.
                 if (Formio.config.submission) {
                     Formio.debug('Setting submission', Formio.config.submission);
@@ -248,11 +257,11 @@ class Formio {
     }
     static builder(element, form, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield Formio.init(element, true);
-            return Formio.FormioClass.builder(Formio.element, form, options).then((instance) => {
+            const wrapper = yield Formio.init(element, true);
+            return Formio.FormioClass.builder(element, form, options).then((instance) => {
                 Formio.debug('Builder created', instance);
                 Formio.debug('Removing loader');
-                Formio.wrapper.removeChild(Formio.loader);
+                wrapper.removeChild(wrapper.querySelector('.formio-loader'));
                 Formio.debug('Triggering embed event');
                 Formio.FormioClass.events.emit('builderEmbedded', instance);
                 if (Formio.config.after) {
@@ -265,7 +274,47 @@ class Formio {
     }
 }
 Formio.config = {};
-Formio.loader = null;
 Formio.cdn = null;
 Formio.proxy = true;
 exports.Formio = Formio;
+class Form {
+    constructor(element, form, options) {
+        this.form = form;
+        this.element = element;
+        this.options = options || {};
+        this.init();
+        this.instance = {
+            proxy: true,
+            ready: this.ready,
+            destroy: () => { }
+        };
+    }
+    init() {
+        this.element.innerHTML = '';
+        this.ready = this.create().then((instance) => {
+            this.instance = instance;
+            this.form = instance.form;
+            return instance;
+        });
+    }
+    create() {
+        return Formio.createForm(this.element, this.form, this.options);
+    }
+    setDisplay(display) {
+        if (this.instance.proxy) {
+            return this.ready;
+        }
+        this.form.display = display;
+        this.init();
+        return this.ready;
+    }
+}
+exports.Form = Form;
+class FormBuilder extends Form {
+    create() {
+        return Formio.builder(this.element, this.form, this.options);
+    }
+}
+exports.FormBuilder = FormBuilder;
+Formio.Form = Form;
+Formio.FormBuilder = FormBuilder;

package/lib/cjs/Wizard.js

@@ -778,22 +778,21 @@ class Wizard extends Webform_1.default {
         }
     }
     setValue(submission, flags = {}, ignoreEstablishment) {
-        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._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 (!flags.sanitize) {
+            this.mergeData(this.data, submission.data);
+        }
         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/cjs/formio.embed.js

@@ -43,6 +43,7 @@ if (thisScript) {
         config: {},
         redirect: (query.return || query.redirect),
         embedCSS: (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.embed.css`),
+        success: query.success || 'Thank you for your submission!',
         before: null,
         after: null
     }, config);

package/lib/mjs/Embed.d.ts

@@ -2,22 +2,41 @@ export class Formio {
     static baseUrl: any;
     static projectUrl: any;
     static language: any;
-    static wrapper: any;
-    static element: any;
     static config: {};
-    static loader: null;
     static cdn: null;
     static proxy: boolean;
     static setBaseUrl(url: any): Promise<void>;
     static setProjectUrl(url: any): Promise<void>;
     static debug(...args: any[]): void;
+    static clearCache(): void;
     static global(prop: any): any;
     static createElement(type: any, attrs: any, children: any): any;
-    static addScript(src: any, name: any): Promise<any>;
-    static addStyles(href: any): Promise<void>;
+    static addScript(wrapper: any, src: any, name: any): Promise<any>;
+    static addStyles(wrapper: any, href: any): Promise<void>;
     static submitDone(instance: any, submission: any): Promise<void>;
     static formioScript(script: any, builder: any): any;
-    static init(element: any, builder?: boolean): Promise<void>;
+    static init(element: any, builder?: boolean): Promise<any>;
     static createForm(element: any, form: any, options: any): Promise<any>;
     static builder(element: any, form: any, options: any): Promise<any>;
 }
+export namespace Formio {
+    export { Form };
+    export { FormBuilder };
+}
+export class Form {
+    constructor(element: any, form: any, options: any);
+    form: any;
+    element: any;
+    options: any;
+    instance: {
+        proxy: boolean;
+        ready: Promise<any> | undefined;
+        destroy: () => void;
+    };
+    init(): void;
+    ready: Promise<any> | undefined;
+    create(): Promise<any>;
+    setDisplay(display: any): Promise<any> | undefined;
+}
+export class FormBuilder extends Form {
+}

package/lib/mjs/Embed.js

@@ -3,10 +3,7 @@ class Formio {
     static baseUrl;
     static projectUrl;
     static language;
-    static wrapper;
-    static element;
     static config = {};
-    static loader = null;
     static cdn = null;
     static proxy = true;
     static async setBaseUrl(url) {
@@ -20,6 +17,11 @@ class Formio {
             console.log(...args);
         }
     }
+    static clearCache() {
+        if (Formio.FormioClass) {
+            Formio.FormioClass.clearCache();
+        }
+    }
     static global(prop) {
         const globalValue = window[prop];
         if (globalValue && globalValue.proxy) {
@@ -38,19 +40,19 @@ class Formio {
         });
         return element;
     }
-    static async addScript(src, name) {
+    static async addScript(wrapper, src, name) {
         if (!src) {
             return Promise.resolve();
         }
         if (typeof src !== 'string' && src.length) {
-            return Promise.all(src.map(ref => Formio.addScript(ref)));
+            return Promise.all(src.map(ref => Formio.addScript(wrapper, ref)));
         }
         if (name && Formio.global(name)) {
             Formio.debug(`${name} already loaded.`);
             return Promise.resolve(Formio.global(name));
         }
         Formio.debug('Adding Script', src);
-        Formio.wrapper.appendChild(Formio.createElement('script', {
+        wrapper.appendChild(Formio.createElement('script', {
             src
         }));
         if (!name) {
@@ -67,22 +69,26 @@ class Formio {
             }, 100);
         });
     }
-    static async addStyles(href) {
+    static async addStyles(wrapper, href) {
         if (!href) {
             return;
         }
         if (typeof href !== 'string' && href.length) {
-            href.forEach(ref => Formio.addStyles(ref));
+            href.forEach(ref => Formio.addStyles(wrapper, ref));
             return;
         }
         Formio.debug('Adding Styles', href);
-        Formio.wrapper.appendChild(Formio.createElement('link', {
+        wrapper.appendChild(Formio.createElement('link', {
             rel: 'stylesheet',
             href
         }));
     }
     static async submitDone(instance, submission) {
         Formio.debug('Submision Complete', submission);
+        const successMessage = (Formio.config.success || '').toString();
+        if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {
+            instance.element.innerHTML = `<div class="alert-success" role="alert">${successMessage}</div>`;
+        }
         let returnUrl = Formio.config.redirect;
         // Allow form based configuration for return url.
         if (!returnUrl &&
@@ -115,7 +121,6 @@ class Formio {
     }
     // eslint-disable-next-line max-statements
     static async init(element, builder = false) {
-        Formio.element = element;
         Formio.cdn = new CDN(Formio.config.cdn);
         Formio.config.libs = Formio.config.libs || {
             uswds: {
@@ -130,17 +135,18 @@ class Formio {
                 css: `${Formio.cdn.bootstrap}/css/bootstrap.min.css`
             }
         };
-        Formio.config.id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
+        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.
-        Formio.wrapper = Formio.createElement('div', {
-            'id': `"${Formio.config.id}-wrapper"`
+        const wrapper = Formio.createElement('div', {
+            'id': `"${id}-wrapper"`
         });
-        element.parentNode.insertBefore(Formio.wrapper, element);
+        element.parentNode.insertBefore(wrapper, element);
         element.parentNode.removeChild(element);
-        Formio.wrapper.appendChild(element);
+        wrapper.appendChild(element);
         // Load the renderer styles.
-        await Formio.addStyles(Formio.config.embedCSS || `${Formio.cdn.js}/formio.embed.css`);
-        Formio.loader = Formio.createElement('div', {
+        await Formio.addStyles(wrapper, Formio.config.embedCSS || `${Formio.cdn.js}/formio.embed.css`);
+        // Add a loader.
+        wrapper.appendChild(Formio.createElement('div', {
             'class': 'formio-loader'
         }, [{
                 tag: 'div',
@@ -153,9 +159,8 @@ class Formio {
                             class: 'loader text-center'
                         }
                     }]
-            }]);
-        Formio.wrapper.appendChild(Formio.loader);
-        Formio.FormioClass = await Formio.addScript(Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/formio.form.min.js`, builder), '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);
         Formio.FormioClass.language = Formio.language;
@@ -170,17 +175,17 @@ class Formio {
         }
         if (Formio.config.template) {
             if (Formio.config.includeLibs) {
-                await Formio.addStyles(Formio.config.libs[Formio.config.template].css);
-                await Formio.addScript(Formio.config.libs[Formio.config.template].js);
+                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(Formio.config.libs.fontawesome.css);
+                    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(`${templateSrc}.css`);
+                await Formio.addStyles(wrapper, `${templateSrc}.css`);
                 Formio.debug(`Using ${Formio.config.template}`);
-                Formio.FormioClass.use(await Formio.addScript(`${templateSrc}.js`, Formio.config.template));
+                Formio.FormioClass.use(await Formio.addScript(wrapper, `${templateSrc}.js`, Formio.config.template));
             }
         }
         else if (Formio.global('uswds')) {
@@ -189,30 +194,31 @@ class Formio {
         }
         // Default bootstrap + fontawesome.
         else if (Formio.config.includeLibs) {
-            await Formio.addStyles(Formio.config.libs.fontawesome.css);
-            await Formio.addStyles(Formio.config.libs.bootstrap.css);
+            await Formio.addStyles(wrapper, Formio.config.libs.fontawesome.css);
+            await Formio.addStyles(wrapper, Formio.config.libs.bootstrap.css);
         }
         if (Formio.config.premium) {
-            await Formio.addStyles(Formio.config.premium.css);
+            await Formio.addStyles(wrapper, Formio.config.premium.css);
             Formio.debug('Using premium');
-            Formio.FormioClass.use(await Formio.addScript(Formio.config.premium.js, 'premium'));
+            Formio.FormioClass.use(await Formio.addScript(wrapper, Formio.config.premium.js, 'premium'));
         }
-        await Formio.addStyles(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}/formio.form.min.css`, builder));
         if (Formio.config.before) {
-            await Formio.config.before(Formio.FormioClass, Formio.element, Formio.config);
+            await Formio.config.before(Formio.FormioClass, element, Formio.config);
         }
         Formio.FormioClass.license = true;
+        return wrapper;
     }
     static async createForm(element, form, options) {
-        await Formio.init(element);
-        return Formio.FormioClass.createForm(Formio.element, form, {
+        const wrapper = await Formio.init(element);
+        return Formio.FormioClass.createForm(element, form, {
             ...options,
             ...{ noLoader: true }
         }).then((instance) => {
             Formio.debug('Form created', instance);
             // Remove the loader.
             Formio.debug('Removing loader');
-            Formio.wrapper.removeChild(Formio.loader);
+            wrapper.removeChild(wrapper.querySelector('.formio-loader'));
             // Set the default submission data.
             if (Formio.config.submission) {
                 Formio.debug('Setting submission', Formio.config.submission);
@@ -230,11 +236,11 @@ class Formio {
         });
     }
     static async builder(element, form, options) {
-        await Formio.init(element, true);
-        return Formio.FormioClass.builder(Formio.element, form, options).then((instance) => {
+        const wrapper = await Formio.init(element, true);
+        return Formio.FormioClass.builder(element, form, options).then((instance) => {
             Formio.debug('Builder created', instance);
             Formio.debug('Removing loader');
-            Formio.wrapper.removeChild(Formio.loader);
+            wrapper.removeChild(wrapper.querySelector('.formio-loader'));
             Formio.debug('Triggering embed event');
             Formio.FormioClass.events.emit('builderEmbedded', instance);
             if (Formio.config.after) {
@@ -246,3 +252,42 @@ class Formio {
     }
 }
 export { Formio };
+export class Form {
+    constructor(element, form, options) {
+        this.form = form;
+        this.element = element;
+        this.options = options || {};
+        this.init();
+        this.instance = {
+            proxy: true,
+            ready: this.ready,
+            destroy: () => { }
+        };
+    }
+    init() {
+        this.element.innerHTML = '';
+        this.ready = this.create().then((instance) => {
+            this.instance = instance;
+            this.form = instance.form;
+            return instance;
+        });
+    }
+    create() {
+        return Formio.createForm(this.element, this.form, this.options);
+    }
+    setDisplay(display) {
+        if (this.instance.proxy) {
+            return this.ready;
+        }
+        this.form.display = display;
+        this.init();
+        return this.ready;
+    }
+}
+export class FormBuilder extends Form {
+    create() {
+        return Formio.builder(this.element, this.form, this.options);
+    }
+}
+Formio.Form = Form;
+Formio.FormBuilder = FormBuilder;