@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/WebformBuilder.js

@@ -3,7 +3,7 @@ import Component from './components/_classes/component/Component';
 import tippy from 'tippy.js';
 import Components from './components/Components';
 import { Formio } from './Formio';
-import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath, eachComponent, getComponent, componentInfo } from './utils';
+import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath, eachComponent, getComponent, componentInfo, } from './utils';
 import BuilderUtils from './utils/builder';
 import _ from 'lodash';
 import autoScroll from 'dom-autoscroller';
@@ -15,7 +15,6 @@ if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
 }
 import dragula from 'dragula';
 export default class WebformBuilder extends Component {
-    // eslint-disable-next-line max-statements
     constructor() {
         let element, options;
         if (arguments[0] instanceof HTMLElement || arguments[1]) {
@@ -62,17 +61,17 @@ export default class WebformBuilder extends Component {
             }
         }
         this.groupOrder = this.groupOrder
-            .filter(group => group && !group.ignore)
+            .filter((group) => group && !group.ignore)
             .sort((a, b) => a.weight - b.weight);
-        const defaultOpenedGroup = this.groupOrder.find(x => x.key !== 'basic' && x.default);
+        const defaultOpenedGroup = this.groupOrder.find((x) => x.key !== 'basic' && x.default);
         if (defaultOpenedGroup) {
-            this.groupOrder.forEach(x => {
+            this.groupOrder.forEach((x) => {
                 if ('default' in x && x.key !== defaultOpenedGroup.key) {
                     x.default = false;
                 }
             });
         }
-        this.groupOrder = this.groupOrder.map(group => group.key);
+        this.groupOrder = this.groupOrder.map((group) => group.key);
         for (const type in Components.components) {
             const component = Components.components[type];
             if (component.builderInfo && component.builderInfo.schema) {
@@ -90,9 +89,7 @@ export default class WebformBuilder extends Component {
             for (const key in info.components) {
                 const compKey = group === 'resource' ? `component-${key}` : key;
                 let comp = info.components[compKey];
-                if (comp === true &&
-                    Components.components[key] &&
-                    Components.components[key].builderInfo) {
+                if (comp === true && Components.components[key] && Components.components[key].builderInfo) {
                     comp = Components.components[key].builderInfo;
                 }
                 if (comp && comp.schema) {
@@ -115,7 +112,8 @@ export default class WebformBuilder extends Component {
                 // The main webform shouldn't have this class as it adds extra styles.
                 return template;
             }
-            if (this.options.disabled && this.options.disabled.includes(self.key) || self.parent.noDragDrop) {
+            if ((this.options.disabled && this.options.disabled.includes(self.key)) ||
+                self.parent.noDragDrop) {
                 return html;
             }
             return this.renderTemplate('builderComponent', {
@@ -124,20 +122,23 @@ export default class WebformBuilder extends Component {
                 childComponent: component,
                 design: self?.options?.design,
                 editJson: self?.options?.editJson,
-                editComponent: this.hasEditTabs(component.type)
+                editComponent: this.hasEditTabs(component.type),
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
             // if Datagrid and already has a component, don't make it droppable.
-            if (self.type === 'datagrid' && components.length > 0 || self.noDragDrop) {
+            if ((self.type === 'datagrid' && components.length > 0) || self.noDragDrop) {
                 return html;
             }
             if (!components ||
                 (!components.length && !components.nodrop) ||
-                (self.type === 'form' && components.length <= 1 && (components.length === 0 || components[0].type === 'button'))) {
-                html = this.renderTemplate('builderPlaceholder', {
-                    position: 0
-                }) + html;
+                (self.type === 'form' &&
+                    components.length <= 1 &&
+                    (components.length === 0 || components[0].type === 'button'))) {
+                html =
+                    this.renderTemplate('builderPlaceholder', {
+                        position: 0,
+                    }) + html;
             }
             return this.renderTemplate('builderComponents', {
                 key: self.key,
@@ -174,7 +175,8 @@ export default class WebformBuilder extends Component {
                 this.dragula.containers.push(containerElement);
             }
             // If this is an existing datagrid element, don't make it draggable.
-            if ((component.type === 'datagrid' || component.type === 'datamap') && components.length > 0) {
+            if ((component.type === 'datagrid' || component.type === 'datamap') &&
+                components.length > 0) {
                 return element;
             }
             // Since we added a wrapper, need to return the original element so that we can find the components inside it.
@@ -196,19 +198,27 @@ export default class WebformBuilder extends Component {
             params: {
                 type: 'resource',
                 limit: 1000000,
-                select: '_id,title,name,components'
-            }
+                select: '_id,title,name,components',
+            },
         };
         if (this.options && this.options.resourceTag) {
-            query.params.tags = [this.options.resourceTag];
+            query.params.tags = [
+                this.options.resourceTag,
+            ];
         }
         else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {
-            query.params.tags = ['builder'];
+            query.params.tags = [
+                'builder',
+            ];
         }
         const formio = new Formio(Formio.projectUrl);
         const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;
-        formio.loadProject().then((project) => {
-            if (project && (_.get(project, 'settings.addConfigToForms', false) || _.get(project, 'addConfigToForms', false))) {
+        formio
+            .loadProject()
+            .then((project) => {
+            if (project &&
+                (_.get(project, 'settings.addConfigToForms', false) ||
+                    _.get(project, 'addConfigToForms', false))) {
                 const config = project.config || {};
                 this.options.formConfig = config;
                 const pathToFormConfig = 'webform._form.config';
@@ -217,13 +227,13 @@ export default class WebformBuilder extends Component {
                     _.set(this, pathToFormConfig, config);
                 }
             }
-        }).catch((err) => {
+        })
+            .catch((err) => {
             console.warn(`Could not load project settings: ${err.message || err}`);
         });
         if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {
             const resourceOptions = this.options.builder && this.options.builder.resource;
-            formio.loadForms(query)
-                .then((resources) => {
+            formio.loadForms(query).then((resources) => {
                 if (resources.length) {
                     this.builder.resource = {
                         title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',
@@ -231,7 +241,7 @@ export default class WebformBuilder extends Component {
                         weight: resourceOptions ? resourceOptions.weight : 50,
                         subgroups: [],
                         components: [],
-                        componentOrder: []
+                        componentOrder: [],
                     };
                     this.groups.resource = {
                         title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',
@@ -239,7 +249,7 @@ export default class WebformBuilder extends Component {
                         weight: resourceOptions ? resourceOptions.weight : 50,
                         subgroups: [],
                         components: [],
-                        componentOrder: []
+                        componentOrder: [],
                     };
                     if (!this.groupOrder.includes('resource')) {
                         this.groupOrder.push('resource');
@@ -294,9 +304,9 @@ export default class WebformBuilder extends Component {
                         label: component.label,
                         key: component.key,
                         lockKey: true,
-                        source: (!this.options.noSource ? resource._id : undefined),
-                        isNew: true
-                    }
+                        source: !this.options.noSource ? resource._id : undefined,
+                        isNew: true,
+                    },
                 });
             }, true);
             this.groups.resource.subgroups.push(subgroup);
@@ -308,9 +318,12 @@ export default class WebformBuilder extends Component {
             allowHTML: true,
             trigger: 'mouseenter focus',
             placement: 'top',
-            delay: [200, 0],
+            delay: [
+                200,
+                0,
+            ],
             zIndex: 10000,
-            content: title
+            content: title,
         });
     }
     attachComponent(element, component) {
@@ -325,7 +338,7 @@ export default class WebformBuilder extends Component {
             moveComponent: 'single',
             copyComponent: 'single',
             pasteComponent: 'single',
-            editJson: 'single'
+            editJson: 'single',
         });
         if (component.refs.copyComponent) {
             this.attachTooltip(component.refs.copyComponent, this.t('Copy'));
@@ -349,7 +362,9 @@ export default class WebformBuilder extends Component {
         const parent = this.getParentElement(element);
         if (component.refs.editComponent) {
             this.attachTooltip(component.refs.editComponent, this.t('Edit'));
-            component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, { inDataGrid: component.isInDataGrid }));
+            component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, {
+                inDataGrid: component.isInDataGrid,
+            }));
         }
         if (component.refs.editJson) {
             this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));
@@ -365,7 +380,7 @@ export default class WebformBuilder extends Component {
         this.webform = new Webform(this.element, options);
         if (this.element) {
             this.loadRefs(this.element, {
-                form: 'single'
+                form: 'single',
             });
             if (this.refs.form) {
                 this.webform.element = this.refs.form;
@@ -389,20 +404,20 @@ export default class WebformBuilder extends Component {
             },
             advanced: {
                 title: 'Advanced',
-                weight: 10
+                weight: 10,
             },
             layout: {
                 title: 'Layout',
-                weight: 20
+                weight: 20,
             },
             data: {
                 title: 'Data',
-                weight: 30
+                weight: 30,
             },
             premium: {
                 title: 'Premium',
-                weight: 40
-            }
+                weight: 40,
+            },
         };
     }
     redraw() {
@@ -439,7 +454,10 @@ export default class WebformBuilder extends Component {
         const componentSchema = component.component;
         // If the current component is the namespace, we don't need to find it again.
         if (namespaceKey === component.key) {
-            return [...componentSchema.components, componentSchema];
+            return [
+                ...componentSchema.components,
+                componentSchema,
+            ];
         }
         // Get the namespace component so we have the original object.
         const namespaceComponent = getComponent(this.form.components, namespaceKey, true);
@@ -451,7 +469,16 @@ export default class WebformBuilder extends Component {
             return null;
         }
         // Some components are their own namespace.
-        if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(component.type) || component.tree || component.arrayTree) {
+        if ([
+            'address',
+            'container',
+            'datagrid',
+            'editgrid',
+            'dynamicWizard',
+            'tree',
+        ].includes(component.type) ||
+            component.tree ||
+            component.arrayTree) {
             return component.key;
         }
         // Anything else, keep going up.
@@ -471,7 +498,7 @@ export default class WebformBuilder extends Component {
                         group,
                         groupKey: group.key,
                         groupId: `group-container-${groupKey}`,
-                        subgroups: []
+                        subgroups: [],
                     })),
                     keyboardActionsEnabled: this.keyboardActionsEnabled,
                 })),
@@ -490,7 +517,7 @@ export default class WebformBuilder extends Component {
                 sidebar: 'single',
                 'sidebar-search': 'single',
                 'sidebar-groups': 'single',
-                'container': 'multiple',
+                container: 'multiple',
                 'sidebar-anchor': 'multiple',
                 'sidebar-group': 'multiple',
                 'sidebar-container': 'multiple',
@@ -516,11 +543,15 @@ export default class WebformBuilder extends Component {
                 };
                 const hideShow = (group, forceShow, toggle = false) => {
                     if (forceShow || (toggle && !Array.from(group.classList).includes('show'))) {
-                        group.classList.add(['show']);
+                        group.classList.add([
+                            'show',
+                        ]);
                         group.style.display = 'inherit';
                     }
                     else {
-                        group.classList.remove(['show']);
+                        group.classList.remove([
+                            'show',
+                        ]);
                         group.style.display = 'none';
                     }
                 };
@@ -537,7 +568,9 @@ export default class WebformBuilder extends Component {
                             const openByDefault = getAttribute(group, 'default') === 'true';
                             const groupId = group.getAttribute('id').slice('group-'.length);
                             const groupParent = getAttribute(group, 'parent').slice('#builder-sidebar-'.length);
-                            if (((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index)) {
+                            if ((openByDefault && groupParent === clickedId) ||
+                                groupId === clickedParentId ||
+                                groupIndex === index) {
                                 hideShow(group, false, true);
                             }
                         });
@@ -562,13 +595,15 @@ export default class WebformBuilder extends Component {
             }
             const drake = this.dragula;
             if (this.refs.form) {
-                autoScroll([window], {
+                autoScroll([
+                    window,
+                ], {
                     margin: 20,
                     maxSpeed: 6,
                     scrollWhenOutside: true,
                     autoScroll: function () {
                         return this.down && drake?.dragging;
-                    }
+                    },
                 });
                 return this.webform.attach(this.refs.form);
             }
@@ -603,30 +638,29 @@ export default class WebformBuilder extends Component {
         };
         const filterGroupOrder = (groupOrder, searchValue) => {
             const result = _.cloneDeep(groupOrder);
-            return result.filter(key => filterGroupBy(this.groups[key], searchValue));
+            return result.filter((key) => filterGroupBy(this.groups[key], searchValue));
         };
         const filterSubgroups = (groups, searchValue) => {
             const result = _.clone(groups);
             return result
-                .map(subgroup => filterGroupBy(subgroup, searchValue))
-                .filter(subgroup => !_.isNull(subgroup));
+                .map((subgroup) => filterGroupBy(subgroup, searchValue))
+                .filter((subgroup) => !_.isNull(subgroup));
         };
-        const toTemplate = groupKey => {
+        const toTemplate = (groupKey) => {
             return {
                 group: filterGroupBy(this.groups[groupKey], searchValue),
                 groupKey,
                 groupId: sidebar.id || sidebarGroups.id,
-                subgroups: filterSubgroups(this.groups[groupKey].subgroups, searchValue)
-                    .map((group) => this.renderTemplate('builderSidebarGroup', {
+                subgroups: filterSubgroups(this.groups[groupKey].subgroups, searchValue).map((group) => this.renderTemplate('builderSidebarGroup', {
                     group,
                     groupKey: group.key,
                     groupId: `group-container-${groupKey}`,
-                    subgroups: []
+                    subgroups: [],
                 })),
             };
         };
         sidebarGroups.innerHTML = filterGroupOrder(this.groupOrder, searchValue)
-            .map(groupKey => this.renderTemplate('builderSidebarGroup', toTemplate(groupKey)))
+            .map((groupKey) => this.renderTemplate('builderSidebarGroup', toTemplate(groupKey)))
             .join('');
         this.loadRefs(this.element, {
             'sidebar-groups': 'single',
@@ -644,10 +678,10 @@ export default class WebformBuilder extends Component {
         const isResource = groupInfo.key.indexOf('resource-') === 0;
         if (components) {
             groupInfo.componentOrder = Object.keys(components)
-                .map(key => components[key])
-                .filter(component => component && !component.ignore && !component.ignoreForForm)
+                .map((key) => components[key])
+                .filter((component) => component && !component.ignore && !component.ignoreForForm)
                 .sort((a, b) => a.weight - b.weight)
-                .map(component => isResource ? `component-${component.key}` : component.key);
+                .map((component) => (isResource ? `component-${component.key}` : component.key));
         }
     }
     updateDragAndDrop() {
@@ -663,7 +697,9 @@ export default class WebformBuilder extends Component {
         if (this.dragula) {
             this.dragula.destroy();
         }
-        const containersArray = Array.prototype.slice.call(this.refs['sidebar-container']).filter(item => {
+        const containersArray = Array.prototype.slice
+            .call(this.refs['sidebar-container'])
+            .filter((item) => {
             return item.id !== 'group-container-resource';
         });
         if (!dragula) {
@@ -672,8 +708,8 @@ export default class WebformBuilder extends Component {
         this.dragula = dragula(containersArray, {
             moves(el) {
                 let moves = true;
-                const list = Array.from(el.classList).filter(item => item.indexOf('formio-component-') === 0);
-                list.forEach(item => {
+                const list = Array.from(el.classList).filter((item) => item.indexOf('formio-component-') === 0);
+                list.forEach((item) => {
                     const key = item.slice('formio-component-'.length);
                     if (options.disabled && options.disabled.includes(key)) {
                         moves = false;
@@ -689,7 +725,7 @@ export default class WebformBuilder extends Component {
             },
             accepts(el, target) {
                 return !el.contains(target) && !target.classList.contains('no-drop');
-            }
+            },
         }).on('drop', (element, target, source, sibling) => this.onDrop(element, target, source, sibling));
     }
     detach() {
@@ -723,7 +759,8 @@ export default class WebformBuilder extends Component {
                 info = fastCloneDeep(groupComponents[key].schema);
             }
         }
-        else if (group === 'searchFields') { //Search components go into this group
+        else if (group === 'searchFields') {
+            //Search components go into this group
             const resourceGroups = this.groups.resource.subgroups;
             for (let ix = 0; ix < resourceGroups.length; ix++) {
                 const resourceGroup = resourceGroups[ix];
@@ -751,22 +788,21 @@ export default class WebformBuilder extends Component {
         let tabIndex = 0;
         switch (parent.type) {
             case 'table':
-                tableRowIndex = _.findIndex(parent.rows, row => row.some(column => column.components.some(comp => comp.key === component.key)));
-                tableColumnIndex = _.findIndex(parent.rows[tableRowIndex], (column => column.components.some(comp => comp.key === component.key)));
+                tableRowIndex = _.findIndex(parent.rows, (row) => row.some((column) => column.components.some((comp) => comp.key === component.key)));
+                tableColumnIndex = _.findIndex(parent.rows[tableRowIndex], (column) => column.components.some((comp) => comp.key === component.key));
                 path = `rows[${tableRowIndex}][${tableColumnIndex}].components`;
                 break;
             case 'columns':
-                columnIndex = _.findIndex(parent.columns, column => column.components.some(comp => comp.key === component.key));
+                columnIndex = _.findIndex(parent.columns, (column) => column.components.some((comp) => comp.key === component.key));
                 path = `columns[${columnIndex}].components`;
                 break;
             case 'tabs':
-                tabIndex = _.findIndex(parent.components, tab => tab.components.some(comp => comp.key === component.key));
+                tabIndex = _.findIndex(parent.components, (tab) => tab.components.some((comp) => comp.key === component.key));
                 path = `components[${tabIndex}].components`;
                 break;
         }
         return path;
     }
-    /* eslint-disable max-statements */
     onDrop(element, target, source, sibling) {
         if (!target) {
             return;
@@ -801,7 +837,7 @@ export default class WebformBuilder extends Component {
             return;
         }
         // Show an error if siblings are disabled for a component and such a component already exists.
-        const compKey = (group === 'resource') ? `component-${key}` : key;
+        const compKey = group === 'resource' ? `component-${key}` : key;
         const draggableComponent = this.groups[group]?.components[compKey] || {};
         if (draggableComponent.disableSiblings) {
             let isCompAlreadyExists = false;
@@ -840,8 +876,10 @@ export default class WebformBuilder extends Component {
         if (target.formioContainer) {
             if (sibling) {
                 if (!sibling.getAttribute('data-noattach')) {
-                    index = _.findIndex(target.formioContainer, { key: _.get(sibling, 'formioComponent.component.key') });
-                    index = (index === -1) ? 0 : index;
+                    index = _.findIndex(target.formioContainer, {
+                        key: _.get(sibling, 'formioComponent.component.key'),
+                    });
+                    index = index === -1 ? 0 : index;
                 }
                 else {
                     index = sibling.getAttribute('data-position');
@@ -863,11 +901,11 @@ export default class WebformBuilder extends Component {
             parent.addChildComponent(info, element, target, source, sibling);
         }
         const componentInDataGrid = parent.type === 'datagrid';
-        if (isNew
-            && !this.options.noNewEdit
-            && !info.noNewEdit
-            && this.hasEditTabs(info.type)
-            && !(this.options.design && info.type === 'reviewpage')) {
+        if (isNew &&
+            !this.options.noNewEdit &&
+            !info.noNewEdit &&
+            this.hasEditTabs(info.type) &&
+            !(this.options.design && info.type === 'reviewpage')) {
             this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });
         }
         // Only rebuild the parts needing to be rebuilt.
@@ -930,12 +968,12 @@ export default class WebformBuilder extends Component {
                 block: false,
                 action: 'submit',
                 disableOnInvalid: true,
-                theme: 'primary'
+                theme: 'primary',
             });
         }
         if (this.webform) {
             const shouldRebuild = !this.webform.form.components ||
-                (form.components.length !== this.webform.form.components.length);
+                form.components.length !== this.webform.form.components.length;
             return this.webform.setForm(form, { keepAsReference: true }).then(() => {
                 if (this.refs.form) {
                     this.builderHeight = this.refs.form.offsetHeight;
@@ -952,7 +990,7 @@ export default class WebformBuilder extends Component {
         //populate isEnabled for captcha form settings
         let isCaptchaEnabled = false;
         if (this.form.components) {
-            eachComponent(form.components, component => {
+            eachComponent(form.components, (component) => {
                 if (isCaptchaEnabled) {
                     return;
                 }
@@ -979,7 +1017,8 @@ export default class WebformBuilder extends Component {
                 (Array.isArray(component.rows) && component.rows.length) ||
                 (Array.isArray(component.columns) && component.columns.length));
         if (this.options.alwaysConfirmComponentRemoval || removingComponentsGroup) {
-            const message = removingComponentsGroup ? 'Removing this component will also remove all of its children. Are you sure you want to do this?'
+            const message = removingComponentsGroup
+                ? 'Removing this component will also remove all of its children. Are you sure you want to do this?'
                 : 'Are you sure you want to remove this component?';
             remove = window.confirm(this.t(message));
         }
@@ -998,7 +1037,7 @@ export default class WebformBuilder extends Component {
             if (component.input && componentInstance && parent.formioComponent) {
                 const parentDefaultValue = _.get(parent.formioComponent, 'component.defaultValue', null);
                 if (Array.isArray(parentDefaultValue)) {
-                    parentDefaultValue.forEach(v => _.unset(v, componentInstance.key));
+                    parentDefaultValue.forEach((v) => _.unset(v, componentInstance.key));
                 }
                 else if (typeof parentDefaultValue === 'object') {
                     _.unset(parentDefaultValue, componentInstance.key);
@@ -1023,23 +1062,29 @@ export default class WebformBuilder extends Component {
         }
     }
     updateComponent(component, changed) {
-        const sanitizeConfig = _.get(this.webform, 'form.settings.sanitizeConfig') || _.get(this.webform, 'form.globalSettings.sanitizeConfig');
+        const sanitizeConfig = _.get(this.webform, 'form.settings.sanitizeConfig') ||
+            _.get(this.webform, 'form.globalSettings.sanitizeConfig');
         // Update the preview.
         if (this.preview) {
             this.preview.form = {
-                components: [_.omit({ ...component }, [
+                components: [
+                    _.omit({ ...component }, [
                         'hidden',
                         'conditional',
                         'calculateValue',
                         'logic',
                         'autofocus',
                         'customConditional',
-                    ])],
+                    ]),
+                ],
                 config: this.options.formConfig || {},
                 sanitizeConfig,
             };
-            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
-            this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));
+            const fieldsToRemoveDoubleQuotes = [
+                'label',
+                'tooltip',
+            ];
+            this.preview.form.components.forEach((component) => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));
             const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}="preview"]`);
             if (previewElement) {
                 this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);
@@ -1049,8 +1094,11 @@ export default class WebformBuilder extends Component {
         // Change the "default value" field to be reflective of this component.
         const defaultValueComponent = getComponent(this.editForm.components, 'defaultValue', true);
         if (defaultValueComponent && component.type !== 'hidden') {
-            const defaultChanged = changed && ((changed.component && changed.component.key === 'defaultValue')
-                || (changed.instance && defaultValueComponent.hasComponent && defaultValueComponent.hasComponent(changed.instance)));
+            const defaultChanged = changed &&
+                ((changed.component && changed.component.key === 'defaultValue') ||
+                    (changed.instance &&
+                        defaultValueComponent.hasComponent &&
+                        defaultValueComponent.hasComponent(changed.instance)));
             if (!defaultChanged) {
                 _.assign(defaultValueComponent.component, _.omit({ ...component }, [
                     'key',
@@ -1079,11 +1127,11 @@ export default class WebformBuilder extends Component {
                     if (!this.originalDefaultValue) {
                         this.originalDefaultValue = fastCloneDeep(defaultValueComponent.component);
                     }
-                    eachComponent(defaultValueComponent.component.components, (comp => {
+                    eachComponent(defaultValueComponent.component.components, (comp) => {
                         if (comp.validate?.required) {
                             comp.validate.required = false;
                         }
-                    }));
+                    });
                 }
                 const parentComponent = defaultValueComponent.parent;
                 let tabIndex = -1;
@@ -1138,9 +1186,15 @@ export default class WebformBuilder extends Component {
             const isLayout = componentInfo(comp).layout;
             if (!isLayout) {
                 if (keys.has(paths.dataPath)) {
-                    const onlyRadioCheckboxes = repeatablePaths[paths.dataPath]?.onlyRadioCheckboxes === false ? false : isRadioCheckbox;
+                    const onlyRadioCheckboxes = repeatablePaths[paths.dataPath]?.onlyRadioCheckboxes === false
+                        ? false
+                        : isRadioCheckbox;
                     repeatablePaths[paths.dataPath] = {
-                        comps: [...(repeatablePaths[paths.dataPath]?.comps || []), keys.get(paths.dataPath), comp],
+                        comps: [
+                            ...(repeatablePaths[paths.dataPath]?.comps || []),
+                            keys.get(paths.dataPath),
+                            comp,
+                        ],
                         onlyRadioCheckboxes,
                     };
                 }
@@ -1185,7 +1239,9 @@ export default class WebformBuilder extends Component {
         const parentContainer = parent ? parent.formioContainer : this.container;
         const parentComponent = parent ? parent.formioComponent : this;
         this.dialog.close();
-        const path = parentContainer ? this.getComponentsPath(component, parentComponent.component) : '';
+        const path = parentContainer
+            ? this.getComponentsPath(component, parentComponent.component)
+            : '';
         if (!original) {
             original = parent.formioContainer.find((comp) => comp.id === component.id);
         }
@@ -1197,7 +1253,10 @@ export default class WebformBuilder extends Component {
                 submissionData.components = this.originalDefaultValue.components;
                 this.originalDefaultValue = null;
             }
-            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
+            const fieldsToRemoveDoubleQuotes = [
+                'label',
+                'tooltip',
+            ];
             this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);
             this.hook('beforeSaveComponentSettings', submissionData);
             let comp = null;
@@ -1221,7 +1280,7 @@ export default class WebformBuilder extends Component {
             const rebuild = parentComponent.rebuild() || Promise.resolve();
             return rebuild.then(() => {
                 parentComponent.resetValue();
-                const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);
+                const schema = parentContainer ? parentContainer[index] : comp ? comp.schema : [];
                 this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);
                 this.emit('change', this.form);
                 this.highlightInvalidComponents();
@@ -1266,7 +1325,7 @@ export default class WebformBuilder extends Component {
             this.editForm.addEventListener(saveButton, 'click', (event) => {
                 event.preventDefault();
                 const errors = this.editForm.validate(this.editForm.data, {
-                    dirty: true
+                    dirty: true,
                 });
                 if (errors.length) {
                     this.editForm.setPristine(false);
@@ -1325,7 +1384,13 @@ export default class WebformBuilder extends Component {
         editFormOptions.flags = flags;
         this.hook('editComponentParentInstance', editFormOptions, parent);
         this.editForm = new Webform({
-            ..._.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit']),
+            ..._.omit(this.options, [
+                'hooks',
+                'builder',
+                'events',
+                'attachMode',
+                'skipInit',
+            ]),
             language: this.options.language,
             ...editFormOptions,
             evalContext: {
@@ -1334,60 +1399,66 @@ export default class WebformBuilder extends Component {
             },
         });
         this.hook('editFormProperties', parent);
-        this.editForm.form = (isJsonEdit && !isCustom) ? {
-            components: [
-                {
-                    type: 'textarea',
-                    as: 'json',
-                    editor: 'ace',
-                    weight: 10,
-                    input: true,
-                    key: 'componentJson',
-                    label: 'Component JSON',
-                    tooltip: 'Edit the JSON for this component.'
-                },
-                {
-                    type: 'checkbox',
-                    key: 'showFullSchema',
-                    label: 'Full Schema'
+        this.editForm.form =
+            isJsonEdit && !isCustom
+                ? {
+                    components: [
+                        {
+                            type: 'textarea',
+                            as: 'json',
+                            editor: 'ace',
+                            weight: 10,
+                            input: true,
+                            key: 'componentJson',
+                            label: 'Component JSON',
+                            tooltip: 'Edit the JSON for this component.',
+                        },
+                        {
+                            type: 'checkbox',
+                            key: 'showFullSchema',
+                            label: 'Full Schema',
+                        },
+                    ],
                 }
-            ]
-        } : ComponentClass.editForm(_.cloneDeep(overrides));
+                : ComponentClass.editForm(_.cloneDeep(overrides));
         const instanceOptions = {
             inFormBuilder: true,
         };
         this.hook('instanceOptionsPreview', instanceOptions);
         const instance = new ComponentClass(componentCopy, instanceOptions);
         const schema = this.hook('builderComponentSchema', component, instance);
-        this.editForm.submission = isJsonEdit ? {
-            data: {
-                componentJson: schema,
-                showFullSchema: this.options.showFullJsonSchema
-            },
-        } : {
-            data: instance.component,
-        };
+        this.editForm.submission = isJsonEdit
+            ? {
+                data: {
+                    componentJson: schema,
+                    showFullSchema: this.options.showFullJsonSchema,
+                },
+            }
+            : {
+                data: instance.component,
+            };
         if (this.preview) {
             this.preview.destroy();
         }
-        if (!ComponentClass.builderInfo.hasOwnProperty('preview') || ComponentClass.builderInfo.preview) {
+        if (!ComponentClass.builderInfo.hasOwnProperty('preview') ||
+            ComponentClass.builderInfo.preview) {
             this.preview = new Webform(_.omit({ ...this.options, preview: true }, [
                 'hooks',
                 'builder',
                 'events',
                 'attachMode',
-                'calculateValue'
+                'calculateValue',
             ]));
             this.hook('previewFormSettitngs', schema, isJsonEdit);
         }
         this.showPreview = ComponentClass.builderInfo.showPreview ?? true;
-        this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });
+        this.componentEdit = this.ce('div', { class: 'component-edit-container' });
         this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {
             componentInfo: ComponentClass.builderInfo,
             editForm: this.editForm.render(),
             preview: this.preview ? this.preview.render() : false,
             showPreview: this.showPreview,
-            helplinks: this.helplinks
+            helplinks: this.helplinks,
         }));
         this.dialog = this.createModal(this.componentEdit, _.get(this.options, 'dialogAttr', {}));
         // This is the attach step.
@@ -1401,27 +1472,33 @@ export default class WebformBuilder extends Component {
                     this.editForm.submission = {
                         data: {
                             componentJson: value ? instance.component : component,
-                            showFullSchema: value
+                            showFullSchema: value,
                         },
                     };
                     return;
                 }
                 // See if this is a manually modified key. Treat custom component keys as manually modified
-                if ((event.changed.component && (event.changed.component.key === 'key')) || isJsonEdit) {
+                if ((event.changed.component && event.changed.component.key === 'key') || isJsonEdit) {
                     componentCopy.keyModified = true;
                 }
                 let isComponentLabelChanged = false;
                 if (event.changed.instance) {
-                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.instance.path);
+                    isComponentLabelChanged = [
+                        'label',
+                        'title',
+                    ].includes(event.changed.instance.path);
                 }
                 else if (event.changed.component) {
-                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.component.key);
+                    isComponentLabelChanged = [
+                        'label',
+                        'title',
+                    ].includes(event.changed.component.key);
                 }
                 if (isComponentLabelChanged) {
                     // Ensure this component has a key.
                     if (isNew) {
                         if (!event.data.keyModified) {
-                            this.editForm.everyComponent(component => {
+                            this.editForm.everyComponent((component) => {
                                 if (component.key === 'key' && component.parent.component.key === 'tabs') {
                                     component.setValue(this.updateComponentKey(event.data));
                                     return false;
@@ -1431,7 +1508,7 @@ export default class WebformBuilder extends Component {
                         if (this.form) {
                             let formComponents = this.findNamespaceRoot(parent.formioComponent);
                             // excluding component which key uniqueness is to be checked to prevent the comparing of the same keys
-                            formComponents = formComponents.filter(comp => editFormOptions.editComponent.id !== comp.id);
+                            formComponents = formComponents.filter((comp) => editFormOptions.editComponent.id !== comp.id);
                             // Set a unique key for this component.
                             BuilderUtils.uniquify(formComponents, event.data);
                         }
@@ -1440,7 +1517,9 @@ export default class WebformBuilder extends Component {
                 // If the edit form has any nested form inside, we get a partial data (nested form's data) in the
                 // event.data property
                 let editFormData;
-                if (event.changed.instance && event.changed.instance.root && event.changed.instance.root.id !== this.editForm.id) {
+                if (event.changed.instance &&
+                    event.changed.instance.root &&
+                    event.changed.instance.root.id !== this.editForm.id) {
                     editFormData = this.editForm.data;
                 }
                 // Update the component.
@@ -1467,10 +1546,7 @@ export default class WebformBuilder extends Component {
         this.emit('editComponent', component);
     }
     updateComponentKey(data) {
-        return _.camelCase(data.title ||
-            data.label ||
-            data.placeholder ||
-            data.type).replace(/^[0-9]*/, '');
+        return _.camelCase(data.title || data.label || data.placeholder || data.type).replace(/^[0-9]*/, '');
     }
     moveComponent(component) {
         if (this.selectedComponent) {
@@ -1519,7 +1595,7 @@ export default class WebformBuilder extends Component {
                 }
             }
             const len = source.formioComponent.components.length;
-            index = (index === -1) ? 0 : index + step;
+            index = index === -1 ? 0 : index + step;
             if (index === -1) {
                 source.formioContainer.push(info);
                 source.appendChild(element);
@@ -1611,7 +1687,7 @@ export default class WebformBuilder extends Component {
                         parent.formioComponent.saveChildComponent(schema, false);
                     }
                     parent.formioComponent.rebuild();
-                    this.emitSaveComponentEvent(schema, schema, parent.formioComponent.component, path, (index + 1), true, schema);
+                    this.emitSaveComponentEvent(schema, schema, parent.formioComponent.component, path, index + 1, true, schema);
                 }
                 this.emit('change', this.form);
             }
@@ -1672,10 +1748,7 @@ export default class WebformBuilder extends Component {
         }
     }
     generateKey(info) {
-        return info.key || _.camelCase(info.title ||
-            info.label ||
-            info.placeholder ||
-            info.type);
+        return info.key || _.camelCase(info.title || info.label || info.placeholder || info.type);
     }
     hasEditTabs(type) {
         // If the component type does not exist then it has no edit tabs