@formio/js 5.2.4-rc.0 → 5.2.5

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,6 +15,7 @@ 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]) {
@@ -61,17 +62,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) {
@@ -89,7 +90,9 @@ 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) {
@@ -112,8 +115,7 @@ 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', {
@@ -122,23 +124,20 @@ 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,
@@ -175,8 +174,7 @@ 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.
@@ -198,27 +196,19 @@ 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';
@@ -227,13 +217,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',
@@ -241,7 +231,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',
@@ -249,7 +239,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');
@@ -304,26 +294,23 @@ 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);
         });
-        this.triggerRedraw();
+        this.triggerRedraw?.();
     }
     attachTooltip(component, title) {
         return tippy(component, {
             allowHTML: true,
             trigger: 'mouseenter focus',
             placement: 'top',
-            delay: [
-                200,
-                0,
-            ],
+            delay: [200, 0],
             zIndex: 10000,
-            content: title,
+            content: title
         });
     }
     attachComponent(element, component) {
@@ -338,7 +325,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'));
@@ -362,9 +349,7 @@ 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'));
@@ -380,7 +365,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;
@@ -404,20 +389,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() {
@@ -454,10 +439,7 @@ 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);
@@ -469,16 +451,7 @@ 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.
@@ -498,7 +471,7 @@ export default class WebformBuilder extends Component {
                         group,
                         groupKey: group.key,
                         groupId: `group-container-${groupKey}`,
-                        subgroups: [],
+                        subgroups: []
                     })),
                     keyboardActionsEnabled: this.keyboardActionsEnabled,
                 })),
@@ -517,7 +490,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',
@@ -543,15 +516,11 @@ 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';
                     }
                 };
@@ -568,9 +537,7 @@ 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);
                             }
                         });
@@ -595,15 +562,13 @@ 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);
             }
@@ -638,29 +603,30 @@ 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',
@@ -670,7 +636,7 @@ export default class WebformBuilder extends Component {
         });
         this.updateDragAndDrop();
         if (searchValue === '') {
-            this.triggerRedraw();
+            this.triggerRedraw?.();
         }
     }
     orderComponents(groupInfo, foundComponents) {
@@ -678,10 +644,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() {
@@ -697,9 +663,7 @@ 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) {
@@ -708,8 +672,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;
@@ -725,7 +689,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() {
@@ -759,8 +723,7 @@ 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];
@@ -788,21 +751,22 @@ 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;
@@ -837,7 +801,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;
@@ -876,10 +840,8 @@ 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');
@@ -901,11 +863,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.
@@ -968,12 +930,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;
@@ -990,7 +952,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;
                 }
@@ -1017,8 +979,7 @@ 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));
         }
@@ -1037,7 +998,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);
@@ -1062,29 +1023,23 @@ 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);
@@ -1094,11 +1049,8 @@ 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',
@@ -1127,11 +1079,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;
@@ -1186,15 +1138,9 @@ 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,
                     };
                 }
@@ -1239,9 +1185,7 @@ 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);
         }
@@ -1253,10 +1197,7 @@ 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;
@@ -1280,7 +1221,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();
@@ -1325,7 +1266,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);
@@ -1384,13 +1325,7 @@ 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: {
@@ -1399,66 +1334,60 @@ 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.
@@ -1472,33 +1401,27 @@ 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;
@@ -1508,7 +1431,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);
                         }
@@ -1517,9 +1440,7 @@ 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.
@@ -1546,7 +1467,10 @@ 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) {
@@ -1595,7 +1519,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);
@@ -1687,7 +1611,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);
             }
@@ -1735,7 +1659,7 @@ export default class WebformBuilder extends Component {
         if (!this.groups[name]) {
             this.groups[name] = group;
             this.groupOrder.push(name);
-            this.triggerRedraw();
+            this.triggerRedraw?.();
         }
         else {
             this.updateBuilderGroup(name, group);
@@ -1744,11 +1668,14 @@ export default class WebformBuilder extends Component {
     updateBuilderGroup(name, group) {
         if (this.groups[name]) {
             this.groups[name] = group;
-            this.triggerRedraw();
+            this.triggerRedraw?.();
         }
     }
     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