@formio/js 5.2.3 → 5.2.4-rc.0

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,6 +161,7 @@ export default class Component extends Element {
             properties: {},
             allowMultipleMasks: false,
             addons: [],
+            serverOverride: {},
         }, ...sources);
     }
     /**
@@ -169,15 +170,20 @@ 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',
+                    },
                 };
-            }
+            },
         };
     }
     /**
@@ -187,7 +193,9 @@ 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
@@ -204,12 +212,11 @@ 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) {
@@ -230,9 +237,7 @@ 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]);
         }
         /**
@@ -309,7 +314,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 = '';
@@ -318,8 +323,12 @@ 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
@@ -414,7 +423,6 @@ export default class Component extends Element {
             this.init();
         }
     }
-    /* eslint-enable max-statements */
     get componentsMap() {
         return this.root?.childComponentsMap || {};
     }
@@ -472,10 +480,7 @@ 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 = {};
@@ -484,7 +489,10 @@ 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) {
@@ -497,7 +505,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));
         }
@@ -517,7 +525,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;
     }
@@ -534,8 +542,7 @@ 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);
@@ -572,7 +579,9 @@ 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;
@@ -751,7 +760,7 @@ export default class Component extends Element {
             'left-left',
             'left-right',
             'right-left',
-            'right-right'
+            'right-right',
         ].includes(this.labelPosition);
     }
     get labelPositions() {
@@ -789,7 +798,7 @@ export default class Component extends Element {
             isRightPosition,
             isRightAlign,
             labelStyles,
-            contentStyles
+            contentStyles,
         };
     }
     /**
@@ -816,11 +825,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])) {
@@ -864,21 +873,32 @@ 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');
         }
@@ -889,7 +909,9 @@ 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;
@@ -1021,7 +1043,9 @@ 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;
     }
     /**
@@ -1030,7 +1054,12 @@ 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)) {
@@ -1076,7 +1105,8 @@ 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;
     }
     /**
@@ -1100,8 +1130,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.
@@ -1192,7 +1222,7 @@ export default class Component extends Element {
                 id: this.id,
                 classes: this.className,
                 styles: this.customStyle,
-                children
+                children,
             }, topLevel);
         }
         else {
@@ -1201,7 +1231,7 @@ export default class Component extends Element {
                 id: this.id,
                 classes: this.className,
                 styles: this.customStyle,
-                children
+                children,
             }, topLevel);
         }
     }
@@ -1214,8 +1244,7 @@ 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',
@@ -1257,9 +1286,7 @@ 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);
         }
@@ -1273,7 +1300,7 @@ export default class Component extends Element {
         }
         this.loadRefs(element, {
             messageContainer: 'single',
-            tooltip: 'multiple'
+            tooltip: 'multiple',
         });
         this.attachTooltips(this.refs.tooltip);
         // Attach logic.
@@ -1309,7 +1336,7 @@ 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) {
@@ -1325,7 +1352,7 @@ 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) {
@@ -1371,7 +1398,10 @@ 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)) {
@@ -1390,16 +1420,20 @@ 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));
             }
         }
     }
@@ -1470,7 +1504,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.
@@ -1582,7 +1616,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);
@@ -1618,7 +1652,8 @@ export default class Component extends Element {
         };
         const handleCloseClick = (e) => {
             if (confirm) {
-                confirm().then(() => close(e))
+                confirm()
+                    .then(() => close(e))
                     .catch(() => { });
             }
             else {
@@ -1718,9 +1753,11 @@ 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));
@@ -1773,7 +1810,12 @@ 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)
-            : this.options.iconset === 'fa' ? Templates.defaultTemplates.iconClass(iconset, name, spinning) : name;
+            : [
+                'fa',
+                'bi',
+            ].includes(this.options.iconset)
+                ? Templates.defaultTemplates.iconClass(iconset, name, spinning)
+                : name;
     }
     /**
      * Returns the size css class names for our current template.
@@ -1781,16 +1823,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.
@@ -1811,10 +1853,7 @@ 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.
@@ -1822,7 +1861,9 @@ 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.
@@ -1897,7 +1938,7 @@ export default class Component extends Element {
      */
     removeEventListeners() {
         super.removeEventListeners();
-        this.tooltips.forEach(tooltip => tooltip.destroy());
+        this.tooltips.forEach((tooltip) => tooltip.destroy());
         this.tooltips = [];
     }
     /**
@@ -1988,7 +2029,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;
         }
@@ -2030,7 +2071,8 @@ 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)) {
@@ -2190,13 +2232,17 @@ 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(''));
         }
     }
     /**
@@ -2256,14 +2302,16 @@ 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,
                 });
             }
         }
@@ -2307,7 +2355,7 @@ export default class Component extends Element {
         }
         if (this.component.onChange) {
             this.evaluate(this.component.onChange, {
-                flags
+                flags,
             });
         }
         // Set the changed variable.
@@ -2315,7 +2363,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);
@@ -2338,16 +2386,65 @@ 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',
@@ -2355,7 +2452,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: {
@@ -2365,18 +2462,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) {
@@ -2387,8 +2484,7 @@ 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();
             }
@@ -2398,7 +2494,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;
                 });
@@ -2412,18 +2508,16 @@ 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();
                 }
@@ -2439,7 +2533,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 */
@@ -2460,10 +2554,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) {
@@ -2471,8 +2565,7 @@ 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);
@@ -2530,10 +2623,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;
         }
@@ -2564,7 +2657,7 @@ export default class Component extends Element {
     deleteValue() {
         this.setValue(null, {
             noUpdateEvent: true,
-            noDefault: true
+            noDefault: true,
         });
         this.unset();
     }
@@ -2579,9 +2672,10 @@ 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.
@@ -2676,7 +2770,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();
@@ -2730,9 +2824,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,
             });
         }
     }
@@ -2742,7 +2836,7 @@ export default class Component extends Element {
     restoreValue() {
         if (this.hasSetValue) {
             this.setValue(this.dataValue, {
-                noUpdateEvent: true
+                noUpdateEvent: true,
             });
         }
         else {
@@ -2764,10 +2858,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;
@@ -2791,7 +2885,7 @@ export default class Component extends Element {
             className: this.iconClass(name),
             ref,
             styles,
-            content
+            content,
         });
     }
     /**
@@ -2802,7 +2896,7 @@ export default class Component extends Element {
         this.setValue(this.defaultValue || this.emptyValue, {
             noUpdateEvent: true,
             noValidate: true,
-            resetValue: true
+            resetValue: true,
         });
     }
     /**
@@ -2812,15 +2906,12 @@ 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);
@@ -2854,11 +2945,10 @@ 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'))) {
@@ -2879,7 +2969,10 @@ 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;
@@ -2895,7 +2988,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;
@@ -2904,7 +2997,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;
             }
@@ -2945,7 +3038,6 @@ 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.
@@ -3020,8 +3112,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));
@@ -3040,8 +3132,10 @@ 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 {
@@ -3055,7 +3149,12 @@ 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.
@@ -3069,7 +3168,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;
         }
@@ -3103,8 +3202,8 @@ export default class Component extends Element {
             form: this.root ? this.root._form : {},
             scope: { errors: [] },
             processors: [
-                validateProcessInfo
-            ]
+                validateProcessInfo,
+            ],
         };
         if (async) {
             return processOne(processContext).then(() => {
@@ -3126,7 +3225,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 = data || this.rootValue;
+        data = this.rootValue;
         row = row || this.data;
         flags.dirty = dirty || false;
         if (flags.async) {
@@ -3213,13 +3312,15 @@ 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);
@@ -3229,7 +3330,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) {
@@ -3280,7 +3381,7 @@ export default class Component extends Element {
                         instance: this,
                         component: this.component,
                         value: this.dataValue,
-                        flags: { fromBlur: true }
+                        flags: { fromBlur: true },
                     });
                 }
                 this.root.focusedComponent = null;
@@ -3288,7 +3389,6 @@ 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) {
@@ -3300,13 +3400,15 @@ 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) {
@@ -3337,7 +3439,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);
             }
@@ -3367,7 +3469,9 @@ 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 = [
@@ -3381,15 +3485,16 @@ 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() {
@@ -3406,7 +3511,13 @@ 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.
@@ -3435,13 +3546,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) {
@@ -3456,9 +3567,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);
@@ -3485,8 +3596,7 @@ 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() {
@@ -3503,7 +3613,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
@@ -3524,10 +3634,16 @@ 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) {
@@ -3549,7 +3665,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 });
@@ -3565,7 +3681,7 @@ export default class Component extends Element {
             type: 'input',
             component: this.component,
             changeEvent: 'change',
-            attr: attributes
+            attr: attributes,
         };
     }
     autofocus() {
@@ -3653,14 +3769,18 @@ 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) {
@@ -3670,14 +3790,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;
                 }
@@ -3706,8 +3826,7 @@ 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.`);