@formio/js 5.2.4-rc.0 → 5.2.5

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,9 +78,7 @@ 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 {
@@ -98,10 +96,7 @@ export default class AddressComponent extends ContainerComponent {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEmpty', 'isNotEmpty'],
         };
     }
     mergeSchema(component = {}) {
@@ -144,7 +139,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);
                 }
@@ -201,14 +196,10 @@ 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)) {
@@ -221,11 +212,7 @@ 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;
     }
@@ -241,14 +228,12 @@ 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,
@@ -260,7 +245,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;
@@ -281,33 +266,39 @@ 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 = {
@@ -318,7 +309,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';
@@ -381,14 +372,12 @@ 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;
         }
-        this.triggerChange({
+        this.triggerChange?.({
             modified: true,
         });
         if (element) {
@@ -401,7 +390,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;
@@ -458,13 +447,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);
             });
@@ -482,7 +471,7 @@ export default class AddressComponent extends ContainerComponent {
                     if (this.manualMode) {
                         this.restoreComponentsContext();
                     }
-                    this.triggerChange({
+                    this.triggerChange?.({
                         modified: true,
                     });
                 }
@@ -506,7 +495,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;
     }
@@ -514,8 +503,9 @@ 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();
             }
@@ -524,7 +514,7 @@ export default class AddressComponent extends ContainerComponent {
     }
     clearAddress(element, index) {
         if (!this.isEmpty()) {
-            this.triggerChange();
+            this.triggerChange?.();
         }
         if (this.address?.[index]) {
             this.address[index] = this.emptyValue;
@@ -538,7 +528,9 @@ 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;
@@ -560,13 +552,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);
         }
@@ -580,12 +572,9 @@ 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,9 +13,7 @@ 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,
                 }));
@@ -28,7 +26,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'subscriptionKey',
+        key: "subscriptionKey",
         label: 'Subscription Key',
         placeholder: 'Enter Subscription Key',
         weight: 10,
@@ -37,12 +35,7 @@ export default [
             required: true,
         },
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'azure',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'azure'] },
         },
     },
     {
@@ -57,12 +50,7 @@ export default [
             required: true,
         },
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'custom'] },
         },
     },
     {
@@ -75,12 +63,7 @@ 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'] },
         },
     },
     {
@@ -92,12 +75,7 @@ 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'] },
         },
     },
     {
@@ -109,12 +87,7 @@ 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'] },
         },
     },
     {
@@ -129,12 +102,7 @@ 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'] },
         },
     },
     {
@@ -149,12 +117,7 @@ export default [
             required: true,
         },
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'google',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'google'] },
         },
     },
     {
@@ -168,14 +131,9 @@ 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,15 +18,11 @@ 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) {
@@ -41,7 +37,7 @@ export default class Alert {
         }
         else {
             messageElement = this.parentComponent.ce('p', {
-                ref: 'messageRef',
+                ref: 'messageRef'
             });
         }
         this.showAlert(type, messageElement, options);
@@ -57,7 +53,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;
@@ -77,7 +73,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);
@@ -100,19 +96,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);
                 });
@@ -122,23 +118,21 @@ 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 (ignoreErr) {
+        catch (err) {
             // 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();
@@ -156,7 +150,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',