@formio/js 5.0.0-dev.5647.4cf82e8 → 5.0.0-dev.5650.cd53187

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

@@ -197,6 +197,6 @@ exports.default = [
         tooltip: 'Opens up a modal to edit the value of this component.',
         key: 'modalEdit',
         input: true
-    },
+    }
 ];
 /* eslint-enable max-len */

package/lib/cjs/components/_classes/component/editForm/Component.edit.validation.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = __importDefault(require("./utils"));
-const Evaluator_1 = __importDefault(require("../../../../utils/Evaluator"));
+const Evaluator_1 = require("../../../../utils/Evaluator");
 /* eslint-disable quotes, max-len */
 exports.default = [
     {
@@ -74,7 +74,7 @@ exports.default = [
         key: 'custom-validation-js',
         weight: 300,
         customConditional() {
-            return !Evaluator_1.default.noeval || Evaluator_1.default.protectedEval;
+            return !Evaluator_1.Evaluator.noeval || Evaluator_1.Evaluator.protectedEval;
         },
         components: [
             utils_1.default.logicVariablesTable('<tr><th>input</th><td>The value that was input into this component</td></tr>'),

package/lib/cjs/components/_classes/component/editForm/utils.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const Evaluator_1 = __importDefault(require("../../../../utils/Evaluator"));
+const Evaluator_1 = require("../../../../utils/Evaluator");
 const EditFormUtils = {
     sortAndFilterComponents(components) {
         return lodash_1.default.filter(lodash_1.default.sortBy(components, 'weight'), (item) => !item.ignore);
@@ -72,7 +72,7 @@ const EditFormUtils = {
                 style: { 'margin-bottom': '10px' },
                 key: `${property}-js`,
                 customConditional() {
-                    return !Evaluator_1.default.noeval || Evaluator_1.default.protectedEval;
+                    return !Evaluator_1.Evaluator.noeval || Evaluator_1.Evaluator.protectedEval;
                 },
                 components: [
                     {

package/lib/cjs/components/_classes/field/Field.d.ts

@@ -1,5 +1,14 @@
 export default class Field extends Component {
-    render(element: any): any;
-    saveCaretPosition(element: any, index: any): void;
+    /**
+     * @param {object} element - The component to create.
+     * @returns {Field} - The created field.
+     */
+    render(element: object): Field;
+    /**
+    /* Saves current caret position to restore it after the component is redrawn
+     * @param {HTMLElement} element - The element to save the caret position for.
+     * @param {number} index - The index of the element.
+     */
+    saveCaretPosition(element: HTMLElement, index: number): void;
 }
 import Component from '../component/Component';

package/lib/cjs/components/_classes/field/Field.js

@@ -4,7 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("../component/Component"));
+/*
+ * Field class is a base class for all fields.
+ * @extends Component
+ */
 class Field extends Component_1.default {
+    /**
+     * @param {object} element - The component to create.
+     * @returns {Field} - The created field.
+     */
     render(element) {
         if (this.noField) {
             return super.render(element);
@@ -19,7 +27,11 @@ class Field extends Component_1.default {
             }));
         }
     }
-    // Saves current caret position to restore it after the component is redrawn
+    /**
+    /* Saves current caret position to restore it after the component is redrawn
+     * @param {HTMLElement} element - The element to save the caret position for.
+     * @param {number} index - The index of the element.
+     */
     saveCaretPosition(element, index) {
         var _a, _b;
         if (((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path) {

package/lib/cjs/components/_classes/input/Input.d.ts

@@ -30,13 +30,14 @@ export default class Input extends Multivalue {
     updateValue(value: any, flags: any, index: any): boolean;
     parseValue(value: any): any;
     formatValue(value: any): any;
+    attach(element: any): Promise<any>;
     getWidget(index: any): any;
     attachElement(element: any, index: any): Promise<void>;
     /**
      * Creates an instance of a widget for this component.
-     *
-     * @return {null}
+     * @param {number} index - The index of the widget.
+     * @returns {*} - The widget instance.
      */
-    createWidget(index: any): null;
+    createWidget(index: number): any;
 }
 import Multivalue from '../multivalue/Multivalue';

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

@@ -151,13 +151,15 @@ class Input extends Multivalue_1.default {
             else {
                 this.addClass(element, 'text-danger');
             }
-            this.setContent(element, this.t(`{{ remaining }} ${type} remaining.`, {
-                remaining: remaining
+            this.setContent(element, this.t(`typeRemaining`, {
+                remaining: remaining,
+                type: type
             }));
         }
         else {
-            this.setContent(element, this.t(`{{ count }} ${type}`, {
-                count: count
+            this.setContent(element, this.t(`typeCount`, {
+                count: count,
+                type: type
             }));
         }
     }
@@ -232,11 +234,33 @@ class Input extends Multivalue_1.default {
         this.addFocusBlurEvents(element);
         if (this.options.submitOnEnter) {
             this.addEventListener(element, 'keypress', (event) => {
+                var _a;
                 const key = event.keyCode || event.which;
                 if (key === 13) {
                     event.preventDefault();
                     event.stopPropagation();
-                    this.emit('submitButton');
+                    let submitButton = null;
+                    if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.everyComponent) {
+                        this.root.everyComponent((component) => {
+                            if ((component === null || component === void 0 ? void 0 : component.component.type) === 'button' &&
+                                (component === null || component === void 0 ? void 0 : 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);
+                    }
                 }
             });
         }
@@ -244,8 +268,8 @@ class Input extends Multivalue_1.default {
     }
     /**
      * Creates an instance of a widget for this component.
-     *
-     * @return {null}
+     * @param {number} index - The index of the widget.
+     * @returns {*} - The widget instance.
      */
     createWidget(index) {
         var _a, _b;

package/lib/cjs/components/_classes/list/ListComponent.d.ts

@@ -1,15 +1,19 @@
 export default class ListComponent extends Field {
     get isSelectURL(): boolean;
     get selectData(): any;
-    get shouldLoad(): any;
+    get dataReady(): any;
+    get shouldLoad(): boolean;
     getTemplateKeys(): void;
-    templateKeys: any[] | undefined;
+    templateKeys: string[] | undefined;
     get requestHeaders(): any;
     setItems(): void;
     updateCustomItems(): void;
     loadItems(): void;
     getOptionTemplate(data: any, value: any, index: any): any;
     itemTemplate(data: any, value: any, index: any): any;
+    set itemsLoaded(promise: any);
+    get itemsLoaded(): any;
+    _itemsLoaded: any;
     handleLoadingError(err: any): void;
     loading: boolean | undefined;
     networkError: boolean | undefined;

package/lib/cjs/components/_classes/list/ListComponent.form.d.ts

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

package/lib/cjs/components/_classes/list/ListComponent.form.js

@@ -5,6 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Components_1 = __importDefault(require("../../Components"));
 const ListComponent_edit_data_1 = __importDefault(require("./editForm/ListComponent.edit.data"));
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {

package/lib/cjs/components/_classes/list/ListComponent.js

@@ -26,6 +26,16 @@ class ListComponent extends Field_1.default {
         const selectData = lodash_1.default.get(this.root, 'submission.metadata.selectData', {});
         return lodash_1.default.get(selectData, this.path);
     }
+    get dataReady() {
+        // If the root submission has been set, and we are still not attached, then assume
+        // that our data is ready.
+        if (this.root &&
+            this.root.submissionSet &&
+            !this.attached) {
+            return Promise.resolve();
+        }
+        return this.itemsLoaded;
+    }
     get shouldLoad() {
         if (this.loadingError) {
             return false;
@@ -112,6 +122,12 @@ class ListComponent extends Field_1.default {
             return this.sanitize(JSON.stringify(data), this.shouldSanitizeValue);
         }
     }
+    get itemsLoaded() {
+        return this._itemsLoaded || Promise.resolve();
+    }
+    set itemsLoaded(promise) {
+        this._itemsLoaded = promise;
+    }
     handleLoadingError(err) {
         this.loading = false;
         if (err.networkError) {
@@ -174,6 +190,7 @@ class ListComponent extends Field_1.default {
                     return;
                 }
                 let { url } = this.component.data;
+                url = lodash_1.default.trim(url);
                 let method;
                 let body;
                 if (url.startsWith('/')) {

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

@@ -1,24 +1,62 @@
 export default class Multivalue extends Field {
-    get addAnother(): any;
-    useWrapper(): any;
-    render(): any;
+    /**
+     * 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;
+    /**
+     * @returns {Field} - The created field.
+     */
+    render(): Field;
     renderElement(): string;
-    renderRow(value: any, index: any): any;
-    attach(dom: any): Promise<any[]>;
+    /**
+     * Renders a single row for multi-value components.
+     * @param {any} value - The value associated with the row to render.
+     * @param {number} index - The index of the row in the multi-value list.
+     * @returns {any} Returns the HTML string representation of the row.
+     */
+    renderRow(value: any, index: number): any;
+    /**
+     * @param {HTMLElement} dom - The DOM element to which the component will attach.
+     * @returns {Promise} - Promise that resolves when all asynchronous tasks that have finished.
+     */
+    attach(dom: HTMLElement): Promise<any>;
     /**
      * Attach inputs to the element.
-     *
-     * @param element
-     * @param index
+     * @param {HTMLElement} element - The element to attach.
+     * @param {number} index - The index of the element to attach.
      */
-    attachElement(element: any, index: any): void;
-    onSelectMaskHandler(event: any): void;
-    getMaskPattern(maskName: any): any;
+    attachElement(element: HTMLElement, index: number): void;
+    /**
+     * Event handler for selecting a mask from a dropdown.
+     * @param {Event} event - Event triggered by changing the selected option in mask.
+     */
+    onSelectMaskHandler(event: Event): void;
+    /**
+     * Retrieves the mask pattern for a given mask name
+     * @param {string} maskName - The name of the mask to retrieve.
+     * @returns {any} The mask pattern associated with the given mask name.
+     */
+    getMaskPattern(maskName: string): any;
     multiMasks: {} | undefined;
-    attachMultiMask(index: any): boolean;
-    updateMask(input: any, mask: any): void;
+    /**
+     * Attaches a selectable mask to an input field based on its configuration.
+     * @param {number} index - The index of the select or input in component array.
+     * @returns {boolean} - Returns true if the mask was successfully attached
+     */
+    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 and remove previous mask if no mask.
+     */
+    updateMask(input: any, mask: string): void;
     /**
      * Adds a new empty value to the data array.
+     * @param {any} value -A value to be added to the data array.
      */
     addNewValue(value: any): void;
     /**

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

@@ -5,13 +5,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Field_1 = __importDefault(require("../field/Field"));
 const lodash_1 = __importDefault(require("lodash"));
+const core_1 = require("@formio/core");
 class Multivalue extends Field_1.default {
-    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) {
+        const underlyingValueShouldBeArray = core_1.Utils.getModelType(this.component) === 'array' || this.component.storeas === 'array' || Array.isArray(emptyValue);
+        if (this.component.multiple) {
+            if (Array.isArray(value)) {
+                if (underlyingValueShouldBeArray) {
+                    if (value.length === 0 || !Array.isArray(value[0])) {
+                        return [value];
+                    }
+                }
+                if (value.length === 0) {
+                    return [emptyValue];
+                }
+                return super.normalizeValue(value, flags);
+            }
+            else {
+                return super.normalizeValue(value == null ? [emptyValue] : [value], flags);
+            }
+        }
+        else {
+            if (Array.isArray(value) && !underlyingValueShouldBeArray) {
+                if (core_1.Utils.getModelType(this.component) === 'any') {
+                    return super.normalizeValue(value, flags);
+                }
+                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);
+            }
         }
-        return parent;
+    }
+    get dataValue() {
+        return this.normalizeValue(super.dataValue);
     }
     set dataValue(value) {
         super.dataValue = value;
@@ -31,31 +68,30 @@ class Multivalue extends Field_1.default {
     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 '';
     }
+    /**
+     * Renders a single row for multi-value components.
+     * @param {any} value - The value associated with the row to render.
+     * @param {number} index - The index of the row in the multi-value list.
+     * @returns {any} Returns the HTML string representation of the row.
+     */
     renderRow(value, index) {
         return this.renderTemplate('multiValueRow', {
             index,
@@ -63,6 +99,10 @@ class Multivalue extends Field_1.default {
             element: `${this.renderElement(value, index)}`,
         });
     }
+    /**
+     * @param {HTMLElement} dom - The DOM element to which the component will attach.
+     * @returns {Promise} - Promise that resolves when all asynchronous tasks that have finished.
+     */
     attach(dom) {
         const superAttach = super.attach(dom);
         this.loadRefs(dom, {
@@ -96,6 +136,9 @@ class Multivalue extends Field_1.default {
             return Promise.all(promises);
         });
     }
+    /**
+     * Remove all event handlers.
+     */
     detach() {
         if (this.refs.input && this.refs.input.length) {
             this.refs.input.forEach((input) => {
@@ -118,9 +161,8 @@ class Multivalue extends Field_1.default {
     }
     /**
      * Attach inputs to the element.
-     *
-     * @param element
-     * @param index
+     * @param {HTMLElement} element - The element to attach.
+     * @param {number} index - The index of the element to attach.
      */
     attachElement(element, index) {
         this.addEventListener(element, this.inputInfo.changeEvent, () => {
@@ -182,9 +224,18 @@ class Multivalue extends Field_1.default {
             }
         }
     }
+    /**
+     * Event handler for selecting a mask from a dropdown.
+     * @param {Event} event - Event triggered by changing the selected option in mask.
+     */
     onSelectMaskHandler(event) {
         this.updateMask(event.target.maskInput, this.getMaskPattern(event.target.value));
     }
+    /**
+     * Retrieves the mask pattern for a given mask name
+     * @param {string} maskName - The name of the mask to retrieve.
+     * @returns {any} The mask pattern associated with the given mask name.
+     */
     getMaskPattern(maskName) {
         if (!this.multiMasks) {
             this.multiMasks = {};
@@ -196,6 +247,11 @@ class Multivalue extends Field_1.default {
         this.multiMasks[maskName] = mask ? mask.mask : this.component.inputMasks[0].mask;
         return this.multiMasks[maskName];
     }
+    /**
+     * Attaches a selectable mask to an input field based on its configuration.
+     * @param {number} index - The index of the select or input in component array.
+     * @returns {boolean} - Returns true if the mask was successfully attached
+     */
     attachMultiMask(index) {
         if (!(this.isMultipleMasksField && this.component.inputMasks.length && this.refs.input.length)) {
             return false;
@@ -206,8 +262,19 @@ class Multivalue extends Field_1.default {
         this.setInputMask(maskSelect.maskInput, this.component.inputMasks[0].mask);
         return true;
     }
+    /**
+     * @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 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);
@@ -215,6 +282,7 @@ class Multivalue extends Field_1.default {
     }
     /**
      * Adds a new empty value to the data array.
+     * @param {any} value -A value to be added to the data array.
      */
     addNewValue(value) {
         if (value === undefined) {