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

package/lib/mjs/Webform.d.ts

@@ -334,7 +334,7 @@ declare class Webform extends NestedDataComponent {
      * Sets the submission value
      * @param {object|null|undefined} submission - The submission to set.
      * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
-     * @return {void}
+     * @returns {void}
      */
     onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
     /**

package/lib/mjs/Webform.js

@@ -8,6 +8,10 @@ import Components from "./components/Components";
 import NestedDataComponent from "./components/_classes/nesteddata/NestedDataComponent";
 import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from "./utils/utils";
 import { eachComponent } from "./utils/formUtils";
+// We need this here because dragula pulls in CustomEvent class that requires global to exist.
+if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
+    window.global = window;
+}
 // Initialize the available forms.
 Formio.forms = {};
 // Allow people to register components.
@@ -700,7 +704,7 @@ export default class Webform extends NestedDataComponent {
      * Sets the submission value
      * @param {object|null|undefined} submission - The submission to set.
      * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
-     * @return {void}
+     * @returns {void}
      */
     onSetSubmission(submission, flags = {}) {
         this.submissionSet = true;
@@ -826,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
@@ -886,7 +889,9 @@ export default class Webform extends NestedDataComponent {
         this.addComponents();
         this.on("submitButton", (options) => {
             this.submit(false, options).catch((e) => {
-                options.instance.loading = false;
+                if (options?.instance) {
+                    options.instance.loading = false;
+                }
                 return e !== false && e !== undefined && console.log(e);
             });
         }, true);
@@ -1128,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];
@@ -1242,10 +1247,14 @@ export default class Webform extends NestedDataComponent {
         }
         this.checkData(value.data, flags);
         const shouldValidate = !flags.noValidate ||
-            flags.fromIFrame ||
+            flags.fromIframe ||
             (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
         const errors = shouldValidate
-            ? this.validate(value.data, { ...flags, process: "change" })
+            ? this.validate(value.data, {
+                ...flags,
+                noValidate: false,
+                process: 'change'
+            })
             : [];
         value.isValid = errors.length === 0;
         this.loading = false;

package/lib/mjs/WebformBuilder.js

@@ -187,7 +187,8 @@ export default class WebformBuilder extends Component {
             params: {
                 type: 'resource',
                 limit: 1000000,
-                select: '_id,title,name,components'
+                select: '_id,title,name,components',
+                'tags__ne': 'noBuilderResource'
             }
         };
         if (this.options && this.options.resourceTag) {
@@ -892,7 +893,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 +1049,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 +1239,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/Wizard.js

@@ -13,7 +13,7 @@ export default class Wizard extends Webform {
      */
     constructor(elementOrOptions = undefined, _options = undefined) {
         let element, options;
-        if (elementOrOptions instanceof HTMLElement || options) {
+        if (elementOrOptions instanceof HTMLElement || _options) {
             element = elementOrOptions;
             options = _options || {};
         }

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -346,7 +346,7 @@ declare class Component extends Element {
     /**
      * Renders a modal preview template and returns the markup as a string
      * @param {object|null|undefined} ctx - The rendering context
-     * @return {string} - The modal preview markup
+     * @returns {string} - The modal preview markup
      */
     renderModalPreview(ctx: object | null | undefined): string;
     /**
@@ -372,7 +372,7 @@ declare class Component extends Element {
      * Creates the tooltip instance using tippy.js and returns it
      * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
      * @param {object|null|undefined} settings - tippy.js options
-     * @return {import('tippy.js').Tippy} - tippy.js instance
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
      */
     createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
     /**
@@ -830,6 +830,7 @@ declare class Component extends Element {
     quill: any;
     get shouldSanitizeValue(): boolean;
     addAce(element: any, settings: any, onChange: any): any;
+    getDragula(): Promise<any>;
     get tree(): any;
     /**
      * The empty value for this component.
@@ -1075,7 +1076,7 @@ declare class Component extends Element {
     elementInfo(): any;
     autofocus(): void;
     scrollIntoView(element?: any): void;
-    focus(index?: number): void;
+    focus(index: any): void;
     /**
      * Get `Formio` instance for working with files
      * @returns {import('@formio/core').Formio} - The Formio instance file service.

package/lib/mjs/components/_classes/component/Component.js

@@ -1016,7 +1016,7 @@ export default class Component extends Element {
     /**
      * Renders a modal preview template and returns the markup as a string
      * @param {object|null|undefined} ctx - The rendering context
-     * @return {string} - The modal preview markup
+     * @returns {string} - The modal preview markup
      */
     renderModalPreview(ctx) {
         return this.renderTemplate('modalPreview', ctx || {});
@@ -1084,7 +1084,7 @@ export default class Component extends Element {
      * Creates the tooltip instance using tippy.js and returns it
      * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
      * @param {object|null|undefined} settings - tippy.js options
-     * @return {import('tippy.js').Tippy} - tippy.js instance
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
      */
     createTooltip(tooltipEl, settings = {}) {
         const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
@@ -2351,6 +2351,13 @@ export default class Component extends Element {
             return editor;
         });
     }
+    async getDragula() {
+        return new Promise((resolve) => {
+            return Formio.requireLibrary('dragula', 'dragula', `${Formio.cdn.dragula}/dragula.js`, true, (ready) => {
+                return ready.then(resolve);
+            });
+        });
+    }
     get tree() {
         return this.component.tree || false;
     }
@@ -2981,7 +2988,7 @@ export default class Component extends Element {
                         this.parent.childErrors.push(...errors);
                     }
                     else {
-                        _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                        _.remove(this.parent.childErrors, (err) => (err?.component?.key || err?.context?.key) === this.component.key);
                     }
                 }
                 this.showValidationErrors(errors, data, row, flags);
@@ -2997,7 +3004,7 @@ export default class Component extends Element {
                     this.parent.childErrors.push(...errors);
                 }
                 else {
-                    _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                    _.remove(this.parent.childErrors, (err) => (err?.component?.key || err?.context?.key) === this.component.key);
                 }
             }
             return errors.length === 0;
@@ -3361,6 +3368,10 @@ export default class Component extends Element {
                             const disabled = this.shouldDisabled;
                             // Change states which won't be recalculated during redrawing
                             if (this.visible !== visible) {
+                                // If the logic is triggered by an event and the action sets the hidden state then the original
+                                // component definition must be changed so that the components hidden state does not get flipped back by
+                                // the fieldLogic function
+                                this.originalComponent.hidden = !visible;
                                 this.visible = visible;
                             }
                             if (this.disabled !== disabled) {
@@ -3414,10 +3425,11 @@ export default class Component extends Element {
         const { left, top } = element.getBoundingClientRect();
         window.scrollTo(left + window.scrollX, top + window.scrollY);
     }
-    focus(index = (this.refs.input.length - 1)) {
+    focus(index) {
         if ('beforeFocus' in this.parent) {
             this.parent.beforeFocus(this);
         }
+        index = index || this.refs.input?.length - 1;
         if (this.refs.input?.length) {
             const focusingInput = this.refs.input[index];
             if (this.component.widget?.type === 'calendar') {

package/lib/mjs/components/_classes/component/editForm/Component.edit.display.js

@@ -187,5 +187,13 @@ export default [
         key: 'tableView',
         input: true
     },
+    {
+        weight: 1600,
+        type: 'checkbox',
+        label: 'Modal Edit',
+        tooltip: 'Opens up a modal to edit the value of this component.',
+        key: 'modalEdit',
+        input: true
+    }
 ];
 /* eslint-enable max-len */

package/lib/mjs/components/_classes/component/fixtures/comp7.d.ts

@@ -0,0 +1,84 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        action: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        event: string;
+        input: boolean;
+        theme?: undefined;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        label: string;
+        action: string;
+        showValidations: boolean;
+        theme: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        event: string;
+        input: boolean;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        collapsible: boolean;
+        hidden: boolean;
+        key: string;
+        logic: {
+            name: string;
+            trigger: {
+                type: string;
+                event: string;
+            };
+            actions: {
+                name: string;
+                type: string;
+                property: {
+                    label: string;
+                    value: string;
+                    type: string;
+                };
+                state: boolean;
+            }[];
+        }[];
+        type: string;
+        label: string;
+        collapsed: boolean;
+        input: boolean;
+        tableView: boolean;
+        components: never[];
+        action?: undefined;
+        showValidations?: undefined;
+        event?: undefined;
+        theme?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        label: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        action?: undefined;
+        showValidations?: undefined;
+        event?: undefined;
+        theme?: undefined;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/_classes/component/fixtures/comp7.js

@@ -0,0 +1,84 @@
+export default {
+    components: [
+        {
+            "label": "Show",
+            "action": "event",
+            "showValidations": false,
+            "tableView": false,
+            "key": "show",
+            "type": "button",
+            "event": "show",
+            "input": true
+        },
+        {
+            "label": "Hide",
+            "action": "event",
+            "showValidations": false,
+            "theme": "danger",
+            "tableView": false,
+            "key": "hide",
+            "type": "button",
+            "event": "hide",
+            "input": true
+        },
+        {
+            "collapsible": true,
+            "hidden": true,
+            "key": "panel",
+            "logic": [
+                {
+                    "name": "ShowPanel",
+                    "trigger": {
+                        "type": "event",
+                        "event": "show"
+                    },
+                    "actions": [
+                        {
+                            "name": "Show",
+                            "type": "property",
+                            "property": {
+                                "label": "Hidden",
+                                "value": "hidden",
+                                "type": "boolean"
+                            },
+                            "state": false
+                        }
+                    ]
+                },
+                {
+                    "name": "HidePanel",
+                    "trigger": {
+                        "type": "event",
+                        "event": "hide"
+                    },
+                    "actions": [
+                        {
+                            "name": "Hide",
+                            "type": "property",
+                            "property": {
+                                "label": "Hidden",
+                                "value": "hidden",
+                                "type": "boolean"
+                            },
+                            "state": true
+                        }
+                    ]
+                }
+            ],
+            "type": "panel",
+            "label": "Panel",
+            "collapsed": false,
+            "input": false,
+            "tableView": false,
+            "components": []
+        },
+        {
+            "label": "Text Field",
+            "applyMaskOn": "change",
+            "tableView": true,
+            "key": "textField1",
+            "type": "textfield",
+            "input": true
+        }
+    ]
+};

package/lib/mjs/components/_classes/component/fixtures/index.d.ts

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

package/lib/mjs/components/_classes/component/fixtures/index.js

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

package/lib/mjs/components/_classes/input/Input.js

@@ -233,7 +233,28 @@ export default class Input extends Multivalue {
                 if (key === 13) {
                     event.preventDefault();
                     event.stopPropagation();
-                    this.emit('submitButton');
+                    let submitButton = null;
+                    if (this.root?.everyComponent) {
+                        this.root.everyComponent((component) => {
+                            if (component?.component.type === 'button' &&
+                                component?.component.action === 'submit') {
+                                submitButton = component;
+                                return false;
+                            }
+                        });
+                    }
+                    const options = {};
+                    if (submitButton) {
+                        options.instance = submitButton;
+                        options.component = submitButton.component;
+                        options.noValidate = this.component.state === 'draft';
+                        options.state = this.component.state || 'submitted';
+                        submitButton.loading = true;
+                        this.emit('submitButton', options);
+                    }
+                    else {
+                        this.emit('submitButton', options);
+                    }
                 }
             });
         }

package/lib/mjs/components/_classes/multivalue/Multivalue.d.ts

@@ -1,6 +1,13 @@
 export default class Multivalue extends Field {
+    /**
+     * Normalize values coming into updateValue.
+     * @param {*} value - The value to normalize before setting.
+     * @param {Object} flags - Flags to use when normalizing the value.
+     * @param {*} emptyValue - The empty value for the field.
+     * @returns {*} - The normalized value.
+     */
+    normalizeValue(value: any, flags?: Object, emptyValue?: any): any;
     get addAnother(): string;
-    useWrapper(): any;
     /**
      * @returns {Field} - The created field.
      */
@@ -44,7 +51,7 @@ export default class Multivalue extends Field {
     attachMultiMask(index: number): boolean;
     /**
      * @param {any} input - The input element on which the mask is to be applied.
-     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.
      */
     updateMask(input: any, mask: string): void;
     /**

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -1,12 +1,42 @@
 import Field from '../field/Field';
 import _ from 'lodash';
 export default class Multivalue extends Field {
-    get dataValue() {
-        const parent = super.dataValue;
-        if (!parent && this.component.multiple) {
-            return [];
+    /**
+     * Normalize values coming into updateValue.
+     * @param {*} value - The value to normalize before setting.
+     * @param {Object} flags - Flags to use when normalizing the value.
+     * @param {*} emptyValue - The empty value for the field.
+     * @returns {*} - The normalized value.
+     */
+    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {
+        if (this.component.multiple) {
+            if (Array.isArray(value)) {
+                if (value.length === 0) {
+                    return [emptyValue];
+                }
+                if (this.component.storeas === 'array') {
+                    return super.normalizeValue([value], flags);
+                }
+                return super.normalizeValue(value, flags);
+            }
+            else {
+                return super.normalizeValue(value == null ? [emptyValue] : [value], flags);
+            }
         }
-        return parent;
+        else {
+            if (Array.isArray(value) && !Array.isArray(emptyValue)) {
+                if (this.component.storeas === 'string') {
+                    return super.normalizeValue(value.join(this.delimiter || ''), flags);
+                }
+                return super.normalizeValue(value[0] || emptyValue, flags);
+            }
+            else {
+                return super.normalizeValue(value, flags);
+            }
+        }
+    }
+    get dataValue() {
+        return this.normalizeValue(super.dataValue);
     }
     set dataValue(value) {
         super.dataValue = value;
@@ -26,30 +56,20 @@ export default class Multivalue extends Field {
     get addAnother() {
         return this.t(this.component.addAnother || 'Add Another');
     }
-    useWrapper() {
-        return this.component.hasOwnProperty('multiple') && this.component.multiple;
-    }
     /**
      * @returns {Field} - The created field.
      */
     render() {
-        // If single value field.
-        if (!this.useWrapper()) {
-            return super.render(`<div ${this._referenceAttributeName}="element">
-          ${this.renderElement(this.component.type !== 'hidden' ? this.dataValue : '')}
-        </div>`);
-        }
-        // Make sure dataValue is in the correct array format.
-        let dataValue = this.dataValue;
-        if (!Array.isArray(dataValue)) {
-            dataValue = dataValue ? [dataValue] : [];
-        }
-        // If multiple value field.
-        return super.render(this.renderTemplate('multiValueTable', {
-            rows: dataValue.map(this.renderRow.bind(this)).join(''),
-            disabled: this.disabled,
-            addAnother: this.addAnother,
-        }));
+        let dataValue = this.normalizeValue(this.dataValue);
+        return this.component.hasOwnProperty('multiple') && this.component.multiple
+            ? super.render(this.renderTemplate('multiValueTable', {
+                rows: dataValue.map(this.renderRow.bind(this)).join(''),
+                disabled: this.disabled,
+                addAnother: this.addAnother,
+            }))
+            : super.render(`<div ${this._referenceAttributeName}="element">
+            ${this.renderElement(this.component.type !== 'hidden' ? dataValue : '')}
+          </div>`);
     }
     renderElement() {
         return '';
@@ -232,10 +252,17 @@ export default class Multivalue extends Field {
     }
     /**
      * @param {any} input - The input element on which the mask is to be applied.
-     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.
      */
     updateMask(input, mask) {
         if (!mask) {
+            if (input.mask) {
+                input.mask.destroy();
+            }
+            if (!this.component.placeholder) {
+                input.removeAttribute('placeholder');
+            }
+            input.value = '';
             return;
         }
         this.setInputMask(input, mask, !this.component.placeholder);

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.getComponent(component.path);
+        }
         if (!instance) {
             return;
         }

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts

@@ -12,6 +12,9 @@ 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;
+    removeSubmissionMetadataRow(index: any): void;
 }
 import NestedDataComponent from '../nesteddata/NestedDataComponent';