@formio/js 5.0.0-rc.52 → 5.0.0-rc.54

package/lib/cjs/InlineEmbed.js

@@ -0,0 +1,109 @@
+"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();
+        if (config.formioPath) {
+            config.formioPath(scriptSrc);
+        }
+        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 || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.js`),
+            style: query.styles || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.css`),
+            cdn: query.cdn,
+            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'),
+            template: query.template,
+            debug: debug,
+            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);
+        const form = (Embed_1.Formio.config.form || Embed_1.Formio.config.src);
+        if (form) {
+            Embed_1.Formio.debug('Embedding Configuration', config);
+            if (Embed_1.Formio.config.addPremiumLib) {
+                Embed_1.Formio.config.addPremiumLib(Embed_1.Formio.config, scriptSrc);
+            }
+            // 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;
+                }
+                // 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 {
+                        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,5 +1,4 @@
 export default class PDF extends Webform {
-    constructor(element: any, options: any);
     components: any[];
     init(): void;
     render(): any;

package/lib/cjs/Webform.d.ts

@@ -89,14 +89,14 @@
 declare class Webform extends NestedDataComponent {
     /**
      * Creates a new Form instance.
-     * @param {HTMLElement | object | FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
-     * @param {FormOptions} [options] - The options to create a new form instance.
+     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
+     * @param {import('Form').FormOptions} [options] - The options to create a new form instance.
      */
-    constructor(elementOrOptions?: HTMLElement | object | FormOptions, options?: FormOptions | undefined);
+    constructor(elementOrOptions?: HTMLElement | object | import('Form').FormOptions, options?: any);
     /**
-     * @type {FormOptions} - the options for this Webform.
+     * @type {import('Form').FormOptions} - the options for this Webform.
      */
-    options: FormOptions;
+    options: any;
     _src: string;
     _loading: boolean;
     _form: {};
@@ -359,7 +359,7 @@ declare class Webform extends NestedDataComponent {
     executeFormController(): false | undefined;
     build(element: any): Promise<any>;
     getClassName(): string;
-    render(): string;
+    render(): import("./components/_classes/field/Field").default;
     redraw(): Promise<void> | Promise<boolean>;
     attach(element: any): Promise<boolean>;
     hasRequiredFields(): boolean;

package/lib/cjs/Webform.js

@@ -140,8 +140,8 @@ function getOptions(options) {
 class Webform extends NestedDataComponent_1.default {
     /**
      * Creates a new Form instance.
-     * @param {HTMLElement | object | FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
-     * @param {FormOptions} [options] - The options to create a new form instance.
+     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
+     * @param {import('Form').FormOptions} [options] - The options to create a new form instance.
      */
     constructor(elementOrOptions, options) {
         let element, formOptions;

package/lib/cjs/Wizard.d.ts

@@ -88,7 +88,7 @@ declare class Wizard extends Webform {
     }): any[];
     findRootPanel(component: any): any;
     setRootPanelId(component: any): void;
-    establishPages(data?: any): any[];
+    establishPages(data?: object): any[];
     updatePages(): void;
     addComponents(): void;
     setPage(num: any): Promise<void>;

package/lib/cjs/addons/PasswordStrength/PasswordStrengthAddon.d.ts

@@ -680,25 +680,26 @@ export default class PasswordStrengthAddon extends FormioAddon {
     };
     /**
      * Determines is a password is secure enough to submit
-     * @returns {boolean}
+     * @returns {boolean} - returns TRUE if password is valid, FALSE if it is not.
      */
     isValid(): boolean;
     /**
      * Handles the result of check and constructs a new error object or returns an amount of points to add to the current entropy
      * @param {boolean|number} valid - Determines if the validation was failed or an amount of points if it was passed
      * @param {*} validation - Validation configuration
-     * @param {string} value - Value which was validated
      * @param {string} message - Message which should be shown if validation was not passed
-     * @param errors
+     * @param {any[]} errors - The errors array (will be mutated)
+     * @returns {number} - Returns an amount of points to add to the current entropy
      */
-    handleRuleCheckResult(valid: boolean | number, validation: any, message: string, errors: any): any;
+    handleRuleCheckResult(valid: boolean | number, validation: any, message: string, errors: any[]): number;
     performChecks(value: any): {
         charactersPoolSize: number;
         errors: any[];
     };
     /**
      * Performs checks to validate password security
-     * @param {string} value - Suggested password
+     * @param {string} value - The password value to be checked.
+     * @returns {boolean} - Returns TRUE if password is strong enough, FALSE if it is not.
      */
     checkValidity(value: string): boolean;
     handleBlackListCheckResult(result: any, errors: any): void;
@@ -709,8 +710,9 @@ export default class PasswordStrengthAddon extends FormioAddon {
     /**
      * Finds the level which one the passed entropy suits
      * @param {number} entropy - Points of password's security
+     * @returns {object} - Returns the level object
      */
-    getLevel(entropy?: number): any;
+    getLevel(entropy?: number): object;
     /**
      * Update the current view of the password's security indicator
      */

package/lib/cjs/addons/PasswordStrength/PasswordStrengthAddon.js

@@ -204,7 +204,7 @@ class PasswordStrengthAddon extends FormioAddon_1.default {
     }
     /**
      * Determines is a password is secure enough to submit
-     * @returns {boolean}
+     * @returns {boolean} - returns TRUE if password is valid, FALSE if it is not.
      */
     isValid() {
         const isValidCheck = this.settings.isValid;
@@ -221,9 +221,9 @@ class PasswordStrengthAddon extends FormioAddon_1.default {
      * Handles the result of check and constructs a new error object or returns an amount of points to add to the current entropy
      * @param {boolean|number} valid - Determines if the validation was failed or an amount of points if it was passed
      * @param {*} validation - Validation configuration
-     * @param {string} value - Value which was validated
      * @param {string} message - Message which should be shown if validation was not passed
-     * @param errors
+     * @param {any[]} errors - The errors array (will be mutated)
+     * @returns {number} - Returns an amount of points to add to the current entropy
      */
     handleRuleCheckResult(valid, validation, message, errors) {
         if (valid !== true) {
@@ -263,7 +263,8 @@ class PasswordStrengthAddon extends FormioAddon_1.default {
     }
     /**
      * Performs checks to validate password security
-     * @param {string} value - Suggested password
+     * @param {string} value - The password value to be checked.
+     * @returns {boolean} - Returns TRUE if password is strong enough, FALSE if it is not.
      */
     checkValidity(value) {
         var _a;
@@ -363,6 +364,7 @@ class PasswordStrengthAddon extends FormioAddon_1.default {
     /**
      * Finds the level which one the passed entropy suits
      * @param {number} entropy - Points of password's security
+     * @returns {object} - Returns the level object
      */
     getLevel(entropy = this.entropy) {
         const lowestLevel = this.levels[0];

package/lib/cjs/components/_classes/field/Field.d.ts

@@ -1,5 +1,14 @@
 export default class Field extends Component {
-    render(element: any): string;
-    saveCaretPosition(element: any, index: any): void;
+    /**
+     * @param {object} element - The component to create.
+     * @returns {Field} - The created field.
+     */
+    render(element: object): Field;
+    /**
+    /* Saves current caret position to restore it after the component is redrawn
+     * @param {HTMLElement} element - The element to save the caret position for.
+     * @param {number} index - The index of the element.
+     */
+    saveCaretPosition(element: HTMLElement, index: number): void;
 }
 import Component from '../component/Component';

package/lib/cjs/components/_classes/field/Field.js

@@ -4,7 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("../component/Component"));
+/*
+ * Field class is a base class for all fields.
+ * @extends Component
+ */
 class Field extends Component_1.default {
+    /**
+     * @param {object} element - The component to create.
+     * @returns {Field} - The created field.
+     */
     render(element) {
         if (this.noField) {
             return super.render(element);
@@ -19,7 +27,11 @@ class Field extends Component_1.default {
             }));
         }
     }
-    // Saves current caret position to restore it after the component is redrawn
+    /**
+    /* Saves current caret position to restore it after the component is redrawn
+     * @param {HTMLElement} element - The element to save the caret position for.
+     * @param {number} index - The index of the element.
+     */
     saveCaretPosition(element, index) {
         var _a, _b;
         if (((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path) {

package/lib/cjs/components/_classes/input/Input.d.ts

@@ -30,13 +30,14 @@ export default class Input extends Multivalue {
     updateValue(value: any, flags: any, index: any): boolean;
     parseValue(value: any): any;
     formatValue(value: any): any;
+    attach(element: any): Promise<any>;
     getWidget(index: any): any;
     attachElement(element: any, index: any): Promise<void>;
     /**
      * Creates an instance of a widget for this component.
-     * @param index
-     * @returns {null}
+     * @param {number} index - The index of the widget.
+     * @returns {*} - The widget instance.
      */
-    createWidget(index: any): null;
+    createWidget(index: number): any;
 }
 import Multivalue from '../multivalue/Multivalue';

package/lib/cjs/components/_classes/input/Input.js

@@ -244,8 +244,8 @@ class Input extends Multivalue_1.default {
     }
     /**
      * Creates an instance of a widget for this component.
-     * @param index
-     * @returns {null}
+     * @param {number} index - The index of the widget.
+     * @returns {*} - The widget instance.
      */
     createWidget(index) {
         var _a, _b;

package/lib/cjs/components/_classes/list/ListComponent.form.d.ts

@@ -1,7 +1,6 @@
 /**
- *
- * @param {...any} extend
+ * List Component edit form.
+ * @param {...any} extend - The extended schema.
+ * @returns {object} - The List Component edit form.
  */
-export default function _default(...extend: any[]): {
-    components: any;
-};
+export default function _default(...extend: any[]): object;

package/lib/cjs/components/_classes/list/ListComponent.form.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Components_1 = __importDefault(require("../../Components"));
 const ListComponent_edit_data_1 = __importDefault(require("./editForm/ListComponent.edit.data"));
 /**
- *
- * @param {...any} extend
+ * List Component edit form.
+ * @param {...any} extend - The extended schema.
+ * @returns {object} - The List Component edit form.
  */
 function default_1(...extend) {
     return Components_1.default.baseEditForm([

package/lib/cjs/components/_classes/multivalue/Multivalue.d.ts

@@ -1,24 +1,55 @@
 export default class Multivalue extends Field {
     get addAnother(): string;
     useWrapper(): any;
-    render(): string;
+    /**
+     * @returns {Field} - The created field.
+     */
+    render(): Field;
     renderElement(): string;
-    renderRow(value: any, index: any): any;
-    attach(dom: any): Promise<any[]>;
+    /**
+     * Renders a single row for multi-value components.
+     * @param {any} value - The value associated with the row to render.
+     * @param {number} index - The index of the row in the multi-value list.
+     * @returns {any} Returns the HTML string representation of the row.
+     */
+    renderRow(value: any, index: number): any;
+    /**
+     * @param {HTMLElement} dom - The DOM element to which the component will attach.
+     * @returns {Promise} - Promise that resolves when all asynchronous tasks that have finished.
+     */
+    attach(dom: HTMLElement): Promise<any>;
     /**
      * Attach inputs to the element.
-     * @param element
-     * @param index
+     * @param {HTMLElement} element - The element to attach.
+     * @param {number} index - The index of the element to attach.
+     */
+    attachElement(element: HTMLElement, index: number): void;
+    /**
+     * Event handler for selecting a mask from a dropdown.
+     * @param {Event} event - Event triggered by changing the selected option in mask.
+     */
+    onSelectMaskHandler(event: Event): void;
+    /**
+     * Retrieves the mask pattern for a given mask name
+     * @param {string} maskName - The name of the mask to retrieve.
+     * @returns {any} The mask pattern associated with the given mask name.
      */
-    attachElement(element: any, index: any): void;
-    onSelectMaskHandler(event: any): void;
-    getMaskPattern(maskName: any): any;
+    getMaskPattern(maskName: string): any;
     multiMasks: {} | undefined;
-    attachMultiMask(index: any): boolean;
-    updateMask(input: any, mask: any): void;
+    /**
+     * Attaches a selectable mask to an input field based on its configuration.
+     * @param {number} index - The index of the select or input in component array.
+     * @returns {boolean} - Returns true if the mask was successfully attached
+     */
+    attachMultiMask(index: number): boolean;
+    /**
+     * @param {any} input - The input element on which the mask is to be applied.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     */
+    updateMask(input: any, mask: string): void;
     /**
      * Adds a new empty value to the data array.
-     * @param value
+     * @param {any} value -A value to be added to the data array.
      */
     addNewValue(value: any): void;
     /**

package/lib/cjs/components/_classes/multivalue/Multivalue.js

@@ -34,6 +34,9 @@ class Multivalue extends Field_1.default {
     useWrapper() {
         return this.component.hasOwnProperty('multiple') && this.component.multiple;
     }
+    /**
+     * @returns {Field} - The created field.
+     */
     render() {
         // If single value field.
         if (!this.useWrapper()) {
@@ -56,6 +59,12 @@ class Multivalue extends Field_1.default {
     renderElement() {
         return '';
     }
+    /**
+     * Renders a single row for multi-value components.
+     * @param {any} value - The value associated with the row to render.
+     * @param {number} index - The index of the row in the multi-value list.
+     * @returns {any} Returns the HTML string representation of the row.
+     */
     renderRow(value, index) {
         return this.renderTemplate('multiValueRow', {
             index,
@@ -63,6 +72,10 @@ class Multivalue extends Field_1.default {
             element: `${this.renderElement(value, index)}`,
         });
     }
+    /**
+     * @param {HTMLElement} dom - The DOM element to which the component will attach.
+     * @returns {Promise} - Promise that resolves when all asynchronous tasks that have finished.
+     */
     attach(dom) {
         const superAttach = super.attach(dom);
         this.loadRefs(dom, {
@@ -96,6 +109,9 @@ class Multivalue extends Field_1.default {
             return Promise.all(promises);
         });
     }
+    /**
+     * Remove all event handlers.
+     */
     detach() {
         if (this.refs.input && this.refs.input.length) {
             this.refs.input.forEach((input) => {
@@ -118,8 +134,8 @@ class Multivalue extends Field_1.default {
     }
     /**
      * Attach inputs to the element.
-     * @param element
-     * @param index
+     * @param {HTMLElement} element - The element to attach.
+     * @param {number} index - The index of the element to attach.
      */
     attachElement(element, index) {
         this.addEventListener(element, this.inputInfo.changeEvent, () => {
@@ -181,9 +197,18 @@ class Multivalue extends Field_1.default {
             }
         }
     }
+    /**
+     * Event handler for selecting a mask from a dropdown.
+     * @param {Event} event - Event triggered by changing the selected option in mask.
+     */
     onSelectMaskHandler(event) {
         this.updateMask(event.target.maskInput, this.getMaskPattern(event.target.value));
     }
+    /**
+     * Retrieves the mask pattern for a given mask name
+     * @param {string} maskName - The name of the mask to retrieve.
+     * @returns {any} The mask pattern associated with the given mask name.
+     */
     getMaskPattern(maskName) {
         if (!this.multiMasks) {
             this.multiMasks = {};
@@ -195,6 +220,11 @@ class Multivalue extends Field_1.default {
         this.multiMasks[maskName] = mask ? mask.mask : this.component.inputMasks[0].mask;
         return this.multiMasks[maskName];
     }
+    /**
+     * Attaches a selectable mask to an input field based on its configuration.
+     * @param {number} index - The index of the select or input in component array.
+     * @returns {boolean} - Returns true if the mask was successfully attached
+     */
     attachMultiMask(index) {
         if (!(this.isMultipleMasksField && this.component.inputMasks.length && this.refs.input.length)) {
             return false;
@@ -205,6 +235,10 @@ class Multivalue extends Field_1.default {
         this.setInputMask(maskSelect.maskInput, this.component.inputMasks[0].mask);
         return true;
     }
+    /**
+     * @param {any} input - The input element on which the mask is to be applied.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     */
     updateMask(input, mask) {
         if (!mask) {
             return;
@@ -214,7 +248,7 @@ class Multivalue extends Field_1.default {
     }
     /**
      * Adds a new empty value to the data array.
-     * @param value
+     * @param {any} value -A value to be added to the data array.
      */
     addNewValue(value) {
         if (value === undefined) {