@formio/js 5.2.4-rc.0 → 5.2.5

package/lib/cjs/WebformBuilder.js

@@ -20,6 +20,7 @@ if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
 }
 const dragula_1 = __importDefault(require("dragula"));
 class WebformBuilder extends Component_1.default {
+    // eslint-disable-next-line max-statements
     constructor() {
         let element, options;
         if (arguments[0] instanceof HTMLElement || arguments[1]) {
@@ -81,17 +82,17 @@ class WebformBuilder extends Component_1.default {
             }
         }
         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_1.default.components) {
             const component = Components_1.default.components[type];
             if (component.builderInfo && component.builderInfo.schema) {
@@ -109,7 +110,9 @@ class WebformBuilder extends Component_1.default {
             for (const key in info.components) {
                 const compKey = group === 'resource' ? `component-${key}` : key;
                 let comp = info.components[compKey];
-                if (comp === true && Components_1.default.components[key] && Components_1.default.components[key].builderInfo) {
+                if (comp === true &&
+                    Components_1.default.components[key] &&
+                    Components_1.default.components[key].builderInfo) {
                     comp = Components_1.default.components[key].builderInfo;
                 }
                 if (comp && comp.schema) {
@@ -133,8 +136,7 @@ class WebformBuilder extends Component_1.default {
                 // 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', {
@@ -143,23 +145,20 @@ class WebformBuilder extends Component_1.default {
                 childComponent: component,
                 design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design,
                 editJson: (_c = self === null || self === void 0 ? void 0 : self.options) === null || _c === void 0 ? void 0 : _c.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,
@@ -196,8 +195,7 @@ class WebformBuilder extends Component_1.default {
                 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.
@@ -219,27 +217,19 @@ class WebformBuilder extends Component_1.default {
             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_1.Formio(Formio_1.Formio.projectUrl);
         const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;
-        formio
-            .loadProject()
-            .then((project) => {
-            if (project &&
-                (lodash_1.default.get(project, 'settings.addConfigToForms', false) ||
-                    lodash_1.default.get(project, 'addConfigToForms', false))) {
+        formio.loadProject().then((project) => {
+            if (project && (lodash_1.default.get(project, 'settings.addConfigToForms', false) || lodash_1.default.get(project, 'addConfigToForms', false))) {
                 const config = project.config || {};
                 this.options.formConfig = config;
                 const pathToFormConfig = 'webform._form.config';
@@ -248,13 +238,13 @@ class WebformBuilder extends Component_1.default {
                     lodash_1.default.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',
@@ -262,7 +252,7 @@ class WebformBuilder extends Component_1.default {
                         weight: resourceOptions ? resourceOptions.weight : 50,
                         subgroups: [],
                         components: [],
-                        componentOrder: [],
+                        componentOrder: []
                     };
                     this.groups.resource = {
                         title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',
@@ -270,7 +260,7 @@ class WebformBuilder extends Component_1.default {
                         weight: resourceOptions ? resourceOptions.weight : 50,
                         subgroups: [],
                         components: [],
-                        componentOrder: [],
+                        componentOrder: []
                     };
                     if (!this.groupOrder.includes('resource')) {
                         this.groupOrder.push('resource');
@@ -291,6 +281,7 @@ class WebformBuilder extends Component_1.default {
         return true;
     }
     addExistingResourceFields(resources) {
+        var _a;
         lodash_1.default.each(resources, (resource, index) => {
             const resourceKey = `resource-${resource.name}`;
             const subgroup = {
@@ -320,24 +311,21 @@ class WebformBuilder extends Component_1.default {
                     group: 'resource',
                     subgroup: resourceKey,
                 }, {
-                    schema: Object.assign(Object.assign({}, component), { label: component.label, key: component.key, lockKey: true, source: !this.options.noSource ? resource._id : undefined, isNew: true }),
+                    schema: Object.assign(Object.assign({}, component), { label: component.label, key: component.key, lockKey: true, source: (!this.options.noSource ? resource._id : undefined), isNew: true })
                 });
             }, true);
             this.groups.resource.subgroups.push(subgroup);
         });
-        this.triggerRedraw();
+        (_a = this.triggerRedraw) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     attachTooltip(component, title) {
         return (0, tippy_js_1.default)(component, {
             allowHTML: true,
             trigger: 'mouseenter focus',
             placement: 'top',
-            delay: [
-                200,
-                0,
-            ],
+            delay: [200, 0],
             zIndex: 10000,
-            content: title,
+            content: title
         });
     }
     attachComponent(element, component) {
@@ -352,7 +340,7 @@ class WebformBuilder extends Component_1.default {
             moveComponent: 'single',
             copyComponent: 'single',
             pasteComponent: 'single',
-            editJson: 'single',
+            editJson: 'single'
         });
         if (component.refs.copyComponent) {
             this.attachTooltip(component.refs.copyComponent, this.t('Copy'));
@@ -376,9 +364,7 @@ class WebformBuilder extends Component_1.default {
         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'));
@@ -394,7 +380,7 @@ class WebformBuilder extends Component_1.default {
         this.webform = new Webform_1.default(this.element, options);
         if (this.element) {
             this.loadRefs(this.element, {
-                form: 'single',
+                form: 'single'
             });
             if (this.refs.form) {
                 this.webform.element = this.refs.form;
@@ -418,20 +404,20 @@ class WebformBuilder extends Component_1.default {
             },
             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() {
@@ -468,10 +454,7 @@ class WebformBuilder extends Component_1.default {
         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 = (0, utils_1.getComponent)(this.form.components, namespaceKey, true);
@@ -483,16 +466,7 @@ class WebformBuilder extends Component_1.default {
             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.
@@ -512,7 +486,7 @@ class WebformBuilder extends Component_1.default {
                         group,
                         groupKey: group.key,
                         groupId: `group-container-${groupKey}`,
-                        subgroups: [],
+                        subgroups: []
                     })),
                     keyboardActionsEnabled: this.keyboardActionsEnabled,
                 })),
@@ -531,7 +505,7 @@ class WebformBuilder extends Component_1.default {
                 sidebar: 'single',
                 'sidebar-search': 'single',
                 'sidebar-groups': 'single',
-                container: 'multiple',
+                'container': 'multiple',
                 'sidebar-anchor': 'multiple',
                 'sidebar-group': 'multiple',
                 'sidebar-container': 'multiple',
@@ -557,15 +531,11 @@ class WebformBuilder extends Component_1.default {
                 };
                 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';
                     }
                 };
@@ -582,9 +552,7 @@ class WebformBuilder extends Component_1.default {
                             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);
                             }
                         });
@@ -609,21 +577,20 @@ class WebformBuilder extends Component_1.default {
             }
             const drake = this.dragula;
             if (this.refs.form) {
-                (0, dom_autoscroller_1.default)([
-                    window,
-                ], {
+                (0, dom_autoscroller_1.default)([window], {
                     margin: 20,
                     maxSpeed: 6,
                     scrollWhenOutside: true,
                     autoScroll: function () {
                         return this.down && (drake === null || drake === void 0 ? void 0 : drake.dragging);
-                    },
+                    }
                 });
                 return this.webform.attach(this.refs.form);
             }
         });
     }
     searchFields(searchString = '') {
+        var _a;
         const searchValue = searchString.toLowerCase();
         const sidebar = this.refs['sidebar'];
         const sidebarGroups = this.refs['sidebar-groups'];
@@ -652,29 +619,30 @@ class WebformBuilder extends Component_1.default {
         };
         const filterGroupOrder = (groupOrder, searchValue) => {
             const result = lodash_1.default.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 = lodash_1.default.clone(groups);
             return result
-                .map((subgroup) => filterGroupBy(subgroup, searchValue))
-                .filter((subgroup) => !lodash_1.default.isNull(subgroup));
+                .map(subgroup => filterGroupBy(subgroup, searchValue))
+                .filter(subgroup => !lodash_1.default.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',
@@ -684,7 +652,7 @@ class WebformBuilder extends Component_1.default {
         });
         this.updateDragAndDrop();
         if (searchValue === '') {
-            this.triggerRedraw();
+            (_a = this.triggerRedraw) === null || _a === void 0 ? void 0 : _a.call(this);
         }
     }
     orderComponents(groupInfo, foundComponents) {
@@ -692,10 +660,10 @@ class WebformBuilder extends Component_1.default {
         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() {
@@ -711,9 +679,7 @@ class WebformBuilder extends Component_1.default {
         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_1.default) {
@@ -722,8 +688,8 @@ class WebformBuilder extends Component_1.default {
         this.dragula = (0, dragula_1.default)(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;
@@ -739,7 +705,7 @@ class WebformBuilder extends Component_1.default {
             },
             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() {
@@ -773,8 +739,7 @@ class WebformBuilder extends Component_1.default {
                 info = (0, utils_1.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];
@@ -802,21 +767,22 @@ class WebformBuilder extends Component_1.default {
         let tabIndex = 0;
         switch (parent.type) {
             case 'table':
-                tableRowIndex = lodash_1.default.findIndex(parent.rows, (row) => row.some((column) => column.components.some((comp) => comp.key === component.key)));
-                tableColumnIndex = lodash_1.default.findIndex(parent.rows[tableRowIndex], (column) => column.components.some((comp) => comp.key === component.key));
+                tableRowIndex = lodash_1.default.findIndex(parent.rows, row => row.some(column => column.components.some(comp => comp.key === component.key)));
+                tableColumnIndex = lodash_1.default.findIndex(parent.rows[tableRowIndex], (column => column.components.some(comp => comp.key === component.key)));
                 path = `rows[${tableRowIndex}][${tableColumnIndex}].components`;
                 break;
             case 'columns':
-                columnIndex = lodash_1.default.findIndex(parent.columns, (column) => column.components.some((comp) => comp.key === component.key));
+                columnIndex = lodash_1.default.findIndex(parent.columns, column => column.components.some(comp => comp.key === component.key));
                 path = `columns[${columnIndex}].components`;
                 break;
             case 'tabs':
-                tabIndex = lodash_1.default.findIndex(parent.components, (tab) => tab.components.some((comp) => comp.key === component.key));
+                tabIndex = lodash_1.default.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) {
         var _a;
         if (!target) {
@@ -852,7 +818,7 @@ class WebformBuilder extends Component_1.default {
             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 = ((_a = this.groups[group]) === null || _a === void 0 ? void 0 : _a.components[compKey]) || {};
         if (draggableComponent.disableSiblings) {
             let isCompAlreadyExists = false;
@@ -891,10 +857,8 @@ class WebformBuilder extends Component_1.default {
         if (target.formioContainer) {
             if (sibling) {
                 if (!sibling.getAttribute('data-noattach')) {
-                    index = lodash_1.default.findIndex(target.formioContainer, {
-                        key: lodash_1.default.get(sibling, 'formioComponent.component.key'),
-                    });
-                    index = index === -1 ? 0 : index;
+                    index = lodash_1.default.findIndex(target.formioContainer, { key: lodash_1.default.get(sibling, 'formioComponent.component.key') });
+                    index = (index === -1) ? 0 : index;
                 }
                 else {
                     index = sibling.getAttribute('data-position');
@@ -916,11 +880,11 @@ class WebformBuilder extends Component_1.default {
             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.
@@ -984,12 +948,12 @@ class WebformBuilder extends Component_1.default {
                 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;
@@ -1006,7 +970,7 @@ class WebformBuilder extends Component_1.default {
         //populate isEnabled for captcha form settings
         let isCaptchaEnabled = false;
         if (this.form.components) {
-            (0, utils_1.eachComponent)(form.components, (component) => {
+            (0, utils_1.eachComponent)(form.components, component => {
                 if (isCaptchaEnabled) {
                     return;
                 }
@@ -1033,8 +997,7 @@ class WebformBuilder extends Component_1.default {
                 (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));
         }
@@ -1053,7 +1016,7 @@ class WebformBuilder extends Component_1.default {
             if (component.input && componentInstance && parent.formioComponent) {
                 const parentDefaultValue = lodash_1.default.get(parent.formioComponent, 'component.defaultValue', null);
                 if (Array.isArray(parentDefaultValue)) {
-                    parentDefaultValue.forEach((v) => lodash_1.default.unset(v, componentInstance.key));
+                    parentDefaultValue.forEach(v => lodash_1.default.unset(v, componentInstance.key));
                 }
                 else if (typeof parentDefaultValue === 'object') {
                     lodash_1.default.unset(parentDefaultValue, componentInstance.key);
@@ -1078,29 +1041,23 @@ class WebformBuilder extends Component_1.default {
         }
     }
     updateComponent(component, changed) {
-        const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') ||
-            lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');
+        const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') || lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');
         // Update the preview.
         if (this.preview) {
             this.preview.form = {
-                components: [
-                    lodash_1.default.omit(Object.assign({}, component), [
+                components: [lodash_1.default.omit(Object.assign({}, 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);
@@ -1110,11 +1067,8 @@ class WebformBuilder extends Component_1.default {
         // Change the "default value" field to be reflective of this component.
         const defaultValueComponent = (0, utils_1.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) {
                 lodash_1.default.assign(defaultValueComponent.component, lodash_1.default.omit(Object.assign({}, component), [
                     'key',
@@ -1143,12 +1097,12 @@ class WebformBuilder extends Component_1.default {
                     if (!this.originalDefaultValue) {
                         this.originalDefaultValue = (0, utils_1.fastCloneDeep)(defaultValueComponent.component);
                     }
-                    (0, utils_1.eachComponent)(defaultValueComponent.component.components, (comp) => {
+                    (0, utils_1.eachComponent)(defaultValueComponent.component.components, (comp => {
                         var _a;
                         if ((_a = comp.validate) === null || _a === void 0 ? void 0 : _a.required) {
                             comp.validate.required = false;
                         }
-                    });
+                    }));
                 }
                 const parentComponent = defaultValueComponent.parent;
                 let tabIndex = -1;
@@ -1204,15 +1158,9 @@ class WebformBuilder extends Component_1.default {
             const isLayout = (0, utils_1.componentInfo)(comp).layout;
             if (!isLayout) {
                 if (keys.has(paths.dataPath)) {
-                    const onlyRadioCheckboxes = ((_a = repeatablePaths[paths.dataPath]) === null || _a === void 0 ? void 0 : _a.onlyRadioCheckboxes) === false
-                        ? false
-                        : isRadioCheckbox;
+                    const onlyRadioCheckboxes = ((_a = repeatablePaths[paths.dataPath]) === null || _a === void 0 ? void 0 : _a.onlyRadioCheckboxes) === false ? false : isRadioCheckbox;
                     repeatablePaths[paths.dataPath] = {
-                        comps: [
-                            ...(((_b = repeatablePaths[paths.dataPath]) === null || _b === void 0 ? void 0 : _b.comps) || []),
-                            keys.get(paths.dataPath),
-                            comp,
-                        ],
+                        comps: [...(((_b = repeatablePaths[paths.dataPath]) === null || _b === void 0 ? void 0 : _b.comps) || []), keys.get(paths.dataPath), comp],
                         onlyRadioCheckboxes,
                     };
                 }
@@ -1257,9 +1205,7 @@ class WebformBuilder extends Component_1.default {
         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);
         }
@@ -1271,10 +1217,7 @@ class WebformBuilder extends Component_1.default {
                 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;
@@ -1298,7 +1241,7 @@ class WebformBuilder extends Component_1.default {
             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();
@@ -1343,7 +1286,7 @@ class WebformBuilder extends Component_1.default {
             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);
@@ -1403,74 +1346,62 @@ class WebformBuilder extends Component_1.default {
         editFormOptions.editComponent = component;
         editFormOptions.flags = flags;
         this.hook('editComponentParentInstance', editFormOptions, parent);
-        this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, [
-            'hooks',
-            'builder',
-            'events',
-            'attachMode',
-            'skipInit',
-        ])), { language: this.options.language }), editFormOptions), { evalContext: Object.assign(Object.assign({}, ((editFormOptions === null || editFormOptions === void 0 ? void 0 : editFormOptions.evalContext) || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.evalContext) || {})), { buildingForm: this.form }) }));
+        this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit'])), { language: this.options.language }), editFormOptions), { evalContext: Object.assign(Object.assign({}, ((editFormOptions === null || editFormOptions === void 0 ? void 0 : editFormOptions.evalContext) || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.evalContext) || {})), { buildingForm: this.form }) }));
         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(lodash_1.default.cloneDeep(overrides));
+            ]
+        } : ComponentClass.editForm(lodash_1.default.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_1.default(lodash_1.default.omit(Object.assign(Object.assign({}, this.options), { preview: true }), [
                 'hooks',
                 'builder',
                 'events',
                 'attachMode',
-                'calculateValue',
+                'calculateValue'
             ]));
             this.hook('previewFormSettitngs', schema, isJsonEdit);
         }
         this.showPreview = (_b = ComponentClass.builderInfo.showPreview) !== null && _b !== void 0 ? _b : 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, lodash_1.default.get(this.options, 'dialogAttr', {}));
         // This is the attach step.
@@ -1484,33 +1415,27 @@ class WebformBuilder extends Component_1.default {
                     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;
@@ -1520,7 +1445,7 @@ class WebformBuilder extends Component_1.default {
                         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.
                             builder_1.default.uniquify(formComponents, event.data);
                         }
@@ -1529,9 +1454,7 @@ class WebformBuilder extends Component_1.default {
                 // 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.
@@ -1558,7 +1481,10 @@ class WebformBuilder extends Component_1.default {
         this.emit('editComponent', component);
     }
     updateComponentKey(data) {
-        return lodash_1.default.camelCase(data.title || data.label || data.placeholder || data.type).replace(/^[0-9]*/, '');
+        return lodash_1.default.camelCase(data.title ||
+            data.label ||
+            data.placeholder ||
+            data.type).replace(/^[0-9]*/, '');
     }
     moveComponent(component) {
         var _a;
@@ -1593,7 +1519,7 @@ class WebformBuilder extends Component_1.default {
                 }
             }
             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);
@@ -1686,7 +1612,7 @@ class WebformBuilder extends Component_1.default {
                         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);
             }
@@ -1731,23 +1657,28 @@ class WebformBuilder extends Component_1.default {
         super.destroy(all);
     }
     addBuilderGroup(name, group) {
+        var _a;
         if (!this.groups[name]) {
             this.groups[name] = group;
             this.groupOrder.push(name);
-            this.triggerRedraw();
+            (_a = this.triggerRedraw) === null || _a === void 0 ? void 0 : _a.call(this);
         }
         else {
             this.updateBuilderGroup(name, group);
         }
     }
     updateBuilderGroup(name, group) {
+        var _a;
         if (this.groups[name]) {
             this.groups[name] = group;
-            this.triggerRedraw();
+            (_a = this.triggerRedraw) === null || _a === void 0 ? void 0 : _a.call(this);
         }
     }
     generateKey(info) {
-        return info.key || lodash_1.default.camelCase(info.title || info.label || info.placeholder || info.type);
+        return info.key || lodash_1.default.camelCase(info.title ||
+            info.label ||
+            info.placeholder ||
+            info.type);
     }
     hasEditTabs(type) {
         // If the component type does not exist then it has no edit tabs