@formio/js 5.0.0-dev.5610.da13e39 → 5.0.0-dev.5613.3476921

package/lib/cjs/Form.d.ts

@@ -1,377 +1,50 @@
 export default class Form extends Element {
     static embed(embed: any): Promise<any>;
-    constructor(elementOrForm: any, formOrOptions: any, options?: {});
-    /**
-     * Represents a JSON value.
-     * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON
-     */
-    /**
-     * Represents a JSON array.
-     * @typedef {Array<JSON>} JSONArray
-     */
-    /**
-     * Represents a JSON object.
-     * @typedef {{[key: string]: JSON}} JSONObject
-     */
-    /**
-     * @typedef {object} FormioHooks
-     * @property {Function} [beforeSubmit] - Called before a submission is made.
-     * @property {Function} [beforeCancel] - Called before a cancel is made.
-     * @property {Function} [beforeNext] - Called before the next page is navigated to.
-     * @property {Function} [beforePrev] - Called before the previous page is navigated to.
-     * @property {Function} [attachComponent] - Called when a component is attached.
-     * @property {Function} [setDataValue] - Called when a data value is set.
-     * @property {Function} [addComponents] - Called when components are added.
-     * @property {Function} [addComponent] - Called when a component is added.
-     * @property {Function} [customValidation] - Called when a custom validation is made.
-     * @property {Function} [attachWebform] - Called when a webform is attached.
-     */
-    /**
-     * @typedef {object} SanitizeConfig
-     * @property {string[]} [addAttr] - The html attributes to allow with sanitization.
-     * @property {string[]} [addTags] - The html tags to allow with sanitization.
-     * @property {string[]} [allowedAttrs] - The html attributes to allow with sanitization.
-     * @property {string[]} [allowedTags] - The html tags to allow with sanitization.
-     * @property {string[]} [allowedUriRegex] - The regex for allowed URIs.
-     * @property {string[]} [addUriSafeAttr] - The URI attributes to allow with sanitization.
-     */
-    /**
-     * @typedef {object} ButtonSettings
-     * @property {boolean} [showPrevious] - Show the previous button in wizard forms.
-     * @property {boolean} [showNext] - Show the next button in wizard forms.
-     * @property {boolean} [showCancel] - Show the cancel button in wizard forms.
-     * @property {boolean} [showSubmit] - Show the submit button in wizard forms.
-     */
-    /**
-     * @typedef {object} FormOptions
-     * @property {boolean} [saveDraft] - Enable the save draft feature.
-     * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
-     * @property {boolean} [readOnly] - Set this form to readOnly.
-     * @property {boolean} [noAlerts] - Disable the alerts dialog.
-     * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
-     * @property {string} [template] - Custom logic for creation of elements.
-     * @property {boolean} [noDefaults] - Exclude default values from the settings.
-     * @property {any} [fileService] - The file service for this form.
-     * @property {EventEmitter} [events] - The EventEmitter for this form.
-     * @property {string} [language] - The language to render this form in.
-     * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.
-     * @property {boolean} [viewAsHtml] - View the form as raw HTML.
-     * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.
-     * @property {boolean} [highlightErrors] - Highlight any errors on the form.
-     * @property {string} [componentErrorClass] - The error class for components.
-     * @property {any} [templates] - The templates for this form.
-     * @property {string} [iconset] - The iconset for this form.
-     * @property {import('@formio/core').Component[]} [components] - The components for this form.
-     * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.
-     * @property {boolean} [showHiddenFields] - Show hidden fields.
-     * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.
-     * @property {{[key: string]: boolean}} [show] - Components to show for this form.
-     * @property {Formio} [formio] - The Formio instance for this form.
-     * @property {string} [decimalSeparator] - The decimal separator for this form.
-     * @property {string} [thousandsSeparator] - The thousands separator for this form.
-     * @property {FormioHooks} [hooks] - The hooks for this form.
-     * @property {boolean} [alwaysDirty] - Always be dirty.
-     * @property {boolean} [skipDraftRestore] - Skip restoring a draft.
-     * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.
-     * @property {string} [cdnUrl] - The CDN url for this form.
-     * @property {boolean} [flatten] - Flatten the form.
-     * @property {boolean} [sanitize] - Sanitize the form.
-     * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.
-     * @property {ButtonSettings} [buttonSettings] - The button settings for this form.
-     * @property {object} [breadcrumbSettings] - The breadcrumb settings for this form.
-     * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).
-     * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).
-     * @property {boolean} [showCheckboxBackground] - Show the checkbox background.
-     * @property {number} [zoom] - The zoom for PDF forms.
-     */
     /**
      * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.
-     * @param {object} elementOrForm - The DOM element you wish to render this form within, or the form definition.
-     * @param {object | string | FormOptions} formOrOptions - A Form JSON schema, the URL of a hosted form, or the form options.
-     * @param {FormOptions} [options] - The options to create a new form instance.
+     *
+     * @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 '@formio/js/Form';
      * const form = new Form(document.getElementById('formio'), 'https://examples.form.io/example');
      * form.build();
      */
-    /**
-     * @type {FormOptions} - the options for this Form.
-     */
-    options: {
-        /**
-         * - Enable the save draft feature.
-         */
-        saveDraft?: boolean | undefined;
-        /**
-         * - The throttle for the save draft feature.
-         */
-        saveDraftThrottle?: number | undefined;
-        /**
-         * - Set this form to readOnly.
-         */
-        readOnly?: boolean | undefined;
-        /**
-         * - Disable the alerts dialog.
-         */
-        noAlerts?: boolean | undefined;
-        /**
-         * - The translation file for this rendering.
-         */
-        i18n?: {
-            [key: string]: string;
-        } | undefined;
-        /**
-         * - Custom logic for creation of elements.
-         */
-        template?: string | undefined;
-        /**
-         * - Exclude default values from the settings.
-         */
-        noDefaults?: boolean | undefined;
-        /**
-         * - The file service for this form.
-         */
-        fileService?: any;
-        /**
-         * - The EventEmitter for this form.
-         */
-        events?: any;
-        /**
-         * - The language to render this form in.
-         */
-        language?: string | undefined;
-        /**
-         * - The i18next configuration for this form.
-         */
-        i18next?: {
-            [key: string]: string;
-        } | undefined;
-        /**
-         * - View the form as raw HTML.
-         */
-        viewAsHtml?: boolean | undefined;
-        /**
-         * - The render mode for this form.
-         */
-        renderMode?: "builder" | "form" | "html" | "flat" | "pdf" | undefined;
-        /**
-         * - Highlight any errors on the form.
-         */
-        highlightErrors?: boolean | undefined;
-        /**
-         * - The error class for components.
-         */
-        componentErrorClass?: string | undefined;
-        /**
-         * - The templates for this form.
-         */
-        templates?: any;
-        /**
-         * - The iconset for this form.
-         */
-        iconset?: string | undefined;
-        /**
-         * - The components for this form.
-         */
-        components?: import("@formio/core").Component[] | undefined;
-        /**
-         * - Disabled components for this form.
-         */
-        disabled?: {
-            [key: string]: boolean;
-        } | undefined;
-        /**
-         * - Show hidden fields.
-         */
-        showHiddenFields?: boolean | undefined;
-        /**
-         * - Hidden components for this form.
-         */
-        hide?: {
-            [key: string]: boolean;
-        } | undefined;
-        /**
-         * - Components to show for this form.
-         */
-        show?: {
-            [key: string]: boolean;
-        } | undefined;
-        /**
-         * - The Formio instance for this form.
-         */
-        formio?: any;
-        /**
-         * - The decimal separator for this form.
-         */
-        decimalSeparator?: string | undefined;
-        /**
-         * - The thousands separator for this form.
-         */
-        thousandsSeparator?: string | undefined;
-        /**
-         * - The hooks for this form.
-         */
-        hooks?: {
-            /**
-             * - Called before a submission is made.
-             */
-            beforeSubmit?: Function | undefined;
-            /**
-             * - Called before a cancel is made.
-             */
-            beforeCancel?: Function | undefined;
-            /**
-             * - Called before the next page is navigated to.
-             */
-            beforeNext?: Function | undefined;
-            /**
-             * - Called before the previous page is navigated to.
-             */
-            beforePrev?: Function | undefined;
-            /**
-             * - Called when a component is attached.
-             */
-            attachComponent?: Function | undefined;
-            /**
-             * - Called when a data value is set.
-             */
-            setDataValue?: Function | undefined;
-            /**
-             * - Called when components are added.
-             */
-            addComponents?: Function | undefined;
-            /**
-             * - Called when a component is added.
-             */
-            addComponent?: Function | undefined;
-            /**
-             * - Called when a custom validation is made.
-             */
-            customValidation?: Function | undefined;
-            /**
-             * - Called when a webform is attached.
-             */
-            attachWebform?: Function | undefined;
-        } | undefined;
-        /**
-         * - Always be dirty.
-         */
-        alwaysDirty?: boolean | undefined;
-        /**
-         * - Skip restoring a draft.
-         */
-        skipDraftRestore?: boolean | undefined;
-        /**
-         * - The display for this form.
-         */
-        display?: "form" | "pdf" | "wizard" | undefined;
-        /**
-         * - The CDN url for this form.
-         */
-        cdnUrl?: string | undefined;
-        /**
-         * - Flatten the form.
-         */
-        flatten?: boolean | undefined;
-        /**
-         * - Sanitize the form.
-         */
-        sanitize?: boolean | undefined;
-        /**
-         * - The sanitize configuration for this form.
-         */
-        sanitizeConfig?: {
-            /**
-             * - The html attributes to allow with sanitization.
-             */
-            addAttr?: string[] | undefined;
-            /**
-             * - The html tags to allow with sanitization.
-             */
-            addTags?: string[] | undefined;
-            /**
-             * - The html attributes to allow with sanitization.
-             */
-            allowedAttrs?: string[] | undefined;
-            /**
-             * - The html tags to allow with sanitization.
-             */
-            allowedTags?: string[] | undefined;
-            /**
-             * - The regex for allowed URIs.
-             */
-            allowedUriRegex?: string[] | undefined;
-            /**
-             * - The URI attributes to allow with sanitization.
-             */
-            addUriSafeAttr?: string[] | undefined;
-        } | undefined;
-        /**
-         * - The button settings for this form.
-         */
-        buttonSettings?: {
-            /**
-             * - Show the previous button in wizard forms.
-             */
-            showPrevious?: boolean | undefined;
-            /**
-             * - Show the next button in wizard forms.
-             */
-            showNext?: boolean | undefined;
-            /**
-             * - Show the cancel button in wizard forms.
-             */
-            showCancel?: boolean | undefined;
-            /**
-             * - Show the submit button in wizard forms.
-             */
-            showSubmit?: boolean | undefined;
-        } | undefined;
-        /**
-         * - The breadcrumb settings for this form.
-         */
-        breadcrumbSettings?: object | undefined;
-        /**
-         * - Allow the previous button (for Wizard forms).
-         */
-        allowPrevious?: boolean | undefined;
-        /**
-         * - The order of the buttons (for Wizard forms).
-         */
-        wizardButtonOrder?: string[] | undefined;
-        /**
-         * - Show the checkbox background.
-         */
-        showCheckboxBackground?: boolean | undefined;
-        /**
-         * - The zoom for PDF forms.
-         */
-        zoom?: number | undefined;
-    };
+    constructor(...args: any[]);
     ready: Promise<any>;
     readyResolve: (value: any) => void;
     readyReject: (reason?: any) => void;
     instance: any;
     element: any;
+    options: any;
     display: string;
     createElement(tag: any, attrs: any, children: any): any;
     set loading(load: any);
     loader: any;
     /**
      * Create a new form instance provided the display of the form.
+     *
      * @param {string} display - The display of the form, either "wizard", "form", or "pdf"
-     * @returns {Webform|Wizard|PDF} - The new form instance for the display.
+     * @return {*}
      */
-    create(display: string): Webform | Wizard | PDF;
+    create(display: string): any;
     /**
      * 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.
-     * @returns {void}
+     * @return {*}
      */
     set form(formParam: object);
     /**
      * Returns the loaded forms JSON.
-     * @returns {object} - The loaded form's JSON
+     *
+     * @return {object} - The loaded form's JSON
      */
     get form(): object;
     errorForm(err: any): {
@@ -390,40 +63,38 @@ export default class Form extends Element {
         }[];
     };
     /**
-     * Check Subdirectories path and provide correct options
-     * @param {string} url - The the URL of the form json.
-     * @param {import('@formio/core').Form} form - The form json.
-     * @returns {object} The initial options with base and project.
-     */
-    getFormInitOptions(url: string, form: import('@formio/core').Form): object;
-    /**
-     * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
-     * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
-     */
-    setForm(formParam: import('@formio/core').Form): Promise<Webform | Wizard | PDF>;
+    * Check Subdirectories path and provide correct options
+    *
+    * @param {string} url - The the URL of the form json.
+    * @param {form} object - The form json.
+    * @return {object} The initial options with base and project.
+    */
+    getFormInitOptions(url: string, form: any): object;
+    setForm(formParam: any): any;
     _form: any;
     getSubmission(formio: any, opts: any): any;
     /**
      * Changes the display of the form.
+     *
      * @param {string} display - The display to set this form. Either "wizard", "form", or "pdf"
-     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created after changing the display.
+     * @return {Promise<T>}
      */
-    setDisplay(display: string): Promise<Webform | Wizard | PDF>;
+    setDisplay(display: string): Promise<T>;
     empty(): void;
     /**
      * Sanitize an html string.
-     * @param {string} dirty - The dirty html string to sanitize.
-     * @param {boolean} forceSanitize - If the string should be force sanitized.
-     * @returns {string} - The sanitized html string.
+     *
+     * @param string
+     * @returns {*}
      */
-    sanitize(dirty: string, forceSanitize: boolean): string;
+    sanitize(dirty: any, forceSanitize: any): any;
     setContent(element: any, content: any, forceSanitize: any): boolean;
     /**
      * Build a new form.
-     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.
+     *
+     * @return {Promise<T>}
      */
-    build(): Promise<Webform | Wizard | PDF>;
+    build(): Promise<T>;
     render(): Promise<any>;
     attach(element: any): any;
 }

package/lib/cjs/Form.js

@@ -32,22 +32,28 @@ const displays_1 = __importDefault(require("./displays"));
 const templates_1 = __importDefault(require("./templates"));
 const FormioUtils = __importStar(require("./utils/utils"));
 class Form extends Element_1.default {
-    constructor(elementOrForm, formOrOptions, options = {}) {
-        let element, form, formOptions;
-        if (elementOrForm instanceof HTMLElement) {
-            element = elementOrForm;
-            form = formOrOptions;
-            formOptions = options;
-        }
-        else {
-            element = null;
-            form = elementOrForm;
-            formOptions = formOrOptions || {};
-        }
+    /**
+     * 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 '@formio/js/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) {
-            formOptions = Object.assign(formOptions, Formio_1.Formio.options.form);
+            options = Object.assign(options, Formio_1.Formio.options.form);
         }
-        super(formOptions);
+        super(options);
         if (this.options.useSessionToken) {
             Formio_1.Formio.useSessionToken(this.options);
         }
@@ -56,22 +62,30 @@ class Form extends Element_1.default {
             this.readyReject = reject;
         });
         this.instance = null;
-        if (element) {
+        if (args[0] instanceof HTMLElement) {
             if (this.element) {
                 delete this.element.component;
             }
-            this.element = element;
+            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 {
+        else if (args[0]) {
             this.element = null;
-        }
-        if (form) {
-            this.setForm(form)
+            this.options = args[1] || {};
+            this.options.events = this.events;
+            this.setForm(args[0])
                 .then(() => this.readyResolve(this.instance))
                 .catch(this.readyReject);
         }
-        this.options = formOptions;
-        this.options.events = this.events;
+        else {
+            this.element = null;
+            this.options = {};
+            this.options.events = this.events;
+        }
         this.display = '';
     }
     createElement(tag, attrs, children) {
@@ -119,8 +133,9 @@ class Form extends Element_1.default {
     }
     /**
      * Create a new form instance provided the display of the form.
+     *
      * @param {string} display - The display of the form, either "wizard", "form", or "pdf"
-     * @returns {Webform|Wizard|PDF} - The new form instance for the display.
+     * @return {*}
      */
     create(display) {
         if (this.options && (this.options.flatten || this.options.renderMode === 'flat')) {
@@ -137,8 +152,9 @@ class Form extends Element_1.default {
     }
     /**
      * 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.
-     * @returns {void}
+     * @return {*}
      */
     set form(formParam) {
         this.setForm(formParam);
@@ -165,11 +181,12 @@ class Form extends Element_1.default {
         };
     }
     /**
-     * Check Subdirectories path and provide correct options
-     * @param {string} url - The the URL of the form json.
-     * @param {import('@formio/core').Form} form - The form json.
-     * @returns {object} The initial options with base and project.
-     */
+    * Check Subdirectories path and provide correct options
+    *
+    * @param {string} url - The the URL of the form json.
+    * @param {form} object - The form json.
+    * @return {object} The initial options with base and project.
+    */
     getFormInitOptions(url, form) {
         const options = {};
         const index = url.indexOf(form === null || form === void 0 ? void 0 : form.path);
@@ -193,11 +210,6 @@ class Form extends Element_1.default {
         }
         return {};
     }
-    /**
-     * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
-     * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
-     */
     setForm(formParam) {
         let result;
         formParam = formParam || this.form;
@@ -258,15 +270,17 @@ class Form extends Element_1.default {
     }
     /**
      * Returns the loaded forms JSON.
-     * @returns {object} - The loaded form's 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"
-     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created after changing the display.
+     * @return {Promise<T>}
      */
     setDisplay(display) {
         if ((this.display === display) && this.instance) {
@@ -307,9 +321,9 @@ class Form extends Element_1.default {
     }
     /**
      * Sanitize an html string.
-     * @param {string} dirty - The dirty html string to sanitize.
-     * @param {boolean} forceSanitize - If the string should be force sanitized.
-     * @returns {string} - The sanitized html string.
+     *
+     * @param string
+     * @returns {*}
      */
     sanitize(dirty, forceSanitize) {
         // If Sanitize is turned off
@@ -327,7 +341,8 @@ class Form extends Element_1.default {
     }
     /**
      * Build a new form.
-     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.
+     *
+     * @return {Promise<T>}
      */
     build() {
         if (!this.instance) {
@@ -383,16 +398,15 @@ exports.default = Form;
 // Allow simple embedding.
 Formio_1.Formio.embedForm = (embed) => Form.embed(embed);
 /**
- * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.
- * @param {object} elementOrForm - The DOM element you wish to render this form within, or the form definition.
- * @param {object | string | FormOptions} formOrOptions - A Form JSON schema, the URL of a hosted form, or the form options.
- * @param {FormOptions} [options] - The options to create a new form instance.
- * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.
- * @example
- * import { Formio } from '@formio/js';
- * Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
+ * 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 = (elementOrForm, formOrOptions, options) => {
-    return (new Form(elementOrForm, formOrOptions, options)).ready;
+Formio_1.Formio.createForm = (...args) => {
+    return (new Form(...args)).ready;
 };
 Formio_1.Formio.Form = Form;