@formio/js 5.2.4-rc.0 → 5.2.5

package/lib/mjs/components/textfield/TextField.js

@@ -20,8 +20,8 @@ export default class TextFieldComponent extends Input {
             validate: {
                 minLength: '',
                 maxLength: '',
-                pattern: '',
-            },
+                pattern: ''
+            }
         }, ...extend);
     }
     static get builderInfo() {
@@ -31,7 +31,7 @@ export default class TextFieldComponent extends Input {
             group: 'basic',
             documentation: '/userguide/form-building/form-components#text-field',
             weight: 0,
-            schema: TextFieldComponent.schema(),
+            schema: TextFieldComponent.schema()
         };
     }
     static get serverConditionSettings() {
@@ -40,25 +40,17 @@ export default class TextFieldComponent extends Input {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                ...super.conditionOperatorsSettings.operators,
-                'includes',
-                'notIncludes',
-                'endsWith',
-                'startsWith',
-            ],
+            operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes', 'endsWith', 'startsWith'],
             valueComponent(classComp) {
                 return {
                     ...classComp,
                     type: 'textfield',
                 };
-            },
+            }
         };
     }
     static savedValueTypes(schema) {
-        return (FormioUtils.getComponentSavedTypes(schema) || [
-            FormioUtils.componentValueTypes.string,
-        ]);
+        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.string];
     }
     get defaultSchema() {
         return TextFieldComponent.schema();
@@ -73,9 +65,9 @@ export default class TextFieldComponent extends Input {
             info.attr.type = 'password';
         }
         else {
-            info.attr.type = this.component.inputType === 'password' ? 'password' : 'text';
+            info.attr.type = (this.component.inputType === 'password') ? 'password' : 'text';
         }
-        info.changeEvent = this.component.applyMaskOn === 'blur' ? 'blur' : 'input';
+        info.changeEvent = (this.component.applyMaskOn === 'blur') ? 'blur' : 'input';
         return info;
     }
     get emptyValue() {
@@ -83,8 +75,8 @@ export default class TextFieldComponent extends Input {
     }
     constructor(component, options, data) {
         super(component, options, data);
-        const timezone = this.component.widget?.timezone || this.options.timezone;
-        const displayInTimezone = this.component.widget?.displayInTimezone || 'viewer';
+        const timezone = (this.component.widget?.timezone || this.options.timezone);
+        const displayInTimezone = (this.component.widget?.displayInTimezone || 'viewer');
         if (this.component.widget?.type === 'calendar') {
             this.component.widget = {
                 ...this.component.widget,
@@ -92,10 +84,10 @@ export default class TextFieldComponent extends Input {
                 timezone,
                 displayInTimezone,
                 locale: this.component.widget.locale || this.options.language,
-                saveAs: 'text',
+                saveAs: 'text'
             };
-            // update originalComponent to include widget settings after component initialization
-            // originalComponent is used to restore the component (and widget) after evaluating field logic
+            // update originalComponent to include widget settings after component initialization 
+            // originalComponent is used to restore the component (and widget) after evaluating field logic 
             this.originalComponent = FormioUtils.fastCloneDeep(this.component);
         }
     }
@@ -113,10 +105,10 @@ export default class TextFieldComponent extends Input {
      */
     maskValue(value, flags = {}) {
         // Convert it into the correct format.
-        if (!value || typeof value !== 'object') {
+        if (!value || (typeof value !== 'object')) {
             value = {
                 value,
-                maskName: this.component.inputMasks[0].label,
+                maskName: this.component.inputMasks[0].label
             };
         }
         // If no value is provided, then set the defaultValue.
@@ -167,9 +159,7 @@ export default class TextFieldComponent extends Input {
             }
             else {
                 const placeholderChar = this.placeholderChar;
-                textInput.value = conformToMask(textValue, FormioUtils.getInputMask(mask), {
-                    placeholderChar,
-                }).conformedValue;
+                textInput.value = conformToMask(textValue, FormioUtils.getInputMask(mask), { placeholderChar }).conformedValue;
             }
         }
         else {
@@ -192,7 +182,7 @@ export default class TextFieldComponent extends Input {
             const displayMask = this.component.displayMask;
             // If the input has only the valueMask or the displayMask is the same as the valueMask,
             // just return the value which is already formatted
-            if ((valueMask && !displayMask) || displayMask === valueMask) {
+            if (valueMask && !displayMask || displayMask === valueMask) {
                 return value;
             }
             // If there is only the displayMask, return the raw (unmasked) value
@@ -212,7 +202,7 @@ export default class TextFieldComponent extends Input {
         const maskInput = this.refs.select ? this.refs.select[index] : null;
         return {
             value: textInput ? textInput.value : undefined,
-            maskName: maskInput ? maskInput.value : undefined,
+            maskName: maskInput ? maskInput.value : undefined
         };
     }
     checkInputMaskValue(inputMask) {
@@ -265,17 +255,16 @@ export default class TextFieldComponent extends Input {
         }
     }
     isHtmlRenderMode() {
-        return (super.isHtmlRenderMode() ||
+        return super.isHtmlRenderMode() ||
             ((this.options.readOnly || this.disabled) &&
                 this.component.inputFormat === 'html' &&
-                this.type === 'textfield'));
+                this.type === 'textfield');
     }
     isEmpty(value = this.dataValue) {
         if (!this.isMultipleMasksField) {
             return super.isEmpty((value || '').toString().trim());
         }
-        return (super.isEmpty(value) ||
-            (this.component.multiple ? value.length === 0 : !value.maskName || !value.value));
+        return super.isEmpty(value) || (this.component.multiple ? value.length === 0 : (!value.maskName || !value.value));
     }
     truncateMultipleSpaces(value) {
         if (value) {
@@ -301,7 +290,7 @@ export default class TextFieldComponent extends Input {
     }
     getValueAsString(value, options) {
         if (options?.email && this.visible && !this.skipInEmail && _.isObject(value)) {
-            const result = `
+            const result = (`
         <table border="1" style="width:100%">
           <tbody>
           <tr>
@@ -310,7 +299,7 @@ export default class TextFieldComponent extends Input {
           </tr>
           </tbody>
         </table>
-      `;
+      `);
             return result;
         }
         if (value && this.component.inputFormat === 'plain' && /<[^<>]+>/g.test(value)) {

package/lib/mjs/components/textfield/editForm/TextField.edit.data.js

@@ -11,20 +11,19 @@ export default [
             values: [
                 {
                     value: 'plain',
-                    label: 'Plain',
+                    label: 'Plain'
                 },
                 {
                     value: 'html',
-                    label: 'HTML',
-                },
-                {
+                    label: 'HTML'
+                }, {
                     value: 'raw',
-                    label: 'Raw (Insecure)',
-                },
-            ],
+                    label: 'Raw (Insecure)'
+                }
+            ]
         },
         defaultValue: 'plain',
-        input: true,
+        input: true
     },
     {
         weight: 200,
@@ -36,17 +35,16 @@ export default [
         values: [
             {
                 value: 'mixed',
-                label: 'Mixed (Allow upper and lower case)',
+                label: 'Mixed (Allow upper and lower case)'
             },
             {
                 value: 'uppercase',
-                label: 'Uppercase',
-            },
-            {
+                label: 'Uppercase'
+            }, {
                 value: 'lowercase',
-                label: 'Lowercase',
-            },
-        ],
+                label: 'Lowercase'
+            }
+        ]
     },
     {
         weight: 205,

package/lib/mjs/components/textfield/editForm/TextField.edit.display.js

@@ -18,16 +18,11 @@ export default [
             values: [
                 { label: 'Input Field', value: 'input' },
                 { label: 'Calendar Picker', value: 'calendar' },
-            ],
+            ]
         },
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.type' },
-                    'textfield',
-                ],
-            },
-        },
+            json: { '===': [{ var: 'data.type' }, 'textfield'] }
+        }
     },
     {
         weight: 405,
@@ -60,13 +55,8 @@ export default [
         editor: 'ace',
         as: 'json',
         conditional: {
-            json: {
-                '!==': [
-                    { var: 'data.widget.type' },
-                    'input',
-                ],
-            },
-        },
+            json: { '!==': [{ var: 'data.widget.type' }, 'input'] }
+        }
     },
     {
         weight: 410,
@@ -74,7 +64,7 @@ export default [
         input: true,
         key: 'inputMask',
         label: 'Input Mask',
-        tooltip: "An input mask helps the user with input by ensuring a predefined format.<br><br>9: numeric<br>a: alphabetical<br>*: alphanumeric<br><br>Example telephone mask: (999) 999-9999<br><br>See the <a target='_blank' href='https://github.com/RobinHerbots/jquery.inputmask'>jquery.inputmask documentation</a> for more information.</a>",
+        tooltip: 'An input mask helps the user with input by ensuring a predefined format.<br><br>9: numeric<br>a: alphabetical<br>*: alphanumeric<br><br>Example telephone mask: (999) 999-9999<br><br>See the <a target=\'_blank\' href=\'https://github.com/RobinHerbots/jquery.inputmask\'>jquery.inputmask documentation</a> for more information.</a>',
         customConditional(context) {
             return !context.data.allowMultipleMasks;
         },
@@ -85,7 +75,7 @@ export default [
         input: true,
         key: 'displayMask',
         label: 'Display Mask',
-        tooltip: "A display mask helps to display the input in a readable way, this won't affect the  value which will be saved (to affect both view and saved value, delete Display Mask and use Input Mask).<br><br>9: numeric<br>a: alphabetical<br>*: alphanumeric<br><br>Example telephone mask: (999) 999-9999<br><br>See the <a target='_blank' href='https://github.com/RobinHerbots/jquery.inputmask'>jquery.inputmask documentation</a> for more information.</a>",
+        tooltip: 'A display mask helps to display the input in a readable way, this won\'t affect the  value which will be saved (to affect both view and saved value, delete Display Mask and use Input Mask).<br><br>9: numeric<br>a: alphabetical<br>*: alphanumeric<br><br>Example telephone mask: (999) 999-9999<br><br>See the <a target=\'_blank\' href=\'https://github.com/RobinHerbots/jquery.inputmask\'>jquery.inputmask documentation</a> for more information.</a>',
         customConditional(context) {
             return !context.data.allowMultipleMasks;
         },
@@ -117,18 +107,18 @@ export default [
         label: 'Input Mask Placeholder Char',
         tooltip: 'You can specify a char which will be used as a placeholder in the field. <br>E.g., \u02cd<br>Make note that placeholder char will be replaced by a space if it is used inside the mask',
         validation: {
-            maxLength: 1,
+            maxLength: 1
         },
         customConditional(context) {
             return context.data.inputMask || context.data.displayMask;
-        },
+        }
     },
     {
         weight: 413,
         type: 'checkbox',
         input: true,
         key: 'allowMultipleMasks',
-        label: 'Allow Multiple Masks',
+        label: 'Allow Multiple Masks'
     },
     {
         weight: 1350,
@@ -136,7 +126,7 @@ export default [
         input: true,
         key: 'spellcheck',
         defaultValue: true,
-        label: 'Allow Spellcheck',
+        label: 'Allow Spellcheck'
     },
     {
         weight: 417,
@@ -153,29 +143,29 @@ export default [
                 type: 'textfield',
                 key: 'label',
                 label: 'Label',
-                input: true,
+                input: true
             },
             {
                 type: 'textfield',
                 key: 'mask',
                 label: 'Mask',
-                input: true,
-            },
-        ],
+                input: true
+            }
+        ]
     },
     {
         weight: 320,
         type: 'textfield',
         input: true,
         key: 'prefix',
-        label: 'Prefix',
+        label: 'Prefix'
     },
     {
         weight: 330,
         type: 'textfield',
         input: true,
         key: 'suffix',
-        label: 'Suffix',
+        label: 'Suffix'
     },
     {
         weight: 700,
@@ -184,7 +174,7 @@ export default [
         key: 'autocomplete',
         label: 'Autocomplete',
         placeholder: 'on',
-        tooltip: "Indicates whether input elements can by default have their values automatically completed by the browser. See the <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete'>MDN documentation</a> on autocomplete for more information.",
+        tooltip: 'Indicates whether input elements can by default have their values automatically completed by the browser. See the <a href=\'https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\'>MDN documentation</a> on autocomplete for more information.'
     },
     {
         weight: 1300,
@@ -192,7 +182,7 @@ export default [
         label: 'Hide Input',
         tooltip: 'Hide the input in the browser. This does not encrypt on the server. Do not use for passwords.',
         key: 'mask',
-        input: true,
+        input: true
     },
     {
         weight: 1200,
@@ -200,7 +190,7 @@ export default [
         label: 'Show Word Counter',
         tooltip: 'Show a live count of the number of words.',
         key: 'showWordCount',
-        input: true,
+        input: true
     },
     {
         weight: 1201,
@@ -208,6 +198,6 @@ export default [
         label: 'Show Character Counter',
         tooltip: 'Show a live count of the number of characters.',
         key: 'showCharCount',
-        input: true,
+        input: true
     },
 ];

package/lib/mjs/components/textfield/editForm/TextField.edit.validation.js

@@ -6,7 +6,7 @@ export default [
         placeholder: 'Minimum Length',
         type: 'number',
         tooltip: 'The minimum length requirement this field must meet.',
-        input: true,
+        input: true
     },
     {
         weight: 120,
@@ -15,7 +15,7 @@ export default [
         placeholder: 'Maximum Length',
         type: 'number',
         tooltip: 'The maximum length requirement this field must meet.',
-        input: true,
+        input: true
     },
     {
         weight: 125,
@@ -24,7 +24,7 @@ export default [
         placeholder: 'Minimum Word Length',
         type: 'number',
         tooltip: 'The minimum amount of words that can be added to this field.',
-        input: true,
+        input: true
     },
     {
         weight: 126,
@@ -33,7 +33,7 @@ export default [
         placeholder: 'Maximum Word Length',
         type: 'number',
         tooltip: 'The maximum amount of words that can be added to this field.',
-        input: true,
+        input: true
     },
     {
         weight: 130,
@@ -42,6 +42,6 @@ export default [
         placeholder: 'Regular Expression Pattern',
         type: 'textfield',
         tooltip: 'The regular expression pattern test that the field value must pass before the form can be submitted.',
-        input: true,
-    },
+        input: true
+    }
 ];

package/lib/mjs/components/time/Time.js

@@ -17,12 +17,11 @@ export default class TimeComponent extends TextFieldComponent {
         super(component, options, data);
         const { edge: isEdgeBrowser, version: edgeVersion } = getBrowserInfo();
         this.component.inputMask = this.getInputMaskFromFormat(this.component.format);
-        this.component.inputType =
-            isEdgeBrowser && edgeVersion <= 18 ? 'text' : this.component.inputType || 'time';
+        this.component.inputType = isEdgeBrowser && edgeVersion <= 18
+            ? 'text'
+            : (this.component.inputType || 'time');
         // If default value is given then the raw data needs to be set
-        this.rawData = this.component.multiple
-            ? []
-            : this.getValueAsString(this.defaultValue) || this.emptyValue;
+        this.rawData = this.component.multiple ? [] : this.getValueAsString(this.defaultValue) || this.emptyValue;
     }
     static get builderInfo() {
         return {
@@ -43,7 +42,7 @@ export default class TimeComponent extends TextFieldComponent {
     get defaultValue() {
         let value = super.defaultValue;
         if (this.component.multiple && Array.isArray(value)) {
-            value = value.map((item) => (item ? this.getStringAsValue(item) : item));
+            value = value.map(item => item ? this.getStringAsValue(item) : item);
         }
         else {
             if (value) {
@@ -64,12 +63,7 @@ export default class TimeComponent extends TextFieldComponent {
         return value.includes('_');
     }
     removeValue(index) {
-        this.rawData = Array.isArray(this.rawData)
-            ? [
-                ...this.rawData.slice(0, index),
-                ...this.rawData.slice(index + 1),
-            ]
-            : this.emptyValue;
+        this.rawData = Array.isArray(this.rawData) ? [...this.rawData.slice(0, index), ...this.rawData.slice(index + 1)] : this.emptyValue;
         super.removeValue(index);
     }
     resetRawData(index) {
@@ -117,11 +111,9 @@ export default class TimeComponent extends TextFieldComponent {
     }
     getValueAsString(value) {
         if (Array.isArray(value) && this.component.multiple) {
-            return value
-                .map((item) => moment(item, this.component.dataFormat).format(this.component.format))
-                .join(', ');
+            return value.map(item => moment(item, this.component.dataFormat).format(this.component.format)).join(', ');
         }
-        return ((value ? moment(value, this.component.dataFormat).format(this.component.format) : value) || '');
+        return (value ? moment(value, this.component.dataFormat).format(this.component.format) : value) || '';
     }
     getInputMaskFromFormat(format) {
         if (format === 'LT') {
@@ -130,7 +122,8 @@ export default class TimeComponent extends TextFieldComponent {
         if (format === 'LTS') {
             return '99:99:99 AA';
         }
-        return format.replace(/[hHmMsSk]/g, '9').replace(/[aA]/, 'AA');
+        return format.replace(/[hHmMsSk]/g, '9')
+            .replace(/[aA]/, 'AA');
     }
     addFocusBlurEvents(element) {
         super.addFocusBlurEvents(element);

package/lib/mjs/components/time/editForm/Time.edit.display.js

@@ -3,7 +3,7 @@ export default [
         type: 'select',
         input: true,
         weight: 40,
-        tooltip: "Select the type of widget you'd like to use.",
+        tooltip: 'Select the type of widget you\'d like to use.',
         key: 'inputType',
         defaultValue: 'time',
         label: 'Input Type',
@@ -36,5 +36,5 @@ export default [
     {
         key: 'placeholder',
         ignore: true,
-    },
+    }
 ];

package/lib/mjs/components/unknown/Unknown.form.js

@@ -15,10 +15,10 @@ export default function () {
                         label: 'Custom',
                         key: 'display',
                         weight: 0,
-                        components: UnknownEditDisplay,
-                    },
-                ],
-            },
-        ],
+                        components: UnknownEditDisplay
+                    }
+                ]
+            }
+        ]
     };
 }

package/lib/mjs/components/unknown/Unknown.js

@@ -5,7 +5,7 @@ export default class UnknownComponent extends Component {
             type: 'custom',
             key: 'custom',
             protected: false,
-            persistent: true,
+            persistent: true
         };
     }
     static get builderInfo() {
@@ -15,7 +15,7 @@ export default class UnknownComponent extends Component {
             group: 'premium',
             documentation: '/userguide/form-building/premium-components#custom',
             weight: 120,
-            schema: UnknownComponent.schema(),
+            schema: UnknownComponent.schema()
         };
     }
     get defaultSchema() {

package/lib/mjs/components/unknown/editForm/Unknown.edit.display.js

@@ -10,7 +10,7 @@ export default [
             'custom component documentation' +
             '</a>.',
         type: 'htmlelement',
-        weight: 5,
+        weight: 5
     },
     {
         type: 'textarea',
@@ -20,6 +20,6 @@ export default [
         input: true,
         key: 'componentJson',
         label: 'Custom Element JSON',
-        tooltip: 'Enter the JSON for this custom element.',
-    },
+        tooltip: 'Enter the JSON for this custom element.'
+    }
 ];

package/lib/mjs/components/url/Url.form.js

@@ -11,15 +11,15 @@ export default function (...extend) {
     return textEditForm([
         {
             key: 'display',
-            components: UrlEditDisplay,
+            components: UrlEditDisplay
         },
         {
             key: 'data',
-            components: UrlEditData,
+            components: UrlEditData
         },
         {
             key: 'validation',
-            components: UrlEditValidation,
+            components: UrlEditValidation
         },
     ], ...extend);
 }

package/lib/mjs/components/url/Url.js

@@ -5,7 +5,7 @@ export default class UrlComponent extends TextFieldComponent {
             type: 'url',
             label: 'Url',
             key: 'url',
-            inputType: 'url',
+            inputType: 'url'
         }, ...extend);
     }
     static get builderInfo() {
@@ -15,7 +15,7 @@ export default class UrlComponent extends TextFieldComponent {
             icon: 'link',
             documentation: '/userguide/form-building/advanced-components#url',
             weight: 20,
-            schema: UrlComponent.schema(),
+            schema: UrlComponent.schema()
         };
     }
     constructor(component, options, data) {

package/lib/mjs/components/url/editForm/Url.edit.display.js

@@ -1,11 +1,11 @@
 export default [
     {
         key: 'inputMask',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'allowMultipleMasks',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'showWordCount',
@@ -14,5 +14,5 @@ export default [
     {
         key: 'showCharCount',
         ignore: true,
-    },
+    }
 ];

package/lib/mjs/components/url/editForm/Url.edit.validation.js

@@ -5,6 +5,6 @@ export default [
     },
     {
         key: 'validate.maxWords',
-        ignore: true,
+        ignore: true
     },
 ];

package/lib/mjs/components/well/Well.form.js

@@ -9,7 +9,7 @@ export default function (...extend) {
     return nestedComponentForm([
         {
             key: 'display',
-            components: WellEditDisplay,
+            components: WellEditDisplay
         },
     ], ...extend);
 }

package/lib/mjs/components/well/Well.js

@@ -6,7 +6,7 @@ export default class WellComponent extends NestedComponent {
             key: 'well',
             input: false,
             persistent: false,
-            components: [],
+            components: []
         }, ...extend);
     }
     static get builderInfo() {
@@ -17,7 +17,7 @@ export default class WellComponent extends NestedComponent {
             documentation: '/userguide/form-building/layout-components#well',
             showPreview: false,
             weight: 60,
-            schema: WellComponent.schema(),
+            schema: WellComponent.schema()
         };
     }
     static savedValueTypes() {