@formio/js 5.2.3 → 5.2.4-rc.0

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,6 +166,7 @@ class Component extends Element_1.default {
             properties: {},
             allowMultipleMasks: false,
             addons: [],
+            serverOverride: {},
         }, ...sources);
     }
     /**
@@ -174,15 +175,20 @@ 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',
+                    },
                 };
-            }
+            },
         };
     }
     /**
@@ -192,7 +198,9 @@ 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
@@ -209,13 +217,12 @@ 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) {
@@ -236,9 +243,7 @@ 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]);
         }
         /**
@@ -321,8 +326,12 @@ 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
@@ -417,7 +426,6 @@ 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) || {};
@@ -476,10 +484,7 @@ 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 = {};
@@ -488,7 +493,10 @@ 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) {
@@ -502,7 +510,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));
         }
@@ -538,8 +546,7 @@ 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);
@@ -576,7 +583,9 @@ 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;
@@ -755,7 +764,7 @@ class Component extends Element_1.default {
             'left-left',
             'left-right',
             'right-left',
-            'right-right'
+            'right-right',
         ].includes(this.labelPosition);
     }
     get labelPositions() {
@@ -793,7 +802,7 @@ class Component extends Element_1.default {
             isRightPosition,
             isRightAlign,
             labelStyles,
-            contentStyles
+            contentStyles,
         };
     }
     /**
@@ -820,11 +829,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])) {
@@ -868,21 +877,32 @@ 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');
         }
@@ -893,7 +913,9 @@ 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;
@@ -1027,7 +1049,9 @@ 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;
     }
     /**
@@ -1036,7 +1060,12 @@ 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)) {
@@ -1082,7 +1111,8 @@ 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;
     }
     /**
@@ -1106,8 +1136,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.
@@ -1199,7 +1229,7 @@ class Component extends Element_1.default {
                 id: this.id,
                 classes: this.className,
                 styles: this.customStyle,
-                children
+                children,
             }, topLevel);
         }
         else {
@@ -1208,7 +1238,7 @@ class Component extends Element_1.default {
                 id: this.id,
                 classes: this.className,
                 styles: this.customStyle,
-                children
+                children,
             }, topLevel);
         }
     }
@@ -1221,8 +1251,7 @@ 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 }) }));
     }
     /**
@@ -1256,9 +1285,7 @@ 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);
         }
@@ -1272,7 +1299,7 @@ class Component extends Element_1.default {
         }
         this.loadRefs(element, {
             messageContainer: 'single',
-            tooltip: 'multiple'
+            tooltip: 'multiple',
         });
         this.attachTooltips(this.refs.tooltip);
         // Attach logic.
@@ -1309,7 +1336,7 @@ class Component extends Element_1.default {
      */
     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 @@ class Component extends Element_1.default {
      */
     removeShortcut(element, shortcut) {
         // Avoid infinite recursion.
-        if (!element || (this.root === this)) {
+        if (!element || this.root === this) {
             return;
         }
         if (!shortcut) {
@@ -1372,7 +1399,10 @@ 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)) {
@@ -1391,16 +1421,20 @@ 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));
             }
         }
     }
@@ -1471,7 +1505,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.
@@ -1583,7 +1617,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);
@@ -1619,7 +1653,8 @@ class Component extends Element_1.default {
         };
         const handleCloseClick = (e) => {
             if (confirm) {
-                confirm().then(() => close(e))
+                confirm()
+                    .then(() => close(e))
                     .catch(() => { });
             }
             else {
@@ -1719,9 +1754,11 @@ 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));
@@ -1774,7 +1811,12 @@ 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)
-            : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;
+            : [
+                'fa',
+                'bi',
+            ].includes(this.options.iconset)
+                ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning)
+                : name;
     }
     /**
      * Returns the size css class names for our current template.
@@ -1782,16 +1824,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.
@@ -1812,10 +1854,7 @@ 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.
@@ -1823,7 +1862,9 @@ 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.
@@ -1899,7 +1940,7 @@ class Component extends Element_1.default {
      */
     removeEventListeners() {
         super.removeEventListeners();
-        this.tooltips.forEach(tooltip => tooltip.destroy());
+        this.tooltips.forEach((tooltip) => tooltip.destroy());
         this.tooltips = [];
     }
     /**
@@ -1990,7 +2031,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;
         }
@@ -2032,7 +2073,8 @@ 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)) {
@@ -2192,13 +2234,17 @@ 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(''));
         }
     }
     /**
@@ -2258,14 +2304,16 @@ 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,
                 });
             }
         }
@@ -2309,7 +2357,7 @@ class Component extends Element_1.default {
         }
         if (this.component.onChange) {
             this.evaluate(this.component.onChange, {
-                flags
+                flags,
             });
         }
         // Set the changed variable.
@@ -2317,7 +2365,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);
@@ -2340,16 +2388,65 @@ 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',
@@ -2357,7 +2454,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: {
@@ -2367,18 +2464,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) {
@@ -2389,8 +2486,7 @@ 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();
             }
@@ -2400,7 +2496,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;
                 });
@@ -2413,13 +2509,11 @@ 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();
                 }
@@ -2435,7 +2529,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 */
@@ -2457,10 +2551,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) {
@@ -2468,8 +2562,7 @@ 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);
@@ -2527,10 +2620,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;
         }
@@ -2561,7 +2654,7 @@ class Component extends Element_1.default {
     deleteValue() {
         this.setValue(null, {
             noUpdateEvent: true,
-            noDefault: true
+            noDefault: true,
         });
         this.unset();
     }
@@ -2576,9 +2669,10 @@ 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.
@@ -2673,7 +2767,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();
@@ -2727,9 +2821,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,
             });
         }
     }
@@ -2739,7 +2833,7 @@ class Component extends Element_1.default {
     restoreValue() {
         if (this.hasSetValue) {
             this.setValue(this.dataValue, {
-                noUpdateEvent: true
+                noUpdateEvent: true,
             });
         }
         else {
@@ -2761,10 +2855,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;
@@ -2788,7 +2882,7 @@ class Component extends Element_1.default {
             className: this.iconClass(name),
             ref,
             styles,
-            content
+            content,
         });
     }
     /**
@@ -2799,7 +2893,7 @@ class Component extends Element_1.default {
         this.setValue(this.defaultValue || this.emptyValue, {
             noUpdateEvent: true,
             noValidate: true,
-            resetValue: true
+            resetValue: true,
         });
     }
     /**
@@ -2809,15 +2903,12 @@ 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);
@@ -2852,11 +2943,10 @@ 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) {
         // 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'))) {
@@ -2877,7 +2967,10 @@ 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;
@@ -2893,7 +2986,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;
@@ -2902,7 +2995,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;
             }
@@ -2943,7 +3036,6 @@ 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.
@@ -3019,8 +3111,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));
@@ -3039,8 +3131,10 @@ 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 {
@@ -3055,7 +3149,12 @@ 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.
@@ -3069,7 +3168,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;
         }
@@ -3104,8 +3203,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(() => {
@@ -3127,7 +3226,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 = data || this.rootValue;
+        data = this.rootValue;
         row = row || this.data;
         flags.dirty = dirty || false;
         if (flags.async) {
@@ -3214,13 +3313,15 @@ 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);
@@ -3230,7 +3331,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) {
@@ -3281,7 +3382,7 @@ class Component extends Element_1.default {
                         instance: this,
                         component: this.component,
                         value: this.dataValue,
-                        flags: { fromBlur: true }
+                        flags: { fromBlur: true },
                     });
                 }
                 this.root.focusedComponent = null;
@@ -3289,7 +3390,6 @@ 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) {
@@ -3301,13 +3401,15 @@ 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) {
@@ -3340,7 +3442,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);
             }
@@ -3370,7 +3472,9 @@ 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 = [
@@ -3384,15 +3488,16 @@ 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() {
@@ -3409,7 +3514,13 @@ 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.
@@ -3438,13 +3549,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) {
@@ -3459,9 +3570,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);
@@ -3488,8 +3599,7 @@ 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() {
@@ -3506,7 +3616,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
@@ -3527,10 +3637,16 @@ 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) {
@@ -3552,7 +3668,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 });
@@ -3568,7 +3684,7 @@ class Component extends Element_1.default {
             type: 'input',
             component: this.component,
             changeEvent: 'change',
-            attr: attributes
+            attr: attributes,
         };
     }
     autofocus() {
@@ -3658,14 +3774,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) {
@@ -3675,14 +3795,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;
                 }
@@ -3711,8 +3831,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.`);