@formio/js 5.0.0-rc.10

package/lib/cjs/Form.js

@@ -0,0 +1,337 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Element_1 = __importDefault(require("./Element"));
+const Formio_1 = require("./Formio");
+const displays_1 = __importDefault(require("./displays"));
+const templates_1 = __importDefault(require("./templates"));
+const FormioUtils = __importStar(require("./utils/utils"));
+const native_promise_only_1 = __importDefault(require("native-promise-only"));
+class Form extends Element_1.default {
+    /**
+     * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.
+     *
+     * @param {Object} element - The DOM element you wish to render this form within.
+     * @param {Object | string} form - Either a Form JSON schema or the URL of a hosted form via. form.io.
+     * @param {Object} options - The options to create a new form instance.
+     * @param {boolean} options.readOnly - Set this form to readOnly
+     * @param {boolean} options.noAlerts - Set to true to disable the alerts dialog.
+     * @param {boolean} options.i18n - The translation file for this rendering. @see https://github.com/formio/formio.js/blob/master/i18n.js
+     * @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';
+     * const form = new Form(document.getElementById('formio'), 'https://examples.form.io/example');
+     * form.build();
+     */
+    constructor(...args) {
+        let options = args[0] instanceof HTMLElement ? args[2] : args[1];
+        if (Formio_1.Formio.options && Formio_1.Formio.options.form) {
+            options = Object.assign(options, Formio_1.Formio.options.form);
+        }
+        super(options);
+        if (this.options.useSessionToken) {
+            Formio_1.Formio.useSessionToken(this.options);
+        }
+        this.ready = new native_promise_only_1.default((resolve, reject) => {
+            this.readyResolve = resolve;
+            this.readyReject = reject;
+        });
+        this.instance = null;
+        if (args[0] instanceof HTMLElement) {
+            if (this.element) {
+                delete this.element.component;
+            }
+            this.element = args[0];
+            this.options = args[2] || {};
+            this.options.events = this.events;
+            this.setForm(args[1])
+                .then(() => this.readyResolve(this.instance))
+                .catch(this.readyReject);
+        }
+        else if (args[0]) {
+            this.element = null;
+            this.options = args[1] || {};
+            this.options.events = this.events;
+            this.setForm(args[0])
+                .then(() => this.readyResolve(this.instance))
+                .catch(this.readyReject);
+        }
+        else {
+            this.element = null;
+            this.options = {};
+            this.options.events = this.events;
+        }
+        this.display = '';
+    }
+    /**
+     * Create a new form instance provided the display of the form.
+     *
+     * @param {string} display - The display of the form, either "wizard", "form", or "pdf"
+     * @return {*}
+     */
+    create(display) {
+        if (this.options && (this.options.flatten || this.options.renderMode === 'flat')) {
+            display = 'form';
+        }
+        this.display = display;
+        if (displays_1.default.displays[display]) {
+            return new displays_1.default.displays[display](this.element, this.options);
+        }
+        else {
+            // eslint-disable-next-line new-cap
+            return new displays_1.default.displays['webform'](this.element, this.options);
+        }
+    }
+    /**
+     * Sets the form. Either as JSON or a URL to a form JSON schema.
+     *
+     * @param {string|object} formParam - Either the form JSON or the URL of the form json.
+     * @return {*}
+     */
+    set form(formParam) {
+        this.setForm(formParam);
+    }
+    errorForm(err) {
+        return {
+            components: [
+                {
+                    'label': 'HTML',
+                    'tag': 'div',
+                    'className': 'error error-message alert alert-danger ui red message',
+                    'attrs': [
+                        {
+                            'attr': 'role',
+                            'value': 'alert'
+                        }
+                    ],
+                    'key': 'errorMessage',
+                    'type': 'htmlelement',
+                    'input': false,
+                    'content': typeof err === 'string' ? err : err.message,
+                }
+            ]
+        };
+    }
+    setForm(formParam) {
+        let result;
+        formParam = formParam || this.form;
+        if (typeof formParam === 'string') {
+            const formio = new Formio_1.Formio(formParam);
+            let error;
+            result = this.getSubmission(formio, this.options)
+                .catch((err) => {
+                error = err;
+            })
+                .then((submission) => {
+                return formio.loadForm()
+                    // If the form returned an error, show it instead of the form.
+                    .catch(err => {
+                    error = err;
+                })
+                    .then((form) => {
+                    // If the submission returned an error, show it instead of the form.
+                    if (error) {
+                        form = this.errorForm(error);
+                    }
+                    this.instance = this.instance || this.create(form.display);
+                    this.instance.url = formParam;
+                    this.instance.nosubmit = false;
+                    this._form = this.instance.form = form;
+                    if (submission) {
+                        this.instance.submission = submission;
+                    }
+                    if (error) {
+                        throw error;
+                    }
+                    return this.instance;
+                });
+            });
+        }
+        else {
+            this.instance = this.instance || this.create(formParam.display);
+            this._form = this.instance.form = formParam;
+            result = this.instance.ready;
+        }
+        // A redraw has occurred so save off the new element in case of a setDisplay causing a rebuild.
+        return result.then(() => {
+            if (this.element) {
+                delete this.element.component;
+            }
+            this.element = this.instance.element;
+            return this.instance;
+        });
+    }
+    getSubmission(formio, opts) {
+        if (formio.submissionId) {
+            return formio.loadSubmission(null, opts);
+        }
+        return native_promise_only_1.default.resolve();
+    }
+    /**
+     * Returns the loaded forms JSON.
+     *
+     * @return {object} - The loaded form's JSON
+     */
+    get form() {
+        return this._form;
+    }
+    /**
+     * Changes the display of the form.
+     *
+     * @param {string} display - The display to set this form. Either "wizard", "form", or "pdf"
+     * @return {Promise<T>}
+     */
+    setDisplay(display) {
+        if ((this.display === display) && this.instance) {
+            return native_promise_only_1.default.resolve(this.instance);
+        }
+        this.form.display = display;
+        this.instance.destroy();
+        this.instance = this.create(display);
+        return this.setForm(this.form);
+    }
+    empty() {
+        if (this.element) {
+            while (this.element.firstChild) {
+                this.element.removeChild(this.element.firstChild);
+            }
+        }
+    }
+    static embed(embed) {
+        return new native_promise_only_1.default((resolve) => {
+            if (!embed || !embed.src) {
+                resolve();
+            }
+            const id = this.id || `formio-${Math.random().toString(36).substring(7)}`;
+            const className = embed.class || 'formio-form-wrapper';
+            let code = embed.styles ? `<link rel="stylesheet" href="${embed.styles}">` : '';
+            code += `<div id="${id}" class="${className}"></div>`;
+            document.write(code);
+            let attempts = 0;
+            const wait = setInterval(() => {
+                attempts++;
+                const formElement = document.getElementById(id);
+                if (formElement || attempts > 10) {
+                    resolve(new Form(formElement, embed.src).ready);
+                    clearInterval(wait);
+                }
+            }, 10);
+        });
+    }
+    /**
+     * Sanitize an html string.
+     *
+     * @param string
+     * @returns {*}
+     */
+    sanitize(dirty, forceSanitize) {
+        // If Sanitize is turned off
+        if (this.options.sanitize === false && !forceSanitize) {
+            return dirty;
+        }
+        return FormioUtils.sanitize(dirty, this.options);
+    }
+    setContent(element, content, forceSanitize) {
+        if (element instanceof HTMLElement) {
+            element.innerHTML = this.sanitize(content, forceSanitize);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Build a new form.
+     *
+     * @return {Promise<T>}
+     */
+    build() {
+        if (!this.instance) {
+            return native_promise_only_1.default.reject('Form not ready. Use form.ready promise');
+        }
+        if (!this.element) {
+            return native_promise_only_1.default.reject('No DOM element for form.');
+        }
+        // Add temporary loader.
+        const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';
+        const loader = templates_1.default[template].loader || templates_1.default.bootstrap.loader;
+        this.setContent(this.element, loader.form);
+        return this.render().then(html => {
+            this.setContent(this.element, html);
+            return this.attach(this.element).then(() => this.instance);
+        })
+            .then((param) => {
+            this.emit('build', param);
+            return param;
+        });
+    }
+    render() {
+        if (!this.instance) {
+            return native_promise_only_1.default.reject('Form not ready. Use form.ready promise');
+        }
+        return native_promise_only_1.default.resolve(this.instance.render())
+            .then((param) => {
+            this.emit('render', param);
+            return param;
+        });
+    }
+    attach(element) {
+        if (!this.instance) {
+            return native_promise_only_1.default.reject('Form not ready. Use form.ready promise');
+        }
+        if (this.element) {
+            delete this.element.component;
+        }
+        this.element = element;
+        return this.instance.attach(this.element)
+            .then((param) => {
+            this.emit('attach', param);
+            return param;
+        });
+    }
+    teardown() {
+        super.teardown();
+        delete this.instance;
+        delete this.ready;
+    }
+}
+exports.default = Form;
+// Allow simple embedding.
+Formio_1.Formio.embedForm = (embed) => Form.embed(embed);
+/**
+ * Factory that creates a new form based on the form parameters.
+ *
+ * @param element {HMTLElement} - The HTML Element to add this form to.
+ * @param form {string|Object} - The src of the form, or a form object.
+ * @param options {Object} - The options to create this form.
+ *
+ * @return {Promise} - When the form is instance is ready.
+ */
+Formio_1.Formio.createForm = (...args) => {
+    return (new Form(...args)).ready;
+};
+Formio_1.Formio.Form = Form;

package/lib/cjs/FormBuilder.d.ts

@@ -0,0 +1,6 @@
+export default class FormBuilder extends Form {
+    static options: {};
+    constructor(element: any, form: any, options: any);
+    create(display: any): any;
+}
+import Form from './Form';

package/lib/cjs/FormBuilder.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Formio_1 = require("./Formio");
+const builders_1 = __importDefault(require("./builders"));
+const Form_1 = __importDefault(require("./Form"));
+class FormBuilder extends Form_1.default {
+    constructor(element, form, options) {
+        form = form || {};
+        options = options || {};
+        super(element, form, Object.assign(options, FormBuilder.options, ((Formio_1.Formio.options && Formio_1.Formio.options.builder) ? Formio_1.Formio.options.builder : {})));
+    }
+    create(display) {
+        if (builders_1.default.builders[display]) {
+            return new builders_1.default.builders[display](this.element, this.options);
+        }
+        else {
+            // eslint-disable-next-line new-cap
+            return new builders_1.default.builders['webform'](this.element, this.options);
+        }
+    }
+}
+FormBuilder.options = {};
+exports.default = FormBuilder;
+/**
+ * Factory that creates a new form builder based on the form parameter.
+ *
+ * @param element {HMTLElement} - The HTML Element to add this form to.
+ * @param form {string|Object} - The src of the form, or a form object.
+ * @param options {Object} - The options to create this form.
+ *
+ * @return {Promise} - When the form is instance is ready.
+ */
+Formio_1.Formio.builder = (...args) => {
+    return (new FormBuilder(...args)).ready;
+};
+Formio_1.Formio.FormBuilder = FormBuilder;

package/lib/cjs/Formio.d.ts

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

package/lib/cjs/Formio.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Formio = void 0;
+const core_1 = require("@formio/core");
+Object.defineProperty(exports, "Formio", { enumerable: true, get: function () { return core_1.Formio; } });
+const CDN_1 = __importDefault(require("./CDN"));
+const providers_1 = __importDefault(require("./providers"));
+core_1.Formio.cdn = new CDN_1.default();
+core_1.Formio.Providers = providers_1.default;
+core_1.Formio.version = 'FORMIO_VERSION';
+const isNil = (val) => val === null || val === undefined;
+core_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback) {
+    const requestArgs = {
+        provider: storage,
+        method: 'upload',
+        file: file,
+        fileName: fileName,
+        dir: dir
+    };
+    fileKey = fileKey || 'file';
+    const request = core_1.Formio.pluginWait('preRequest', requestArgs)
+        .then(() => {
+        return core_1.Formio.pluginGet('fileRequest', requestArgs)
+            .then((result) => {
+            if (storage && isNil(result)) {
+                const Provider = providers_1.default.getProvider('storage', storage);
+                if (Provider) {
+                    const provider = new Provider(this);
+                    if (uploadStartCallback) {
+                        uploadStartCallback();
+                    }
+                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback);
+                }
+                else {
+                    throw ('Storage provider not found');
+                }
+            }
+            return result || { url: '' };
+        });
+    });
+    return core_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);
+};
+core_1.Formio.prototype.downloadFile = function (file, options) {
+    const requestArgs = {
+        method: 'download',
+        file: file
+    };
+    const request = core_1.Formio.pluginWait('preRequest', requestArgs)
+        .then(() => {
+        return core_1.Formio.pluginGet('fileRequest', requestArgs)
+            .then((result) => {
+            if (file.storage && isNil(result)) {
+                const Provider = providers_1.default.getProvider('storage', file.storage);
+                if (Provider) {
+                    const provider = new Provider(this);
+                    return provider.downloadFile(file, options);
+                }
+                else {
+                    throw ('Storage provider not found');
+                }
+            }
+            return result || { url: '' };
+        });
+    });
+    return core_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);
+};
+core_1.Formio.prototype.deleteFile = function (file, options) {
+    const requestArgs = {
+        method: 'delete',
+        file: file
+    };
+    const request = core_1.Formio.pluginWait('preRequest', requestArgs)
+        .then(() => {
+        return core_1.Formio.pluginGet('fileRequest', requestArgs)
+            .then((result) => {
+            if (file.storage && isNil(result)) {
+                const Provider = providers_1.default.getProvider('storage', file.storage);
+                if (Provider) {
+                    const provider = new Provider(this);
+                    return provider.deleteFile(file, options);
+                }
+                else {
+                    throw ('Storage provider not found');
+                }
+            }
+            return result || { url: '' };
+        });
+    });
+    return core_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);
+};
+// For reverse compatability.
+core_1.Formio.Promise = Promise;

package/lib/cjs/PDF.d.ts

@@ -0,0 +1,32 @@
+export default class PDF extends Webform {
+    constructor(element: any, options: any);
+    components: any[];
+    init(): void;
+    submitButton: any;
+    attachComponents(element: any, components: any, container: any): Promise<void>;
+    iframeReady: any;
+    iframeReadyResolve: any;
+    iframeReadyReject: any;
+    iframeElement: any;
+    /**
+     * Get the submission from the iframe.
+     *
+     * @return {Promise<any>}
+     */
+    getSubmission(): Promise<any>;
+    getSrc(): string;
+    setForm(form: any, flags?: {}): any;
+    /**
+     * Set's the value of this form component.
+     *
+     * @param submission
+     * @param flags
+     */
+    setValue(submission: any, flags?: {}): boolean;
+    postMessage(message: any): void;
+    iframeFormSetUp: boolean | undefined;
+    focusOnComponent(key: any): void;
+    showErrors(error: any, triggerEvent: any): void;
+    isSubmitButtonHidden(): boolean;
+}
+import Webform from './Webform';