@formio/js 5.0.0-dev.5613.77144cc → 5.0.0-dev.5614.b5c93f3

package/lib/mjs/components/html/HTML.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -1,6 +1,11 @@
 import Components from '../Components';
 import HTMLEditDisplay from './editForm/HTML.edit.display';
 import HTMLEditLogic from './editForm/HTML.edit.logic';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return Components.baseEditForm([
         {

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

@@ -10,35 +10,20 @@ export default class NumberComponent extends Input {
     static get serverConditionSettings(): {
         operators: any[];
         valueComponent(classComp: any): any;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static get conditionOperatorsSettings(): {
         operators: any[];
         valueComponent(classComp: any): any;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static savedValueTypes(schema: any): string[];
     constructor(...args: any[]);
     decimalSeparator: any;
     delimiter: any;
-    decimalLimit: any;
+    decimalLimit: number;
     numberMask: any;
     /**
      * Creates the number mask for normal numbers.
-     *
-     * @return {*}
+     * @returns {*} - The number mask.
      */
     createNumberMask(): any;
     isDecimalAllowed(): any;
@@ -49,5 +34,6 @@ export default class NumberComponent extends Input {
     parseValue(input: any): number;
     focus(): void;
     getMaskedValue(value: any): any;
+    getValueAsString(value: any, options: any): any;
 }
 import Input from '../_classes/input/Input';

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

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -2,6 +2,11 @@ import textEditForm from '../textfield/TextField.form';
 import NumberEditDisplay from './editForm/Number.edit.display';
 import NumberEditData from './editForm/Number.edit.data';
 import NumberEditValidation from './editForm/Number.edit.validation';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return textEditForm([
         {

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

@@ -46,7 +46,7 @@ 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) {
@@ -70,8 +70,7 @@ export default class NumberComponent extends Input {
     }
     /**
      * Creates the number mask for normal numbers.
-     *
-     * @return {*}
+     * @returns {*} - The number mask.
      */
     createNumberMask() {
         return createNumberMask({

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/index.d.ts

@@ -5,4 +5,5 @@ 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';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };

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

@@ -5,4 +5,5 @@ 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';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };

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

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -1,6 +1,11 @@
 import nestedComponentForm from '../_classes/nested/NestedComponent.form';
 import PanelEditDisplay from './editForm/Panel.edit.display';
 import PanelEditConditional from './editForm/Panel.edit.conditional';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return nestedComponentForm([
         {

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

@@ -1,6 +1,5 @@
 import NestedComponent from '../_classes/nested/NestedComponent';
 import { isChildOf } from '../../utils/utils';
-import FormComponent from '../form/Form';
 export default class PanelComponent extends NestedComponent {
     static schema(...extend) {
         return NestedComponent.schema({

package/lib/mjs/components/password/Password.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -2,6 +2,11 @@ import textEditForm from '../textfield/TextField.form';
 import PasswordEditDisplay from './editForm/Password.edit.display';
 import PasswordEditData from './editForm/Password.edit.data';
 import PasswordEditValidation from './editForm/Password.edit.validation';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return textEditForm([
         {

package/lib/mjs/components/phonenumber/PhoneNumber.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

package/lib/mjs/components/phonenumber/PhoneNumber.form.js

@@ -1,5 +1,10 @@
 import textEditForm from '../textfield/TextField.form';
 import PhoneNumberEditValidation from './editForm/PhoneNumber.edit.validation';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return textEditForm([
         {

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

@@ -17,13 +17,6 @@ export default class RadioComponent extends ListComponent {
                 custom(): any;
             };
         };
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static get serverConditionSettings(): {
         valueComponent(classComp: any): {
@@ -35,28 +28,11 @@ export default class RadioComponent extends ListComponent {
                 custom: string;
             };
         };
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static savedValueTypes(schema: any): any[];
     constructor(component: any, options: any, data: any);
     previousValue: any;
-    get inputInfo(): {
-        type: string;
-        component: any;
-        changeEvent: string;
-        attr: {
-            name: any;
-            type: any;
-            class: string;
-            lang: any;
-        };
-    };
+    get inputInfo(): any;
     get emptyValue(): string;
     get isRadio(): boolean;
     get optionSelectedClass(): string;
@@ -67,11 +43,12 @@ export default class RadioComponent extends ListComponent {
     itemsLoadedResolve: ((value: any) => void) | undefined;
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
-    render(): any;
+    render(): import("../_classes/field/Field").default;
+    attach(element: any): Promise<void>;
     detach(element: any): void;
     validateValueProperty(): boolean;
     validateValueAvailability(setting: any, value: any): boolean;
-    getValueAsString(value: any): any;
+    getValueAsString(value: any, options?: {}): any;
     setValueAt(index: any, value: any): void;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     loadItemsFromMetadata(): void;

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

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -2,6 +2,11 @@ import listComponentForm from '../_classes/list/ListComponent.form';
 import RadioEditData from './editForm/Radio.edit.data';
 import RadioEditDisplay from './editForm/Radio.edit.display';
 import RadioEditValidation from './editForm/Radio.edit.validation';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return listComponentForm([
         {

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

@@ -200,7 +200,8 @@ export default class RadioComponent extends ListComponent {
         if (this.viewOnly || !this.refs.input || !this.refs.input.length) {
             return this.dataValue;
         }
-        let value = this.dataValue;
+        // If the input type of the component is checkbox the value should be determined by the checkboxes checked property
+        let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;
         this.refs.input.forEach((input, index) => {
             if (input.checked) {
                 value = (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) ?
@@ -226,17 +227,19 @@ export default class RadioComponent extends ListComponent {
         }
         return false;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (_.isObject(value)) {
             value = JSON.stringify(value);
         }
         else if (!_.isString(value)) {
             value = _.toString(value);
         }
-        if (this.component.dataSrc !== 'values') {
+        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
+        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
             return value;
         }
-        const option = _.find(this.component.values, (v) => v.value === value);
+        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
+        const option = _.find(values, (v) => v.value === value);
         if (!value) {
             return _.get(option, 'label', '');
         }
@@ -320,7 +323,7 @@ export default class RadioComponent extends ListComponent {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (input.type === 'checkbox') ? value[input.value] : (input.value.toString() === value.toString());
+                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
@@ -357,10 +360,9 @@ export default class RadioComponent extends ListComponent {
         return changed;
     }
     /**
-     * Normalize values coming into updateValue.
-     *
-     * @param value
-     * @return {*}
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
      */
     normalizeValue(value) {
         const dataType = this.component.dataType || 'auto';

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

@@ -1,14 +1,7 @@
 export default class ReCaptchaComponent extends Component {
-    static get builderInfo(): {
-        title: string;
-        group: string;
-        icon: string;
-        documentation: string;
-        weight: number;
-        schema: any;
-    };
+    static get builderInfo(): {};
     static savedValueTypes(): never[];
-    render(): any;
+    render(): string;
     recaptchaResult: any;
     createInput(): void;
     recaptchaApiReady: any;

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

@@ -1,3 +1,6 @@
-export default function _default(): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -1,6 +1,11 @@
 import Components from '../Components';
 import ReCaptchaEditDisplay from './editForm/ReCaptcha.edit.display';
-export default function () {
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
@@ -22,5 +27,5 @@ export default function () {
             key: 'logic',
             ignore: true
         },
-    ]);
+    ], ...extend);
 }

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

@@ -12,14 +12,7 @@ export default class ReCaptchaComponent extends Component {
         }, ...extend);
     }
     static get builderInfo() {
-        return {
-            title: 'reCAPTCHA',
-            group: 'premium',
-            icon: 'refresh',
-            documentation: '/userguide/form-building/premium-components#recaptcha',
-            weight: 40,
-            schema: ReCaptchaComponent.schema()
-        };
+        return {};
     }
     static savedValueTypes() {
         return [];

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.d.ts

@@ -1,4 +1,21 @@
 declare const _default: ({
+    key: string;
+    weight: number;
+    type: string;
+    tag: string;
+    className: string;
+    content: string;
+    label?: undefined;
+    tooltip?: undefined;
+    values?: undefined;
+    validate?: undefined;
+    input?: undefined;
+    dataSrc?: undefined;
+    valueProperty?: undefined;
+    customConditional?: undefined;
+    data?: undefined;
+    ignore?: undefined;
+} | {
     key: string;
     label: string;
     tooltip: string;
@@ -7,7 +24,13 @@ declare const _default: ({
         label: string;
         value: string;
     }[];
+    validate: {
+        required: boolean;
+    };
     weight: number;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     input?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -27,16 +50,24 @@ declare const _default: ({
     data: {
         custom(context: any): any[];
     };
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     values?: undefined;
+    validate?: undefined;
     ignore?: undefined;
 } | {
     key: string;
     ignore: boolean;
+    weight?: undefined;
+    type?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    type?: undefined;
     values?: undefined;
-    weight?: undefined;
+    validate?: undefined;
     input?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -1,9 +1,17 @@
 import { getContextButtons } from '../../../utils/utils';
 export default [
+    {
+        key: 'recaptchaInfo',
+        weight: -10,
+        type: 'htmlelement',
+        tag: 'div',
+        className: 'alert alert-danger',
+        content: 'This component has been deprecated and will be removed. Use the CAPTCHA component instead.',
+    },
     {
         key: 'eventType',
         label: 'Type of event',
-        tooltip: 'Specify type of event that this reCAPTCHA would react to',
+        tooltip: 'Specify type of event that this CAPTCHA would react to. If Button Click is selected, then the CAPTCHA widget will be displayed and verification will occur after clicking on the button.',
         type: 'radio',
         values: [
             {
@@ -15,6 +23,9 @@ export default [
                 value: 'buttonClick'
             }
         ],
+        validate: {
+            required: true
+        },
         weight: 650
     },
     {
@@ -24,7 +35,7 @@ export default [
         key: 'buttonKey',
         dataSrc: 'custom',
         valueProperty: 'value',
-        tooltip: 'Specify key of button on this form that this reCAPTCHA should react to',
+        tooltip: 'Specify key of button on this form that this CAPTCHA should react to',
         weight: 660,
         customConditional(context) {
             return context.data.eventType === 'buttonClick';