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

package/lib/cjs/components/recaptcha/editForm/ReCaptcha.edit.display.d.ts

@@ -7,6 +7,9 @@ declare const _default: ({
         label: string;
         value: string;
     }[];
+    validate: {
+        required: boolean;
+    };
     weight: number;
     input?: undefined;
     dataSrc?: undefined;
@@ -28,6 +31,7 @@ declare const _default: ({
         custom(context: any): any[];
     };
     values?: undefined;
+    validate?: undefined;
     ignore?: undefined;
 } | {
     key: string;
@@ -36,6 +40,7 @@ declare const _default: ({
     tooltip?: undefined;
     type?: undefined;
     values?: undefined;
+    validate?: undefined;
     weight?: undefined;
     input?: undefined;
     dataSrc?: undefined;

package/lib/cjs/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -17,6 +17,9 @@ exports.default = [
                 value: 'buttonClick'
             }
         ],
+        validate: {
+            required: true
+        },
         weight: 650
     },
     {

package/lib/cjs/components/select/Select.js

@@ -228,9 +228,10 @@ class SelectComponent extends ListComponent_1.default {
     }
     selectValueAndLabel(data) {
         const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
+        const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;
         return {
             value,
-            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : data, value)
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
         };
     }
     itemTemplate(data, value) {
@@ -811,7 +812,9 @@ class SelectComponent extends ListComponent_1.default {
         }
         const tabIndex = input.tabIndex;
         this.addPlaceholder();
-        input.setAttribute('dir', this.i18next.dir());
+        if (this.i18next) {
+            input.setAttribute('dir', this.i18next.dir());
+        }
         if ((_c = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.containerOuter) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.parentNode) {
             this.choices.destroy();
         }
@@ -1468,6 +1471,10 @@ class SelectComponent extends ListComponent_1.default {
     asString(value, options = {}) {
         var _a;
         value = value !== null && value !== void 0 ? value : this.getValue();
+        if (options.modalPreview && this.selectData) {
+            const { label } = this.selectValueAndLabel(value);
+            return label;
+        }
         //need to convert values to strings to be able to compare values with available options that are strings
         const convertToString = (data, valueProperty) => {
             if (valueProperty) {
@@ -1544,7 +1551,6 @@ class SelectComponent extends ListComponent_1.default {
     }
     detach() {
         var _a, _b;
-        super.detach();
         this.off('blur');
         if (this.choices) {
             if ((_b = (_a = this.choices.containerOuter) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.parentNode) {
@@ -1552,6 +1558,7 @@ class SelectComponent extends ListComponent_1.default {
             }
             this.choices = null;
         }
+        super.detach();
     }
     focus() {
         if (this.focusableElement) {

package/lib/cjs/components/select/fixtures/comp23.d.ts

@@ -0,0 +1,47 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        widget: string;
+        tableView: boolean;
+        dataSrc: string;
+        data: {
+            resource: string;
+        };
+        template: string;
+        validate: {
+            select: boolean;
+        };
+        key: string;
+        type: string;
+        searchField: string;
+        input: boolean;
+        noRefreshOnScroll: boolean;
+        addResource: boolean;
+        reference: boolean;
+        valueProperty: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        widget?: undefined;
+        dataSrc?: undefined;
+        data?: undefined;
+        template?: undefined;
+        validate?: undefined;
+        searchField?: undefined;
+        noRefreshOnScroll?: undefined;
+        addResource?: undefined;
+        reference?: undefined;
+        valueProperty?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/select/fixtures/comp23.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    title: 'FIO-8234',
+    name: 'fio8234',
+    path: 'fio8234',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            dataSrc: 'resource',
+            data: {
+                resource: '665446284c9b0163c3e0c7e6',
+            },
+            template: '<span>{{ item.data.textField1 }}</span>',
+            validate: {
+                select: false,
+            },
+            key: 'select',
+            type: 'select',
+            searchField: 'data.textField2__regex',
+            input: true,
+            noRefreshOnScroll: false,
+            addResource: false,
+            reference: false,
+            valueProperty: 'data.textField2',
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

package/lib/cjs/components/select/fixtures/index.d.ts

@@ -19,5 +19,6 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './comp23';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23 };
 export { multiSelect, multiSelectOptions } from "./comp3";

package/lib/cjs/components/select/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp22 = exports.comp21 = exports.comp20 = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
+exports.comp23 = exports.comp22 = exports.comp21 = exports.comp20 = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -49,3 +49,5 @@ const comp21_1 = __importDefault(require("./comp21"));
 exports.comp21 = comp21_1.default;
 const comp22_1 = __importDefault(require("./comp22"));
 exports.comp22 = comp22_1.default;
+const comp23_1 = __importDefault(require("./comp23"));
+exports.comp23 = comp23_1.default;

package/lib/cjs/components/selectboxes/SelectBoxes.js

@@ -164,11 +164,14 @@ class SelectBoxesComponent extends Radio_1.default {
         }
         return changed;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (!value) {
             return '';
         }
         if (this.isSelectURL) {
+            if (options.modalPreview && this.loadedOptions) {
+                return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+            }
             return (0, lodash_1.default)(value).pickBy((val) => val).keys().join(', ');
         }
         return (0, lodash_1.default)(this.component.values || [])

package/lib/cjs/components/table/Table.d.ts

@@ -19,6 +19,5 @@ export default class TableComponent extends NestedComponent {
     noField: boolean;
     table: any[] | undefined;
     render(): any;
-    destroy(all: any): void;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/cjs/components/table/Table.js

@@ -167,7 +167,7 @@ class TableComponent extends NestedComponent_1.default {
         });
         return superAttach;
     }
-    destroy(all) {
+    destroy(all = false) {
         super.destroy(all);
         delete this.table;
     }

package/lib/cjs/components/tags/Tags.js

@@ -61,7 +61,9 @@ class TagsComponent extends Input_1.default {
         if (!element) {
             return;
         }
-        element.setAttribute('dir', this.i18next.dir());
+        if (this.i18next) {
+            element.setAttribute('dir', this.i18next.dir());
+        }
         if (this.choices) {
             this.choices.destroy();
         }
@@ -108,11 +110,11 @@ class TagsComponent extends Input_1.default {
         });
     }
     detach() {
-        super.detach();
         if (this.choices) {
             this.choices.destroy();
             this.choices = null;
         }
+        super.detach();
     }
     normalizeValue(value) {
         if (this.component.storeas === 'string' && Array.isArray(value)) {

package/lib/cjs/utils/utils.d.ts

@@ -27,6 +27,12 @@ export function getElementRect(element: any): {
     width: string;
     height: string;
 };
+/**
+ * Get non HTMLElement property in the window object
+ * @param {String} property
+ * @return {any || undefined}
+ */
+export function getScriptPlugin(property: string): any;
 /**
  * Determines the boolean value of a setting.
  *
@@ -374,4 +380,4 @@ import jsonLogic from 'json-logic-js';
 import ConditionOperators from './conditionOperators';
 import Evaluator from './Evaluator';
 export const interpolate: (rawTemplate: any, data: any, _options: any) => any;
-export { jsonLogic, moment, ConditionOperators, Evaluator, _ };
+export { jsonLogic, ConditionOperators, Evaluator, _ };

package/lib/cjs/utils/utils.js

@@ -11,22 +11,33 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.ConditionOperators = exports.moment = exports.jsonLogic = void 0;
-exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = void 0;
+exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
+exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
 const json_logic_js_1 = __importDefault(require("json-logic-js"));
 exports.jsonLogic = json_logic_js_1.default;
 const moment_timezone_1 = __importDefault(require("moment-timezone/moment-timezone"));
-exports.moment = moment_timezone_1.default;
 const jstimezonedetect_1 = __importDefault(require("jstimezonedetect"));
 const operators_1 = require("./jsonlogic/operators");
 const dompurify_1 = __importDefault(require("dompurify"));
@@ -55,6 +66,7 @@ json_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {
 json_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {
     return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();
 });
+exports.moment = __importStar(require("moment-timezone/moment-timezone"));
 function setPathToComponentAndPerentSchema(component) {
     component.path = getComponentPath(component);
     const dataParent = getDataParentComponent(component);
@@ -160,6 +172,20 @@ function getElementRect(element) {
     };
 }
 exports.getElementRect = getElementRect;
+/**
+ * Get non HTMLElement property in the window object
+ * @param {String} property
+ * @return {any || undefined}
+ */
+function getScriptPlugin(property) {
+    const obj = window[property];
+    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2
+        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {
+        return undefined;
+    }
+    return obj;
+}
+exports.getScriptPlugin = getScriptPlugin;
 /**
  * Determines the boolean value of a setting.
  *

package/lib/cjs/widgets/CalendarWidget.js

@@ -467,11 +467,11 @@ class CalendarWidget extends InputWidget_1.default {
             return Flatpickr.formatDate(date, format);
         };
     }
-    destroy() {
-        super.destroy();
+    destroy(all = false) {
         if (this.calendar) {
             this.calendar.destroy();
         }
+        super.destroy(all);
     }
 }
 exports.default = CalendarWidget;

package/lib/mjs/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/mjs/Element.js

@@ -230,20 +230,29 @@ export default class Element {
         this.eventHandlers = [];
     }
     removeAllEvents(includeExternal) {
-        _.each(this.events._events, (events, type) => {
-            _.each(events, (listener) => {
-                if (listener && (this.id === listener.id) && (includeExternal || listener.internal)) {
-                    this.events.off(type, listener);
-                }
+        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);
+                    }
+                });
             });
-        });
+        }
+    }
+    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.
@@ -387,7 +396,7 @@ export default 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/mjs/Form.js

@@ -35,6 +35,9 @@ export default class Form extends Element {
         });
         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;
@@ -126,7 +129,7 @@ export default class Form extends Element {
      * @return {*}
      */
     set form(formParam) {
-        return this.setForm(formParam);
+        this.setForm(formParam);
     }
     errorForm(err) {
         return {
@@ -224,6 +227,9 @@ export default class Form extends Element {
         }
         // 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;
         });
@@ -344,6 +350,9 @@ export default class Form extends Element {
         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) => {
@@ -351,6 +360,11 @@ export default class Form extends Element {
             return param;
         });
     }
+    teardown() {
+        super.teardown();
+        delete this.instance;
+        delete this.ready;
+    }
 }
 // Allow simple embedding.
 Formio.embedForm = (embed) => Form.embed(embed);

package/lib/mjs/PDF.js

@@ -57,8 +57,15 @@ export default class PDF extends Webform {
         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/mjs/PDFBuilder.js

@@ -251,9 +251,9 @@ export default class PDFBuilder extends WebformBuilder {
         });
         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/mjs/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/mjs/Webform.js

@@ -142,7 +142,7 @@ export default class Webform extends NestedDataComponent {
             formOptions = elementOrOptions;
         }
         super(null, getOptions(formOptions));
-        this.element = element;
+        this.setElement(element);
         // Keep track of all available forms globally.
         Formio.forms[this.id] = this;
         // Set the base url.
@@ -331,10 +331,12 @@ export default class Webform extends NestedDataComponent {
      * @return {*}
      */
     addLanguage(code, lang, active = false) {
-        var translations = _.assign(fastCloneDeep(i18nDefaults.resources.en.translation), lang);
-        this.i18next.addResourceBundle(code, 'translation', translations, true, true);
-        if (active) {
-            this.language = code;
+        if (this.i18next) {
+            var translations = _.assign(fastCloneDeep(i18nDefaults.resources.en.translation), lang);
+            this.i18next.addResourceBundle(code, 'translation', translations, true, true);
+            if (active) {
+                this.language = code;
+            }
         }
     }
     keyboardCatchableElement(element) {
@@ -913,18 +915,21 @@ export default class Webform extends NestedDataComponent {
             });
         });
     }
-    destroy(deleteFromGlobal = false) {
+    teardown() {
+        this.emit('formDelete', this.id);
+        delete 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.forms[this.id];
-        }
-        return super.destroy();
+        return super.destroy(all);
     }
     build(element) {
         if (element || this.element) {
@@ -958,7 +963,7 @@ export default class Webform extends NestedDataComponent {
         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/mjs/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/mjs/WebformBuilder.js

@@ -30,7 +30,7 @@ export default class WebformBuilder extends Component {
         options.skipInit = false;
         options.display = options.display || 'form';
         super(null, options);
-        this.element = element;
+        this.setElement(element);
         this.dragulaLib = dragula;
         this.builderHeight = 0;
         this.schemas = {};
@@ -1584,11 +1584,11 @@ export default class WebformBuilder extends Component {
             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/mjs/Wizard.js

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

package/lib/mjs/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/mjs/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;
     /**