@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/components/address/Address.js

@@ -11,14 +11,14 @@ export const AddressComponentMode = {
     Manual: 'manual',
 };
 const RemoveValueIconHiddenClass = 'address-autocomplete-remove-value-icon--hidden';
-const ChildConditional = 'show = _.get(instance, \'parent.manualMode\', false);';
+const ChildConditional = "show = _.get(instance, 'parent.manualMode', false);";
 export default class AddressComponent extends ContainerComponent {
     static schema(...extend) {
         return ContainerComponent.schema({
             type: 'address',
             label: 'Address',
             key: 'address',
-            switchToManualModeLabel: 'Can\'t find address? Switch to manual mode.',
+            switchToManualModeLabel: "Can't find address? Switch to manual mode.",
             provider: '',
             manualModeViewString: '',
             hideLabel: false,
@@ -78,7 +78,9 @@ export default class AddressComponent extends ContainerComponent {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+        return (getComponentSavedTypes(schema) || [
+            componentValueTypes.object,
+        ]);
     }
     static get builderInfo() {
         return {
@@ -96,7 +98,10 @@ export default class AddressComponent extends ContainerComponent {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: ['isEmpty', 'isNotEmpty'],
+            operators: [
+                'isEmpty',
+                'isNotEmpty',
+            ],
         };
     }
     mergeSchema(component = {}) {
@@ -139,7 +144,7 @@ export default class AddressComponent extends ContainerComponent {
             else if (map) {
                 // Fallback to legacy version where Google Maps was the only provider.
                 provider = this.component.provider = GoogleAddressProvider.name;
-                const { key, region, } = map;
+                const { key, region } = map;
                 if (key) {
                     _.set(providerOptions, 'params.key', key);
                 }
@@ -196,10 +201,14 @@ export default class AddressComponent extends ContainerComponent {
     }
     get address() {
         if (this.isMultiple) {
-            return _.isArray(this.dataValue) ? this.dataValue : [this.dataValue];
+            return _.isArray(this.dataValue)
+                ? this.dataValue
+                : [
+                    this.dataValue,
+                ];
         }
         // Manual mode is not implementing for multiple value
-        return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;
+        return this.manualModeEnabled && this.dataValue ? this.dataValue.address : this.dataValue;
     }
     set address(value) {
         if (this.manualModeEnabled && !this.isMultiple && !_.isEqual(value, this.emptyValue)) {
@@ -212,7 +221,11 @@ export default class AddressComponent extends ContainerComponent {
     get defaultValue() {
         let defaultValue = super.defaultValue;
         if (this.isMultiple) {
-            defaultValue = _.isArray(defaultValue) ? defaultValue : [defaultValue];
+            defaultValue = _.isArray(defaultValue)
+                ? defaultValue
+                : [
+                    defaultValue,
+                ];
         }
         return defaultValue;
     }
@@ -228,12 +241,14 @@ export default class AddressComponent extends ContainerComponent {
     get dataValue() {
         const resultValue = _.get(this._data, this.path);
         if (!_.isArray(resultValue) && this.component.multiple) {
-            return [resultValue];
+            return [
+                resultValue,
+            ];
         }
         return super.dataValue;
     }
     normalizeValue(value) {
-        return (this.manualModeEnabled && this.isValueInLegacyFormat(value))
+        return this.manualModeEnabled && this.isValueInLegacyFormat(value)
             ? {
                 mode: AddressComponentMode.Autocomplete,
                 address: value,
@@ -245,7 +260,7 @@ export default class AddressComponent extends ContainerComponent {
         if (this.manualMode) {
             this.restoreComponentsContext();
         }
-        if (changed || !_.isEmpty(value) && flags.fromSubmission) {
+        if (changed || (!_.isEmpty(value) && flags.fromSubmission)) {
             this.redraw();
         }
         return changed;
@@ -266,39 +281,33 @@ export default class AddressComponent extends ContainerComponent {
         return 'removeRow';
     }
     get modeSwitcher() {
-        return this.refs
-            ? (this.refs[AddressComponent.modeSwitcherRef] || null)
-            : null;
+        return this.refs ? this.refs[AddressComponent.modeSwitcherRef] || null : null;
     }
     get providerOptions() {
         return {
-            params: { subscriptionKey: this.component.subscriptionKey, key: this.component.apiKey, ...this.component.params },
+            params: {
+                subscriptionKey: this.component.subscriptionKey,
+                key: this.component.apiKey,
+                ...this.component.params,
+            },
             url: this.component.url,
             queryProperty: this.component.queryProperty,
             responseProperty: this.component.responseProperty,
             displayValueProperty: this.component.displayValueProperty,
-            autocompleteOptions: this.component.autocompleteOptions
+            autocompleteOptions: this.component.autocompleteOptions,
         };
     }
     get removeValueIcon() {
-        return this.refs
-            ? (this.refs[AddressComponent.removeValueIconRef] || null)
-            : null;
+        return this.refs ? this.refs[AddressComponent.removeValueIconRef] || null : null;
     }
     get searchInput() {
-        return this.refs
-            ? (this.refs[AddressComponent.searchInputRef] || null)
-            : null;
+        return this.refs ? this.refs[AddressComponent.searchInputRef] || null : null;
     }
     get addRowButton() {
-        return this.refs
-            ? (this.refs[AddressComponent.addRowButtonRef] || null)
-            : null;
+        return this.refs ? this.refs[AddressComponent.addRowButtonRef] || null : null;
     }
     get removeRowButton() {
-        return this.refs
-            ? (this.refs[AddressComponent.removeRowButtonRef] || null)
-            : null;
+        return this.refs ? this.refs[AddressComponent.removeRowButtonRef] || null : null;
     }
     get searchInputAttributes() {
         const attr = {
@@ -309,7 +318,7 @@ export default class AddressComponent extends ContainerComponent {
             tabindex: this.component.tabindex || 0,
         };
         if (this.component.placeholder) {
-            attr.placeholder = this.t(this.component.placeholder), { _userInput: true };
+            ((attr.placeholder = this.t(this.component.placeholder)), { _userInput: true });
         }
         if (this.disabled) {
             attr.disabled = 'disabled';
@@ -372,7 +381,9 @@ export default class AddressComponent extends ContainerComponent {
     onSelectAddress(address, element, index) {
         if (this.isMultiple) {
             this.address[index] = address;
-            this.address = [...this.address];
+            this.address = [
+                ...this.address,
+            ];
         }
         else {
             this.address = address;
@@ -390,7 +401,7 @@ export default class AddressComponent extends ContainerComponent {
         super.redraw();
     }
     attach(element) {
-        const result = ((this.builderMode || this.manualMode) ? super.attach : Field.prototype.attach).call(this, element);
+        const result = (this.builderMode || this.manualMode ? super.attach : Field.prototype.attach).call(this, element);
         if (!this.builderMode) {
             if (!this.provider && this.component.provider) {
                 const provider = this.component.provider;
@@ -447,13 +458,13 @@ export default class AddressComponent extends ContainerComponent {
             }
         });
         if (this.addRowButton) {
-            this.addEventListener(this.addRowButton, 'click', event => {
+            this.addEventListener(this.addRowButton, 'click', (event) => {
                 event.preventDefault();
                 this.addRow();
             });
         }
         this.removeRowButton.forEach((removeRowButton, index) => {
-            this.addEventListener(removeRowButton, 'click', event => {
+            this.addEventListener(removeRowButton, 'click', (event) => {
                 event.preventDefault();
                 this.removeValue(index);
             });
@@ -495,7 +506,7 @@ export default class AddressComponent extends ContainerComponent {
                     }
                 });
             });
-            _.each(this.refs.searchInput || [], el => this.addFocusBlurEvents(el));
+            _.each(this.refs.searchInput || [], (el) => this.addFocusBlurEvents(el));
         }
         return result;
     }
@@ -503,9 +514,8 @@ export default class AddressComponent extends ContainerComponent {
         component.customConditional = ChildConditional;
     }
     redraw() {
-        const modeSwitcherInFocus = (this.modeSwitcher && (document.activeElement === this.modeSwitcher));
-        return super.redraw()
-            .then((result) => {
+        const modeSwitcherInFocus = this.modeSwitcher && document.activeElement === this.modeSwitcher;
+        return super.redraw().then((result) => {
             if (modeSwitcherInFocus && this.modeSwitcher) {
                 this.modeSwitcher.focus();
             }
@@ -528,9 +538,7 @@ export default class AddressComponent extends ContainerComponent {
         this.updateRemoveIcon(index);
     }
     getDisplayValue(value = this.address) {
-        return (this.provider && !this.manualMode)
-            ? this.provider.getDisplayValue(value)
-            : '';
+        return this.provider && !this.manualMode ? this.provider.getDisplayValue(value) : '';
     }
     validateMultiple() {
         return this.isMultiple;
@@ -552,13 +560,13 @@ export default class AddressComponent extends ContainerComponent {
             return '';
         }
         const normalizedValue = this.normalizeValue(value);
-        const { address, mode, } = (this.manualModeEnabled
+        const { address, mode } = this.manualModeEnabled
             ? normalizedValue
             : {
                 address: normalizedValue,
                 mode: AddressComponentMode.Autocomplete,
-            });
-        const valueInManualMode = (mode === AddressComponentMode.Manual);
+            };
+        const valueInManualMode = mode === AddressComponentMode.Manual;
         if (this.provider && !valueInManualMode) {
             return this.getDisplayValue(address);
         }
@@ -572,9 +580,12 @@ export default class AddressComponent extends ContainerComponent {
             }
             return this.getComponents()
                 .filter((component) => component.hasValue(address))
-                .map((component) => [component, _.get(address, component.key)])
-                .filter(([component, componentValue]) => !component.isEmpty(componentValue))
-                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))
+                .map((component) => [
+                component,
+                _.get(address, component.key),
+            ])
+                .filter(([component, componentValue,]) => !component.isEmpty(componentValue))
+                .map(([component, componentValue,]) => component.getValueAsString(componentValue, options))
                 .join(', ');
         }
         return super.getValueAsString(address, options);

package/lib/mjs/components/address/editForm/Address.edit.data.js

@@ -11,11 +11,11 @@ export default [
         placeholder: 'Default Value',
         tooltip: 'The Default Value will be the value for this field, before user interaction. Having a default value will override the placeholder text.',
         input: true,
-        customDefaultValue: ({ instance }) => (instance.manualModeEnabled
+        customDefaultValue: ({ instance }) => instance.manualModeEnabled
             ? {
                 mode: 'autocomplete',
                 address: {},
             }
-            : {}),
+            : {},
     },
 ];

package/lib/mjs/components/address/editForm/Address.edit.display.js

@@ -13,7 +13,7 @@ export default [
         type: 'textfield',
         input: true,
         key: 'switchToManualModeLabel',
-        defaultValue: 'Can\'t find address? Switch to manual mode.',
+        defaultValue: "Can't find address? Switch to manual mode.",
         label: 'Switch To Manual Mode Label',
         placeholder: 'Switch To Manual Mode Label',
         tooltip: 'The label for the checkbox used to switch to manual mode.',
@@ -28,7 +28,7 @@ export default [
         input: true,
         key: 'disableClearIcon',
         label: 'Disable Clear Icon',
-        tooltip: 'Clear Icon allows easily clear component\'s value.',
+        tooltip: "Clear Icon allows easily clear component's value.",
     },
     {
         type: 'textfield',

package/lib/mjs/components/address/editForm/Address.edit.provider.js

@@ -13,7 +13,9 @@ export default [
         dataSrc: 'custom',
         data: {
             custom() {
-                return _.values(Formio.Providers.getProviders('address')).sort().map((provider) => ({
+                return _.values(Formio.Providers.getProviders('address'))
+                    .sort()
+                    .map((provider) => ({
                     label: provider.displayName,
                     value: provider.name,
                 }));
@@ -26,7 +28,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: "subscriptionKey",
+        key: 'subscriptionKey',
         label: 'Subscription Key',
         placeholder: 'Enter Subscription Key',
         weight: 10,
@@ -35,7 +37,12 @@ export default [
             required: true,
         },
         conditional: {
-            json: { '===': [{ var: 'data.provider' }, 'azure'] },
+            json: {
+                '===': [
+                    { var: 'data.provider' },
+                    'azure',
+                ],
+            },
         },
     },
     {
@@ -50,7 +57,12 @@ export default [
             required: true,
         },
         conditional: {
-            json: { '===': [{ var: 'data.provider' }, 'custom'] },
+            json: {
+                '===': [
+                    { var: 'data.provider' },
+                    'custom',
+                ],
+            },
         },
     },
     {
@@ -63,7 +75,12 @@ export default [
         weight: 20,
         tooltip: 'Which query param should be used to pass as a search string. Default is `query`.',
         conditional: {
-            json: { '===': [{ var: 'data.provider' }, 'custom'] },
+            json: {
+                '===': [
+                    { var: 'data.provider' },
+                    'custom',
+                ],
+            },
         },
     },
     {
@@ -75,7 +92,12 @@ export default [
         weight: 30,
         tooltip: 'The property within the response data, where iterable addresses reside. For example: results.',
         conditional: {
-            json: { '===': [{ var: 'data.provider' }, 'custom'] },
+            json: {
+                '===': [
+                    { var: 'data.provider' },
+                    'custom',
+                ],
+            },
         },
     },
     {
@@ -87,7 +109,12 @@ export default [
         weight: 40,
         tooltip: 'The property of each address in the response to use as the display value.',
         conditional: {
-            json: { '===': [{ var: 'data.provider' }, 'custom'] },
+            json: {
+                '===': [
+                    { var: 'data.provider' },
+                    'custom',
+                ],
+            },
         },
     },
     {
@@ -102,7 +129,12 @@ export default [
         as: 'json',
         tooltip: 'Additional query params can be specified here in a way of JSON object.',
         conditional: {
-            json: { '===': [{ var: 'data.provider' }, 'custom'] },
+            json: {
+                '===': [
+                    { var: 'data.provider' },
+                    'custom',
+                ],
+            },
         },
     },
     {
@@ -117,7 +149,12 @@ export default [
             required: true,
         },
         conditional: {
-            json: { '===': [{ var: 'data.provider' }, 'google'] },
+            json: {
+                '===': [
+                    { var: 'data.provider' },
+                    'google',
+                ],
+            },
         },
     },
     {
@@ -131,9 +168,14 @@ export default [
         rows: 5,
         as: 'json',
         editor: 'ace',
-        tooltip: 'Specify Google Maps Autocomplete options used for address searching as JSON object. Follow the <a href =\'https://developers.google.com/maps/documentation/javascript/places-autocomplete\' target=\'_blank\'>link</a> for available options',
+        tooltip: "Specify Google Maps Autocomplete options used for address searching as JSON object. Follow the <a href ='https://developers.google.com/maps/documentation/javascript/places-autocomplete' target='_blank'>link</a> for available options",
         conditional: {
-            json: { '===': [{ var: 'data.provider' }, 'google'] },
+            json: {
+                '===': [
+                    { var: 'data.provider' },
+                    'google',
+                ],
+            },
         },
     },
     {

package/lib/mjs/components/alert/Alert.js

@@ -10,7 +10,7 @@ export default class Alert {
     }
     get refsNames() {
         return {
-            messageRef: 'multiple'
+            messageRef: 'multiple',
         };
     }
     get alertTypes() {
@@ -18,11 +18,15 @@ export default class Alert {
             error: 'danger',
             success: 'success',
             info: 'info',
-            warning: 'warning'
+            warning: 'warning',
         };
     }
     showErrors(errors = [], triggerEvent = false, options = {}) {
-        errors = _.isArray(errors) ? errors : [errors];
+        errors = _.isArray(errors)
+            ? errors
+            : [
+                errors,
+            ];
         const messagesList = this.createMessagesList('error', errors);
         this.showAlert('error', messagesList, options);
         if (triggerEvent) {
@@ -37,7 +41,7 @@ export default class Alert {
         }
         else {
             messageElement = this.parentComponent.ce('p', {
-                ref: 'messageRef'
+                ref: 'messageRef',
             });
         }
         this.showAlert(type, messageElement, options);
@@ -53,7 +57,7 @@ export default class Alert {
         this.parentComponent.setContent(p, this.parentComponent.t('error'));
         const ul = this.parentComponent.ce('ul');
         const messagesList = document.createDocumentFragment();
-        errors.forEach(err => this.appendErrorToList(err, ul));
+        errors.forEach((err) => this.appendErrorToList(err, ul));
         p.appendChild(ul);
         messagesList.appendChild(p);
         return messagesList;
@@ -73,7 +77,7 @@ export default class Alert {
             this.clear();
         }
         if (messagesList) {
-            const { id = `${type}-list-${this.parentComponent.id}`, customClasses = `alert alert-${alertType}` } = options;
+            const { id = `${type}-list-${this.parentComponent.id}`, customClasses = `alert alert-${alertType}`, } = options;
             this.alert = this.parentComponent.ce('div', { id, class: customClasses });
             if (messagesList instanceof HTMLElement) {
                 this.parentComponent.appendTo(messagesList, this.alert);
@@ -96,19 +100,19 @@ export default class Alert {
                 (e) => {
                     const key = e.currentTarget.dataset.componentKey;
                     this.focusOnComponent(key);
-                }
+                },
             ],
             keypress: [
                 ...keyPressListeners,
                 (e) => {
                     const key = e.currentTarget.dataset.componentKey;
                     this.focusOnComponent(key);
-                }
-            ]
+                },
+            ],
         };
         if (this.refs.messageRef?.length) {
-            this.refs.messageRef.forEach(el => {
-                Object.entries(customEvents).forEach(([event, listeners]) => {
+            this.refs.messageRef.forEach((el) => {
+                Object.entries(customEvents).forEach(([event, listeners,]) => {
                     listeners.forEach((listener) => this.parentComponent.addEventListener(el, event, listener));
                     this.eventListenersKeys.push(event);
                 });
@@ -118,21 +122,23 @@ export default class Alert {
     clear() {
         try {
             if (this.refs.messageRef?.length) {
-                this.refs.messageRef.forEach(el => {
-                    this.eventListenersKeys.forEach(event => this.parentComponent.removeEventListener(el, event));
+                this.refs.messageRef.forEach((el) => {
+                    this.eventListenersKeys.forEach((event) => this.parentComponent.removeEventListener(el, event));
                 });
             }
             this.refs = {};
             this.parentComponent.removeChildFrom(this.alert, this.container);
             this.alert = null;
         }
-        catch (err) {
+        catch (ignoreErr) {
             // ignore
         }
     }
     focusOnComponent(keyOrPath) {
         if (keyOrPath) {
-            const path = this.parentComponent._parentPath ? keyOrPath.replace(this.parentComponent._parentPath, '') : keyOrPath;
+            const path = this.parentComponent._parentPath
+                ? keyOrPath.replace(this.parentComponent._parentPath, '')
+                : keyOrPath;
             const component = this.parentComponent.root?.getComponent(path, null, keyOrPath);
             if (component && _.isFunction(component.focus)) {
                 component.focus();
@@ -150,7 +156,7 @@ export default class Alert {
             style: 'cursor: pointer',
             ref: 'messageRef',
             tabIndex: 0,
-            'aria-label': `${message}. Click to navigate to the field with following error.`
+            'aria-label': `${message}. Click to navigate to the field with following error.`,
         };
         const li = this.parentComponent.ce('li', params);
         this.parentComponent.setContent(li, message);

package/lib/mjs/components/button/Button.form.js

@@ -9,7 +9,7 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
-            components: ButtonEditDisplay
+            components: ButtonEditDisplay,
         },
         {
             key: 'data',