@formio/js 5.0.2 → 5.1.0-dev.5522.066969f

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

@@ -1,5 +1,5 @@
 import EditFormUtils from './utils';
-import { getContextComponents } from '../../../../utils/utils';
+import { getContextComponents } from '../../../../utils';
 /* eslint-disable quotes, max-len */
 export default [
     {
@@ -45,6 +45,6 @@ export default [
     },
     EditFormUtils.javaScriptValue('Advanced Conditions', 'customConditional', 'conditional.json', 110, '<p>You must assign the <strong>show</strong> variable a boolean result.</p>' +
         '<p><strong>Note: Advanced Conditional logic will override the results of the Simple Conditional logic.</strong></p>' +
-        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>')
+        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', EditFormUtils.tokenVariableDescription())
 ];
 /* eslint-enable quotes, max-len */

package/lib/mjs/components/_classes/component/editForm/Component.edit.data.d.ts

@@ -87,6 +87,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     type: string;
     label: string;
@@ -103,6 +106,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     weight: number;
     type: string;
@@ -125,6 +131,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     weight: number;
     type: string;
@@ -173,6 +182,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     type: string;
     input: boolean;
@@ -200,6 +212,9 @@ declare const _default: ({
     defaultValue?: undefined;
     values?: undefined;
     logic?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     weight: number;
     type: string;
@@ -216,5 +231,27 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
+} | {
+    type: string;
+    as: string;
+    editor: string;
+    weight: number;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    defaultValue: {};
+    description: string;
+    placeholder?: undefined;
+    inline?: undefined;
+    values?: undefined;
+    logic?: undefined;
+    dataSrc?: undefined;
+    valueProperty?: undefined;
+    data?: undefined;
+    conditional?: undefined;
 })[];
 export default _default;

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

@@ -76,6 +76,25 @@ export default [
                     }
                 ]
             },
+            {
+                name: 'hide',
+                trigger: {
+                    type: 'javascript',
+                    javascript: 'result = instance.root.options.editJson === false;'
+                },
+                actions: [
+                    {
+                        name: 'hide',
+                        type: 'property',
+                        property: {
+                            label: 'Hidden',
+                            value: 'hidden',
+                            type: 'boolean'
+                        },
+                        state: true
+                    }
+                ]
+            },
             {
                 name: 'disabledToolTip',
                 trigger: {
@@ -128,14 +147,14 @@ export default [
     {
         weight: 700,
         type: 'checkbox',
-        label: 'Clear Value When Hidden',
+        label: 'Omit Value From Submission Data When Conditionally Hidden',
         key: 'clearOnHide',
         defaultValue: true,
-        tooltip: 'When a field is hidden, clear the value.',
+        tooltip: 'When a field is conditionally hidden, omit the value from the submission data.',
         input: true
     },
     EditFormUtils.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
-    EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>'),
+    EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', EditFormUtils.tokenVariableDescription()),
     {
         type: 'checkbox',
         input: true,
@@ -152,5 +171,16 @@ export default [
         label: 'Allow Manual Override of Calculated Value',
         tooltip: 'When checked, this will allow the user to manually override the calculated value.'
     },
+    {
+        type: 'textarea',
+        as: 'json',
+        editor: 'ace',
+        weight: 1400,
+        input: true,
+        key: 'serverOverride',
+        label: 'Server Override',
+        tooltip: 'A JSON object containing the component settings that should be overriden when the form submission is processed on the server side.',
+        defaultValue: {},
+        description: '<b>Example</b>: { "clearOnHide": true }',
+    }
 ];
-/* eslint-enable max-len */

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

@@ -1,5 +1,5 @@
 import EditFormUtils from './utils';
-import { getContextComponents } from '../../../../utils/utils';
+import { getContextComponents } from '../../../../utils';
 /* eslint-disable quotes, max-len */
 export default [
     {

package/lib/mjs/components/_classes/component/editForm/utils.d.ts

@@ -2,6 +2,7 @@ export default EditFormUtils;
 declare namespace EditFormUtils {
     function sortAndFilterComponents(components: any): any;
     function unifyComponents(objValue: any, srcValue: any): any;
+    function tokenVariableDescription(): string;
     function logicVariablesTable(additional: any): {
         type: string;
         tag: string;

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

@@ -6,7 +6,7 @@ const EditFormUtils = {
     },
     unifyComponents(objValue, srcValue) {
         if (objValue.key && srcValue.key) {
-            if (objValue.skipMerge || srcValue.skipMerge) {
+            if ((objValue.skipMerge || srcValue.skipMerge) && !objValue.ignore) {
                 return false;
             }
             if (objValue.key === srcValue.key) {
@@ -32,6 +32,9 @@ const EditFormUtils = {
         }
         return _.isEqual(objValue, srcValue);
     },
+    tokenVariableDescription() {
+        return '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>';
+    },
     logicVariablesTable(additional) {
         additional = additional || '';
         return {

package/lib/mjs/components/_classes/componentModal/ComponentModal.d.ts

@@ -22,6 +22,7 @@ export default class ComponentModal {
         modalOverlay: string;
         modalContents: string;
         modalClose: string;
+        componentContent: string;
         openModalWrapper: string;
         openModal: string;
         modalSave: string;

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { fastCloneDeep } from '../../../utils/utils';
+import { fastCloneDeep } from '../../../utils';
 export default class ComponentModal {
     static render(component, data, topLevel) {
         const children = component.renderTemplate('component', data, topLevel);
@@ -61,6 +61,7 @@ export default class ComponentModal {
             modalOverlay: 'single',
             modalContents: 'single',
             modalClose: 'single',
+            componentContent: 'single',
             openModalWrapper: 'single',
             openModal: 'single',
             modalSave: 'single',

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

@@ -1,9 +1,9 @@
 export default class Field extends Component {
     /**
      * @param {object} element - The component to create.
-     * @returns {Field} - The created field.
+     * @returns {string} - The rendered HTML string of a component
      */
-    render(element: object): Field;
+    render(element: object): string;
     /**
     /* Saves current caret position to restore it after the component is redrawn
      * @param {HTMLElement} element - The element to save the caret position for.

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

@@ -6,7 +6,7 @@ import Component from '../component/Component';
 export default class Field extends Component {
     /**
      * @param {object} element - The component to create.
-     * @returns {Field} - The created field.
+     * @returns {string} - The rendered HTML string of a component
      */
     render(element) {
         if (this.noField) {

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

@@ -1,5 +1,5 @@
 import Multivalue from '../multivalue/Multivalue';
-import { convertStringToHTMLElement } from '../../../utils/utils';
+import { convertStringToHTMLElement } from '../../../utils';
 import Widgets from '../../../widgets';
 import _ from 'lodash';
 export default class Input extends Multivalue {
@@ -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/list/ListComponent.js

@@ -1,7 +1,7 @@
 import Field from '../field/Field';
 import { Formio } from '../../../Formio';
 import _ from 'lodash';
-import { getItemTemplateKeys } from '../../../utils/utils';
+import { getItemTemplateKeys } from '../../../utils';
 export default class ListComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -24,9 +24,9 @@ export default class ListComponent extends Field {
     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 &&
+        if ((this.root &&
             this.root.submissionSet &&
-            !this.attached) {
+            !this.attached) || !this.visible) {
             return Promise.resolve();
         }
         return this.itemsLoaded;
@@ -133,12 +133,12 @@ export default class ListComponent extends Field {
             component: this.component,
             message: err.toString(),
         });
-        console.warn(`Unable to load resources for ${this.key}`);
+        console.warn(this.t('loadResourcesError', { componentKey: this.key }));
     }
     /* eslint-disable max-statements */
     updateItems(searchInput, forceUpdate) {
         if (!this.component.data) {
-            console.warn(`Select component ${this.key} does not have data configuration.`);
+            console.warn(this.t('noSelectDataConfiguration', { componentKey: this.key }));
             this.itemsLoadedResolve();
             return;
         }
@@ -170,7 +170,7 @@ export default class ListComponent extends Field {
                         this.loadItems(resourceUrl, searchInput, this.requestHeaders);
                     }
                     catch (err) {
-                        console.warn(`Unable to load resources for ${this.key}`);
+                        console.warn(this.t('loadResourcesError', { componentKey: this.key }));
                     }
                 }
                 else {
@@ -214,7 +214,7 @@ export default class ListComponent extends Field {
                     return;
                 }
                 if (!window.indexedDB) {
-                    window.alert("Your browser doesn't support current version of indexedDB");
+                    window.alert(this.t('indexedDBSupportError'));
                 }
                 if (this.component.indexeddb && this.component.indexeddb.database && this.component.indexeddb.table) {
                     const request = window.indexedDB.open(this.component.indexeddb.database);

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

@@ -51,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

@@ -61,7 +61,7 @@ export default class Multivalue extends Field {
         return value;
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'Add Another');
+        return this.t(this.component.addAnother || 'addAnother');
     }
     /**
      * @returns {Field} - The created field.
@@ -180,7 +180,7 @@ export default class Multivalue extends Field {
                 this.saveCaretPosition(element, index);
             }
             catch (err) {
-                console.warn('An error occurred while trying to save caret position', err);
+                console.warn(this.t('caretPositionSavingError'), err);
             }
             // If a mask is present, delay the update to allow mask to update first.
             if (element.mask) {
@@ -259,10 +259,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

@@ -56,18 +56,6 @@ export default class NestedComponent extends Field {
      * @returns {object} - The current form object.
      */
     get currentForm(): object;
-    /**
-     * Set Row Index to row and update each component.
-     * @param {number} value - The row index.
-     * @returns {void}
-     */
-    set rowIndex(value: number);
-    /**
-     * Get Row Index.
-     * @returns {number} - The row index.
-     */
-    get rowIndex(): number;
-    _rowIndex: number | undefined;
     /**
      * Get Contextual data of the component.
      * @returns {object} - The contextual data of the component.
@@ -115,14 +103,11 @@ export default class NestedComponent extends Field {
      */
     eachComponent(fn: Function): void;
     /**
-     * Returns a component provided a key. This performs a deep search within the
-     * component tree.
+     * Returns a component provided a key. This performs a deep search within the component tree.
      * @param {string} path - The path to the component.
-     * @param {Function} [fn] - Called with the component once found.
-     * @param {string} [originalPath] - The original path to the component.
      * @returns {any} - The component that is located.
      */
-    getComponent(path: string, fn?: Function | undefined, originalPath?: string | undefined): any;
+    getComponent(path: string): any;
     /**
      * Return a component provided the Id of the component.
      * @param {string} id - The Id of the component.
@@ -161,7 +146,7 @@ export default class NestedComponent extends Field {
      */
     addComponent(component: import('@formio/core').Component, data?: object, before?: HTMLElement, noAdd?: boolean | undefined): any;
     beforeFocus(): void;
-    render(children: any): Field;
+    render(children: any): string;
     renderComponents(components: any): any;
     attach(element: any): Promise<[void, void]>;
     /**
@@ -196,7 +181,6 @@ export default class NestedComponent extends Field {
     checkData(data: any, flags: any, row: any, components: any): true | undefined;
     checkConditions(data: any, flags: any, row: any): boolean;
     clearOnHide(show: any): void;
-    restoreComponentsContext(): void;
     /**
      * Allow components to hook into the next page trigger to perform their own logic.
      * @param {Function} next - The callback to continue to the next page.
@@ -211,12 +195,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, component }: {
+    validationProcessor({ scope, data, row, instance, paths }: {
         scope: any;
         data: any;
         row: any;
         instance: any;
-        component: any;
+        paths: any;
     }, flags: any): void;
     /**
      * Perform a validation on all child components of this nested component.

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

@@ -6,6 +6,19 @@ import Components from '../../Components';
  */
 export default function (...extend) {
     return Components.baseEditForm([
+        {
+            key: 'display',
+            components: [
+                {
+                    key: 'labelWidth',
+                    ignore: true
+                },
+                {
+                    key: 'labelMargin',
+                    ignore: true
+                }
+            ]
+        },
         {
             key: 'data',
             ignore: true