@formio/js 5.2.4-rc.0 → 5.2.5

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

@@ -6,7 +6,7 @@ import isMobile from 'ismobilejs';
 import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
 import { Formio } from '../../../Formio';
 import FormioUtils from '../../../utils';
-import { fastCloneDeep, boolValue, currentTimezone, getScriptPlugin, getContextualRowData, } from '../../../utils';
+import { fastCloneDeep, boolValue, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
 import Widgets from '../../../widgets';
@@ -137,7 +137,7 @@ export default class Component extends Element {
                  */
                 strictDateValidation: false,
                 multiple: false,
-                unique: false,
+                unique: false
             },
             /**
              * The simple conditional settings for a component.
@@ -145,7 +145,7 @@ export default class Component extends Element {
             conditional: {
                 show: null,
                 when: null,
-                eq: '',
+                eq: ''
             },
             overlay: {
                 style: '',
@@ -161,7 +161,6 @@ export default class Component extends Element {
             properties: {},
             allowMultipleMasks: false,
             addons: [],
-            serverOverride: {},
         }, ...sources);
     }
     /**
@@ -170,20 +169,15 @@ export default class Component extends Element {
      */
     static get conditionOperatorsSettings() {
         return {
-            operators: [
-                'isEqual',
-                'isNotEqual',
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],
             valueComponent() {
                 return {
                     type: 'textfield',
                     widget: {
-                        type: 'input',
-                    },
+                        type: 'input'
+                    }
                 };
-            },
+            }
         };
     }
     /**
@@ -193,9 +187,7 @@ export default class Component extends Element {
      */
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (FormioUtils.getComponentSavedTypes(schema) || [
-            FormioUtils.componentValueTypes.any,
-        ]);
+        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];
     }
     /**
      * Provides a table view for this component. Override if you wish to do something different than using getView
@@ -212,11 +204,12 @@ export default class Component extends Element {
      * @param {object} options - The options for this component.
      * @param {object} data - The global data submission object this component will belong.
      */
+    /* eslint-disable max-statements */
     constructor(component, options, data) {
         super(Object.assign({
             renderMode: 'form',
             attachMode: 'full',
-            noDefaults: false,
+            noDefaults: false
         }, options || {}));
         // Restore the component id.
         if (component && component.id) {
@@ -237,7 +230,9 @@ export default class Component extends Element {
          */
         this.refs = {};
         // Allow global override for any component JSON.
-        if (component && this.options.components && this.options.components[component.type]) {
+        if (component &&
+            this.options.components &&
+            this.options.components[component.type]) {
             _.merge(component, this.options.components[component.type]);
         }
         /**
@@ -314,7 +309,7 @@ export default class Component extends Element {
          */
         this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
             ...this.parent?.paths,
-            dataIndex: this.options.rowIndex === undefined ? this.parent?.paths?.dataIndex : this.options.rowIndex,
+            dataIndex: this.options.rowIndex === undefined ? this.parent?.paths?.dataIndex : this.options.rowIndex
         });
         this.options.name = this.options.name || 'data';
         this._path = '';
@@ -323,12 +318,8 @@ export default class Component extends Element {
         /**
          * Determines if this component is visible, or not.
          */
-        this._parentVisible = this.options.hasOwnProperty('parentVisible')
-            ? this.options.parentVisible
-            : true;
-        this._visible =
-            this._parentVisible &&
-                (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);
+        this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;
+        this._visible = this._parentVisible && (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);
         this._parentDisabled = false;
         /**
          * The reference attribute name for this component
@@ -423,6 +414,7 @@ export default class Component extends Element {
             this.init();
         }
     }
+    /* eslint-enable max-statements */
     get componentsMap() {
         return this.root?.childComponentsMap || {};
     }
@@ -480,7 +472,10 @@ export default class Component extends Element {
         return Promise.resolve(this);
     }
     get isPDFReadOnlyMode() {
-        return (this.parent && this.parent.form && this.parent.form.display === 'pdf' && this.options.readOnly);
+        return this.parent &&
+            this.parent.form &&
+            (this.parent.form.display === 'pdf') &&
+            this.options.readOnly;
     }
     get labelInfo() {
         const label = {};
@@ -489,10 +484,7 @@ export default class Component extends Element {
         label.labelPosition = this.component.labelPosition;
         label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;
         const isPDFReadOnlyMode = this.isPDFReadOnlyMode;
-        if (this.hasInput &&
-            this.component.validate &&
-            boolValue(this.component.validate.required) &&
-            !isPDFReadOnlyMode) {
+        if (this.hasInput && this.component.validate && boolValue(this.component.validate.required) && !isPDFReadOnlyMode) {
             label.className += ' field-required';
         }
         if (label.hidden) {
@@ -505,7 +497,7 @@ export default class Component extends Element {
     }
     init() {
         this.disabled = this.shouldDisabled;
-        this._visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;
+        this._visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);
         if (this.component.addons?.length) {
             this.component.addons.forEach((addon) => this.createAddon(addon));
         }
@@ -525,7 +517,7 @@ export default class Component extends Element {
     set rowIndex(value) {
         this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
             ...(this.parent?.paths || {}),
-            ...{ dataIndex: value },
+            ...{ dataIndex: value }
         });
         this._rowIndex = value;
     }
@@ -542,7 +534,8 @@ export default class Component extends Element {
         let addon = null;
         if (Addon) {
             const supportedComponents = Addon.info.supportedComponents;
-            const supportsThisComponentType = !supportedComponents?.length || supportedComponents.indexOf(this.component.type) !== -1;
+            const supportsThisComponentType = !supportedComponents?.length ||
+                supportedComponents.indexOf(this.component.type) !== -1;
             if (supportsThisComponentType) {
                 addon = new Addon(settings, this);
                 this.addons.push(addon);
@@ -579,9 +572,7 @@ export default class Component extends Element {
         }
     }
     get shouldDisabled() {
-        return (this.options.readOnly ||
-            this.component.disabled ||
-            (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]));
+        return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);
     }
     get isInputComponent() {
         return !this.component.hasOwnProperty('input') || this.component.input;
@@ -760,7 +751,7 @@ export default class Component extends Element {
             'left-left',
             'left-right',
             'right-left',
-            'right-right',
+            'right-right'
         ].includes(this.labelPosition);
     }
     get labelPositions() {
@@ -798,7 +789,7 @@ export default class Component extends Element {
             isRightPosition,
             isRightAlign,
             labelStyles,
-            contentStyles,
+            contentStyles
         };
     }
     /**
@@ -825,11 +816,11 @@ export default class Component extends Element {
                     modified[key] = val;
                 }
             }
-            else if ((!recursion && key === 'type') ||
-                (!recursion && key === 'key') ||
-                (!recursion && key === 'label') ||
-                (!recursion && key === 'input') ||
-                (!recursion && key === 'tableView') ||
+            else if ((!recursion && (key === 'type')) ||
+                (!recursion && (key === 'key')) ||
+                (!recursion && (key === 'label')) ||
+                (!recursion && (key === 'input')) ||
+                (!recursion && (key === 'tableView')) ||
                 (val !== '' && !defaultSchema.hasOwnProperty(key)) ||
                 (val !== '' && val !== defaultSchema[key]) ||
                 (defaultSchema[key] && val !== defaultSchema[key])) {
@@ -873,32 +864,21 @@ export default class Component extends Element {
         return super.t(text, params, ...args);
     }
     labelIsHidden() {
-        return (!this.component.label ||
-            (((!this.isInDataGrid && this.component.hideLabel) ||
+        return !this.component.label ||
+            ((!this.isInDataGrid && this.component.hideLabel) ||
                 (this.isInDataGrid && !this.component.dataGridLabel) ||
                 this.options.floatingLabels ||
-                this.options.inputsOnly) &&
-                !this.builderMode));
+                this.options.inputsOnly) && !this.builderMode;
     }
     transform(type, value) {
-        const frameworkTemplates = this.options.template
-            ? Templates.templates[this.options.template]
-            : Templates.current;
+        const frameworkTemplates = this.options.template ? Templates.templates[this.options.template] : Templates.current;
         return frameworkTemplates.hasOwnProperty('transform')
             ? frameworkTemplates.transform(type, value, this)
             : (type, value) => value;
     }
     getTemplate(names, modes) {
-        modes = Array.isArray(modes)
-            ? modes
-            : [
-                modes,
-            ];
-        names = Array.isArray(names)
-            ? names
-            : [
-                names,
-            ];
+        modes = Array.isArray(modes) ? modes : [modes];
+        names = Array.isArray(names) ? names : [names];
         if (!modes.includes('form')) {
             modes.push('form');
         }
@@ -909,9 +889,7 @@ export default class Component extends Element {
                 return result;
             }
         }
-        const frameworkTemplates = this.options.template
-            ? Templates.templates[this.options.template]
-            : Templates.current;
+        const frameworkTemplates = this.options.template ? Templates.templates[this.options.template] : Templates.current;
         result = this.checkTemplate(frameworkTemplates, names, modes);
         if (result) {
             return result;
@@ -1043,9 +1021,7 @@ export default class Component extends Element {
         if (settings && this.root?.shadowRoot) {
             settings.shadowRoot = this.root.shadowRoot;
         }
-        const widget = settings && Widgets[settings.type]
-            ? new Widgets[settings.type](settings, this.component, this)
-            : null;
+        const widget = settings && Widgets[settings.type] ? new Widgets[settings.type](settings, this.component, this) : null;
         return widget;
     }
     /**
@@ -1054,12 +1030,7 @@ export default class Component extends Element {
      */
     getBrowserLanguage() {
         const nav = window.navigator;
-        const browserLanguagePropertyKeys = [
-            'language',
-            'browserLanguage',
-            'systemLanguage',
-            'userLanguage',
-        ];
+        const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];
         let language;
         // support for HTML 5.1 "navigator.languages"
         if (Array.isArray(nav.languages)) {
@@ -1105,8 +1076,7 @@ export default class Component extends Element {
      * @returns {string} - The submission timezone.
      */
     get submissionTimezone() {
-        this.options.submissionTimezone =
-            this.options.submissionTimezone || _.get(this.root, 'options.submissionTimezone');
+        this.options.submissionTimezone = this.options.submissionTimezone || _.get(this.root, 'options.submissionTimezone');
         return this.options.submissionTimezone;
     }
     /**
@@ -1130,8 +1100,8 @@ export default class Component extends Element {
         }
         const submissionTimezone = this.submissionTimezone;
         if (submissionTimezone &&
-            (settings.displayInTimezone === 'submission' ||
-                ((this.options.pdf || this.options.server) && settings.displayInTimezone === 'viewer'))) {
+            ((settings.displayInTimezone === 'submission') ||
+                ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {
             return submissionTimezone;
         }
         // Return current timezone if none are provided.
@@ -1222,7 +1192,7 @@ export default class Component extends Element {
                 id: this.id,
                 classes: this.className,
                 styles: this.customStyle,
-                children,
+                children
             }, topLevel);
         }
         else {
@@ -1231,7 +1201,7 @@ export default class Component extends Element {
                 id: this.id,
                 classes: this.className,
                 styles: this.customStyle,
-                children,
+                children
             }, topLevel);
         }
     }
@@ -1244,7 +1214,8 @@ export default class Component extends Element {
     createTooltip(tooltipEl, settings = {}) {
         const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
         const tooltipDataTitle = tooltipEl.getAttribute('data-title');
-        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute).replace(/(?:\r\n|\r|\n)/g, '<br />');
+        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
+            .replace(/(?:\r\n|\r|\n)/g, '<br />');
         return tippy(tooltipEl, {
             allowHTML: true,
             trigger: 'mouseenter click focus',
@@ -1286,7 +1257,9 @@ export default class Component extends Element {
         if (!this.builderMode && !this.previewMode && this.component.modalEdit) {
             const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
             const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
-            const openModalTemplate = this.componentModal && modalShouldBeOpened ? this.componentModal.openModalTemplate : null;
+            const openModalTemplate = this.componentModal && modalShouldBeOpened
+                ? this.componentModal.openModalTemplate
+                : null;
             this.componentModal = this.createComponentModal(element, modalShouldBeOpened, currentValue);
             this.setOpenModalElement(openModalTemplate);
         }
@@ -1300,7 +1273,7 @@ export default class Component extends Element {
         }
         this.loadRefs(element, {
             messageContainer: 'single',
-            tooltip: 'multiple',
+            tooltip: 'multiple'
         });
         this.attachTooltips(this.refs.tooltip);
         // Attach logic.
@@ -1324,7 +1297,7 @@ export default class Component extends Element {
         const isFocused = this.root?.focusedComponent?.path === this.path;
         if (isFocused) {
             this.loadRefs(this.element, { input: 'multiple' });
-            this.focus(this.root.currentSelection?.index);
+            this.focus(this.root?.currentSelection?.index);
             this.restoreCaretPosition();
         }
     }
@@ -1336,13 +1309,13 @@ export default class Component extends Element {
      */
     addShortcut(element, shortcut) {
         // Avoid infinite recursion.
-        if (!element || !this.root || this.root === this) {
+        if (!element || !this.root || (this.root === this)) {
             return;
         }
         if (!shortcut) {
             shortcut = this.component.shortcut;
         }
-        this.root.addShortcut(element, shortcut);
+        this.root?.addShortcut(element, shortcut);
     }
     /**
      * Removes a keyboard shortcut from this component.
@@ -1352,13 +1325,13 @@ export default class Component extends Element {
      */
     removeShortcut(element, shortcut) {
         // Avoid infinite recursion.
-        if (!element || this.root === this) {
+        if (!element || (this.root === this)) {
             return;
         }
         if (!shortcut) {
             shortcut = this.component.shortcut;
         }
-        this.root.removeShortcut(element, shortcut);
+        this.root?.removeShortcut(element, shortcut);
     }
     /**
      * Remove all event handlers.
@@ -1398,10 +1371,7 @@ export default class Component extends Element {
         if (refreshData === 'data') {
             this.refresh(this.data, changed, flags);
         }
-        else if (changePath &&
-            changed.instance?.paths?.localPath === refreshData &&
-            changed &&
-            changed.instance &&
+        else if ((changePath && (changed.instance?.paths?.localPath === refreshData)) && changed && changed.instance &&
             // Make sure the changed component is not in a different "context". Solves issues where refreshOn being set
             // in fields inside EditGrids could alter their state from other rows (which is bad).
             this.inContext(changed.instance)) {
@@ -1420,20 +1390,16 @@ export default class Component extends Element {
             return;
         }
         if (!changes.length && flags.changed) {
-            changes = [
-                flags.changed,
-            ];
+            changes = [flags.changed];
         }
-        const refreshOn = flags.fromBlur
-            ? this.component.refreshOnBlur
-            : this.component.refreshOn || this.component.redrawOn;
+        const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;
         // If they wish to refresh on a value, then add that here.
         if (refreshOn) {
             if (Array.isArray(refreshOn)) {
-                refreshOn.forEach((refreshData) => changes.forEach((changed) => this.checkRefresh(refreshData, changed, flags)));
+                refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));
             }
             else {
-                changes.forEach((changed) => this.checkRefresh(refreshOn, changed, flags));
+                changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));
             }
         }
     }
@@ -1454,7 +1420,7 @@ export default class Component extends Element {
             if (this.component.clearOnRefresh) {
                 this.setValue(null);
             }
-            this.triggerRedraw();
+            this.triggerRedraw?.();
         }
     }
     /**
@@ -1504,7 +1470,7 @@ export default class Component extends Element {
      */
     createViewOnlyElement() {
         this.setElement(this.ce('dl', {
-            id: this.id,
+            id: this.id
         }));
         if (this.element) {
             // Ensure you can get the component info from the element.
@@ -1616,7 +1582,7 @@ export default class Component extends Element {
      */
     itemValueForHTMLMode(value) {
         if (Array.isArray(value)) {
-            const values = value.map((item) => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));
+            const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));
             return values.join(', ');
         }
         return this.itemValue(value);
@@ -1652,8 +1618,7 @@ export default class Component extends Element {
         };
         const handleCloseClick = (e) => {
             if (confirm) {
-                confirm()
-                    .then(() => close(e))
+                confirm().then(() => close(e))
                     .catch(() => { });
             }
             else {
@@ -1753,11 +1718,9 @@ export default class Component extends Element {
             // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)
             // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.
             t: this.t.bind(this),
-            submission: this.root
-                ? this.root._submission
-                : {
-                    data: this.rootValue,
-                },
+            submission: (this.root ? this.root._submission : {
+                data: this.rootValue
+            }),
             form: this.root ? this.root._form : {},
             options: this.options,
         }, additional));
@@ -1810,12 +1773,7 @@ export default class Component extends Element {
         const iconset = this.options.iconset || Templates.current.defaultIconset || 'fa';
         return Templates.current.hasOwnProperty('iconClass')
             ? Templates.current.iconClass(iconset, name, spinning)
-            : [
-                'fa',
-                'bi',
-            ].includes(this.options.iconset)
-                ? Templates.defaultTemplates.iconClass(iconset, name, spinning)
-                : name;
+            : this.options.iconset === 'fa' ? Templates.defaultTemplates.iconClass(iconset, name, spinning) : name;
     }
     /**
      * Returns the size css class names for our current template.
@@ -1823,16 +1781,16 @@ export default class Component extends Element {
      * @returns {string} - The size class for our component.
      */
     size(size) {
-        return Templates.current.hasOwnProperty('size') ? Templates.current.size(size) : size;
+        return Templates.current.hasOwnProperty('size')
+            ? Templates.current.size(size)
+            : size;
     }
     /**
      * The readible name for this component.
      * @returns {string} - The name of the component.
      */
     get name() {
-        return this.t(this.component.label || this.component.placeholder || this.key, {
-            _userInput: true,
-        });
+        return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });
     }
     /**
      * Returns the visible errors for this component.
@@ -1853,7 +1811,10 @@ export default class Component extends Element {
      * @returns {string} - The error label for this component.
      */
     get errorLabel() {
-        return this.t(this.component.errorLabel || this.component.label || this.component.placeholder || this.key);
+        return this.t(this.component.errorLabel
+            || this.component.label
+            || this.component.placeholder
+            || this.key);
     }
     /**
      * Get the error message provided a certain type of error.
@@ -1861,9 +1822,7 @@ export default class Component extends Element {
      * @returns {string} - The error message configured for this component.
      */
     errorMessage(type) {
-        return this.component.errors && this.component.errors[type]
-            ? this.component.errors[type]
-            : type;
+        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;
     }
     /**
      * Sets the content, innerHTML, of an element to the sanitized content.
@@ -1938,7 +1897,7 @@ export default class Component extends Element {
      */
     removeEventListeners() {
         super.removeEventListeners();
-        this.tooltips.forEach((tooltip) => tooltip.destroy());
+        this.tooltips.forEach(tooltip => tooltip.destroy());
         this.tooltips = [];
     }
     /**
@@ -2029,7 +1988,7 @@ export default class Component extends Element {
             this.redraw();
         }
         // Check visibility
-        const visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;
+        const visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);
         if (this.visible !== visible) {
             this.visible = visible;
         }
@@ -2071,8 +2030,7 @@ export default class Component extends Element {
         const newComponent = fastCloneDeep(this.originalComponent);
         let changed = logics.reduce((changed, logic) => {
             const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);
-            return ((result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) ||
-                changed);
+            return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;
         }, false);
         // If component definition changed, replace and mark as changed.
         if (!_.isEqual(this.component, newComponent)) {
@@ -2232,17 +2190,13 @@ export default class Component extends Element {
             };
         }
         if (!Array.isArray(messages)) {
-            messages = [
-                messages,
-            ];
+            messages = [messages];
         }
-        messages = _.uniqBy(messages, (message) => message.message);
+        messages = _.uniqBy(messages, message => message.message);
         if (this.refs.messageContainer) {
-            this.setContent(this.refs.messageContainer, messages
-                .map((message) => {
+            this.setContent(this.refs.messageContainer, messages.map((message) => {
                 return this.renderTemplate('message', { ...message });
-            })
-                .join(''));
+            }).join(''));
         }
     }
     /**
@@ -2302,16 +2256,14 @@ export default class Component extends Element {
      */
     clearComponentOnHide() {
         // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.
-        if (this.component.clearOnHide !== false &&
-            !this.options.readOnly &&
-            !this.options.showHiddenFields) {
+        if (this.component.clearOnHide !== false && !this.options.readOnly && !this.options.showHiddenFields) {
             if (this.shouldConditionallyClear()) {
                 this.deleteValue();
             }
             else if (!this.hasValue() && this.shouldAddDefaultValue) {
                 // If shown, ensure the default is set.
                 this.setValue(this.defaultValue, {
-                    noUpdateEvent: true,
+                    noUpdateEvent: true
                 });
             }
         }
@@ -2355,7 +2307,7 @@ export default class Component extends Element {
         }
         if (this.component.onChange) {
             this.evaluate(this.component.onChange, {
-                flags,
+                flags
             });
         }
         // Set the changed variable.
@@ -2363,7 +2315,7 @@ export default class Component extends Element {
             instance: this,
             component: this.component,
             value: this.dataValue,
-            flags: flags,
+            flags: flags
         };
         // Emit the change.
         this.emit('componentChange', changed);
@@ -2386,65 +2338,16 @@ export default class Component extends Element {
                 placeholder: this.t(this.component.placeholder, { _userInput: true }),
                 modules: {
                     toolbar: [
-                        [
-                            {
-                                size: [
-                                    'small',
-                                    false,
-                                    'large',
-                                    'huge',
-                                ],
-                            },
-                        ], // custom dropdown
-                        [
-                            {
-                                header: [
-                                    1,
-                                    2,
-                                    3,
-                                    4,
-                                    5,
-                                    6,
-                                    false,
-                                ],
-                            },
-                        ],
-                        [
-                            { font: [] },
-                        ],
-                        [
-                            'bold',
-                            'italic',
-                            'underline',
-                            'strike',
-                            { script: 'sub' },
-                            { script: 'super' },
-                            'clean',
-                        ],
-                        [
-                            { color: [] },
-                            { background: [] },
-                        ],
-                        [
-                            { list: 'ordered' },
-                            { list: 'bullet' },
-                            { indent: '-1' },
-                            { indent: '+1' },
-                            { align: [] },
-                        ],
-                        [
-                            'blockquote',
-                            'code-block',
-                        ],
-                        [
-                            'link',
-                            'image',
-                            'video',
-                            'formula',
-                            'source',
-                        ],
-                    ],
-                },
+                        [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
+                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+                        [{ 'font': [] }],
+                        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],
+                        [{ 'color': [] }, { 'background': [] }],
+                        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],
+                        ['blockquote', 'code-block'],
+                        ['link', 'image', 'video', 'formula', 'source']
+                    ]
+                }
             },
             ace: {
                 theme: 'ace/theme/xcode',
@@ -2452,7 +2355,7 @@ export default class Component extends Element {
                 minLines: 12,
                 tabSize: 2,
                 mode: 'ace/mode/javascript',
-                placeholder: this.t(this.component.placeholder, { _userInput: true }),
+                placeholder: this.t(this.component.placeholder, { _userInput: true })
             },
             ckeditor: {
                 image: {
@@ -2462,18 +2365,18 @@ export default class Component extends Element {
                         'imageStyle:full',
                         'imageStyle:alignLeft',
                         'imageStyle:alignCenter',
-                        'imageStyle:alignRight',
+                        'imageStyle:alignRight'
                     ],
                     styles: [
                         'full',
                         'alignLeft',
                         'alignCenter',
-                        'alignRight',
-                    ],
+                        'alignRight'
+                    ]
                 },
-                extraPlugins: [],
+                extraPlugins: []
             },
-            default: {},
+            default: {}
         };
     }
     addCKE(element, settings, onChange) {
@@ -2484,7 +2387,8 @@ export default class Component extends Element {
         if (this.component.isUploadEnabled) {
             settings.extraPlugins.push(getFormioUploadAdapterPlugin(this.fileService, this));
         }
-        return Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', _.get(this.options, 'editors.ckeditor.src', `${Formio.cdn.ckeditor}/ckeditor.js`), true).then(() => {
+        return Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', _.get(this.options, 'editors.ckeditor.src', `${Formio.cdn.ckeditor}/ckeditor.js`), true)
+            .then(() => {
             if (!element.parentNode) {
                 return Promise.reject();
             }
@@ -2494,7 +2398,7 @@ export default class Component extends Element {
                 return Promise.resolve(editor);
             }
             else {
-                return ClassicEditor.create(element, settings).then((editor) => {
+                return ClassicEditor.create(element, settings).then(editor => {
                     editor.model.document.on('change', () => onChange(editor.data.get()));
                     return editor;
                 });
@@ -2508,16 +2412,18 @@ export default class Component extends Element {
             ...settings,
             modules: {
                 table: true,
-                ...settings.modules,
-            },
+                ...settings.modules
+            }
         };
         // Lazy load the quill css.
         Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [
-            { type: 'styles', src: `${Formio.cdn.quill}/quill.${settings.theme}.css` },
+            { type: 'styles', src: `${Formio.cdn.quill}/quill.${settings.theme}.css` }
         ], true);
         // Lazy load the quill library.
-        return Formio.requireLibrary('quill', 'Quill', _.get(this.options, 'editors.quill.src', `${Formio.cdn.quill}/quill.min.js`), true).then(() => {
-            return Formio.requireLibrary('quill-table', 'Quill', `${Formio.cdn.baseUrl}/quill/quill-table.js`, true).then(() => {
+        return Formio.requireLibrary('quill', 'Quill', _.get(this.options, 'editors.quill.src', `${Formio.cdn.quill}/quill.min.js`), true)
+            .then(() => {
+            return Formio.requireLibrary('quill-table', 'Quill', `${Formio.cdn.baseUrl}/quill/quill-table.js`, true)
+                .then(() => {
                 if (!element.parentNode) {
                     return Promise.reject();
                 }
@@ -2533,7 +2439,7 @@ export default class Component extends Element {
                         if (txtArea.style.display === 'inherit') {
                             this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));
                         }
-                        txtArea.style.display = txtArea.style.display === 'none' ? 'inherit' : 'none';
+                        txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';
                     });
                 }
                 /** END CODEBLOCK */
@@ -2554,10 +2460,10 @@ export default class Component extends Element {
     }
     get shouldSanitizeValue() {
         // Sanitize value if sanitizing for thw whole content is turned off
-        return this.options?.sanitize !== false;
+        return (this.options?.sanitize !== false);
     }
     addAce(element, settings, onChange) {
-        if (!settings || settings.theme === 'snow') {
+        if (!settings || (settings.theme === 'snow')) {
             const mode = settings ? settings.mode : '';
             settings = {};
             if (mode) {
@@ -2565,7 +2471,8 @@ export default class Component extends Element {
             }
         }
         settings = _.merge(this.wysiwygDefault.ace, _.get(this.options, 'editors.ace.settings', {}), settings || {});
-        return Formio.requireLibrary('ace', 'ace', _.get(this.options, 'editors.ace.src', `${Formio.cdn.ace}/ace.js`), true).then((editor) => {
+        return Formio.requireLibrary('ace', 'ace', _.get(this.options, 'editors.ace.src', `${Formio.cdn.ace}/ace.js`), true)
+            .then((editor) => {
             editor = editor.edit(element);
             editor.removeAllListeners('change');
             editor.setOptions(settings);
@@ -2623,10 +2530,10 @@ export default class Component extends Element {
         if (!this.allowData || !this.key) {
             return;
         }
-        if (value !== null && value !== undefined) {
+        if ((value !== null) && (value !== undefined)) {
             value = this.hook('setDataValue', value, this.key, this._data);
         }
-        if (value === null || value === undefined) {
+        if ((value === null) || (value === undefined)) {
             this.unset();
             return;
         }
@@ -2644,7 +2551,7 @@ export default class Component extends Element {
             if (_.isArray(dataValue) && dataValue.hasOwnProperty(index)) {
                 dataValue.splice(index, 1);
                 this.dataValue = dataValue;
-                this.triggerChange(flags);
+                this.triggerChange?.(flags);
             }
         }
     }
@@ -2657,7 +2564,7 @@ export default class Component extends Element {
     deleteValue() {
         this.setValue(null, {
             noUpdateEvent: true,
-            noDefault: true,
+            noDefault: true
         });
         this.unset();
     }
@@ -2672,10 +2579,9 @@ export default class Component extends Element {
      * @returns {boolean} - TRUE if a default value is set.
      */
     get hasDefaultValue() {
-        return (this.component.customDefaultValue ||
-            (this.component.hasOwnProperty('defaultValue') &&
-                this.component.defaultValue !== null &&
-                this.component.defaultValue !== undefined));
+        return this.component.customDefaultValue || (this.component.hasOwnProperty('defaultValue') &&
+            (this.component.defaultValue !== null) &&
+            (this.component.defaultValue !== undefined));
     }
     /**
      * Determine if we should add a default value for this component.
@@ -2770,7 +2676,7 @@ export default class Component extends Element {
             Array.isArray(this.defaultValue) &&
             this.refs.hasOwnProperty('input') &&
             valueInput &&
-            valueInput.length !== value.length &&
+            (valueInput.length !== value.length) &&
             this.visible) {
             if (isFilelink || valueInput.length) {
                 this.redraw();
@@ -2824,9 +2730,9 @@ export default class Component extends Element {
     }
     setDefaultValue() {
         if (this.defaultValue && this.shouldAddDefaultValue) {
-            const defaultValue = this.component.multiple && !this.dataValue.length ? [] : this.defaultValue;
+            const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;
             this.setValue(defaultValue, {
-                noUpdateEvent: true,
+                noUpdateEvent: true
             });
         }
     }
@@ -2836,7 +2742,7 @@ export default class Component extends Element {
     restoreValue() {
         if (this.hasSetValue) {
             this.setValue(this.dataValue, {
-                noUpdateEvent: true,
+                noUpdateEvent: true
             });
         }
         else {
@@ -2858,10 +2764,10 @@ export default class Component extends Element {
      * @returns {boolean} - If the value changed.
      */
     updateComponentValue(value, flags = {}) {
-        let newValue = !flags.resetValue && (value === undefined || value === null) ? this.getValue() : value;
+        let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;
         newValue = this.normalizeValue(newValue, flags);
         const oldValue = this.dataValue;
-        let changed = newValue !== undefined ? this.hasChanged(newValue, oldValue) : false;
+        let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);
         if (changed) {
             this.dataValue = newValue;
             changed = this.dataValue !== oldValue;
@@ -2885,7 +2791,7 @@ export default class Component extends Element {
             className: this.iconClass(name),
             ref,
             styles,
-            content,
+            content
         });
     }
     /**
@@ -2896,7 +2802,7 @@ export default class Component extends Element {
         this.setValue(this.defaultValue || this.emptyValue, {
             noUpdateEvent: true,
             noValidate: true,
-            resetValue: true,
+            resetValue: true
         });
     }
     /**
@@ -2906,12 +2812,15 @@ export default class Component extends Element {
      * @returns {boolean} - TRUE if the value has changed.
      */
     hasChanged(newValue, oldValue) {
-        if ((newValue === undefined || newValue === null) &&
-            (oldValue === undefined || oldValue === null || this.isEmpty(oldValue))) {
+        if (((newValue === undefined) || (newValue === null)) &&
+            ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {
             return false;
         }
         // If we do not have a value and are getting set to anything other than undefined or null, then we changed.
-        if (newValue !== undefined && newValue !== null && this.allowData && !this.hasValue()) {
+        if (newValue !== undefined &&
+            newValue !== null &&
+            this.allowData &&
+            !this.hasValue()) {
             return true;
         }
         return !_.isEqual(newValue, oldValue);
@@ -2928,7 +2837,7 @@ export default class Component extends Element {
                 // Reset the errors when a submission has been made and allow it to revalidate.
                 this._errors = [];
             }
-            this.triggerChange(flags);
+            this.triggerChange?.(flags);
             return true;
         }
         return false;
@@ -2945,10 +2854,11 @@ export default class Component extends Element {
             data,
             row: row || this.data,
             submission: this.root?._submission || {
-                data: this.rootValue,
-            },
+                data: this.rootValue
+            }
         }, 'value');
     }
+    /* eslint-disable max-statements */
     calculateComponentValue(data, flags, row) {
         // Skip value calculation for the component if we don't have entire form data set or in builder mode
         if (this.builderMode || _.isUndefined(_.get(this, 'root.data'))) {
@@ -2969,10 +2879,7 @@ export default class Component extends Element {
             !(this.component.calculateValue || this.component.calculateValueVariable) ||
             (this.options.server && !this.component.calculateServer) ||
             (flags.dataSourceInitialLoading && allowOverride) ||
-            (this.options.readOnly &&
-                this.options.pdf &&
-                allowOverride &&
-                _.get(this.root, 'submission._id', false))) {
+            (this.options.readOnly && this.options.pdf && allowOverride && _.get(this.root, 'submission._id', false))) {
             return false;
         }
         const dataValue = this.dataValue;
@@ -2988,7 +2895,7 @@ export default class Component extends Element {
         // Do not override calculations on server if they have calculateServer set.
         if (allowOverride) {
             // The value is considered locked if it is not empty and comes from a submission value.
-            const fromSubmission = flags.fromSubmission && this.component.persistent === true;
+            const fromSubmission = (flags.fromSubmission && this.component.persistent === true);
             if (this.isEmpty(dataValue)) {
                 // Reset the calculation lock if ever the data is cleared.
                 this.calculationLocked = false;
@@ -2997,7 +2904,7 @@ export default class Component extends Element {
                 this.calculationLocked = true;
                 return false;
             }
-            const firstPass = this.calculatedValue === undefined || flags.resetValue;
+            const firstPass = (this.calculatedValue === undefined) || flags.resetValue;
             if (firstPass) {
                 this.calculatedValue = null;
             }
@@ -3030,7 +2937,7 @@ export default class Component extends Element {
         }
         this.calculatedValue = fastCloneDeep(calculatedValue);
         if (changed) {
-            if (!flags.noPristineChangeOnModified && this.root.initialized) {
+            if (!flags.noPristineChangeOnModified && this.root?.initialized) {
                 this.pristine = false;
             }
             flags.triggeredComponentId = this.id;
@@ -3038,6 +2945,7 @@ export default class Component extends Element {
         }
         return false;
     }
+    /* eslint-enable max-statements */
     /**
      * Performs calculations in this component plus any child components.
      * @param {*} data - The data to perform the calculation with.
@@ -3112,8 +3020,8 @@ export default class Component extends Element {
             scope: validationScope,
             instance: this,
             processors: [
-                validateProcessInfo,
-            ],
+                validateProcessInfo
+            ]
         });
         const errors = validationScope.errors;
         const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
@@ -3132,10 +3040,8 @@ export default class Component extends Element {
         if (silentCheck) {
             return [];
         }
-        const messages = errors.filter((message) => !message.fromServer);
-        if (errors.length &&
-            !!messages.length &&
-            (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {
+        const messages = errors.filter(message => !message.fromServer);
+        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {
             return this.setCustomValidity(messages, dirty);
         }
         else {
@@ -3149,12 +3055,7 @@ export default class Component extends Element {
      */
     interpolateErrors(errors) {
         const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
-        return this.serverErrors?.length
-            ? [
-                ...interpolatedErrors,
-                ...this.serverErrors,
-            ]
-            : interpolatedErrors;
+        return this.serverErrors?.length ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;
     }
     /**
      * Show component validation errors.
@@ -3168,7 +3069,7 @@ export default class Component extends Element {
         if (flags.silentCheck) {
             return [];
         }
-        let isDirty = flags.dirty === false ? false : this.dirty || flags.dirty;
+        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);
         if (this.options.alwaysDirty) {
             isDirty = true;
         }
@@ -3202,8 +3103,8 @@ export default class Component extends Element {
             form: this.root ? this.root._form : {},
             scope: { errors: [] },
             processors: [
-                validateProcessInfo,
-            ],
+                validateProcessInfo
+            ]
         };
         if (async) {
             return processOne(processContext).then(() => {
@@ -3225,7 +3126,7 @@ export default class Component extends Element {
      * @returns {boolean} - TRUE if the component is valid.
      */
     checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {
-        data = this.rootValue;
+        data = data || this.rootValue;
         row = row || this.data;
         flags.dirty = dirty || false;
         if (flags.async) {
@@ -3312,15 +3213,13 @@ export default class Component extends Element {
         this.checkingData = false;
     }
     checkModal(errors = [], dirty = false) {
-        const messages = errors.filter((error) => !error.fromServer);
+        const messages = errors.filter(error => !error.fromServer);
         const isValid = errors.length === 0;
         if (!this.component.modalEdit || !this.componentModal) {
             return;
         }
         if (dirty && !isValid) {
-            this.setErrorClasses([
-                this.refs.openModal,
-            ], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);
+            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);
         }
         else {
             this.clearErrorClasses(this.refs.openModalWrapper);
@@ -3330,7 +3229,7 @@ export default class Component extends Element {
         return this.dataValue;
     }
     isEmpty(value = this.dataValue) {
-        const isEmptyArray = _.isArray(value) && value.length === 1 ? _.isEqual(value[0], this.emptyValue) : false;
+        const isEmptyArray = (_.isArray(value) && value.length === 1) ? _.isEqual(value[0], this.emptyValue) : false;
         return value == null || value.length === 0 || _.isEqual(value, this.emptyValue) || isEmptyArray;
     }
     isEqual(valueA, valueB = this.dataValue) {
@@ -3361,7 +3260,7 @@ export default class Component extends Element {
     }
     addFocusBlurEvents(element) {
         this.addEventListener(element, 'focus', () => {
-            if (this.root.focusedComponent !== this) {
+            if (this.root && this.root.focusedComponent !== this) {
                 if (this.root.pendingBlur) {
                     this.root.pendingBlur();
                 }
@@ -3377,11 +3276,11 @@ export default class Component extends Element {
             this.root.pendingBlur = FormioUtils.delay(() => {
                 this.emit('blur', this);
                 if (this.component.validateOn === 'blur') {
-                    this.root.triggerChange({ fromBlur: true }, {
+                    this.root.triggerChange?.({ fromBlur: true }, {
                         instance: this,
                         component: this.component,
                         value: this.dataValue,
-                        flags: { fromBlur: true },
+                        flags: { fromBlur: true }
                     });
                 }
                 this.root.focusedComponent = null;
@@ -3389,6 +3288,7 @@ export default class Component extends Element {
             });
         });
     }
+    // eslint-disable-next-line max-statements
     setCustomValidity(messages, dirty, external) {
         const inputRefs = this.isInputComponent ? this.refs.input || [] : null;
         if (typeof messages === 'string' && messages) {
@@ -3400,15 +3300,13 @@ export default class Component extends Element {
         }
         if (!Array.isArray(messages)) {
             if (messages) {
-                messages = [
-                    messages,
-                ];
+                messages = [messages];
             }
             else {
                 messages = [];
             }
         }
-        const errors = messages.filter((message) => message.level === 'error');
+        const errors = messages.filter(message => message.level === 'error');
         let invalidInputRefs = inputRefs;
         // Filter the invalid input refs in multiple components
         if (this.component.multiple) {
@@ -3439,7 +3337,7 @@ export default class Component extends Element {
                 this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);
             }
         }
-        else if (!errors.length || errors[0].external === !!external) {
+        else if (!errors.length || (errors[0].external === !!external)) {
             if (this.refs.messageContainer) {
                 this.empty(this.refs.messageContainer);
             }
@@ -3460,7 +3358,7 @@ export default class Component extends Element {
      * @returns {boolean|*} - TRUE if the value is hidden.
      */
     isValueHidden() {
-        if (this.component.protected && this.root.editing) {
+        if (this.component.protected && this.root?.editing) {
             return false;
         }
         if (!this.root || !this.root.hasOwnProperty('editing')) {
@@ -3469,9 +3367,7 @@ export default class Component extends Element {
         if (!this.root || !this.root.editing) {
             return false;
         }
-        return (this.component.protected ||
-            !this.component.persistent ||
-            this.component.persistent === 'client-only');
+        return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));
     }
     shouldSkipValidation(data, row, flags = {}) {
         const rules = [
@@ -3485,16 +3381,15 @@ export default class Component extends Element {
             () => this.isValueHidden(),
             // Force valid if component is hidden.
             () => {
-                if (!this.component.validateWhenHidden &&
-                    (!this.visible || !this.checkCondition(row, data))) {
+                if (!this.component.validateWhenHidden && (!this.visible || !this.checkCondition(row, data))) {
                     // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.
                     this._errors = [];
                     return true;
                 }
                 return false;
-            },
+            }
         ];
-        return rules.some((pred) => pred());
+        return rules.some(pred => pred());
     }
     // Maintain reverse compatibility.
     whenReady() {
@@ -3511,13 +3406,7 @@ export default class Component extends Element {
      */
     asString(value) {
         value = value || this.getValue();
-        return (Array.isArray(value)
-            ? value
-            : [
-                value,
-            ])
-            .map(_.toString)
-            .join(', ');
+        return (Array.isArray(value) ? value : [value]).map(_.toString).join(', ');
     }
     /**
      * Return if the component is disabled.
@@ -3546,13 +3435,13 @@ export default class Component extends Element {
         }
     }
     setLoading(element, loading) {
-        if (!element || element.loading === loading) {
+        if (!element || (element.loading === loading)) {
             return;
         }
         element.loading = loading;
         if (!element.loader && loading) {
             element.loader = this.ce('i', {
-                class: `${this.iconClass('refresh', true)} button-icon-right`,
+                class: `${this.iconClass('refresh', true)} button-icon-right`
             });
         }
         if (element.loader) {
@@ -3567,9 +3456,9 @@ export default class Component extends Element {
     selectOptions(select, tag, options, defaultValue) {
         _.each(options, (option) => {
             const attrs = {
-                value: option.value,
+                value: option.value
             };
-            if (defaultValue !== undefined && option.value === defaultValue) {
+            if (defaultValue !== undefined && (option.value === defaultValue)) {
                 attrs.selected = 'selected';
             }
             const optionElement = this.ce('option', attrs);
@@ -3596,7 +3485,8 @@ export default class Component extends Element {
     }
     getRelativePath(path) {
         const keyPart = `.${this.key}`;
-        const thisPath = this.isInputComponent ? this.path : this.path.slice(0).replace(keyPart, '');
+        const thisPath = this.isInputComponent ? this.path
+            : this.path.slice(0).replace(keyPart, '');
         return path.replace(thisPath, '');
     }
     clear() {
@@ -3613,7 +3503,7 @@ export default class Component extends Element {
         this.removeChildFrom(element, this.element);
     }
     detachLogic() {
-        this.logic.forEach((logic) => {
+        this.logic.forEach(logic => {
             if (logic.trigger.type === 'event') {
                 const event = this.interpolate(logic.trigger.event);
                 this.off(event); // only applies to callbacks on this component
@@ -3634,16 +3524,10 @@ export default class Component extends Element {
                         // If component definition changed, replace it.
                         if (!_.isEqual(this.component, newComponent)) {
                             this.component = newComponent;
-                            const visible = this.hasCondition()
-                                ? !this.conditionallyHidden()
-                                : !this.component.hidden;
+                            const visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;
                             const disabled = this.shouldDisabled;
                             // Change states which won't be recalculated during redrawing
                             if (this.visible !== visible) {
-                                // If the logic is triggered by an event and the action sets the hidden state then the original
-                                // component definition must be changed so that the components hidden state does not get flipped back by
-                                // the fieldLogic function
-                                this.originalComponent.hidden = !visible;
                                 this.visible = visible;
                             }
                             if (this.disabled !== disabled) {
@@ -3665,7 +3549,7 @@ export default class Component extends Element {
             name: this.options.name,
             type: this.component.inputType || 'text',
             class: 'form-control',
-            lang: this.options.language,
+            lang: this.options.language
         };
         if (this.component.placeholder) {
             attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });
@@ -3681,7 +3565,7 @@ export default class Component extends Element {
             type: 'input',
             component: this.component,
             changeEvent: 'change',
-            attr: attributes,
+            attr: attributes
         };
     }
     autofocus() {
@@ -3769,18 +3653,14 @@ Component.requireLibrary = function (name, property, src, polling) {
             Component.externalLibraries[name].resolve(plugin);
         }
         else {
-            src = Array.isArray(src)
-                ? src
-                : [
-                    src,
-                ];
+            src = Array.isArray(src) ? src : [src];
             src.forEach((lib) => {
                 let attrs = {};
                 let elementType = '';
                 if (typeof lib === 'string') {
                     lib = {
                         type: 'script',
-                        src: lib,
+                        src: lib
                     };
                 }
                 switch (lib.type) {
@@ -3790,14 +3670,14 @@ Component.requireLibrary = function (name, property, src, polling) {
                             src: lib.src,
                             type: 'text/javascript',
                             defer: true,
-                            async: true,
+                            async: true
                         };
                         break;
                     case 'styles':
                         elementType = 'link';
                         attrs = {
                             href: lib.src,
-                            rel: 'stylesheet',
+                            rel: 'stylesheet'
                         };
                         break;
                 }
@@ -3826,7 +3706,8 @@ Component.requireLibrary = function (name, property, src, polling) {
     return Component.externalLibraries[name].ready;
 };
 Component.libraryReady = function (name) {
-    if (Component.externalLibraries.hasOwnProperty(name) && Component.externalLibraries[name].ready) {
+    if (Component.externalLibraries.hasOwnProperty(name) &&
+        Component.externalLibraries[name].ready) {
         return Component.externalLibraries[name].ready;
     }
     return Promise.reject(`${name} library was not required.`);