@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/cjs/components/html/editForm/HTML.edit.display.js

@@ -3,39 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = [
     {
         key: 'labelPosition',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'placeholder',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'description',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tooltip',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'hideLabel',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'autofocus',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'disabled',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tabindex',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tableView',
-        ignore: true
+        ignore: true,
     },
     {
         type: 'textfield',
@@ -44,7 +44,7 @@ exports.default = [
         weight: 50,
         label: 'HTML Tag',
         placeholder: 'HTML Element Tag',
-        tooltip: 'The tag of this HTML element.'
+        tooltip: 'The tag of this HTML element.',
     },
     {
         type: 'textfield',
@@ -53,7 +53,7 @@ exports.default = [
         weight: 60,
         label: 'CSS Class',
         placeholder: 'CSS Class',
-        tooltip: 'The CSS class for this HTML element.'
+        tooltip: 'The CSS class for this HTML element.',
     },
     {
         type: 'datagrid',
@@ -67,15 +67,15 @@ exports.default = [
                 label: 'Attribute',
                 key: 'attr',
                 input: true,
-                type: 'textfield'
+                type: 'textfield',
             },
             {
                 label: 'Value',
                 key: 'value',
                 input: true,
-                type: 'textfield'
-            }
-        ]
+                type: 'textfield',
+            },
+        ],
     },
     {
         type: 'textarea',
@@ -87,7 +87,7 @@ exports.default = [
         tooltip: 'The content of this HTML element.',
         defaultValue: '<div class="well">Content</div>',
         key: 'content',
-        weight: 80
+        weight: 80,
     },
     {
         weight: 85,
@@ -95,6 +95,6 @@ exports.default = [
         label: 'Refresh On Change',
         tooltip: 'Rerender the field whenever a value on the form changes.',
         key: 'refreshOnChange',
-        input: true
+        input: true,
     },
 ];

package/lib/cjs/components/html/editForm/HTML.edit.logic.js

@@ -85,10 +85,10 @@ exports.default = [
                                 weight: 30,
                                 input: true,
                                 customConditional(context) {
-                                    return context.row.type === 'property' &&
+                                    return (context.row.type === 'property' &&
                                         context.row.hasOwnProperty('property') &&
                                         context.row.property.type === 'string' &&
-                                        context.row.property.component === 'content';
+                                        context.row.property.component === 'content');
                                 },
                             },
                         ],

package/lib/cjs/components/number/Number.form.js

@@ -16,15 +16,15 @@ function default_1(...extend) {
     return (0, TextField_form_1.default)([
         {
             key: 'display',
-            components: Number_edit_display_1.default
+            components: Number_edit_display_1.default,
         },
         {
             key: 'data',
-            components: Number_edit_data_1.default
+            components: Number_edit_data_1.default,
         },
         {
             key: 'validation',
-            components: Number_edit_validation_1.default
+            components: Number_edit_validation_1.default,
         },
     ], ...extend);
 }

package/lib/cjs/components/number/Number.js

@@ -7,7 +7,7 @@ const text_mask_addons_1 = require("@formio/text-mask-addons");
 const vanilla_text_mask_1 = require("@formio/vanilla-text-mask");
 const lodash_1 = __importDefault(require("lodash"));
 const Input_1 = __importDefault(require("../_classes/input/Input"));
-const utils_1 = require("../../utils/");
+const utils_1 = require("../../utils");
 class NumberComponent extends Input_1.default {
     static schema(...extend) {
         return Input_1.default.schema({
@@ -18,8 +18,8 @@ class NumberComponent extends Input_1.default {
                 min: '',
                 max: '',
                 step: 'any',
-                integer: ''
-            }
+                integer: '',
+            },
         }, ...extend);
     }
     static get builderInfo() {
@@ -29,33 +29,49 @@ class NumberComponent extends Input_1.default {
             group: 'basic',
             documentation: '/userguide/form-building/form-components#number',
             weight: 30,
-            schema: NumberComponent.schema()
+            schema: NumberComponent.schema(),
         };
     }
     static get serverConditionSettings() {
         return NumberComponent.conditionOperatorsSettings;
     }
     static get conditionOperatorsSettings() {
-        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'], valueComponent(classComp) {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [
+                ...super.conditionOperatorsSettings.operators,
+                'lessThan',
+                'greaterThan',
+                'lessThanOrEqual',
+                'greaterThanOrEqual',
+            ], valueComponent(classComp) {
                 return Object.assign(Object.assign({}, classComp), { type: 'number' });
             } });
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.number];
+        return ((0, utils_1.getComponentSavedTypes)(schema) || [
+            utils_1.componentValueTypes.number,
+        ]);
     }
     constructor(...args) {
         var _a, _b, _c;
         super(...args);
         const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);
-        this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator
-            || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator)
-            || separators.decimalSeparator;
+        this.decimalSeparator = this.options.decimalSeparator =
+            this.component.decimalSymbol ||
+                this.options.decimalSeparator ||
+                ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator) ||
+                separators.decimalSeparator;
         if (this.component.delimiter) {
-            this.delimiter = this.component.thousandsSeparator || ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;
+            this.delimiter =
+                this.component.thousandsSeparator ||
+                    ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) ||
+                    this.options.thousandsSeparator ||
+                    separators.delimiter;
         }
         else {
-            if (this.component.thousandsSeparator || ((_c = this.options.properties) === null || _c === void 0 ? void 0 : _c.thousandsSeparator) || this.options.thousandsSeparator) {
+            if (this.component.thousandsSeparator ||
+                ((_c = this.options.properties) === null || _c === void 0 ? void 0 : _c.thousandsSeparator) ||
+                this.options.thousandsSeparator) {
                 console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
             }
             this.delimiter = '';

package/lib/cjs/components/number/editForm/Number.edit.data.js

@@ -7,7 +7,7 @@ exports.default = [
         weight: 70,
         key: 'delimiter',
         label: 'Use Thousands Separator',
-        tooltip: 'Separate thousands by local delimiter.'
+        tooltip: 'Separate thousands by local delimiter.',
     },
     {
         type: 'number',
@@ -15,7 +15,7 @@ exports.default = [
         weight: 80,
         key: 'decimalLimit',
         label: 'Decimal Places',
-        tooltip: 'The maximum number of decimal places.'
+        tooltip: 'The maximum number of decimal places.',
     },
     {
         type: 'checkbox',
@@ -23,7 +23,7 @@ exports.default = [
         weight: 90,
         key: 'requireDecimal',
         label: 'Require Decimal',
-        tooltip: 'Always show decimals, even if trailing zeros.'
+        tooltip: 'Always show decimals, even if trailing zeros.',
     },
     {
         key: 'case',

package/lib/cjs/components/number/editForm/Number.edit.display.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = [
     {
         key: 'spellcheck',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'inputMask',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'allowMultipleMasks',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'showWordCount',
@@ -20,5 +20,5 @@ exports.default = [
     {
         key: 'showCharCount',
         ignore: true,
-    }
+    },
 ];

package/lib/cjs/components/number/editForm/Number.edit.validation.js

@@ -3,27 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = [
     {
         key: 'unique',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.minLength',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.maxLength',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.minWords',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.maxWords',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.pattern',
-        ignore: true
+        ignore: true,
     },
     {
         type: 'number',
@@ -32,7 +32,7 @@ exports.default = [
         input: true,
         placeholder: 'Minimum Value',
         tooltip: 'The minimum value this field must have before the form can be submitted.',
-        weight: 150
+        weight: 150,
     },
     {
         type: 'number',
@@ -41,6 +41,6 @@ exports.default = [
         input: true,
         placeholder: 'Maximum Value',
         tooltip: 'The maximum value this field can have before the form can be submitted.',
-        weight: 160
-    }
+        weight: 160,
+    },
 ];

package/lib/cjs/components/panel/Panel.form.js

@@ -15,7 +15,7 @@ function default_1(...extend) {
     return (0, NestedComponent_form_1.default)([
         {
             key: 'display',
-            components: Panel_edit_display_1.default
+            components: Panel_edit_display_1.default,
         },
         {
             key: 'conditional',

package/lib/cjs/components/panel/Panel.js

@@ -18,7 +18,7 @@ class PanelComponent extends NestedComponent_1.default {
             clearOnHide: false,
             input: false,
             tableView: false,
-            persistent: false
+            persistent: false,
         }, ...extend);
     }
     static get builderInfo() {
@@ -29,7 +29,7 @@ class PanelComponent extends NestedComponent_1.default {
             documentation: '/userguide/form-building/layout-components#panel',
             showPreview: false,
             weight: 30,
-            schema: PanelComponent.schema()
+            schema: PanelComponent.schema(),
         };
     }
     get defaultSchema() {

package/lib/cjs/components/panel/editForm/Panel.edit.conditional.js

@@ -8,19 +8,18 @@ const isEqual_1 = __importDefault(require("lodash/isEqual"));
 const omit_1 = __importDefault(require("lodash/omit"));
 const difference_1 = __importDefault(require("lodash/difference"));
 const keys_1 = __importDefault(require("lodash/keys"));
-/* eslint-disable quotes, max-len */
 const title = 'Advanced Next Page';
 const jsonProp = 'nextPage';
 const jsProp = 'nextPage';
-const jsDocHTML = (`
+const jsDocHTML = `
   <p>You must assign the <strong>next</strong> variable with the API key of the next page.</p>
   <p>The global variable <strong>data</strong> is provided, and allows you to access the data of any form component, by using its API key.</p>
   <p>Also <strong>moment</strong> library is available, and allows you to manipulate dates in a convenient way.</p>
   <h5>Example</h5><pre>next = data.addComment ? 'page3' : 'page4';</pre>
-`);
-const jsonDocHTML = (`
+`;
+const jsonDocHTML = `
   <p>Submission data is available as JsonLogic variables, with the same api key as your components.</p>
-`);
+`;
 const settingComponent = utils_1.default.javaScriptValue(title, jsProp, jsonProp, 110, jsDocHTML, jsonDocHTML);
 exports.default = [
     Object.assign(Object.assign({}, settingComponent), { customConditional(context) {
@@ -37,6 +36,5 @@ exports.default = [
                 }
             }
             return isWizardPanel;
-        } })
+        } }),
 ];
-/* eslint-enable quotes, max-len */

package/lib/cjs/components/panel/editForm/Panel.edit.display.js

@@ -3,37 +3,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const isEqualWith_1 = __importDefault(require("lodash/isEqualWith"));
 const omit_1 = __importDefault(require("lodash/omit"));
+const omitBy_1 = __importDefault(require("lodash/omitBy"));
 const difference_1 = __importDefault(require("lodash/difference"));
+const isNumber_1 = __importDefault(require("lodash/isNumber"));
+const isPlainObject_1 = __importDefault(require("lodash/isPlainObject"));
+const each_1 = __importDefault(require("lodash/each"));
 const keys_1 = __importDefault(require("lodash/keys"));
 exports.default = [
     {
         key: 'labelPosition',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'placeholder',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'description',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'autofocus',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tableView',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'label',
         hidden: true,
         calculateValue(context) {
             return context.data.title;
-        }
+        },
     },
     {
         key: 'tabindex',
@@ -46,7 +50,7 @@ exports.default = [
         placeholder: 'Panel Title',
         label: 'Title',
         key: 'title',
-        tooltip: 'The title text that appears in the header of this panel.'
+        tooltip: 'The title text that appears in the header of this panel.',
     },
     {
         weight: 20,
@@ -55,7 +59,7 @@ exports.default = [
         key: 'tooltip',
         label: 'Tooltip',
         placeholder: 'To add a tooltip to this field, enter text here.',
-        tooltip: 'Adds a tooltip to the side of this field.'
+        tooltip: 'Adds a tooltip to the side of this field.',
     },
     {
         weight: 30,
@@ -71,9 +75,9 @@ exports.default = [
                 { label: 'Info', value: 'info' },
                 { label: 'Success', value: 'success' },
                 { label: 'Danger', value: 'danger' },
-                { label: 'Warning', value: 'warning' }
-            ]
-        }
+                { label: 'Warning', value: 'warning' },
+            ],
+        },
     },
     {
         weight: 40,
@@ -88,8 +92,11 @@ exports.default = [
                 defaultValue: true,
                 customConditional({ data = {}, buildingForm = {} }) {
                     const formSettings = buildingForm.settings || {};
-                    return ![data.breadcrumb, formSettings.wizardBreadcrumbsType].includes('none');
-                }
+                    return ![
+                        data.breadcrumb,
+                        formSettings.wizardBreadcrumbsType,
+                    ].includes('none');
+                },
             },
             {
                 input: true,
@@ -99,8 +106,13 @@ exports.default = [
                 defaultValue: false,
                 tooltip: 'Determines if the breadcrumb bar is clickable or not for visited tabs.',
                 conditional: {
-                    json: { '===': [{ var: 'data.breadcrumbClickable' }, false] }
-                }
+                    json: {
+                        '===': [
+                            { var: 'data.breadcrumbClickable' },
+                            false,
+                        ],
+                    },
+                },
             },
             {
                 weight: 50,
@@ -118,7 +130,7 @@ exports.default = [
                     {
                         label: 'Next',
                         value: 'next',
-                    }
+                    },
                 ],
                 inline: true,
                 type: 'selectboxes',
@@ -128,7 +140,7 @@ exports.default = [
                 defaultValue: {
                     previous: true,
                     cancel: true,
-                    next: true
+                    next: true,
                 },
             },
             {
@@ -139,7 +151,7 @@ exports.default = [
                 input: true,
                 inputType: 'checkbox',
                 defaultValue: false,
-                tooltip: 'Use the Enter key to go forward through pages.'
+                tooltip: 'Use the Enter key to go forward through pages.',
             },
             {
                 weight: 56,
@@ -149,7 +161,7 @@ exports.default = [
                 input: true,
                 inputType: 'checkbox',
                 defaultValue: false,
-                tooltip: 'Use the Enter key to submit form on last page.'
+                tooltip: 'Use the Enter key to submit form on last page.',
             },
             {
                 weight: 60,
@@ -159,24 +171,33 @@ exports.default = [
                 input: true,
                 inputType: 'checkbox',
                 defaultValue: false,
-                tooltip: 'Scroll to the top of the wizard page when user navigates to it'
-            }
+                tooltip: 'Scroll to the top of the wizard page when user navigates to it',
+            },
         ],
         customConditional(context) {
             let isWizardPanel = false;
             if (context.instance.options.editForm.display === 'wizard') {
                 const { components } = context.instance.options.editForm;
-                const component = context.instance.options.editComponent;
+                let component = context.instance.options.editComponent;
                 if (components && component) {
+                    const cleanComponent = (comp, diff) => {
+                        const cleanComp = (0, omit_1.default)(comp, diff);
+                        (0, each_1.default)(cleanComp, (propValue, prop) => {
+                            if ((0, isPlainObject_1.default)(propValue)) {
+                                cleanComp[prop] = (0, omitBy_1.default)(propValue, (v) => !v && !(0, isNumber_1.default)(v) && v !== false);
+                            }
+                        });
+                        return cleanComp;
+                    };
                     isWizardPanel = components.some((comp) => {
                         const diff = (0, difference_1.default)((0, keys_1.default)(comp), (0, keys_1.default)(component)) || [];
                         diff.push('components');
-                        return (0, isEqual_1.default)((0, omit_1.default)(comp, diff), (0, omit_1.default)(component, diff));
+                        return (0, isEqualWith_1.default)(cleanComponent(comp, diff), cleanComponent(component, diff));
                     });
                 }
             }
             return isWizardPanel;
-        }
+        },
     },
     {
         weight: 650,
@@ -184,7 +205,7 @@ exports.default = [
         label: 'Collapsible',
         tooltip: 'If checked, this will turn this Panel into a collapsible panel.',
         key: 'collapsible',
-        input: true
+        input: true,
     },
     {
         weight: 651,
@@ -194,7 +215,12 @@ exports.default = [
         key: 'collapsed',
         input: true,
         conditional: {
-            json: { '===': [{ var: 'data.collapsible' }, true] }
-        }
-    }
+            json: {
+                '===': [
+                    { var: 'data.collapsible' },
+                    true,
+                ],
+            },
+        },
+    },
 ];

package/lib/cjs/components/password/Password.form.js

@@ -16,15 +16,15 @@ function default_1(...extend) {
     return (0, TextField_form_1.default)([
         {
             key: 'data',
-            components: Password_edit_data_1.default
+            components: Password_edit_data_1.default,
         },
         {
             key: 'display',
-            components: Password_edit_display_1.default
+            components: Password_edit_display_1.default,
         },
         {
             key: 'validation',
-            components: Password_edit_validation_1.default
+            components: Password_edit_validation_1.default,
         },
     ], ...extend);
 }

package/lib/cjs/components/password/Password.js

@@ -22,11 +22,14 @@ class PasswordComponent extends TextField_1.default {
             group: 'basic',
             documentation: '/userguide/form-building/form-components#password',
             weight: 40,
-            schema: PasswordComponent.schema()
+            schema: PasswordComponent.schema(),
         };
     }
     get defaultSchema() {
-        return lodash_1.default.omit(PasswordComponent.schema(), ['protected', 'tableView']);
+        return lodash_1.default.omit(PasswordComponent.schema(), [
+            'protected',
+            'tableView',
+        ]);
     }
     get inputInfo() {
         const info = super.inputInfo;