@formio/js 5.0.0-dev.5613.77144cc → 5.0.0-dev.5614.b5c93f3

package/lib/mjs/Element.js

@@ -41,21 +41,18 @@ export default class Element {
         this.options.i18next = this.i18next = this.options.i18next || I18n.init(this.options.i18n);
         /**
          * An instance of the EventEmitter class to handle the emitting and registration of events.
-         *
          * @type {EventEmitter}
          */
         this.events = (options && options.events) ? options.events : new EventEmitter();
         this.defaultMask = null;
         /**
          * Conditional to show or hide helplinks in editForm
-         *
          * @type {*|boolean}
          */
         this.helplinks = (this.options.helplinks === 'false') ? false : (this.options.helplinks || 'https://help.form.io');
     }
     /**
      * Register for a new event within this component.
-     *
      * @example
      * let component = new BaseComponent({
      *   type: 'textfield',
@@ -65,12 +62,11 @@ export default class Element {
      * component.on('componentChange', (changed) => {
      *   console.log('this element is changed.');
      * });
-     *
-     *
      * @param {string} event - The event you wish to register the handler for.
-     * @param {function} cb - The callback handler to handle this event.
+     * @param {Function} cb - The callback handler to handle this event.
      * @param {boolean} [internal] - This is an internal event handler.
      * @param {boolean} [once] - This event should only fire once.
+     * @returns {EventEmitter | void} - The event emitter instance.
      */
     on(event, cb, internal, once = false) {
         if (!this.events) {
@@ -86,18 +82,18 @@ export default class Element {
     }
     /**
      * Register for a new single-fire event within this component.
-     *
      * @param {string} event - The event you wish to register the handler for.
-     * @param {function} cb - The callback handler to handle this event.
+     * @param {Function} cb - The callback handler to handle this event.
+     * @param {boolean} internal - This is an internal event handler.
+     * @returns {EventEmitter} - The event emitter instance.
      */
     once(event, cb, internal) {
         return this.on(event, cb, internal, true);
     }
     /**
      * Allow catching any event.
-     *
-     * @param cb
-     * @returns {this}
+     * @param {Function} cb - The callback handler to handle this event.
+     * @returns {EventEmitter | void} - The event emitter instance.
      */
     onAny(cb) {
         if (!this.events) {
@@ -107,9 +103,8 @@ export default class Element {
     }
     /**
      * Removes the listener that will be fired when any event is emitted.
-     *
-     * @param cb
-     * @returns {this}
+     * @param {Function} cb - The callback handler to handle this event.
+     * @returns {EventEmitter | void} - The event emitter instance.
      */
     offAny(cb) {
         if (!this.events) {
@@ -119,9 +114,8 @@ export default class Element {
     }
     /**
      * Removes a listener for a certain event. Not passing the 2nd arg will remove all listeners for that event.
-     *
      * @param {string} event - The event you wish to register the handler for.
-     * @param {function|undefined} cb - The callback handler to handle this event.
+     * @param {Function | undefined} cb - The callback handler to handle this event.
      */
     off(event, cb) {
         if (!this.events) {
@@ -142,9 +136,8 @@ export default class Element {
     }
     /**
      * Emit a new event.
-     *
      * @param {string} event - The event to emit.
-     * @param {Object} data - The data to emit with the handler.
+     * @param {object} data - The data to emit with the handler.
      */
     emit(event, ...data) {
         if (this.events) {
@@ -153,9 +146,8 @@ export default class Element {
     }
     /**
      * Check if the component has an event handler set up for the event.
-     *
      * @param {string} event - The event name.
-     * @returns {boolean}
+     * @returns {boolean} - TRUE if the event is registered, FALSE otherwise.
      */
     hasEventHandler(event) {
         if (!this.events) {
@@ -171,15 +163,12 @@ export default class Element {
     }
     /**
      * Wrapper method to add an event listener to an HTML element.
-     *
-     * @param obj
-     *   The DOM element to add the event to.
-     * @param type
-     *   The event name to add.
-     * @param func
-     *   The callback function to be executed when the listener is triggered.
-     * @param persistent
-     *   If this listener should persist beyond "destroy" commands.
+     * @param {HtmlElement} obj - The DOM element to add the event to.
+     * @param {string} type - The event name to add.
+     * @param {Function} func - The callback function to be executed when the listener is triggered.
+     * @param {boolean} persistent - If this listener should persist beyond "destroy" commands.
+     * @param {boolean} capture - If this listener should be executed in the capture phase.
+     * @returns {void | this} - The instance of the element.
      */
     addEventListener(obj, type, func, persistent, capture) {
         if (!obj) {
@@ -198,9 +187,10 @@ export default class Element {
     }
     /**
      * Remove an event listener from the object.
-     *
-     * @param obj
-     * @param type
+     * @param {HTMLElement} obj - The DOM element to remove the event from.
+     * @param {string} type - The event name to remove.
+     * @param {Function} func - The callback function to remove.
+     * @returns {this | void} - The instance of the element.
      */
     removeEventListener(obj, type, func = null) {
         const indexes = [];
@@ -230,35 +220,27 @@ export default class Element {
         this.eventHandlers = [];
     }
     removeAllEvents(includeExternal) {
-        if (this.events) {
-            _.each(this.events._events, (events, type) => {
-                _.each(events, (listener) => {
-                    if (listener && (this.id === listener.id) && (includeExternal || listener.internal)) {
-                        this.events.off(type, listener);
-                    }
-                });
+        _.each(this.events._events, (events, type) => {
+            _.each(events, (listener) => {
+                if (listener && (this.id === listener.id) && (includeExternal || listener.internal)) {
+                    this.events.off(type, listener);
+                }
             });
-        }
-    }
-    teardown() {
-        delete this.i18next;
-        delete this.events;
+        });
     }
     /**
      * Removes all event listeners attached to this component.
+     * @param {boolean} all - If all events should be removed, including external events.
      */
-    destroy(all = false) {
+    destroy() {
         this.removeEventListeners();
         this.removeAllEvents();
-        if (all) {
-            this.teardown();
-        }
     }
     /**
      * Append an HTML DOM element to a container.
-     *
-     * @param element
-     * @param container
+     * @param {HTMLElement} element - The DOM element to append.
+     * @param {HTMLElement} container - The DOM element that is the container of the element getting appended.
+     * @returns {this} - The instance of the element.
      */
     appendTo(element, container) {
         container?.appendChild(element);
@@ -266,9 +248,9 @@ export default class Element {
     }
     /**
      * Prepend an HTML DOM element to a container.
-     *
      * @param {HTMLElement} element - The DOM element to prepend.
      * @param {HTMLElement} container - The DOM element that is the container of the element getting prepended.
+     * @returns {this} - The instance of the element.
      */
     prependTo(element, container) {
         if (container) {
@@ -289,9 +271,9 @@ export default class Element {
     }
     /**
      * Removes an HTML DOM element from its bounding container.
-     *
      * @param {HTMLElement} element - The element to remove.
      * @param {HTMLElement} container - The DOM element that is the container of the element to remove.
+     * @returns {this} - The instance of the element.
      */
     removeChildFrom(element, container) {
         if (container && container.contains(element)) {
@@ -306,12 +288,10 @@ export default class Element {
     }
     /**
      * Alias for document.createElement.
-     *
      * @param {string} type - The type of element to create
-     * @param {Object} attr - The element attributes to add to the created element.
+     * @param {object} attr - The element attributes to add to the created element.
      * @param {Various} children - Child elements. Can be a DOM Element, string or array of both.
-     *
-     * @return {HTMLElement} - The created element.
+     * @returns {HTMLElement} - The created element.
      */
     ce(type, attr, children = null) {
         // console.warn('Call to deprecated this.ce(). Dom elements should be created with templates, not manually with ce.');
@@ -327,8 +307,9 @@ export default class Element {
     }
     /**
      * Append different types of children.
-     *
-     * @param child
+     * @param {HTMLElement} element - The element to append to.
+     * @param {HTMLElement} child - The child element to append.
+     * @returns {this} - The instance of the element.
      */
     appendChild(element, child) {
         if (Array.isArray(child)) {
@@ -350,15 +331,18 @@ export default class Element {
     maskPlaceholder(mask) {
         return mask.map((char) => (char instanceof RegExp) ? this.placeholderChar : char).join('');
     }
+    /**
+     * Get the placeholder character for the input mask.
+     * @returns {string} - The placeholder character.
+     */
     get placeholderChar() {
         return this.component?.inputMaskPlaceholderChar || '_';
     }
     /**
      * Sets the input mask for an input.
-     *
      * @param {HTMLElement} input - The html input to apply the mask to.
-     * @param {String} inputMask - The input mask to add to this input.
-     * @param {Boolean} usePlaceholder - Set the mask placeholder on the input.
+     * @param {string} inputMask - The input mask to add to this input.
+     * @param {boolean} usePlaceholder - Set the mask placeholder on the input.
      */
     setInputMask(input, inputMask, usePlaceholder) {
         if (input && inputMask) {
@@ -391,17 +375,17 @@ export default class Element {
     }
     /**
      * Translate a text using the i18n system.
-     *
      * @param {string|Array<string>} text - The i18n identifier.
-     * @param {Object} params - The i18n parameters to use for translation.
+     * @param {...any} args - The arguments to pass to the i18n translation.
+     * @returns {string} - The translated text.
      */
     t(text, ...args) {
-        return this.i18next ? this.i18next.t(text, ...args) : text;
+        return this.i18next.t(text, ...args);
     }
     /**
      * Alias to create a text node.
-     * @param text
-     * @returns {Text}
+     * @param {string} text - The text to create.
+     * @returns {HtmlElement} - The created text node.
      */
     text(text) {
         return document.createTextNode(this.t(text));
@@ -409,7 +393,7 @@ export default class Element {
     /**
      * Adds an object of attributes onto an element.
      * @param {HtmlElement} element - The element to add the attributes to.
-     * @param {Object} attr - The attributes to add to the input element.
+     * @param {object} attr - The attributes to add to the input element.
      */
     attr(element, attr) {
         if (!element) {
@@ -432,6 +416,9 @@ export default class Element {
      * Determines if an element has a class.
      *
      * Taken from jQuery https://j11y.io/jquery/#v=1.5.0&fn=jQuery.fn.hasClass
+     * @param {HTMLElement} element - The element to check for the class.
+     * @param {string} className - The class to check for.
+     * @returns {boolean} - TRUE if the element has the class, FALSE otherwise.
      */
     hasClass(element, className) {
         if (!element) {
@@ -443,11 +430,9 @@ export default class Element {
     }
     /**
      * Adds a class to a DOM element.
-     *
-     * @param element
-     *   The element to add a class to.
-     * @param className
-     *   The name of the class to add.
+     * @param {HTMLElement} element - The element to add a class to.
+     * @param {string} className - The name of the class to add.
+     * @returns {this} - The instance of the element.
      */
     addClass(element, className) {
         if (!element || !(element instanceof HTMLElement)) {
@@ -462,11 +447,9 @@ export default class Element {
     }
     /**
      * Remove a class from a DOM element.
-     *
-     * @param element
-     *   The DOM element to remove the class from.
-     * @param className
-     *   The name of the class that is to be removed.
+     * @param {HTMLElement} element - The DOM element to remove the class from.
+     * @param {string} className - The name of the class that is to be removed.
+     * @returns {this} - The instance of the element.
      */
     removeClass(element, className) {
         if (!element || !className || !(element instanceof HTMLElement)) {
@@ -482,7 +465,6 @@ export default class Element {
     }
     /**
      * Empty's an HTML DOM element.
-     *
      * @param {HTMLElement} element - The element you wish to empty.
      */
     empty(element) {
@@ -494,9 +476,8 @@ export default class Element {
     }
     /**
      * Create an evaluation context for all script executions and interpolations.
-     *
-     * @param additional
-     * @return {*}
+     * @param {object} additional - Additional context to apply to the evaluation context.
+     * @returns {*} - The evaluation context.
      */
     evalContext(additional) {
         return Object.assign({
@@ -520,10 +501,10 @@ export default class Element {
     }
     /**
      * Performs an interpolation using the evaluation context of this component.
-     *
-     * @param string
-     * @param data
-     * @return {XML|string|*|void}
+     * @param {string} string - The string to interpolate.
+     * @param {object} data - The data to use in the interpolation.
+     * @param {object} options - The options to pass to the interpolation.
+     * @returns {XML|string|*|void} - The interpolated string.
      */
     interpolate(string, data, options = {}) {
         if (typeof string !== 'function' && (this.component.content || this.component.html)
@@ -539,19 +520,19 @@ export default class Element {
     }
     /**
      * Performs an evaluation using the evaluation context of this component.
-     *
-     * @param func
-     * @param args
-     * @param ret
-     * @param tokenize
-     * @return {*}
+     * @param {string|Function|object} func - The function or string to evaluate.
+     * @param {object} args - The arguments to pass to the evaluation.
+     * @param {string} ret - The name of the variable within the evaluation context to return.
+     * @param {boolean} interpolate - Determines if it should replace all {{ }} token references with actual data.
+     * @param {import('@formio/core').EvaluatorOptions} options - The options to pass to the evaluation.
+     * @returns {*} - The result of the evaluation.
      */
-    evaluate(func, args, ret, tokenize) {
-        return FormioUtils.evaluate(func, this.evalContext(args), ret, tokenize);
+    evaluate(func, args, ret, interpolate, options = {}) {
+        return FormioUtils.evaluate(func, this.evalContext(args), ret, interpolate, options);
     }
     /**
      * Allow for options to hook into the functionality of this renderer.
-     * @return {*}
+     * @returns {*} - The result of the hook function.
      */
     hook() {
         const name = arguments[0];

package/lib/mjs/Embed.d.ts

@@ -26,7 +26,7 @@ export class Formio {
     static addStyles(wrapper: any, href: any): Promise<void>;
     static submitDone(instance: any, submission: any): Promise<void>;
     static formioScript(script: any, builder: any): any;
-    static addLibrary(wrapper: any, lib: any, name: any): Promise<void>;
+    static addLibrary(libWrapper: any, lib: any, name: any): Promise<void>;
     static addLoader(wrapper: any): Promise<void>;
     static init(element: any, options?: {}, builder?: boolean): Promise<any>;
     static afterCreate(instance: any, wrapper: any, readyEvent: any): Promise<any>;

package/lib/mjs/Embed.js

@@ -79,6 +79,9 @@ export class Formio {
     }
     static createElement(type, attrs, children) {
         const element = document.createElement(type);
+        if (!attrs) {
+            return element;
+        }
         Object.keys(attrs).forEach(key => {
             element.setAttribute(key, attrs[key]);
         });
@@ -138,6 +141,9 @@ export class Formio {
     }
     static async submitDone(instance, submission) {
         Formio.debug('Submision Complete', submission);
+        if (Formio.config.submitDone) {
+            Formio.config.submitDone(submission, instance);
+        }
         const successMessage = (Formio.config.success || '').toString();
         if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {
             instance.element.innerHTML = `<div class="alert-success" role="alert">${successMessage}</div>`;
@@ -177,20 +183,21 @@ export class Formio {
         }
         return script;
     }
-    static async addLibrary(wrapper, lib, name) {
+    static async addLibrary(libWrapper, lib, name) {
         if (!lib) {
             return;
         }
         if (lib.dependencies) {
             for (let i = 0; i < lib.dependencies.length; i++) {
-                await Formio.addLibrary(wrapper, Formio.cdn.libs[lib.dependencies[i]]);
+                const libName = lib.dependencies[i];
+                await Formio.addLibrary(libWrapper, Formio.config.libs[libName], libName);
             }
         }
         if (lib.css) {
-            await Formio.addStyles(wrapper, lib.css);
+            await Formio.addStyles((lib.global ? document.body : libWrapper), lib.css);
         }
         if (lib.js) {
-            const module = await Formio.addScript(wrapper, lib.js, lib.use ? name : false);
+            const module = await Formio.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);
             if (lib.use) {
                 Formio.debug(`Using ${name}`);
                 const options = lib.options || {};
@@ -200,6 +207,12 @@ export class Formio {
                 Formio.use((typeof lib.use === 'function' ? lib.use(module) : module), options);
             }
         }
+        if (lib.globalStyle) {
+            const style = Formio.createElement('style');
+            style.type = 'text/css';
+            style.innerHTML = lib.globalStyle;
+            document.body.appendChild(style);
+        }
     }
     static async addLoader(wrapper) {
         wrapper.appendChild(Formio.createElement('div', {
@@ -228,7 +241,16 @@ export class Formio {
                 use: true
             },
             fontawesome: {
-                css: `${Formio.cdn['font-awesome']}/css/font-awesome.min.css`
+                // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
+                // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.
+                css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,
+                globalStyle: `@font-face {
+                    font-family: 'FontAwesome';
+                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
+                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+                    font-weight: normal;
+                    font-style: normal;
+                  }`
             },
             bootstrap4: {
                 dependencies: ['fontawesome'],
@@ -239,9 +261,24 @@ export class Formio {
                 css: `${Formio.cdn.bootstrap}/css/bootstrap.min.css`
             },
             'bootstrap-icons': {
-                css: `${Formio.cdn['bootstrap-icons']}/css/bootstrap-icons.css`
+                // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
+                // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.
+                css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',
+                globalStyle: `@font-face {
+                    font-display: block;
+                    font-family: "bootstrap-icons";
+                    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),
+                         url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
+                }`
             }
         };
+        // Add all bootswatch templates.
+        ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {
+            Formio.config.libs[template] = {
+                dependencies: ['bootstrap-icons'],
+                css: `${Formio.cdn.bootswatch}/dist/${template}/bootstrap.min.css`
+            };
+        });
         const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
         // Create a new wrapper and add the element inside of a new wrapper.
         let wrapper = Formio.createElement('div', {
@@ -249,7 +286,7 @@ export class Formio {
         });
         element.parentNode.insertBefore(wrapper, element);
         // If we include the libraries, then we will attempt to run this in shadow dom.
-        const useShadowDom = Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function');
+        const useShadowDom = Formio.config.includeLibs && !Formio.config.noshadow && (typeof wrapper.attachShadow === 'function');
         if (useShadowDom) {
             wrapper = wrapper.attachShadow({
                 mode: 'open'
@@ -285,14 +322,17 @@ export class Formio {
         if (Formio.config.template && Formio.config.includeLibs) {
             await Formio.addLibrary(libWrapper, Formio.config.libs[Formio.config.template], Formio.config.template);
         }
-        // Add the premium modules.
+        if (!Formio.config.libraries) {
+            Formio.config.libraries = Formio.config.modules || {};
+        }
+        // Adding premium if it is provided via the config.
         if (Formio.config.premium) {
-            Formio.config.modules.premium = Formio.config.premium;
+            Formio.config.libraries.premium = Formio.config.premium;
         }
         // Allow adding dynamic modules.
-        if (Formio.config.modules) {
-            for (const name in Formio.config.modules) {
-                const lib = Formio.config.modules[name];
+        if (Formio.config.libraries) {
+            for (const name in Formio.config.libraries) {
+                const lib = Formio.config.libraries[name];
                 lib.use = lib.use || true;
                 await Formio.addLibrary(libWrapper, lib, name);
             }