@formio/js 5.0.0-dev.5718.37a9ce7 → 5.0.0-dev.5720.4409b3f

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;
@@ -1066,7 +1073,6 @@ export default class WebformBuilder extends Component {
                     _.pull(newComp.validators, 'required');
                     parentComponent.tabs[tabIndex].splice(index, 1, newComp);
                     newComp.checkValidity = () => true;
-                    newComp.checkComponentValidity = () => true;
                     newComp.build(defaultValueComponent.element);
                 }
             }
@@ -1232,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/_classes/nestedarray/NestedArrayComponent.d.ts

@@ -12,6 +12,8 @@ export default class NestedArrayComponent extends NestedDataComponent {
     hasAddButton(): any;
     getComponent(path: any, fn: any, originalPath: any): any;
     everyComponent(fn: any, rowIndex: any, options?: {}): void;
+    _getEmailTableHeader(options: any): string;
+    _getEmailTableBody(options: any): string;
     getComponents(rowIndex: any): any;
 }
 import NestedDataComponent from '../nesteddata/NestedDataComponent';

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -1,6 +1,6 @@
 'use strict';
 import _ from 'lodash';
-import { componentValueTypes, getStringFromComponentPath } from '../../../utils/utils';
+import { componentValueTypes, getStringFromComponentPath, isLayoutComponent } from '../../../utils/utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {
@@ -145,38 +145,60 @@ export default class NestedArrayComponent extends NestedDataComponent {
             }
         });
     }
+    _getEmailTableHeader(options) {
+        let row = '';
+        const getHeaderCell = (component) => {
+            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
+                return '';
+            }
+            const label = component.label || component.key;
+            return `<th style="padding: 5px 10px;">${label}</th>`;
+        };
+        const components = this.getComponents(0);
+        for (const component of components) {
+            if (component.isInputComponent) {
+                row += getHeaderCell(component);
+            }
+            else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
+                component.everyComponent((comp) => {
+                    row += getHeaderCell(comp);
+                }, options);
+            }
+        }
+        return `<thead><tr>${row}</tr></thead>`;
+    }
+    _getEmailTableBody(options) {
+        const getBodyCell = (component) => {
+            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
+                return '';
+            }
+            return `<td style="padding: 5px 10px;">${component.getView(component.dataValue, options)}</td>`;
+        };
+        const rows = [];
+        for (const { components } of this.iteratableRows) {
+            let row = '';
+            for (const component of components) {
+                if (component.isInputComponent) {
+                    row += getBodyCell(component);
+                }
+                else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
+                    component.everyComponent((comp) => {
+                        row += getBodyCell(comp);
+                    }, options);
+                }
+            }
+            rows.push(`<tr>${row}</tr>`);
+        }
+        return `<tbody>${rows.join('')}</tbody>`;
+    }
     getValueAsString(value, options) {
         if (options?.email) {
-            let result = (`
+            return `
         <table border="1" style="width:100%">
-          <thead>
-            <tr>
-      `);
-            this.component.components?.forEach((component) => {
-                const label = component.label || component.key;
-                result += `<th style="padding: 5px 10px;">${label}</th>`;
-            });
-            result += (`
-          </tr>
-        </thead>
-        <tbody>
-      `);
-            this.iteratableRows.forEach(({ components }) => {
-                result += '<tr>';
-                _.each(components, (component) => {
-                    result += '<td style="padding:5px 10px;">';
-                    if (component.isInputComponent && component.visible && !component.skipInEmail) {
-                        result += component.getView(component.dataValue, options);
-                    }
-                    result += '</td>';
-                });
-                result += '</tr>';
-            });
-            result += (`
-          </tbody>
+          ${this._getEmailTableHeader(options)}
+          ${this._getEmailTableBody(options)}
         </table>
-      `);
-            return result;
+      `;
         }
         if (!value || !value.length) {
             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/editgrid/fixtures/comp17.d.ts

@@ -0,0 +1,80 @@
+declare namespace _default {
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        tableView: boolean;
+        rowDrafts: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        components: {
+            collapsible: boolean;
+            key: string;
+            type: string;
+            label: string;
+            input: boolean;
+            tableView: boolean;
+            components: {
+                label: string;
+                columns: ({
+                    components: {
+                        label: string;
+                        optionsLabelPosition: string;
+                        inline: boolean;
+                        tableView: boolean;
+                        values: {
+                            label: string;
+                            value: string;
+                            shortcut: string;
+                        }[];
+                        key: string;
+                        type: string;
+                        input: boolean;
+                    }[];
+                    width: number;
+                    offset: number;
+                    push: number;
+                    pull: number;
+                    size: string;
+                    currentWidth: number;
+                } | {
+                    components: {
+                        label: string;
+                        applyMaskOn: string;
+                        autoExpand: boolean;
+                        tableView: boolean;
+                        key: string;
+                        conditional: {
+                            show: boolean;
+                            conjunction: string;
+                        };
+                        type: string;
+                        input: boolean;
+                    }[];
+                    width: number;
+                    offset: number;
+                    push: number;
+                    pull: number;
+                    size: string;
+                    currentWidth: number;
+                })[];
+                key: string;
+                type: string;
+                input: boolean;
+                tableView: boolean;
+            }[];
+        }[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        rowDrafts?: undefined;
+        components?: undefined;
+    })[];
+}
+export default _default;