@formio/js 5.2.3 → 5.2.4-rc.0

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,17 +40,25 @@ 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();
@@ -65,9 +73,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() {
@@ -75,8 +83,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,
@@ -84,10 +92,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);
         }
     }
@@ -105,10 +113,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.
@@ -159,7 +167,9 @@ 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 {
@@ -182,7 +192,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
@@ -202,7 +212,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) {
@@ -255,16 +265,17 @@ 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) {
@@ -290,7 +301,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>
@@ -299,7 +310,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,19 +11,20 @@ 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,
@@ -35,16 +36,17 @@ 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,11 +18,16 @@ 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,
@@ -55,8 +60,13 @@ export default [
         editor: 'ace',
         as: 'json',
         conditional: {
-            json: { '!==': [{ var: 'data.widget.type' }, 'input'] }
-        }
+            json: {
+                '!==': [
+                    { var: 'data.widget.type' },
+                    'input',
+                ],
+            },
+        },
     },
     {
         weight: 410,
@@ -64,7 +74,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;
         },
@@ -75,7 +85,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;
         },
@@ -107,18 +117,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,
@@ -126,7 +136,7 @@ export default [
         input: true,
         key: 'spellcheck',
         defaultValue: true,
-        label: 'Allow Spellcheck'
+        label: 'Allow Spellcheck',
     },
     {
         weight: 417,
@@ -143,29 +153,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,
@@ -174,7 +184,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,
@@ -182,7 +192,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,
@@ -190,7 +200,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,
@@ -198,6 +208,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,11 +17,12 @@ 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 {
@@ -42,7 +43,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) {
@@ -63,7 +64,12 @@ 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) {
@@ -111,9 +117,11 @@ 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') {
@@ -122,8 +130,7 @@ 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() {