@formio/js 5.0.0-dev.5719.d2d4a61 → 5.0.0-dev.5722.6a7e4ac

package/lib/cjs/Webform.js

@@ -1130,7 +1130,7 @@ class Webform extends NestedDataComponent_1.default {
         });
         const displayedErrors = [];
         if (errors.length) {
-            errors = lodash_1.default.uniqBy(errors, (error) => error.message);
+            errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });
             const createListItem = (message, index) => {
                 var _a, _b, _c;
                 const err = errors[index];

package/lib/cjs/WebformBuilder.js

@@ -1236,6 +1236,7 @@ class WebformBuilder extends Component_1.default {
         const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="previewButton"]`);
         previewButtons.forEach((previewButton) => {
             this.editForm.addEventListener(previewButton, 'click', (event) => {
+                var _a;
                 event.preventDefault();
                 this.showPreview = !this.showPreview;
                 this.editForm.detach();
@@ -1247,6 +1248,7 @@ class WebformBuilder extends Component_1.default {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
+                this.updateComponent((_a = this.editForm.submission.data) !== null && _a !== void 0 ? _a : component);
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });

package/lib/cjs/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/cjs/components/_classes/nested/NestedComponent.js

@@ -681,8 +681,11 @@ class NestedComponent extends Field_1.default {
     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/cjs/components/_classes/nestedarray/NestedArrayComponent.d.ts

@@ -12,8 +12,6 @@ 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/cjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -149,60 +149,39 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
             }
         });
     }
-    _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 ((0, utils_1.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 ((0, utils_1.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) {
+        var _a;
         if (options === null || options === void 0 ? void 0 : options.email) {
-            return `
+            let result = (`
         <table border="1" style="width:100%">
-          ${this._getEmailTableHeader(options)}
-          ${this._getEmailTableBody(options)}
+          <thead>
+            <tr>
+      `);
+            (_a = this.component.components) === null || _a === void 0 ? void 0 : _a.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>';
+                lodash_1.default.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>
         </table>
-      `;
+      `);
+            return result;
         }
         if (!value || !value.length) {
             return '';

package/lib/cjs/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/cjs/components/editgrid/fixtures/index.d.ts

@@ -14,9 +14,8 @@ import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
 import comp16 from './comp16';
-import comp17 from './comp17';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
 import compTestEvents from './comp-test-events';
-export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, comp17, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

package/lib/cjs/components/editgrid/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.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp17 = exports.comp16 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp16 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = 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"));
@@ -36,8 +36,6 @@ const comp15_1 = __importDefault(require("./comp15"));
 exports.comp15 = comp15_1.default;
 const comp16_1 = __importDefault(require("./comp16"));
 exports.comp16 = comp16_1.default;
-const comp17_1 = __importDefault(require("./comp17"));
-exports.comp17 = comp17_1.default;
 const comp_with_conditions_and_openWhenEmpty_1 = __importDefault(require("./comp-with-conditions-and-openWhenEmpty"));
 exports.withOpenWhenEmptyAndConditions = comp_with_conditions_and_openWhenEmpty_1.default;
 const comp_openWhenEmpty_1 = __importDefault(require("./comp-openWhenEmpty"));

package/lib/cjs/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/cjs/components/number/Number.js

@@ -91,6 +91,11 @@ class NumberComponent extends Input_1.default {
     }
     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;
         }
@@ -102,6 +107,12 @@ class NumberComponent extends Input_1.default {
     isDecimalAllowed() {
         return lodash_1.default.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, '.');

package/lib/cjs/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/cjs/components/number/fixtures/comp10.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/cjs/components/number/fixtures/index.d.ts

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

package/lib/cjs/components/number/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.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = 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"));
@@ -22,3 +22,5 @@ const comp8_1 = __importDefault(require("./comp8"));
 exports.comp8 = comp8_1.default;
 const comp9_1 = __importDefault(require("./comp9"));
 exports.comp9 = comp9_1.default;
+const comp10_1 = __importDefault(require("./comp10"));
+exports.comp10 = comp10_1.default;

package/lib/cjs/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/cjs/components/panel/Panel.js

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

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;