@formio/js 5.0.0-dev.5673.3d062b9 → 5.0.0-dev.5673.ae99c16

package/lib/mjs/components/html/HTML.js

@@ -5,7 +5,7 @@ export default class HTMLComponent extends Component {
         return Component.schema({
             label: 'HTML',
             type: 'htmlelement',
-            tag: 'p',
+            tag: 'div',
             attrs: [],
             content: '',
             input: false,

package/lib/mjs/components/number/Number.d.ts

@@ -27,11 +27,26 @@ export default class NumberComponent extends Input {
      */
     createNumberMask(): any;
     isDecimalAllowed(): any;
-    parseNumber(value: any): number;
+    /**
+     * parses a numeric string by removing the delimiters and replacing the decimal separator back to '.' so that it can
+     * be processed by either parseInt or parseFloat
+     * @param {string} value the value to be parsed
+     * @returns {number} a parsed number
+     */
+    parseNumber(value: string): number;
     setInputMask(input: any): void;
     getValueAt(index: any): number | null;
     setValueAt(index: any, value: any, flags?: {}): void;
-    parseValue(input: any): number;
+    /**
+     * Converts a string to a floating point number, formats the number based on the parsed float function
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the
+     * formatted number back as a string
+     * Example Input: "123.456,22"
+     * Example Output: "123456,22"
+     * @param {string | number} input the numeric string to parse
+     * @returns {string | null} a parsed string
+     */
+    parseValue(input: string | number): string | null;
     focus(): void;
     getMaskedValue(value: any): any;
     getValueAsString(value: any, options: any): any;

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

@@ -46,16 +46,16 @@ export default class NumberComponent extends Input {
     constructor(...args) {
         super(...args);
         const separators = getNumberSeparators(this.options.language || navigator.language);
-        this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
+        this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator
             || this.options.properties?.decimalSeparator
             || separators.decimalSeparator;
         if (this.component.delimiter) {
-            if (this.options.hasOwnProperty('thousandsSeparator')) {
-                console.warn("Property 'thousandsSeparator' is deprecated. Please use i18n to specify delimiter.");
-            }
-            this.delimiter = this.options.properties?.thousandsSeparator || this.options.thousandsSeparator || separators.delimiter;
+            this.delimiter = this.component.thousandsSeparator || this.options.properties?.thousandsSeparator || this.options.thousandsSeparator || separators.delimiter;
         }
         else {
+            if (this.component.thousandsSeparator || this.options.properties?.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 = '';
         }
         const requireDecimal = _.get(this.component, 'requireDecimal', false);
@@ -77,7 +77,7 @@ export default class NumberComponent extends Input {
             prefix: '',
             suffix: '',
             requireDecimal: _.get(this.component, 'requireDecimal', false),
-            thousandsSeparatorSymbol: _.get(this.component, 'thousandsSeparator', this.delimiter),
+            thousandsSeparatorSymbol: this.delimiter || '',
             decimalSymbol: _.get(this.component, 'decimalSymbol', this.decimalSeparator),
             decimalLimit: _.get(this.component, 'decimalLimit', this.decimalLimit),
             allowNegative: _.get(this.component, 'allowNegative', true),
@@ -89,6 +89,11 @@ export default class NumberComponent extends Input {
     }
     get defaultValue() {
         let defaultValue = super.defaultValue;
+        if (typeof defaultValue === 'string') {
+            // Default value may be a string or have custom thousands separators or decimal symbols, so we need to call
+            // parseNumber on it
+            defaultValue = this.parseNumber(defaultValue);
+        }
         if (!defaultValue && this.component.defaultValue === 0) {
             defaultValue = this.component.defaultValue;
         }
@@ -100,6 +105,12 @@ export default class NumberComponent extends Input {
     isDecimalAllowed() {
         return _.get(this.component, 'allowDecimal', !(this.component.validate && this.component.validate.integer));
     }
+    /**
+     * parses a numeric string by removing the delimiters and replacing the decimal separator back to '.' so that it can
+     * be processed by either parseInt or parseFloat
+     * @param {string} value the value to be parsed
+     * @returns {number} a parsed number
+     */
     parseNumber(value) {
         // Remove delimiters and convert decimal separator to dot.
         value = value.split(this.delimiter).join('').replace(this.decimalSeparator, '.');
@@ -144,6 +155,15 @@ export default class NumberComponent extends Input {
     setValueAt(index, value, flags = {}) {
         return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);
     }
+    /**
+     * Converts a string to a floating point number, formats the number based on the parsed float function
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the
+     * formatted number back as a string
+     * Example Input: "123.456,22"
+     * Example Output: "123456,22"
+     * @param {string | number} input the numeric string to parse
+     * @returns {string | null} a parsed string
+     */
     parseValue(input) {
         if (typeof input === 'string') {
             input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');

package/lib/mjs/components/number/fixtures/comp10.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string;
+    }[];
+}
+export default _default;

package/lib/mjs/components/number/fixtures/comp10.js

@@ -0,0 +1,19 @@
+export default {
+    components: [
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": false,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "validateWhenHidden": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "defaultValue": "123.23"
+        }
+    ]
+};

package/lib/mjs/components/number/fixtures/comp8.d.ts

@@ -0,0 +1,32 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        decimalSymbol: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        applyMaskOn?: undefined;
+        mask?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        truncateMultipleSpaces?: undefined;
+        decimalSymbol?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/number/fixtures/comp8.js

@@ -0,0 +1,26 @@
+export default {
+    components: [
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": false,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "decimalSymbol": "-"
+        },
+        {
+            "type": "button",
+            "label": "Submit",
+            "key": "submit",
+            "disableOnInvalid": true,
+            "input": true,
+            "tableView": false
+        }
+    ]
+};

package/lib/mjs/components/number/fixtures/comp9.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        decimalSymbol: string;
+        thousandsSeparator: string;
+    }[];
+}
+export default _default;

package/lib/mjs/components/number/fixtures/comp9.js

@@ -0,0 +1,19 @@
+export default {
+    components: [
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": true,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "decimalSymbol": ",",
+            "thousandsSeparator": "."
+        }
+    ]
+};

package/lib/mjs/components/number/fixtures/index.d.ts

@@ -5,4 +5,7 @@ import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };
+import comp8 from './comp8';
+import comp9 from './comp9';
+import comp10 from './comp10';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };

package/lib/mjs/components/number/fixtures/index.js

@@ -5,4 +5,7 @@ import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };
+import comp8 from './comp8';
+import comp9 from './comp9';
+import comp10 from './comp10';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };

package/lib/mjs/components/panel/Panel.d.ts

@@ -4,6 +4,7 @@ export default class PanelComponent extends NestedComponent {
         icon: string;
         group: string;
         documentation: string;
+        showPreview: boolean;
         weight: number;
         schema: any;
     };

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

@@ -22,6 +22,7 @@ export default class PanelComponent extends NestedComponent {
             icon: 'list-alt',
             group: 'layout',
             documentation: '/userguide/form-building/layout-components#panel',
+            showPreview: false,
             weight: 30,
             schema: PanelComponent.schema()
         };

package/lib/mjs/components/phonenumber/fixtures/comp2.d.ts

@@ -0,0 +1,16 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        applyMaskOn: string;
+        allowMultipleMasks: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        inputMasks: {
+            label: string;
+            mask: string;
+        }[];
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/mjs/components/phonenumber/fixtures/comp2.js

@@ -0,0 +1,23 @@
+export default {
+    components: [
+        {
+            "label": "Phone Number",
+            "applyMaskOn": "change",
+            "allowMultipleMasks": true,
+            "tableView": true,
+            "key": "phoneNumber",
+            "type": "phoneNumber",
+            "inputMasks": [
+                {
+                    "label": "Canada",
+                    "mask": "(999) 999-9999"
+                },
+                {
+                    "label": "Other",
+                    "mask": ""
+                }
+            ],
+            "input": true
+        }
+    ]
+};

package/lib/mjs/components/phonenumber/fixtures/index.d.ts

@@ -1,2 +1,3 @@
-export { comp1 };
 import comp1 from './comp1';
+import comp2 from './comp2';
+export { comp1, comp2 };

package/lib/mjs/components/phonenumber/fixtures/index.js

@@ -1,2 +1,3 @@
 import comp1 from './comp1';
-export { comp1 };
+import comp2 from './comp2';
+export { comp1, comp2 };

package/lib/mjs/components/radio/Radio.d.ts

@@ -8,26 +8,10 @@ export default class RadioComponent extends ListComponent {
         schema: any;
     };
     static get conditionOperatorsSettings(): {
-        valueComponent(classComp: any): {
-            type: string;
-            dataSrc: string;
-            valueProperty: string;
-            dataType: any;
-            data: {
-                custom(): any;
-            };
-        };
+        valueComponent(classComp: any): any;
     };
     static get serverConditionSettings(): {
-        valueComponent(classComp: any): {
-            type: string;
-            dataSrc: string;
-            valueProperty: string;
-            dataType: any;
-            data: {
-                custom: string;
-            };
-        };
+        valueComponent(classComp: any): any;
     };
     static savedValueTypes(schema: any): any[];
     constructor(component: any, options: any, data: any);

package/lib/mjs/components/radio/Radio.js

@@ -30,35 +30,26 @@ export default class RadioComponent extends ListComponent {
         return {
             ...super.conditionOperatorsSettings,
             valueComponent(classComp) {
-                return {
-                    type: 'select',
-                    dataSrc: 'custom',
-                    valueProperty: 'value',
-                    dataType: classComp.dataType || '',
-                    data: {
-                        custom() {
-                            return classComp.values;
+                const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';
+                return isValuesSrc
+                    ? {
+                        type: 'select',
+                        dataSrc: 'custom',
+                        valueProperty: 'value',
+                        dataType: classComp.dataType || '',
+                        data: {
+                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,
                         }
-                    },
-                };
+                    }
+                    : {
+                        ...classComp,
+                        type: 'select',
+                    };
             }
         };
     }
     static get serverConditionSettings() {
-        return {
-            ...super.serverConditionSettings,
-            valueComponent(classComp) {
-                return {
-                    type: 'select',
-                    dataSrc: 'custom',
-                    valueProperty: 'value',
-                    dataType: classComp.dataType || '',
-                    data: {
-                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,
-                    },
-                };
-            },
-        };
+        return RadioComponent.conditionOperatorsSettings;
     }
     static savedValueTypes(schema) {
         const { boolean, string, number, object, array } = componentValueTypes;
@@ -264,6 +255,16 @@ export default class RadioComponent extends ListComponent {
         if (method.toUpperCase() === 'GET') {
             body = null;
         }
+        const limit = this.component.limit || 100;
+        const skip = this.isScrollLoading ? this.selectOptions.length : 0;
+        // Allow for url interpolation.
+        url = this.sanitize(this.interpolate(url, {
+            formioBase: Formio.getBaseUrl(),
+            search,
+            limit,
+            skip,
+            page: Math.abs(Math.floor(skip / limit))
+        }), this.shouldSanitizeValue);
         // Set ignoreCache if it is
         options.ignoreCache = this.component.ignoreCache;
         // Make the request.
@@ -295,14 +296,15 @@ export default class RadioComponent extends ListComponent {
     setItems(items) {
         const listData = [];
         items?.forEach((item, i) => {
+            const valueAtProperty = _.get(item, this.component.valueProperty);
             this.loadedOptions[i] = {
-                value: this.component.valueProperty ? item[this.component.valueProperty] : item,
-                label: this.component.valueProperty ? this.itemTemplate(item, item[this.component.valueProperty]) : this.itemTemplate(item, item, i)
+                value: this.component.valueProperty ? valueAtProperty : item,
+                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)
             };
-            listData.push(this.templateData[this.component.valueProperty ? item[this.component.valueProperty] : i]);
-            if ((this.component.valueProperty || !this.isRadio) && (_.isUndefined(item[this.component.valueProperty]) ||
-                (!this.isRadio && _.isObject(item[this.component.valueProperty])) ||
-                (!this.isRadio && _.isBoolean(item[this.component.valueProperty])))) {
+            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);
+            if ((this.component.valueProperty || !this.isRadio) && (_.isUndefined(valueAtProperty) ||
+                (!this.isRadio && _.isObject(valueAtProperty)) ||
+                (!this.isRadio && _.isBoolean(valueAtProperty)))) {
                 this.loadedOptions[i].invalid = true;
             }
         });

package/lib/mjs/components/radio/fixtures/comp12.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        optionsLabelPosition: string;
+        tableView: boolean;
+        dataSrc: string;
+        values: {
+            label: string;
+            value: string;
+            shortcut: string;
+        }[];
+        valueProperty: string;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        data: {
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
+        };
+        template: string;
+        authenticate: boolean;
+        input: boolean;
+        inputType: string;
+    }[];
+}
+export default _default;

package/lib/mjs/components/radio/fixtures/comp12.js

@@ -0,0 +1,34 @@
+export default {
+    components: [
+        {
+            "label": "Select Boxes",
+            "optionsLabelPosition": "right",
+            "tableView": false,
+            "dataSrc": "url",
+            "values": [
+                {
+                    "label": "",
+                    "value": "",
+                    "shortcut": ""
+                }
+            ],
+            "valueProperty": "data.name",
+            "validateWhenHidden": false,
+            "key": "selectBoxes",
+            "type": "selectboxes",
+            "data": {
+                "url": "https://remote-dev.form.io/projectId/name/submission",
+                "headers": [
+                    {
+                        "key": "",
+                        "value": ""
+                    }
+                ]
+            },
+            "template": "<span>{{ item.data.name }}</span>",
+            "authenticate": true,
+            "input": true,
+            "inputType": "checkbox"
+        }
+    ]
+};

package/lib/mjs/components/radio/fixtures/index.d.ts

@@ -9,4 +9,5 @@ import comp8 from './comp8';
 import comp9 from './comp9';
 import comp10 from './comp10';
 import comp11 from './comp11';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };
+import comp12 from './comp12';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12 };

package/lib/mjs/components/radio/fixtures/index.js

@@ -9,4 +9,5 @@ import comp8 from './comp8';
 import comp9 from './comp9';
 import comp10 from './comp10';
 import comp11 from './comp11';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };
+import comp12 from './comp12';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12 };

package/lib/mjs/components/recaptcha/ReCaptcha.d.ts

@@ -1,6 +1,12 @@
 export default class ReCaptchaComponent extends Component {
     static get builderInfo(): {};
     static savedValueTypes(): never[];
+    static get conditionOperatorsSettings(): {
+        operators: string[];
+    };
+    static get serverConditionSettings(): {
+        operators: string[];
+    };
     render(): string;
     recaptchaResult: any;
     createInput(): void;

package/lib/mjs/components/recaptcha/ReCaptcha.js

@@ -17,6 +17,15 @@ export default class ReCaptchaComponent extends Component {
     static savedValueTypes() {
         return [];
     }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            operators: ['isEmpty', 'isNotEmpty'],
+        };
+    }
+    static get serverConditionSettings() {
+        return ReCaptchaComponent.conditionOperatorsSettings;
+    }
     render() {
         this.recaptchaResult = null;
         if (this.builderMode) {

package/lib/mjs/components/select/Select.d.ts

@@ -9,9 +9,47 @@ export default class SelectComponent extends ListComponent {
     };
     static get serverConditionSettings(): {
         valueComponent(classComp: any): any;
+        dataTypeOperators: {
+            number: string[];
+        };
+        dataTypeValueComponents: {
+            number: {
+                lessThan: () => {
+                    type: string;
+                };
+                greaterThan: () => {
+                    type: string;
+                };
+                lessThanOrEqual: () => {
+                    type: string;
+                };
+                greaterThanOrEqual: () => {
+                    type: string;
+                };
+            };
+        };
     };
     static get conditionOperatorsSettings(): {
         valueComponent(classComp: any): any;
+        dataTypeOperators: {
+            number: string[];
+        };
+        dataTypeValueComponents: {
+            number: {
+                lessThan: () => {
+                    type: string;
+                };
+                greaterThan: () => {
+                    type: string;
+                };
+                lessThanOrEqual: () => {
+                    type: string;
+                };
+                greaterThanOrEqual: () => {
+                    type: string;
+                };
+            };
+        };
     };
     static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;