@formio/js 5.0.0-dev.5614.ea3660d → 5.0.0-dev.5620.dedc19b

package/dist/formio.utils.min.js.LICENSE.txt

@@ -12,6 +12,8 @@
 
 /*! @license DOMPurify 3.1.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.0/LICENSE */
 
+/*! @license DOMPurify 3.1.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.4/LICENSE */
+
 /*! formiojs v5.0.0-rc.43 | https://unpkg.com/formiojs@5.0.0-rc.43/LICENSE.txt */
 
 /**

package/lib/cjs/Element.d.ts

@@ -117,10 +117,11 @@ export default class Element {
     removeEventListener(obj: any, type: any, func?: null): this | undefined;
     removeEventListeners(): void;
     removeAllEvents(includeExternal: any): void;
+    teardown(): void;
     /**
      * Removes all event listeners attached to this component.
      */
-    destroy(): void;
+    destroy(all?: boolean): void;
     /**
      * Append an HTML DOM element to a container.
      *

package/lib/cjs/Element.js

@@ -259,20 +259,29 @@ class Element {
         this.eventHandlers = [];
     }
     removeAllEvents(includeExternal) {
-        lodash_1.default.each(this.events._events, (events, type) => {
-            lodash_1.default.each(events, (listener) => {
-                if (listener && (this.id === listener.id) && (includeExternal || listener.internal)) {
-                    this.events.off(type, listener);
-                }
+        if (this.events) {
+            lodash_1.default.each(this.events._events, (events, type) => {
+                lodash_1.default.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.
      */
-    destroy() {
+    destroy(all = false) {
         this.removeEventListeners();
         this.removeAllEvents();
+        if (all) {
+            this.teardown();
+        }
     }
     /**
      * Append an HTML DOM element to a container.
@@ -417,7 +426,7 @@ class Element {
      * @param {Object} params - The i18n parameters to use for translation.
      */
     t(text, ...args) {
-        return this.i18next.t(text, ...args);
+        return this.i18next ? this.i18next.t(text, ...args) : text;
     }
     /**
      * Alias to create a text node.

package/lib/cjs/Form.js

@@ -63,6 +63,9 @@ class Form extends Element_1.default {
         });
         this.instance = null;
         if (args[0] instanceof HTMLElement) {
+            if (this.element) {
+                delete this.element.component;
+            }
             this.element = args[0];
             this.options = args[2] || {};
             this.options.events = this.events;
@@ -154,7 +157,7 @@ class Form extends Element_1.default {
      * @return {*}
      */
     set form(formParam) {
-        return this.setForm(formParam);
+        this.setForm(formParam);
     }
     errorForm(err) {
         return {
@@ -252,6 +255,9 @@ class Form extends Element_1.default {
         }
         // A redraw has occurred so save off the new element in case of a setDisplay causing a rebuild.
         return result.then(() => {
+            if (this.element) {
+                delete this.element.component;
+            }
             this.element = this.instance.element;
             return this.instance;
         });
@@ -372,6 +378,9 @@ class Form extends Element_1.default {
         if (!this.instance) {
             return Promise.reject('Form not ready. Use form.ready promise');
         }
+        if (this.element) {
+            delete this.element.component;
+        }
         this.element = element;
         return this.instance.attach(this.element)
             .then((param) => {
@@ -379,6 +388,11 @@ class Form extends Element_1.default {
             return param;
         });
     }
+    teardown() {
+        super.teardown();
+        delete this.instance;
+        delete this.ready;
+    }
 }
 exports.default = Form;
 // Allow simple embedding.

package/lib/cjs/PDF.js

@@ -62,8 +62,15 @@ class PDF extends Webform_1.default {
         this.postMessage({ name: 'redraw' });
         return this.builderMode ? Promise.resolve() : super.redraw();
     }
+    destroy(all = false) {
+        if (this.iframeElement) {
+            delete this.iframeElement.formioComponent;
+            this.iframeElement.formioComponent = null;
+        }
+        super.destroy(all);
+    }
     rebuild() {
-        if (this.builderMode && this.component.components) {
+        if (this.attached && this.builderMode && this.component.components) {
             this.destroyComponents();
             this.addComponents();
             return Promise.resolve();

package/lib/cjs/PDFBuilder.js

@@ -257,9 +257,9 @@ class PDFBuilder extends WebformBuilder_1.default {
         });
         return this.webform;
     }
-    destroy(deleteFromGlobal) {
-        super.destroy(deleteFromGlobal);
-        this.webform.destroy(deleteFromGlobal);
+    destroy(all = false) {
+        super.destroy(all);
+        this.webform.destroy(all);
     }
     // d8b 8888888888                                                                              888
     // Y8P 888                                                                                     888

package/lib/cjs/Webform.d.ts

@@ -382,7 +382,6 @@ declare class Webform extends NestedDataComponent {
      */
     init(): Promise<any>;
     executeFormController(): false | undefined;
-    destroy(deleteFromGlobal?: boolean): void;
     build(element: any): Promise<any>;
     getClassName(): string;
     render(): any;

package/lib/cjs/Webform.js

@@ -170,7 +170,7 @@ class Webform extends NestedDataComponent_1.default {
                 }
             });
         };
-        this.element = element;
+        this.setElement(element);
         // Keep track of all available forms globally.
         Formio_1.Formio.forms[this.id] = this;
         // Set the base url.
@@ -359,10 +359,12 @@ class Webform extends NestedDataComponent_1.default {
      * @return {*}
      */
     addLanguage(code, lang, active = false) {
-        var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);
-        this.i18next.addResourceBundle(code, 'translation', translations, true, true);
-        if (active) {
-            this.language = code;
+        if (this.i18next) {
+            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);
+            this.i18next.addResourceBundle(code, 'translation', translations, true, true);
+            if (active) {
+                this.language = code;
+            }
         }
     }
     keyboardCatchableElement(element) {
@@ -909,18 +911,21 @@ class Webform extends NestedDataComponent_1.default {
             });
         });
     }
-    destroy(deleteFromGlobal = false) {
+    teardown() {
+        this.emit('formDelete', this.id);
+        delete Formio_1.Formio.forms[this.id];
+        delete this.executeShortcuts;
+        delete this.triggerSaveDraft;
+        super.teardown();
+    }
+    destroy(all = false) {
         this.off('submitButton');
         this.off('checkValidity');
         this.off('requestUrl');
         this.off('resetForm');
         this.off('deleteSubmission');
         this.off('refreshData');
-        if (deleteFromGlobal) {
-            this.emit('formDelete', this.id);
-            delete Formio_1.Formio.forms[this.id];
-        }
-        return super.destroy();
+        return super.destroy(all);
     }
     build(element) {
         if (element || this.element) {
@@ -954,7 +959,7 @@ class Webform extends NestedDataComponent_1.default {
         return this.attach(this.element);
     }
     attach(element) {
-        this.element = element;
+        this.setElement(element);
         this.loadRefs(element, { webform: 'single' });
         const childPromise = this.attachComponents(this.refs.webform);
         this.addEventListener(document, 'keydown', this.executeShortcuts);

package/lib/cjs/WebformBuilder.d.ts

@@ -118,7 +118,6 @@ export default class WebformBuilder extends Component {
     isParentSaveChildMethod(parentComp: any): boolean;
     getParentElement(element: any): any;
     addBuilderComponentInfo(component: any): any;
-    destroy(deleteFromGlobal: any): void;
     addBuilderGroup(name: any, group: any): void;
     updateBuilderGroup(name: any, group: any): void;
     generateKey(info: any): any;

package/lib/cjs/WebformBuilder.js

@@ -50,7 +50,7 @@ class WebformBuilder extends Component_1.default {
                 this.stopMoving(this.selectedComponent);
             }
         };
-        this.element = element;
+        this.setElement(element);
         this.dragulaLib = dragula_1.default;
         this.builderHeight = 0;
         this.schemas = {};
@@ -1581,11 +1581,11 @@ class WebformBuilder extends Component_1.default {
             this.webform.clear();
         }
     }
-    destroy(deleteFromGlobal) {
+    destroy(all = false) {
         if (this.webform.initialized) {
-            this.webform.destroy(deleteFromGlobal);
+            this.webform.destroy(all);
         }
-        super.destroy(deleteFromGlobal);
+        super.destroy(all);
     }
     addBuilderGroup(name, group) {
         if (!this.groups[name]) {

package/lib/cjs/Wizard.js

@@ -246,7 +246,7 @@ class Wizard extends Webform_1.default {
     }
     attach(element) {
         var _a;
-        this.element = element;
+        this.setElement(element);
         this.loadRefs(element, {
             [this.wizardKey]: 'single',
             [`${this.wizardKey}-header`]: 'single',

package/lib/cjs/addons/FormioAddon.d.ts

@@ -14,5 +14,6 @@ export default class FormioAddon extends Element {
     settings: any;
     attach(element: any): Promise<void>;
     _element: any;
+    destroy(): void;
 }
 import Element from '../Element';

package/lib/cjs/components/_classes/component/Component.d.ts

@@ -335,7 +335,6 @@ declare class Component extends Element {
     createComponentModal(element: any, modalShouldBeOpened: any, currentValue: any): ComponentModal;
     attach(element: any): Promise<void>;
     componentModal: any;
-    element: any;
     restoreFocus(): void;
     addShortcut(element: any, shortcut: any): void;
     removeShortcut(element: any, shortcut: any): void;
@@ -364,6 +363,8 @@ declare class Component extends Element {
      */
     inContext(component: any): boolean;
     get viewOnly(): any;
+    setElement(element: any): void;
+    element: any;
     createViewOnlyElement(): any;
     get defaultViewOnlyValue(): string;
     /**

package/lib/cjs/components/_classes/component/Component.js

@@ -529,10 +529,30 @@ class Component extends Element_1.default {
         }
         return addon;
     }
-    destroy() {
-        super.destroy();
+    teardown() {
+        if (this.element) {
+            delete this.element.component;
+            delete this.element;
+        }
+        delete this._currentForm;
+        delete this.parent;
+        delete this.root;
+        delete this.triggerChange;
+        delete this.triggerRedraw;
+        if (this.options) {
+            delete this.options.root;
+            delete this.options.parent;
+            delete this.options.i18next;
+        }
+        super.teardown();
+    }
+    destroy(all = false) {
+        super.destroy(all);
         this.detach();
         this.addons.forEach((addon) => addon.destroy());
+        if (all) {
+            this.teardown();
+        }
     }
     get shouldDisabled() {
         return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);
@@ -1086,7 +1106,7 @@ class Component extends Element_1.default {
             this.setOpenModalElement(openModalTemplate);
         }
         this.attached = true;
-        this.element = element;
+        this.setElement(element);
         element.component = this;
         // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.
         if (this.element.id) {
@@ -1145,6 +1165,17 @@ class Component extends Element_1.default {
      * Remove all event handlers.
      */
     detach() {
+        // First iterate through each ref and delete the component so there are no dangling component references.
+        lodash_1.default.each(this.refs, (ref) => {
+            if (typeof ref === NodeList) {
+                ref.forEach((elem) => {
+                    delete elem.component;
+                });
+            }
+            else if (ref) {
+                delete ref.component;
+            }
+        });
         this.refs = {};
         this.removeEventListeners();
         this.detachLogic();
@@ -1232,10 +1263,17 @@ class Component extends Element_1.default {
     get viewOnly() {
         return this.options.readOnly && this.options.viewAsHtml;
     }
+    setElement(element) {
+        if (this.element) {
+            delete this.element.component;
+            delete this.element;
+        }
+        this.element = element;
+    }
     createViewOnlyElement() {
-        this.element = this.ce('dl', {
+        this.setElement(this.ce('dl', {
             id: this.id
-        });
+        }));
         if (this.element) {
             // Ensure you can get the component info from the element.
             this.element.component = this;
@@ -1554,7 +1592,7 @@ class Component extends Element_1.default {
         const parent = this.element.parentNode;
         const index = Array.prototype.indexOf.call(parent.children, this.element);
         this.element.outerHTML = this.sanitize(this.render());
-        this.element = parent.children[index];
+        this.setElement(parent.children[index]);
         return this.attach(this.element);
     }
     rebuild() {
@@ -3219,7 +3257,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             }.bind(Component.externalLibraries[name]);
         }
         // See if the plugin already exists.
-        const plugin = lodash_1.default.get(window, property);
+        const plugin = (0, utils_1.getScriptPlugin)(property);
         if (plugin) {
             Component.externalLibraries[name].resolve(plugin);
         }
@@ -3262,7 +3300,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             // if no callback is provided, then check periodically for the script.
             if (polling) {
                 setTimeout(function checkLibrary() {
-                    const plugin = lodash_1.default.get(window, property);
+                    const plugin = (0, utils_1.getScriptPlugin)(property);
                     if (plugin) {
                         Component.externalLibraries[name].resolve(plugin);
                     }

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

@@ -272,8 +272,22 @@ class Input extends Multivalue_1.default {
         widget.on('redraw', () => this.redraw(), true);
         return widget;
     }
+    teardown() {
+        if (this.element && this.element.widget) {
+            this.element.widget.destroy();
+            delete this.element.widget;
+        }
+        if (this.refs && this.refs.input) {
+            for (let i = 0; i <= this.refs.input.length; i++) {
+                const widget = this.getWidget(i);
+                if (widget) {
+                    widget.destroy();
+                }
+            }
+        }
+        super.teardown();
+    }
     detach() {
-        super.detach();
         if (this.refs && this.refs.input) {
             for (let i = 0; i <= this.refs.input.length; i++) {
                 const widget = this.getWidget(i);
@@ -283,6 +297,7 @@ class Input extends Multivalue_1.default {
             }
         }
         this.refs.input = [];
+        super.detach();
     }
 }
 exports.default = Input;

package/lib/cjs/components/_classes/nested/NestedComponent.d.ts

@@ -82,7 +82,7 @@ export default class NestedComponent extends Field {
      * @param {Component} component - The component to remove from the components.
      * @param {Array<Component>} components - An array of components to remove this component from.
      */
-    removeComponent(component: Component, components: Array<Component>): void;
+    removeComponent(component: Component, components: Array<Component>, all?: boolean): void;
     /**
      * Removes a component provided the API key of that component.
      *
@@ -140,7 +140,7 @@ export default class NestedComponent extends Field {
     checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): Promise<any>;
     setPristine(pristine: any): void;
     get isPristine(): any;
-    destroyComponents(): void;
+    destroyComponents(all?: boolean): void;
     get visibleErrors(): any;
     get errors(): any;
     get dataReady(): Promise<any[]>;

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -329,6 +329,7 @@ class NestedComponent extends Field_1.default {
      */
     addComponents(data, options) {
         data = data || this.data;
+        this.components = this.components || [];
         options = options || this.options;
         if (options.components) {
             this.components = options.components;
@@ -440,9 +441,9 @@ class NestedComponent extends Field_1.default {
      * @param {Component} component - The component to remove from the components.
      * @param {Array<Component>} components - An array of components to remove this component from.
      */
-    removeComponent(component, components) {
+    removeComponent(component, components, all = false) {
         components = components || this.components;
-        component.destroy();
+        component.destroy(all);
         lodash_1.default.remove(components, { id: component.id });
         if (this.componentsMap[component.path]) {
             delete this.componentsMap[component.path];
@@ -667,13 +668,13 @@ class NestedComponent extends Field_1.default {
         });
         super.clear();
     }
-    destroy() {
-        this.destroyComponents();
-        super.destroy();
+    destroy(all = false) {
+        this.destroyComponents(all);
+        super.destroy(all);
     }
-    destroyComponents() {
+    destroyComponents(all = false) {
         const components = this.getComponents().slice();
-        components.forEach((comp) => this.removeComponent(comp, this.components));
+        components.forEach((comp) => this.removeComponent(comp, this.components, all));
         this.components = [];
     }
     get visibleErrors() {

package/lib/cjs/components/columns/Columns.js

@@ -151,8 +151,8 @@ class ColumnsComponent extends NestedComponent_1.default {
     detach(all) {
         super.detach(all);
     }
-    destroy() {
-        super.destroy();
+    destroy(all = false) {
+        super.destroy(all);
         this.columns = [];
     }
 }

package/lib/cjs/components/editgrid/EditGrid.d.ts

@@ -52,7 +52,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     renderRow(row: any, rowIndex: any): any;
     eachComponent(fn: any, rowIndex: any): void;
     flattenComponents(rowIndex: any): {};
-    destroyComponents(rowIndex: any): void;
+    destroyComponents(all?: boolean, rowIndex?: number): void;
     createRow(dataObj: any, rowIndex: any): {
         components: any;
         data: any;

package/lib/cjs/components/editgrid/EditGrid.js

@@ -570,20 +570,25 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         return result;
     }
     getComponents(rowIndex) {
+        var _a;
         // Ensure editrows is set.
         this.editRows = this.editRows || [];
         return this.builderMode
             ? super.getComponents()
             : lodash_1.default.isNumber(rowIndex)
-                ? (this.editRows[rowIndex].components || [])
+                ? (((_a = this.editRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.components) || [])
                 : this.editRows.reduce((result, row) => result.concat(row.components || []), []);
     }
-    destroyComponents(rowIndex) {
+    destroy(all = false) {
+        this.calculatedValue = undefined;
+        super.destroy(all);
+    }
+    destroyComponents(all = false, rowIndex = 0) {
         if (this.builderMode) {
-            return super.destroyComponents();
+            return super.destroyComponents(all);
         }
         const components = this.getComponents(rowIndex).slice();
-        components.forEach((comp) => this.removeComponent(comp, this.components));
+        components.forEach((comp) => this.removeComponent(comp, this.components, all));
     }
     createRow(dataObj, rowIndex) {
         const editRow = {
@@ -756,7 +761,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             case EditRowState.New: {
                 editRow.state = EditRowState.Removed;
                 this.clearErrors(rowIndex);
-                this.destroyComponents(rowIndex);
+                this.destroyComponents(false, rowIndex);
                 if (this.inlineEditMode) {
                     this.splice(rowIndex);
                 }
@@ -875,7 +880,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     baseRemoveRow(rowIndex) {
         const editRow = this.editRows[rowIndex];
         editRow.state = EditRowState.Removed;
-        this.destroyComponents(rowIndex);
+        this.destroyComponents(false, rowIndex);
         return editRow;
     }
     removeRow(rowIndex, modified) {
@@ -898,6 +903,15 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         this.redraw();
     }
     createRowComponents(row, rowIndex, recreatePartially) {
+        // Iterate through existing components and destroy the ones with the same rowIndex.
+        if (this.components) {
+            for (let i = 0; i < this.components.length; i++) {
+                if (this.components[i].rowIndex === rowIndex) {
+                    this.components[i].destroy();
+                    this.components.splice(i, 1);
+                }
+            }
+        }
         const currentRowComponents = lodash_1.default.get(this.editRows, `[${rowIndex}].components`, null);
         return this.component.components.map((col, colIndex) => {
             var _a;
@@ -1179,7 +1193,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         });
     }
     emptyRows() {
-        this.editRows.forEach((editRow, index) => this.destroyComponents(index));
+        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));
         this.editRows = [];
     }
     resetValue() {

package/lib/cjs/components/file/File.d.ts

@@ -167,5 +167,6 @@ export default class FileComponent extends Field {
     getFile(fileInfo: any): any;
     focus(): void;
     beforeSubmit(): Promise<void>;
+    destroy(all: any): void;
 }
 import Field from '../_classes/field/Field';

package/lib/cjs/components/file/File.js

@@ -1031,9 +1031,9 @@ class FileComponent extends Field_1.default {
             }
         });
     }
-    destroy() {
+    destroy(all) {
         this.stopVideo();
-        super.destroy();
+        super.destroy(all);
     }
 }
 exports.default = FileComponent;

package/lib/cjs/components/form/Form.js

@@ -332,13 +332,13 @@ class FormComponent extends Component_1.default {
             && lodash_1.default.isNumber(this.formObj._vid)
             && this.formObj._vid !== this.subFormRevision;
     }
-    destroy() {
+    destroy(all = false) {
         if (this.subForm) {
-            this.subForm.destroy();
+            this.subForm.destroy(all);
             this.subForm = null;
             this.subFormReady = null;
         }
-        super.destroy();
+        super.destroy(all);
     }
     redraw() {
         if (this.subForm) {

package/lib/cjs/components/radio/Radio.d.ts

@@ -71,7 +71,7 @@ export default class RadioComponent extends ListComponent {
     detach(element: any): void;
     validateValueProperty(): boolean;
     validateValueAvailability(setting: any, value: any): boolean;
-    getValueAsString(value: any): any;
+    getValueAsString(value: any, options?: {}): any;
     setValueAt(index: any, value: any): void;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     loadItemsFromMetadata(): void;

package/lib/cjs/components/radio/Radio.js

@@ -226,17 +226,19 @@ class RadioComponent extends ListComponent_1.default {
         }
         return false;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (lodash_1.default.isObject(value)) {
             value = JSON.stringify(value);
         }
         else if (!lodash_1.default.isString(value)) {
             value = lodash_1.default.toString(value);
         }
-        if (this.component.dataSrc !== 'values') {
+        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
+        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
             return value;
         }
-        const option = lodash_1.default.find(this.component.values, (v) => v.value === value);
+        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
+        const option = lodash_1.default.find(values, (v) => v.value === value);
         if (!value) {
             return lodash_1.default.get(option, 'label', '');
         }