@formio/js 5.0.0-dev.5719.d2d4a61 → 5.0.0-dev.5720.4409b3f

package/lib/cjs/components/select/fixtures/index.d.ts

@@ -21,5 +21,6 @@ import comp21 from './comp21';
 import comp22 from './comp22';
 import comp23 from './comp23';
 import comp24 from './comp24';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23, comp24 };
+import comp25 from './comp25';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23, comp24, comp25 };
 export { multiSelect, multiSelectOptions } from "./comp3";

package/lib/cjs/components/select/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp24 = exports.comp23 = exports.comp22 = exports.comp21 = exports.comp20 = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
+exports.comp25 = exports.comp24 = exports.comp23 = exports.comp22 = exports.comp21 = exports.comp20 = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -53,3 +53,5 @@ const comp23_1 = __importDefault(require("./comp23"));
 exports.comp23 = comp23_1.default;
 const comp24_1 = __importDefault(require("./comp24"));
 exports.comp24 = comp24_1.default;
+const comp25_1 = __importDefault(require("./comp25"));
+exports.comp25 = comp25_1.default;

package/lib/cjs/components/time/Time.d.ts

@@ -1,12 +1,12 @@
 export default class TimeComponent extends TextFieldComponent {
-    rawData: string | never[];
+    rawData: any;
     get dataFormat(): any;
     get skipMaskValidation(): boolean;
     isNotCompleteInput(value: any): any;
     removeValue(index: any): void;
     resetRawData(index: any): void;
     setRawValue(value: any, index: any): void;
-    getRawValue(index: any): string | never[];
+    getRawValue(index: any): any;
     getValueAt(index: any): any;
     setValueAt(index: any, value: any): void;
     getStringAsValue(view: any): any;

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

@@ -30,7 +30,8 @@ class TimeComponent extends TextField_1.default {
         this.component.inputType = isEdgeBrowser && edgeVersion <= 18
             ? 'text'
             : (this.component.inputType || 'time');
-        this.rawData = this.component.multiple ? [] : this.emptyValue;
+        // If default value is given then the raw data needs to be set
+        this.rawData = this.component.multiple ? [] : this.getValueAsString(this.defaultValue) || this.emptyValue;
     }
     static get builderInfo() {
         return {
@@ -61,7 +62,7 @@ class TimeComponent extends TextField_1.default {
         return value;
     }
     get validationValue() {
-        if (Array.isArray(this.rawData) && !this.rawData.length || !this.rawData) {
+        if ((Array.isArray(this.rawData) && !this.rawData.length) || !this.rawData) {
             return this.dataValue;
         }
         return this.rawData;

package/lib/cjs/components/time/fixtures/comp4.d.ts

@@ -0,0 +1,166 @@
+declare namespace _default {
+    let type: string;
+    let display: string;
+    let components: {
+        title: string;
+        breadcrumbClickable: boolean;
+        buttonSettings: {
+            previous: boolean;
+            cancel: boolean;
+            next: boolean;
+        };
+        navigateOnEnter: boolean;
+        saveOnEnter: boolean;
+        scrollToTop: boolean;
+        collapsible: boolean;
+        key: string;
+        type: string;
+        label: string;
+        components: {
+            label: string;
+            disabled: boolean;
+            alwaysEnabled: boolean;
+            tableView: boolean;
+            defaultValue: string;
+            key: string;
+            type: string;
+            input: boolean;
+            inputMask: string;
+            hideOnChildrenHidden: boolean;
+            id: string;
+            placeholder: string;
+            prefix: string;
+            customClass: string;
+            suffix: string;
+            multiple: boolean;
+            protected: boolean;
+            unique: boolean;
+            persistent: boolean;
+            hidden: boolean;
+            clearOnHide: boolean;
+            refreshOn: string;
+            redrawOn: string;
+            modalEdit: boolean;
+            dataGridLabel: boolean;
+            labelPosition: string;
+            description: string;
+            errorLabel: string;
+            tooltip: string;
+            hideLabel: boolean;
+            tabindex: string;
+            autofocus: boolean;
+            dbIndex: boolean;
+            customDefaultValue: string;
+            calculateValue: string;
+            calculateServer: boolean;
+            widget: {
+                type: string;
+            };
+            attributes: {};
+            validateOn: string;
+            validate: {
+                required: boolean;
+                custom: string;
+                customPrivate: boolean;
+                strictDateValidation: boolean;
+                multiple: boolean;
+                unique: boolean;
+                minLength: string;
+                maxLength: string;
+                pattern: string;
+            };
+            conditional: {
+                show: null;
+                when: null;
+                eq: string;
+            };
+            overlay: {
+                style: string;
+                left: string;
+                top: string;
+                width: string;
+                height: string;
+            };
+            allowCalculateOverride: boolean;
+            encrypted: boolean;
+            showCharCount: boolean;
+            showWordCount: boolean;
+            properties: {};
+            allowMultipleMasks: boolean;
+            addons: never[];
+            mask: boolean;
+            inputType: string;
+            inputFormat: string;
+            displayMask: string;
+            spellcheck: boolean;
+            truncateMultipleSpaces: boolean;
+            format: string;
+            dataFormat: string;
+        }[];
+        input: boolean;
+        tableView: boolean;
+        id: string;
+        placeholder: string;
+        prefix: string;
+        customClass: string;
+        suffix: string;
+        multiple: boolean;
+        defaultValue: null;
+        protected: boolean;
+        unique: boolean;
+        persistent: boolean;
+        hidden: boolean;
+        clearOnHide: boolean;
+        refreshOn: string;
+        redrawOn: string;
+        modalEdit: boolean;
+        dataGridLabel: boolean;
+        labelPosition: string;
+        description: string;
+        errorLabel: string;
+        tooltip: string;
+        hideLabel: boolean;
+        tabindex: string;
+        disabled: boolean;
+        autofocus: boolean;
+        dbIndex: boolean;
+        customDefaultValue: string;
+        calculateValue: string;
+        calculateServer: boolean;
+        widget: null;
+        attributes: {};
+        validateOn: string;
+        validate: {
+            required: boolean;
+            custom: string;
+            customPrivate: boolean;
+            strictDateValidation: boolean;
+            multiple: boolean;
+            unique: boolean;
+        };
+        conditional: {
+            show: null;
+            when: null;
+            eq: string;
+        };
+        overlay: {
+            style: string;
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+        };
+        allowCalculateOverride: boolean;
+        encrypted: boolean;
+        showCharCount: boolean;
+        showWordCount: boolean;
+        properties: {};
+        allowMultipleMasks: boolean;
+        addons: never[];
+        tree: boolean;
+        lazyLoad: boolean;
+        theme: string;
+        breadcrumb: string;
+    }[];
+}
+export default _default;

package/lib/cjs/components/time/fixtures/comp4.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "type": "form",
+    "display": "wizard",
+    "components": [
+        {
+            "title": "Page 1",
+            "breadcrumbClickable": true,
+            "buttonSettings": {
+                "previous": true,
+                "cancel": true,
+                "next": true
+            },
+            "navigateOnEnter": false,
+            "saveOnEnter": false,
+            "scrollToTop": false,
+            "collapsible": false,
+            "key": "page1",
+            "type": "panel",
+            "label": "Page 1",
+            "components": [
+                {
+                    "label": "Time",
+                    "disabled": true,
+                    "alwaysEnabled": false,
+                    "tableView": true,
+                    "defaultValue": "03:03 PM",
+                    "key": "time1",
+                    "type": "time",
+                    "input": true,
+                    "inputMask": "99:99",
+                    "hideOnChildrenHidden": false,
+                    "id": "efw9yyq",
+                    "placeholder": "",
+                    "prefix": "",
+                    "customClass": "",
+                    "suffix": "",
+                    "multiple": false,
+                    "protected": false,
+                    "unique": false,
+                    "persistent": true,
+                    "hidden": false,
+                    "clearOnHide": true,
+                    "refreshOn": "",
+                    "redrawOn": "",
+                    "modalEdit": false,
+                    "dataGridLabel": false,
+                    "labelPosition": "top",
+                    "description": "",
+                    "errorLabel": "",
+                    "tooltip": "",
+                    "hideLabel": false,
+                    "tabindex": "",
+                    "autofocus": false,
+                    "dbIndex": false,
+                    "customDefaultValue": "",
+                    "calculateValue": "",
+                    "calculateServer": false,
+                    "widget": {
+                        "type": "input"
+                    },
+                    "attributes": {},
+                    "validateOn": "change",
+                    "validate": {
+                        "required": false,
+                        "custom": "",
+                        "customPrivate": false,
+                        "strictDateValidation": false,
+                        "multiple": false,
+                        "unique": false,
+                        "minLength": "",
+                        "maxLength": "",
+                        "pattern": ""
+                    },
+                    "conditional": {
+                        "show": null,
+                        "when": null,
+                        "eq": ""
+                    },
+                    "overlay": {
+                        "style": "",
+                        "left": "",
+                        "top": "",
+                        "width": "",
+                        "height": ""
+                    },
+                    "allowCalculateOverride": false,
+                    "encrypted": false,
+                    "showCharCount": false,
+                    "showWordCount": false,
+                    "properties": {},
+                    "allowMultipleMasks": false,
+                    "addons": [],
+                    "mask": false,
+                    "inputType": "time",
+                    "inputFormat": "plain",
+                    "displayMask": "",
+                    "spellcheck": true,
+                    "truncateMultipleSpaces": false,
+                    "format": "HH:mm",
+                    "dataFormat": "HH:mm:ss"
+                }
+            ],
+            "input": false,
+            "tableView": false,
+            "id": "e7vej1d",
+            "placeholder": "",
+            "prefix": "",
+            "customClass": "",
+            "suffix": "",
+            "multiple": false,
+            "defaultValue": null,
+            "protected": false,
+            "unique": false,
+            "persistent": false,
+            "hidden": false,
+            "clearOnHide": false,
+            "refreshOn": "",
+            "redrawOn": "",
+            "modalEdit": false,
+            "dataGridLabel": false,
+            "labelPosition": "top",
+            "description": "",
+            "errorLabel": "",
+            "tooltip": "",
+            "hideLabel": false,
+            "tabindex": "",
+            "disabled": false,
+            "autofocus": false,
+            "dbIndex": false,
+            "customDefaultValue": "",
+            "calculateValue": "",
+            "calculateServer": false,
+            "widget": null,
+            "attributes": {},
+            "validateOn": "change",
+            "validate": {
+                "required": false,
+                "custom": "",
+                "customPrivate": false,
+                "strictDateValidation": false,
+                "multiple": false,
+                "unique": false
+            },
+            "conditional": {
+                "show": null,
+                "when": null,
+                "eq": ""
+            },
+            "overlay": {
+                "style": "",
+                "left": "",
+                "top": "",
+                "width": "",
+                "height": ""
+            },
+            "allowCalculateOverride": false,
+            "encrypted": false,
+            "showCharCount": false,
+            "showWordCount": false,
+            "properties": {},
+            "allowMultipleMasks": false,
+            "addons": [],
+            "tree": false,
+            "lazyLoad": false,
+            "theme": "default",
+            "breadcrumb": "default"
+        }
+    ],
+};

package/lib/cjs/components/time/fixtures/index.d.ts

@@ -1,6 +1,7 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
+import comp4 from './comp4';
 import timeForm from './timeForm';
 import timeForm2 from './timeForm2';
-export { comp1, comp2, comp3, timeForm, timeForm2 };
+export { comp1, comp2, comp3, comp4, timeForm, timeForm2 };

package/lib/cjs/components/time/fixtures/index.js

@@ -3,13 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timeForm2 = exports.timeForm = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.timeForm2 = exports.timeForm = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
 exports.comp2 = comp2_1.default;
 const comp3_1 = __importDefault(require("./comp3"));
 exports.comp3 = comp3_1.default;
+const comp4_1 = __importDefault(require("./comp4"));
+exports.comp4 = comp4_1.default;
 const timeForm_1 = __importDefault(require("./timeForm"));
 exports.timeForm = timeForm_1.default;
 const timeForm2_1 = __importDefault(require("./timeForm2"));

package/lib/mjs/Form.d.ts

@@ -398,10 +398,10 @@ export default class Form extends Element {
     getFormInitOptions(url: string, form: import('@formio/core').Form): object;
     /**
      * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
-    setForm(formParam: import('@formio/core').Form): Promise<Webform | Wizard | PDF>;
+    setForm(formParam: import('@formio/core').Form | string): Promise<Webform | Wizard | PDF>;
     _form: any;
     getSubmission(formio: any, opts: any): any;
     /**

package/lib/mjs/Form.js

@@ -264,7 +264,7 @@ export default class Form extends Element {
     }
     /**
      * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
     setForm(formParam) {
@@ -291,8 +291,14 @@ export default class Form extends Element {
                     }
                     this.loading = false;
                     this.instance = this.instance || this.create(form.display);
-                    const options = this.getFormInitOptions(formParam, form);
-                    this.instance.setUrl(formParam, options);
+                    // If we're in builder mode, instance.setUrl is not a function, so just manually set the URL.
+                    if (this.instance.setUrl) {
+                        const options = this.getFormInitOptions(formParam, form);
+                        this.instance.setUrl(formParam, options);
+                    }
+                    else {
+                        this.instance.url = formParam;
+                    }
                     this.instance.nosubmit = false;
                     this._form = this.instance.form = form;
                     if (submission) {

package/lib/mjs/Webform.js

@@ -830,7 +830,6 @@ export default class Webform extends NestedDataComponent {
         if (!submission || !submission.data) {
             submission = {
                 data: {},
-                metadata: submission.metadata,
             };
         }
         // Metadata needs to be available before setValue
@@ -1134,7 +1133,7 @@ export default class Webform extends NestedDataComponent {
         });
         const displayedErrors = [];
         if (errors.length) {
-            errors = _.uniqBy(errors, (error) => error.message);
+            errors = _.uniqBy(errors, (error) => [error.message, error.component?.id, error.context?.path].join());
             const createListItem = (message, index) => {
                 const err = errors[index];
                 const messageFromIndex = !_.isUndefined(index) && errors && errors[index];

package/lib/mjs/WebformBuilder.js

@@ -892,7 +892,11 @@ export default class WebformBuilder extends Component {
         if (form && form.properties) {
             this.options.properties = form.properties;
         }
-        this.keyboardActionsEnabled = _.get(this.options, 'keyboardBuilder', false) || this.options.properties?.keyboardBuilder;
+        let keyboardActionsEnabled = _.get(this.options, 'keyboardBuilder', false) || this.options.properties?.keyboardBuilder;
+        if (typeof keyboardActionsEnabled === 'string') {
+            keyboardActionsEnabled = keyboardActionsEnabled === 'true';
+        }
+        this.keyboardActionsEnabled = keyboardActionsEnabled;
         const isShowSubmitButton = !this.options.noDefaultSubmitButton
             && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));
         // Ensure there is at least a submit button.
@@ -1044,7 +1048,10 @@ export default class WebformBuilder extends Component {
                     'calculateValue',
                     'conditional',
                     'customConditional',
-                    'id'
+                    'id',
+                    'fields.day.required',
+                    'fields.month.required',
+                    'fields.year.required',
                 ]));
                 const parentComponent = defaultValueComponent.parent;
                 let tabIndex = -1;
@@ -1231,6 +1238,7 @@ export default class WebformBuilder extends Component {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
+                this.updateComponent(this.editForm.submission.data ?? component);
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -211,11 +211,12 @@ export default class NestedComponent extends Field {
     calculateValue(data: any, flags: any, row: any): any;
     isLastPage(): boolean;
     isValid(data: any, dirty: any): any;
-    validationProcessor({ scope, data, row, instance }: {
+    validationProcessor({ scope, data, row, instance, component }: {
         scope: any;
         data: any;
         row: any;
         instance: any;
+        component: any;
     }, flags: any): void;
     /**
      * Perform a validation on all child components of this nested component.

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -493,6 +493,7 @@ export default class NestedComponent extends Field {
             header: 'single',
             collapsed: this.collapsed,
             [this.nestedKey]: 'single',
+            messageContainer: 'single-scope',
         });
         let childPromise = Promise.resolve();
         if (this.refs[this.nestedKey]) {
@@ -677,8 +678,11 @@ export default class NestedComponent extends Field {
     isValid(data, dirty) {
         return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));
     }
-    validationProcessor({ scope, data, row, instance }, flags) {
+    validationProcessor({ scope, data, row, instance, component }, flags) {
         const { dirty } = flags;
+        if (this.root.hasExtraPages && this.page !== this.root.page) {
+            instance = this.getComponentById(component.id);
+        }
         if (!instance) {
             return;
         }

package/lib/mjs/components/currency/Currency.d.ts

@@ -2,6 +2,7 @@ export default class CurrencyComponent extends NumberComponent {
     constructor(component: any, options: any, data: any);
     currencyPrefix: any;
     currencySuffix: any;
+    parseNumber(value: any): number;
     parseValue(value: any): string | null;
     addZerosAndFormatValue(value: any): any;
     stripPrefixSuffix(value: any): any;

package/lib/mjs/components/datagrid/DataGrid.d.ts

@@ -59,7 +59,6 @@ export default class DataGridComponent extends NestedArrayComponent {
     getRows(): {}[];
     getColumns(): any[];
     hasHeader(): any;
-    loadRefs(element: any, refs: any): void;
     dragula: any;
     getComponentsContainer(): any;
     /**

package/lib/mjs/components/datagrid/DataGrid.js

@@ -260,13 +260,6 @@ export default class DataGridComponent extends NestedArrayComponent {
             return hasHeader || ((col.label || col.title) && !col.hideLabel);
         }, false);
     }
-    loadRefs(element, refs) {
-        super.loadRefs(element, refs);
-        if (refs['messageContainer'] === 'single') {
-            const container = _.last(element.querySelectorAll(`[${this._referenceAttributeName}=messageContainer]`));
-            this.refs['messageContainer'] = container || this.refs['messageContainer'];
-        }
-    }
     attach(element) {
         this.loadRefs(element, {
             [`${this.datagridKey}-row`]: 'multiple',
@@ -275,7 +268,6 @@ export default class DataGridComponent extends NestedArrayComponent {
             [`${this.datagridKey}-removeRow`]: 'multiple',
             [`${this.datagridKey}-group-header`]: 'multiple',
             [this.datagridKey]: 'multiple',
-            'messageContainer': 'single'
         });
         if (this.allowReorder) {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {

package/lib/mjs/components/datamap/DataMap.js

@@ -236,7 +236,7 @@ export default class DataMapComponent extends DataGridComponent {
             delete dataValue[key];
             const comp = components[this.valueKey];
             comp.component.key = newKey;
-            comp.path = Components.calculateComponentPath(comp);
+            comp.path = Components.getComponentPath(comp);
             key = newKey;
         });
         const valueComponent = _.clone(this.component.valueComponent);

package/lib/mjs/components/editgrid/EditGrid.js

@@ -484,11 +484,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         else {
             this.removeClass(this.refs.component, `formio-component-${this.component.type}-row-open`);
         }
-        const superAttach = super.attach(element);
-        this.loadRefs(element, {
-            messageContainer: 'single-scope',
-        });
-        return superAttach;
+        return super.attach(element);
     }
     flattenRowDataValue(dataValue) {
         const flattened = {};

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

@@ -27,7 +27,13 @@ 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;

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

@@ -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, '.');