@formio/js 5.0.0-dev.5646.8734cf4 → 5.0.0-dev.5650.cd53187

package/lib/cjs/FormBuilder.d.ts

@@ -1,6 +1,191 @@
 export default class FormBuilder extends Form {
-    static options: {};
-    constructor(element: any, form: any, options: any);
+    /**
+     * @typedef FormBuilderOptions
+     * @property {string[]} [disabled] - An array of "keys" of components that should be disabled within the form builder. Example: ['firstName', 'lastName']
+     * @property {boolean} [noNewEdit] - When set to TRUE no modal is shown when a component is dragged onto the form.
+     * @property {boolean} [noDefaultSubmitButton] - Set to TRUE to not include the default submit button in Webforms.
+     * @property {boolean} [alwaysConfirmComponentRemoval] - Set to TRUE to always require confirmation before removing a component.
+     * @property {object} [formConfig] - Form configurations to apply to forms being created. These configurations are added to the "config" property of the form object.
+     * @property {string} [resourceTag] - The tag to use to query for the "Existing Resource Fields" section of the builder.
+     * @property {import('./Form').FormOptions} [editForm] - The options to apply to the Edit Form (the form that shows inside the modal when you edit a component).
+     * @property {string} [language] - The language to load into the form builder.
+     * @property {object} [builder] - The builder options to pass to the builder.
+     * @property {'form'|'wizard'|'pdf'} [display] - The display mode of the builder.
+     * @property {string} [resourceFilter] - Filter applied to the resources that appear in the builder's Existing Resource Fields.
+     * @property {boolean} [noSource] - When set to TRUE, the resource ID in the builder's Existing Resource Fields will not be linked.
+     * @property {boolean} [showFullJsonSchema] - When set to TRUE, the full JSON schema will be displayed in the JSON edit menu.
+     */
+    /** @type {FormBuilderOptions} */
+    static options: {
+        /**
+         * - An array of "keys" of components that should be disabled within the form builder. Example: ['firstName', 'lastName']
+         */
+        disabled?: string[] | undefined;
+        /**
+         * - When set to TRUE no modal is shown when a component is dragged onto the form.
+         */
+        noNewEdit?: boolean | undefined;
+        /**
+         * - Set to TRUE to not include the default submit button in Webforms.
+         */
+        noDefaultSubmitButton?: boolean | undefined;
+        /**
+         * - Set to TRUE to always require confirmation before removing a component.
+         */
+        alwaysConfirmComponentRemoval?: boolean | undefined;
+        /**
+         * - Form configurations to apply to forms being created. These configurations are added to the "config" property of the form object.
+         */
+        formConfig?: object | undefined;
+        /**
+         * - The tag to use to query for the "Existing Resource Fields" section of the builder.
+         */
+        resourceTag?: string | undefined;
+        /**
+         * - The options to apply to the Edit Form (the form that shows inside the modal when you edit a component).
+         */
+        editForm?: any;
+        /**
+         * - The language to load into the form builder.
+         */
+        language?: string | undefined;
+        /**
+         * - The builder options to pass to the builder.
+         */
+        builder?: object | undefined;
+        /**
+         * - The display mode of the builder.
+         */
+        display?: "form" | "pdf" | "wizard" | undefined;
+        /**
+         * - Filter applied to the resources that appear in the builder's Existing Resource Fields.
+         */
+        resourceFilter?: string | undefined;
+        /**
+         * - When set to TRUE, the resource ID in the builder's Existing Resource Fields will not be linked.
+         */
+        noSource?: boolean | undefined;
+        /**
+         * - When set to TRUE, the full JSON schema will be displayed in the JSON edit menu.
+         */
+        showFullJsonSchema?: boolean | undefined;
+    };
+    /**
+     * Creates a new form builder.
+     * @param {HTMLElement} element - The HTML element to place the form builder.
+     * @param {string | object} form - The form to pass to the builder
+     * @param {FormBuilderOptions} options - The options to create this builder.
+     * @returns {FormBuilder} - The form builder instance.
+     */
+    constructor(element: HTMLElement, form: string | object, options: {
+        /**
+         * - An array of "keys" of components that should be disabled within the form builder. Example: ['firstName', 'lastName']
+         */
+        disabled?: string[] | undefined;
+        /**
+         * - When set to TRUE no modal is shown when a component is dragged onto the form.
+         */
+        noNewEdit?: boolean | undefined;
+        /**
+         * - Set to TRUE to not include the default submit button in Webforms.
+         */
+        noDefaultSubmitButton?: boolean | undefined;
+        /**
+         * - Set to TRUE to always require confirmation before removing a component.
+         */
+        alwaysConfirmComponentRemoval?: boolean | undefined;
+        /**
+         * - Form configurations to apply to forms being created. These configurations are added to the "config" property of the form object.
+         */
+        formConfig?: object | undefined;
+        /**
+         * - The tag to use to query for the "Existing Resource Fields" section of the builder.
+         */
+        resourceTag?: string | undefined;
+        /**
+         * - The options to apply to the Edit Form (the form that shows inside the modal when you edit a component).
+         */
+        editForm?: any;
+        /**
+         * - The language to load into the form builder.
+         */
+        language?: string | undefined;
+        /**
+         * - The builder options to pass to the builder.
+         */
+        builder?: object | undefined;
+        /**
+         * - The display mode of the builder.
+         */
+        display?: "form" | "pdf" | "wizard" | undefined;
+        /**
+         * - Filter applied to the resources that appear in the builder's Existing Resource Fields.
+         */
+        resourceFilter?: string | undefined;
+        /**
+         * - When set to TRUE, the resource ID in the builder's Existing Resource Fields will not be linked.
+         */
+        noSource?: boolean | undefined;
+        /**
+         * - When set to TRUE, the full JSON schema will be displayed in the JSON edit menu.
+         */
+        showFullJsonSchema?: boolean | undefined;
+    });
+    /** @type {FormBuilderOptions} */
+    options: {
+        /**
+         * - An array of "keys" of components that should be disabled within the form builder. Example: ['firstName', 'lastName']
+         */
+        disabled?: string[] | undefined;
+        /**
+         * - When set to TRUE no modal is shown when a component is dragged onto the form.
+         */
+        noNewEdit?: boolean | undefined;
+        /**
+         * - Set to TRUE to not include the default submit button in Webforms.
+         */
+        noDefaultSubmitButton?: boolean | undefined;
+        /**
+         * - Set to TRUE to always require confirmation before removing a component.
+         */
+        alwaysConfirmComponentRemoval?: boolean | undefined;
+        /**
+         * - Form configurations to apply to forms being created. These configurations are added to the "config" property of the form object.
+         */
+        formConfig?: object | undefined;
+        /**
+         * - The tag to use to query for the "Existing Resource Fields" section of the builder.
+         */
+        resourceTag?: string | undefined;
+        /**
+         * - The options to apply to the Edit Form (the form that shows inside the modal when you edit a component).
+         */
+        editForm?: any;
+        /**
+         * - The language to load into the form builder.
+         */
+        language?: string | undefined;
+        /**
+         * - The builder options to pass to the builder.
+         */
+        builder?: object | undefined;
+        /**
+         * - The display mode of the builder.
+         */
+        display?: "form" | "pdf" | "wizard" | undefined;
+        /**
+         * - Filter applied to the resources that appear in the builder's Existing Resource Fields.
+         */
+        resourceFilter?: string | undefined;
+        /**
+         * - When set to TRUE, the resource ID in the builder's Existing Resource Fields will not be linked.
+         */
+        noSource?: boolean | undefined;
+        /**
+         * - When set to TRUE, the full JSON schema will be displayed in the JSON edit menu.
+         */
+        showFullJsonSchema?: boolean | undefined;
+    };
     create(display: any): any;
 }
 import Form from './Form';

package/lib/cjs/FormBuilder.js

@@ -7,6 +7,13 @@ const Formio_1 = require("./Formio");
 const builders_1 = __importDefault(require("./builders"));
 const Form_1 = __importDefault(require("./Form"));
 class FormBuilder extends Form_1.default {
+    /**
+     * Creates a new form builder.
+     * @param {HTMLElement} element - The HTML element to place the form builder.
+     * @param {string | object} form - The form to pass to the builder
+     * @param {FormBuilderOptions} options - The options to create this builder.
+     * @returns {FormBuilder} - The form builder instance.
+     */
     constructor(element, form, options) {
         form = form || {};
         options = options || {};
@@ -22,18 +29,33 @@ class FormBuilder extends Form_1.default {
         }
     }
 }
+/**
+ * @typedef FormBuilderOptions
+ * @property {string[]} [disabled] - An array of "keys" of components that should be disabled within the form builder. Example: ['firstName', 'lastName']
+ * @property {boolean} [noNewEdit] - When set to TRUE no modal is shown when a component is dragged onto the form.
+ * @property {boolean} [noDefaultSubmitButton] - Set to TRUE to not include the default submit button in Webforms.
+ * @property {boolean} [alwaysConfirmComponentRemoval] - Set to TRUE to always require confirmation before removing a component.
+ * @property {object} [formConfig] - Form configurations to apply to forms being created. These configurations are added to the "config" property of the form object.
+ * @property {string} [resourceTag] - The tag to use to query for the "Existing Resource Fields" section of the builder.
+ * @property {import('./Form').FormOptions} [editForm] - The options to apply to the Edit Form (the form that shows inside the modal when you edit a component).
+ * @property {string} [language] - The language to load into the form builder.
+ * @property {object} [builder] - The builder options to pass to the builder.
+ * @property {'form'|'wizard'|'pdf'} [display] - The display mode of the builder.
+ * @property {string} [resourceFilter] - Filter applied to the resources that appear in the builder's Existing Resource Fields.
+ * @property {boolean} [noSource] - When set to TRUE, the resource ID in the builder's Existing Resource Fields will not be linked.
+ * @property {boolean} [showFullJsonSchema] - When set to TRUE, the full JSON schema will be displayed in the JSON edit menu.
+ */
+/** @type {FormBuilderOptions} */
 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.
+ * @param {HTMLElement} element - The HTML Element to add this form to.
+ * @param {string|object} form - The src of the form, or a form object.
+ * @param {object} options - The options to create this form.
+ * @returns {Promise} - When the form is instance is ready.
  */
-Formio_1.Formio.builder = (...args) => {
-    return (new FormBuilder(...args)).ready;
+Formio_1.Formio.builder = (element, form, options) => {
+    return (new FormBuilder(element, form, options)).ready;
 };
 Formio_1.Formio.FormBuilder = FormBuilder;

package/lib/cjs/Formio.js

@@ -125,3 +125,4 @@ if (typeof global !== 'undefined') {
 if (typeof window !== 'undefined') {
     sdk_1.Formio.addToGlobal(window);
 }
+Embed_1.Formio._formioReady(sdk_1.Formio);

package/lib/cjs/InlineEmbed.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Inline embed a form within a webpage.
+ * @param {*} config - Configuration to configure how the inline embed is rendered.
+ */
+export function embed(config?: any): void;
+export { Formio };
+import { Formio } from './Embed';

package/lib/cjs/InlineEmbed.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Formio = exports.embed = void 0;
+const Embed_1 = require("./Embed");
+Object.defineProperty(exports, "Formio", { enumerable: true, get: function () { return Embed_1.Formio; } });
+/**
+ * Inline embed a form within a webpage.
+ * @param {*} config - Configuration to configure how the inline embed is rendered.
+ */
+function embed(config = {}) {
+    const scripts = document.getElementsByTagName('script');
+    config = Object.assign({}, window.FormioConfig || {}, config);
+    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;
+        }
+    }
+    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]);
+        });
+        let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
+        scriptSrc.pop();
+        let cdnSrc = '';
+        if (['js', 'offline'].includes(scriptSrc[scriptSrc.length - 1])) {
+            scriptSrc.pop();
+            scriptSrc = cdnSrc = scriptSrc.join('/');
+            scriptSrc += '/js';
+        }
+        else {
+            scriptSrc = scriptSrc.join('/');
+        }
+        const debug = (query.debug === 'true' || query.debug === '1');
+        const renderer = debug ? 'formio.form' : 'formio.form.min';
+        Embed_1.Formio.config = Object.assign({
+            script: query.script || (`${scriptSrc}/${renderer}.js`),
+            style: query.styles || (`${scriptSrc}/${renderer}.css`),
+            cdn: query.cdn || cdnSrc,
+            class: (query.class || 'formio-form-wrapper'),
+            src: query.src,
+            form: null,
+            submission: null,
+            project: query.project,
+            base: query.base || 'https://api.form.io',
+            submit: query.submit,
+            includeLibs: (query.libs === 'true' || query.libs === '1'),
+            noshadow: (query.shadow === 'false' || query.shadow === '0'),
+            template: query.template || 'bootstrap',
+            debug: debug,
+            config: {},
+            redirect: (query.return || query.redirect),
+            embedCSS: (`${scriptSrc}/formio.embed.css`),
+            success: query.success || 'Thank you for your submission!',
+            before: null,
+            after: null
+        }, config);
+        if (Embed_1.Formio.config.alter) {
+            Embed_1.Formio.config.alter(Embed_1.Formio.config);
+        }
+        const form = (Embed_1.Formio.config.form || Embed_1.Formio.config.src);
+        if (form) {
+            Embed_1.Formio.debug('Embedding Configuration', config);
+            // The id for this embedded form.
+            Embed_1.Formio.config.id = `formio-${Math.random().toString(36).substring(7)}`;
+            Embed_1.Formio.debug('Creating form element');
+            const element = Embed_1.Formio.createElement('div', {
+                'id': Embed_1.Formio.config.id,
+                class: Embed_1.Formio.config.class
+            });
+            // insertAfter doesn't exist, but effect is identical.
+            thisScript.parentNode.insertBefore(element, thisScript.parentNode.firstElementChild.nextSibling);
+            Embed_1.Formio.createForm(element, form, Embed_1.Formio.config.config).then((instance) => {
+                if (Embed_1.Formio.config.submit) {
+                    instance.nosubmit = true;
+                }
+                // Trigger the submit done event.
+                instance.on('submitDone', (submission) => Embed_1.Formio.submitDone(instance, submission));
+                // Configure a redirect.
+                instance.on('submit', (submission) => {
+                    Embed_1.Formio.debug("on('submit')", submission);
+                    if (Embed_1.Formio.config.submit) {
+                        Embed_1.Formio.debug(`Sending submission to ${Embed_1.Formio.config.submit}`);
+                        const headers = {
+                            'content-type': 'application/json'
+                        };
+                        const token = Embed_1.Formio.FormioClass.getToken();
+                        if (token) {
+                            headers['x-jwt-token'] = token;
+                        }
+                        Embed_1.Formio.FormioClass.fetch(Embed_1.Formio.config.submit, {
+                            body: JSON.stringify(submission),
+                            headers: headers,
+                            method: 'POST',
+                            mode: 'cors',
+                        })
+                            .then(resp => resp.json())
+                            .then((submission) => {
+                            Embed_1.Formio.submitDone(instance, submission);
+                        });
+                    }
+                });
+            });
+        }
+    }
+    else {
+        // Show an error if the script cannot be found.
+        document.write('<span>Could not locate the Embedded form.</span>');
+    }
+}
+exports.embed = embed;

package/lib/cjs/PDF.d.ts

@@ -1,8 +1,8 @@
 export default class PDF extends Webform {
-    constructor(element: any, options: any);
     components: any[];
     init(): void;
-    submitButton: import("./components/_classes/component/Component").default | undefined;
+    render(): any;
+    submitButton: any;
     attachComponents(element: any, components: any, container: any): Promise<void>;
     attach(element: any): Promise<void>;
     iframeReady: Promise<any> | undefined;
@@ -11,26 +11,24 @@ export default class PDF extends Webform {
     iframeElement: any;
     /**
      * Get the submission from the iframe.
-     *
-     * @return {Promise<any>}
+     * @returns {Promise<any>} - The submission from the iframe.
      */
     getSubmission(): Promise<any>;
     /**
      * Ensure we have the submission from the iframe before we submit the form.
-     *
-     * @param options
-     * @return {*}
+     * @param {any} options - The options for submission.
+     * @returns {Promise<any>} - Resolves when the form is submitted.
      */
-    submitForm(options?: {}): any;
+    submitForm(options?: any): Promise<any>;
     getSrc(): string;
-    setForm(form: any, flags?: {}): any;
+    setForm(form: any, flags?: {}): Promise<void>;
     /**
      * Set's the value of this form component.
-     *
-     * @param submission
-     * @param flags
+     * @param {import('@formio/core').Submission} submission - The submission JSON to set the value of this form.
+     * @param {any} flags - The flags to use when setting the submission.
+     * @returns {boolean} - If the value changed or not.
      */
-    setValue(submission: any, flags?: {}): boolean;
+    setValue(submission: import('@formio/core').Submission, flags?: any): boolean;
     postMessage(message: any): void;
     iframeFormSetUp: boolean | undefined;
     focusOnComponent(key: any): void;

package/lib/cjs/PDF.js

@@ -70,7 +70,7 @@ class PDF extends Webform_1.default {
         super.destroy(all);
     }
     rebuild() {
-        if (this.attached && this.builderMode && this.component.components) {
+        if (this.builderMode && this.component.components) {
             this.destroyComponents();
             this.addComponents();
             return Promise.resolve();
@@ -143,8 +143,7 @@ class PDF extends Webform_1.default {
     }
     /**
      * Get the submission from the iframe.
-     *
-     * @return {Promise<any>}
+     * @returns {Promise<any>} - The submission from the iframe.
      */
     getSubmission() {
         return new Promise((resolve) => {
@@ -154,9 +153,8 @@ class PDF extends Webform_1.default {
     }
     /**
      * Ensure we have the submission from the iframe before we submit the form.
-     *
-     * @param options
-     * @return {*}
+     * @param {any} options - The options for submission.
+     * @returns {Promise<any>} - Resolves when the form is submitted.
      */
     submitForm(options = {}) {
         this.postMessage({ name: 'getErrors' });
@@ -198,9 +196,9 @@ class PDF extends Webform_1.default {
     }
     /**
      * Set's the value of this form component.
-     *
-     * @param submission
-     * @param flags
+     * @param {import('@formio/core').Submission} submission - The submission JSON to set the value of this form.
+     * @param {any} flags - The flags to use when setting the submission.
+     * @returns {boolean} - If the value changed or not.
      */
     setValue(submission, flags = {}) {
         const changed = super.setValue(submission, flags);

package/lib/cjs/PDFBuilder.js

@@ -403,6 +403,7 @@ class PDFBuilder extends WebformBuilder_1.default {
         return false;
     }
     onDragEnd(e) {
+        var _a;
         // IMPORTANT - must retrieve offsets BEFORE disabling the dropzone - offsets will
         // reflect absolute positioning if accessed after the target element is hidden
         const iframeRect = this.webform.refs.iframeContainer.getBoundingClientRect();
@@ -435,7 +436,7 @@ class PDFBuilder extends WebformBuilder_1.default {
             lodash_1.default.merge(schema, info);
         }
         // Set a unique key for this component.
-        builder_1.default.uniquify([this.webform._form], schema);
+        builder_1.default.uniquify(((_a = this.webform._form) === null || _a === void 0 ? void 0 : _a.components) || [], schema);
         this.webform._form.components.push(schema);
         schema.overlay = {
             top: layerY ? (layerY - this.itemOffsetY + HEIGHT) : (e.clientY - iframeRect.top - (this.itemOffsetY - HEIGHT) * 2),