@formio/js 5.2.4-rc.0 → 5.2.5

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

@@ -142,7 +142,7 @@ class Component extends Element_1.default {
                  */
                 strictDateValidation: false,
                 multiple: false,
-                unique: false,
+                unique: false
             },
             /**
              * The simple conditional settings for a component.
@@ -150,7 +150,7 @@ class Component extends Element_1.default {
             conditional: {
                 show: null,
                 when: null,
-                eq: '',
+                eq: ''
             },
             overlay: {
                 style: '',
@@ -166,7 +166,6 @@ class Component extends Element_1.default {
             properties: {},
             allowMultipleMasks: false,
             addons: [],
-            serverOverride: {},
         }, ...sources);
     }
     /**
@@ -175,20 +174,15 @@ class Component extends Element_1.default {
      */
     static get conditionOperatorsSettings() {
         return {
-            operators: [
-                'isEqual',
-                'isNotEqual',
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],
             valueComponent() {
                 return {
                     type: 'textfield',
                     widget: {
-                        type: 'input',
-                    },
+                        type: 'input'
+                    }
                 };
-            },
+            }
         };
     }
     /**
@@ -198,9 +192,7 @@ class Component extends Element_1.default {
      */
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (utils_1.default.getComponentSavedTypes(schema) || [
-            utils_1.default.componentValueTypes.any,
-        ]);
+        return utils_1.default.getComponentSavedTypes(schema) || [utils_1.default.componentValueTypes.any];
     }
     /**
      * Provides a table view for this component. Override if you wish to do something different than using getView
@@ -217,12 +209,13 @@ class Component extends Element_1.default {
      * @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) {
         var _a, _b, _c, _d;
         super(Object.assign({
             renderMode: 'form',
             attachMode: 'full',
-            noDefaults: false,
+            noDefaults: false
         }, options || {}));
         // Restore the component id.
         if (component && component.id) {
@@ -243,7 +236,9 @@ class Component extends Element_1.default {
          */
         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]) {
             lodash_1.default.merge(component, this.options.components[component.type]);
         }
         /**
@@ -326,12 +321,8 @@ class Component extends Element_1.default {
         /**
          * 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
@@ -426,6 +417,7 @@ class Component extends Element_1.default {
             this.init();
         }
     }
+    /* eslint-enable max-statements */
     get componentsMap() {
         var _a;
         return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};
@@ -484,7 +476,10 @@ class Component extends Element_1.default {
         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 = {};
@@ -493,10 +488,7 @@ class Component extends Element_1.default {
         label.labelPosition = this.component.labelPosition;
         label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;
         const isPDFReadOnlyMode = this.isPDFReadOnlyMode;
-        if (this.hasInput &&
-            this.component.validate &&
-            (0, utils_2.boolValue)(this.component.validate.required) &&
-            !isPDFReadOnlyMode) {
+        if (this.hasInput && this.component.validate && (0, utils_2.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {
             label.className += ' field-required';
         }
         if (label.hidden) {
@@ -510,7 +502,7 @@ class Component extends Element_1.default {
     init() {
         var _a;
         this.disabled = this.shouldDisabled;
-        this._visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;
+        this._visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);
         if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {
             this.component.addons.forEach((addon) => this.createAddon(addon));
         }
@@ -546,7 +538,8 @@ class Component extends Element_1.default {
         let addon = null;
         if (Addon) {
             const supportedComponents = Addon.info.supportedComponents;
-            const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) || supportedComponents.indexOf(this.component.type) !== -1;
+            const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||
+                supportedComponents.indexOf(this.component.type) !== -1;
             if (supportsThisComponentType) {
                 addon = new Addon(settings, this);
                 this.addons.push(addon);
@@ -583,9 +576,7 @@ class Component extends Element_1.default {
         }
     }
     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;
@@ -764,7 +755,7 @@ class Component extends Element_1.default {
             'left-left',
             'left-right',
             'right-left',
-            'right-right',
+            'right-right'
         ].includes(this.labelPosition);
     }
     get labelPositions() {
@@ -802,7 +793,7 @@ class Component extends Element_1.default {
             isRightPosition,
             isRightAlign,
             labelStyles,
-            contentStyles,
+            contentStyles
         };
     }
     /**
@@ -829,11 +820,11 @@ class Component extends Element_1.default {
                     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])) {
@@ -877,32 +868,21 @@ class Component extends Element_1.default {
         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_1.default.templates[this.options.template]
-            : Templates_1.default.current;
+        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.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');
         }
@@ -913,9 +893,7 @@ class Component extends Element_1.default {
                 return result;
             }
         }
-        const frameworkTemplates = this.options.template
-            ? Templates_1.default.templates[this.options.template]
-            : Templates_1.default.current;
+        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;
         result = this.checkTemplate(frameworkTemplates, names, modes);
         if (result) {
             return result;
@@ -1049,9 +1027,7 @@ class Component extends Element_1.default {
         if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {
             settings.shadowRoot = this.root.shadowRoot;
         }
-        const widget = settings && widgets_1.default[settings.type]
-            ? new widgets_1.default[settings.type](settings, this.component, this)
-            : null;
+        const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;
         return widget;
     }
     /**
@@ -1060,12 +1036,7 @@ class Component extends Element_1.default {
      */
     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)) {
@@ -1111,8 +1082,7 @@ class Component extends Element_1.default {
      * @returns {string} - The submission timezone.
      */
     get submissionTimezone() {
-        this.options.submissionTimezone =
-            this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');
+        this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');
         return this.options.submissionTimezone;
     }
     /**
@@ -1136,8 +1106,8 @@ class Component extends Element_1.default {
         }
         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.
@@ -1229,7 +1199,7 @@ class Component extends Element_1.default {
                 id: this.id,
                 classes: this.className,
                 styles: this.customStyle,
-                children,
+                children
             }, topLevel);
         }
         else {
@@ -1238,7 +1208,7 @@ class Component extends Element_1.default {
                 id: this.id,
                 classes: this.className,
                 styles: this.customStyle,
-                children,
+                children
             }, topLevel);
         }
     }
@@ -1251,7 +1221,8 @@ class Component extends Element_1.default {
     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 (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));
     }
     /**
@@ -1285,7 +1256,9 @@ class Component extends Element_1.default {
         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);
         }
@@ -1299,7 +1272,7 @@ class Component extends Element_1.default {
         }
         this.loadRefs(element, {
             messageContainer: 'single',
-            tooltip: 'multiple',
+            tooltip: 'multiple'
         });
         this.attachTooltips(this.refs.tooltip);
         // Attach logic.
@@ -1320,11 +1293,11 @@ class Component extends Element_1.default {
      * Restors the "focus" on a component after a redraw event has occured.
      */
     restoreFocus() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const isFocused = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path;
         if (isFocused) {
             this.loadRefs(this.element, { input: 'multiple' });
-            this.focus((_c = this.root.currentSelection) === null || _c === void 0 ? void 0 : _c.index);
+            this.focus((_d = (_c = this.root) === null || _c === void 0 ? void 0 : _c.currentSelection) === null || _d === void 0 ? void 0 : _d.index);
             this.restoreCaretPosition();
         }
     }
@@ -1335,14 +1308,15 @@ class Component extends Element_1.default {
      * @returns {void}
      */
     addShortcut(element, shortcut) {
+        var _a;
         // 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);
+        (_a = this.root) === null || _a === void 0 ? void 0 : _a.addShortcut(element, shortcut);
     }
     /**
      * Removes a keyboard shortcut from this component.
@@ -1351,14 +1325,15 @@ class Component extends Element_1.default {
      * @returns {void}
      */
     removeShortcut(element, shortcut) {
+        var _a;
         // 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);
+        (_a = this.root) === null || _a === void 0 ? void 0 : _a.removeShortcut(element, shortcut);
     }
     /**
      * Remove all event handlers.
@@ -1399,10 +1374,7 @@ class Component extends Element_1.default {
         if (refreshData === 'data') {
             this.refresh(this.data, changed, flags);
         }
-        else if (changePath &&
-            ((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData &&
-            changed &&
-            changed.instance &&
+        else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.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)) {
@@ -1421,20 +1393,16 @@ class Component extends Element_1.default {
             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));
             }
         }
     }
@@ -1444,6 +1412,7 @@ class Component extends Element_1.default {
      * @returns {void}
      */
     refresh(value) {
+        var _a;
         if (this.hasOwnProperty('refreshOnValue')) {
             this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);
         }
@@ -1455,7 +1424,7 @@ class Component extends Element_1.default {
             if (this.component.clearOnRefresh) {
                 this.setValue(null);
             }
-            this.triggerRedraw();
+            (_a = this.triggerRedraw) === null || _a === void 0 ? void 0 : _a.call(this);
         }
     }
     /**
@@ -1505,7 +1474,7 @@ class Component extends Element_1.default {
      */
     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.
@@ -1617,7 +1586,7 @@ class Component extends Element_1.default {
      */
     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);
@@ -1653,8 +1622,7 @@ class Component extends Element_1.default {
         };
         const handleCloseClick = (e) => {
             if (confirm) {
-                confirm()
-                    .then(() => close(e))
+                confirm().then(() => close(e))
                     .catch(() => { });
             }
             else {
@@ -1754,11 +1722,9 @@ class Component extends Element_1.default {
             // 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));
@@ -1811,12 +1777,7 @@ class Component extends Element_1.default {
         const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';
         return Templates_1.default.current.hasOwnProperty('iconClass')
             ? Templates_1.default.current.iconClass(iconset, name, spinning)
-            : [
-                'fa',
-                'bi',
-            ].includes(this.options.iconset)
-                ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning)
-                : name;
+            : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;
     }
     /**
      * Returns the size css class names for our current template.
@@ -1824,16 +1785,16 @@ class Component extends Element_1.default {
      * @returns {string} - The size class for our component.
      */
     size(size) {
-        return Templates_1.default.current.hasOwnProperty('size') ? Templates_1.default.current.size(size) : size;
+        return Templates_1.default.current.hasOwnProperty('size')
+            ? Templates_1.default.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.
@@ -1854,7 +1815,10 @@ class Component extends Element_1.default {
      * @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.
@@ -1862,9 +1826,7 @@ class Component extends Element_1.default {
      * @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.
@@ -1940,7 +1902,7 @@ class Component extends Element_1.default {
      */
     removeEventListeners() {
         super.removeEventListeners();
-        this.tooltips.forEach((tooltip) => tooltip.destroy());
+        this.tooltips.forEach(tooltip => tooltip.destroy());
         this.tooltips = [];
     }
     /**
@@ -2031,7 +1993,7 @@ class Component extends Element_1.default {
             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;
         }
@@ -2073,8 +2035,7 @@ class Component extends Element_1.default {
         const newComponent = (0, utils_2.fastCloneDeep)(this.originalComponent);
         let changed = logics.reduce((changed, logic) => {
             const result = utils_1.default.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 (!lodash_1.default.isEqual(this.component, newComponent)) {
@@ -2234,17 +2195,13 @@ class Component extends Element_1.default {
             };
         }
         if (!Array.isArray(messages)) {
-            messages = [
-                messages,
-            ];
+            messages = [messages];
         }
-        messages = lodash_1.default.uniqBy(messages, (message) => message.message);
+        messages = lodash_1.default.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', Object.assign({}, message));
-            })
-                .join(''));
+            }).join(''));
         }
     }
     /**
@@ -2304,16 +2261,14 @@ class Component extends Element_1.default {
      */
     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
                 });
             }
         }
@@ -2357,7 +2312,7 @@ class Component extends Element_1.default {
         }
         if (this.component.onChange) {
             this.evaluate(this.component.onChange, {
-                flags,
+                flags
             });
         }
         // Set the changed variable.
@@ -2365,7 +2320,7 @@ class Component extends Element_1.default {
             instance: this,
             component: this.component,
             value: this.dataValue,
-            flags: flags,
+            flags: flags
         };
         // Emit the change.
         this.emit('componentChange', changed);
@@ -2388,65 +2343,16 @@ class Component extends Element_1.default {
                 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',
@@ -2454,7 +2360,7 @@ class Component extends Element_1.default {
                 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: {
@@ -2464,18 +2370,18 @@ class Component extends Element_1.default {
                         'imageStyle:full',
                         'imageStyle:alignLeft',
                         'imageStyle:alignCenter',
-                        'imageStyle:alignRight',
+                        'imageStyle:alignRight'
                     ],
                     styles: [
                         'full',
                         'alignLeft',
                         'alignCenter',
-                        'alignRight',
-                    ],
+                        'alignRight'
+                    ]
                 },
-                extraPlugins: [],
+                extraPlugins: []
             },
-            default: {},
+            default: {}
         };
     }
     addCKE(element, settings, onChange) {
@@ -2486,7 +2392,8 @@ class Component extends Element_1.default {
         if (this.component.isUploadEnabled) {
             settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));
         }
-        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true).then(() => {
+        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)
+            .then(() => {
             if (!element.parentNode) {
                 return Promise.reject();
             }
@@ -2496,7 +2403,7 @@ class Component extends Element_1.default {
                 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;
                 });
@@ -2509,11 +2416,13 @@ class Component extends Element_1.default {
         settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });
         // Lazy load the quill css.
         Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [
-            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` },
+            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }
         ], true);
         // Lazy load the quill library.
-        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true).then(() => {
-            return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true).then(() => {
+        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)
+            .then(() => {
+            return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)
+                .then(() => {
                 if (!element.parentNode) {
                     return Promise.reject();
                 }
@@ -2529,7 +2438,7 @@ class Component extends Element_1.default {
                         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 */
@@ -2551,10 +2460,10 @@ class Component extends Element_1.default {
     get shouldSanitizeValue() {
         var _a;
         // Sanitize value if sanitizing for thw whole content is turned off
-        return ((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false;
+        return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);
     }
     addAce(element, settings, onChange) {
-        if (!settings || settings.theme === 'snow') {
+        if (!settings || (settings.theme === 'snow')) {
             const mode = settings ? settings.mode : '';
             settings = {};
             if (mode) {
@@ -2562,7 +2471,8 @@ class Component extends Element_1.default {
             }
         }
         settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});
-        return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true).then((editor) => {
+        return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)
+            .then((editor) => {
             editor = editor.edit(element);
             editor.removeAllListeners('change');
             editor.setOptions(settings);
@@ -2620,10 +2530,10 @@ class Component extends Element_1.default {
         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;
         }
@@ -2636,12 +2546,13 @@ class Component extends Element_1.default {
      * @param {*} flags - The flags to use when splicing the value.
      */
     splice(index, flags = {}) {
+        var _a;
         if (this.hasValue()) {
             const dataValue = this.dataValue || [];
             if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {
                 dataValue.splice(index, 1);
                 this.dataValue = dataValue;
-                this.triggerChange(flags);
+                (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, flags);
             }
         }
     }
@@ -2654,7 +2565,7 @@ class Component extends Element_1.default {
     deleteValue() {
         this.setValue(null, {
             noUpdateEvent: true,
-            noDefault: true,
+            noDefault: true
         });
         this.unset();
     }
@@ -2669,10 +2580,9 @@ class Component extends Element_1.default {
      * @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.
@@ -2767,7 +2677,7 @@ class Component extends Element_1.default {
             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();
@@ -2821,9 +2731,9 @@ class Component extends Element_1.default {
     }
     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
             });
         }
     }
@@ -2833,7 +2743,7 @@ class Component extends Element_1.default {
     restoreValue() {
         if (this.hasSetValue) {
             this.setValue(this.dataValue, {
-                noUpdateEvent: true,
+                noUpdateEvent: true
             });
         }
         else {
@@ -2855,10 +2765,10 @@ class Component extends Element_1.default {
      * @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;
@@ -2882,7 +2792,7 @@ class Component extends Element_1.default {
             className: this.iconClass(name),
             ref,
             styles,
-            content,
+            content
         });
     }
     /**
@@ -2893,7 +2803,7 @@ class Component extends Element_1.default {
         this.setValue(this.defaultValue || this.emptyValue, {
             noUpdateEvent: true,
             noValidate: true,
-            resetValue: true,
+            resetValue: true
         });
     }
     /**
@@ -2903,12 +2813,15 @@ class Component extends Element_1.default {
      * @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 !lodash_1.default.isEqual(newValue, oldValue);
@@ -2920,12 +2833,13 @@ class Component extends Element_1.default {
      * @returns {boolean} - If the value changed.
      */
     updateOnChange(flags = {}, changed = false) {
+        var _a;
         if (!flags.noUpdateEvent && changed) {
             if (flags.fromSubmission) {
                 // Reset the errors when a submission has been made and allow it to revalidate.
                 this._errors = [];
             }
-            this.triggerChange(flags);
+            (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, flags);
             return true;
         }
         return false;
@@ -2943,11 +2857,13 @@ class Component extends Element_1.default {
             data,
             row: row || this.data,
             submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {
-                data: this.rootValue,
-            },
+                data: this.rootValue
+            }
         }, 'value');
     }
+    /* eslint-disable max-statements */
     calculateComponentValue(data, flags, row) {
+        var _a;
         // Skip value calculation for the component if we don't have entire form data set or in builder mode
         if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {
             return false;
@@ -2967,10 +2883,7 @@ class Component extends Element_1.default {
             !(this.component.calculateValue || this.component.calculateValueVariable) ||
             (this.options.server && !this.component.calculateServer) ||
             (flags.dataSourceInitialLoading && allowOverride) ||
-            (this.options.readOnly &&
-                this.options.pdf &&
-                allowOverride &&
-                lodash_1.default.get(this.root, 'submission._id', false))) {
+            (this.options.readOnly && this.options.pdf && allowOverride && lodash_1.default.get(this.root, 'submission._id', false))) {
             return false;
         }
         const dataValue = this.dataValue;
@@ -2986,7 +2899,7 @@ class Component extends Element_1.default {
         // 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;
@@ -2995,7 +2908,7 @@ class Component extends Element_1.default {
                 this.calculationLocked = true;
                 return false;
             }
-            const firstPass = this.calculatedValue === undefined || flags.resetValue;
+            const firstPass = (this.calculatedValue === undefined) || flags.resetValue;
             if (firstPass) {
                 this.calculatedValue = null;
             }
@@ -3028,7 +2941,7 @@ class Component extends Element_1.default {
         }
         this.calculatedValue = (0, utils_2.fastCloneDeep)(calculatedValue);
         if (changed) {
-            if (!flags.noPristineChangeOnModified && this.root.initialized) {
+            if (!flags.noPristineChangeOnModified && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.initialized)) {
                 this.pristine = false;
             }
             flags.triggeredComponentId = this.id;
@@ -3036,6 +2949,7 @@ class Component extends Element_1.default {
         }
         return false;
     }
+    /* eslint-enable max-statements */
     /**
      * Performs calculations in this component plus any child components.
      * @param {*} data - The data to perform the calculation with.
@@ -3111,8 +3025,8 @@ class Component extends Element_1.default {
             scope: validationScope,
             instance: this,
             processors: [
-                process_1.validateProcessInfo,
-            ],
+                process_1.validateProcessInfo
+            ]
         });
         const errors = validationScope.errors;
         const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));
@@ -3131,10 +3045,8 @@ class Component extends Element_1.default {
         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 +3061,7 @@ class Component extends Element_1.default {
     interpolateErrors(errors) {
         var _a;
         const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));
-        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length)
-            ? [
-                ...interpolatedErrors,
-                ...this.serverErrors,
-            ]
-            : interpolatedErrors;
+        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;
     }
     /**
      * Show component validation errors.
@@ -3168,7 +3075,7 @@ class Component extends Element_1.default {
         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;
         }
@@ -3203,8 +3110,8 @@ class Component extends Element_1.default {
             form: this.root ? this.root._form : {},
             scope: { errors: [] },
             processors: [
-                process_1.validateProcessInfo,
-            ],
+                process_1.validateProcessInfo
+            ]
         };
         if (async) {
             return (0, process_1.processOne)(processContext).then(() => {
@@ -3226,7 +3133,7 @@ class Component extends Element_1.default {
      * @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) {
@@ -3313,15 +3220,13 @@ class Component extends Element_1.default {
         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);
@@ -3331,7 +3236,7 @@ class Component extends Element_1.default {
         return this.dataValue;
     }
     isEmpty(value = this.dataValue) {
-        const isEmptyArray = lodash_1.default.isArray(value) && value.length === 1 ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;
+        const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;
         return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;
     }
     isEqual(valueA, valueB = this.dataValue) {
@@ -3362,7 +3267,7 @@ class Component extends Element_1.default {
     }
     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();
                 }
@@ -3376,13 +3281,14 @@ class Component extends Element_1.default {
         });
         this.addEventListener(element, 'blur', () => {
             this.root.pendingBlur = utils_1.default.delay(() => {
+                var _a, _b;
                 this.emit('blur', this);
                 if (this.component.validateOn === 'blur') {
-                    this.root.triggerChange({ fromBlur: true }, {
+                    (_b = (_a = this.root).triggerChange) === null || _b === void 0 ? void 0 : _b.call(_a, { fromBlur: true }, {
                         instance: this,
                         component: this.component,
                         value: this.dataValue,
-                        flags: { fromBlur: true },
+                        flags: { fromBlur: true }
                     });
                 }
                 this.root.focusedComponent = null;
@@ -3390,6 +3296,7 @@ class Component extends Element_1.default {
             });
         });
     }
+    // eslint-disable-next-line max-statements
     setCustomValidity(messages, dirty, external) {
         const inputRefs = this.isInputComponent ? this.refs.input || [] : null;
         if (typeof messages === 'string' && messages) {
@@ -3401,15 +3308,13 @@ class Component extends Element_1.default {
         }
         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) {
@@ -3442,7 +3347,7 @@ class Component extends Element_1.default {
                 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);
             }
@@ -3463,7 +3368,8 @@ class Component extends Element_1.default {
      * @returns {boolean|*} - TRUE if the value is hidden.
      */
     isValueHidden() {
-        if (this.component.protected && this.root.editing) {
+        var _a;
+        if (this.component.protected && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.editing)) {
             return false;
         }
         if (!this.root || !this.root.hasOwnProperty('editing')) {
@@ -3472,9 +3378,7 @@ class Component extends Element_1.default {
         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 = [
@@ -3488,16 +3392,15 @@ class Component extends Element_1.default {
             () => 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() {
@@ -3514,13 +3417,7 @@ class Component extends Element_1.default {
      */
     asString(value) {
         value = value || this.getValue();
-        return (Array.isArray(value)
-            ? value
-            : [
-                value,
-            ])
-            .map(lodash_1.default.toString)
-            .join(', ');
+        return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');
     }
     /**
      * Return if the component is disabled.
@@ -3549,13 +3446,13 @@ class Component extends Element_1.default {
         }
     }
     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) {
@@ -3570,9 +3467,9 @@ class Component extends Element_1.default {
     selectOptions(select, tag, options, defaultValue) {
         lodash_1.default.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);
@@ -3599,7 +3496,8 @@ class Component extends Element_1.default {
     }
     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() {
@@ -3616,7 +3514,7 @@ class Component extends Element_1.default {
         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
@@ -3637,16 +3535,10 @@ class Component extends Element_1.default {
                         // If component definition changed, replace it.
                         if (!lodash_1.default.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) {
@@ -3668,7 +3560,7 @@ class Component extends Element_1.default {
             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 });
@@ -3684,7 +3576,7 @@ class Component extends Element_1.default {
             type: 'input',
             component: this.component,
             changeEvent: 'change',
-            attr: attributes,
+            attr: attributes
         };
     }
     autofocus() {
@@ -3774,18 +3666,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) {
@@ -3795,14 +3683,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;
                 }
@@ -3831,7 +3719,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.`);