@formio/js 5.0.0-dev.5646.8734cf4 → 5.0.0-dev.5650.cd53187

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

@@ -3,8 +3,11 @@ import _ from 'lodash';
 import Field from '../field/Field';
 import Components from '../../Components';
 import { getArrayFromComponentPath, getStringFromComponentPath, getRandomComponentId } from '../../../utils/utils';
-import Component from '../component/Component';
 import { process as processAsync, processSync } from '@formio/core/process';
+/**
+ * NestedComponent class.
+ * @augments Field
+ */
 export default class NestedComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -15,20 +18,40 @@ export default class NestedComponent extends Field {
     constructor(component, options, data) {
         super(component, options, data);
         this.type = 'components';
+        /**
+         * The collapsed state of this NestedComponent.
+         * @type {boolean}
+         * @default false
+         * @private
+         */
         this._collapsed = !!this.component.collapsed;
     }
     get defaultSchema() {
         return NestedComponent.schema();
     }
+    /**
+     * Get the schema for the NestedComponent.
+     * @returns {object} The schema for the NestedComponent.
+     * @override
+     */
     get schema() {
         const schema = super.schema;
         const components = _.uniqBy(this.getComponents(), 'component.key');
         schema.components = _.map(components, 'schema');
         return schema;
     }
+    /**
+     * Get collapsed state.
+     * @returns {boolean} The collapsed state.
+     */
     get collapsed() {
         return this._collapsed;
     }
+    /**
+     * Set collapsed state.
+     * @param {boolean} value - The collapsed state.
+     * @returns {void}
+     */
     collapse(value) {
         const promise = this.redraw();
         if (!value) {
@@ -36,10 +59,20 @@ export default class NestedComponent extends Field {
         }
         return promise;
     }
+    /**
+     * Set collapsed state.
+     * @param {boolean} value - The collapsed state.
+     * @returns {void}
+     */
     set collapsed(value) {
         this._collapsed = value;
         this.collapse(value);
     }
+    /**
+     * Set visible state of parent and each child component.
+     * @param {boolean} value - The visible state.
+     * @returns {void}
+     */
     set visible(value) {
         // DO NOT CALL super here.  There is an issue where clearOnHide was getting triggered with
         // subcomponents because the "parentVisible" flag was set to false when it should really be
@@ -70,75 +103,146 @@ export default class NestedComponent extends Field {
             this.redraw();
         }
     }
+    /**
+     * Get visible state.
+     * @returns {boolean} The visible state.
+     */
     get visible() {
         return super.visible;
     }
+    /**
+     * Set parent visibility.
+     * @param {boolean} value - The parent visibility.
+     * @returns {void}
+     */
     set parentVisible(value) {
         super.parentVisible = value;
         this.components.forEach(component => component.parentVisible = this.visible);
     }
+    /**
+     * Get parent visibility.
+     * @returns {boolean} The parent visibility.
+     */
     get parentVisible() {
         return super.parentVisible;
     }
+    /**
+     * Get the disabled state.
+     * @returns {boolean} - The disabled state.
+     */
     get disabled() {
         return super.disabled;
     }
+    /**
+     * Set the disabled state.
+     * @param {boolean} disabled - The disabled state.
+     */
     set disabled(disabled) {
         super.disabled = disabled;
         this.components.forEach((component) => component.parentDisabled = disabled);
     }
+    /**
+     * Set parent disabled state.
+     * @param {boolean} value - The parent disabled state.
+     * @returns {void}
+     */
     set parentDisabled(value) {
         super.parentDisabled = value;
         this.components.forEach(component => {
             component.parentDisabled = this.disabled;
         });
     }
+    /**
+     * Get parent disabled state.
+     * @returns {boolean} The parent disabled state.
+     */
     get parentDisabled() {
         return super.parentDisabled;
     }
+    /**
+     * Get ready state from all components.
+     * @returns {Promise<Array>} - The promise that resolves when all components are ready.
+     */
     get ready() {
         return Promise.all(this.getComponents().map(component => component.ready));
     }
+    /**
+     * Get currentForm object.
+     * @returns {object} - The current form object.
+     */
     get currentForm() {
         return super.currentForm;
     }
+    /**
+     * Set currentForm object.
+     * @param {object} instance - The current form object.
+     * @returns {void}
+     */
     set currentForm(instance) {
         super.currentForm = instance;
         this.getComponents().forEach(component => {
             component.currentForm = instance;
         });
     }
+    /**
+     * Get Row Index.
+     * @returns {number} - The row index.
+     */
     get rowIndex() {
         return this._rowIndex;
     }
+    /**
+     * Set Row Index to row and update each component.
+     * @param {number} value - The row index.
+     * @returns {void}
+     */
     set rowIndex(value) {
         this._rowIndex = value;
         this.eachComponent((component) => {
             component.rowIndex = value;
         });
     }
+    /**
+     * Get Contextual data of the component.
+     * @returns {object} - The contextual data of the component.
+     * @override
+     */
     componentContext() {
         return this._data;
     }
+    /**
+     * Get the data of the component.
+     * @returns {object} - The data of the component.
+     * @override
+     */
     get data() {
         return this._data;
     }
+    /**
+     * Set the data of the component.
+     * @param {object} value - The data of the component.
+     * @returns {void}
+     */
     set data(value) {
         this._data = value;
         this.eachComponent((component) => {
             component.data = this.componentContext(component);
         });
     }
+    /**
+     * Get components array.
+     * @returns {Array} - The components array.
+     */
     getComponents() {
         return this.components || [];
     }
     /**
      * Perform a deep iteration over every component, including those
      * within other container based components.
-     *
-     * @param {function} fn - Called for every component.
+     * @param {Function} fn - Called for every component.
+     * @param {any} options - The options to include with this everyComponent call.
      */
-    everyComponent(fn, options) {
+    everyComponent(fn, options = {}) {
         const components = this.getComponents();
         _.each(components, (component, index) => {
             if (fn(component, components, index) === false) {
@@ -151,6 +255,11 @@ export default class NestedComponent extends Field {
             }
         });
     }
+    /**
+     * Check if the component has a component.
+     * @param {import('@formio/core').Component} component - The component to check.
+     * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.
+     */
     hasComponent(component) {
         let result = false;
         this.everyComponent((comp) => {
@@ -161,6 +270,10 @@ export default class NestedComponent extends Field {
         });
         return result;
     }
+    /**
+     * Get the flattened components of this NestedComponent.
+     * @returns {object} - The flattened components of this NestedComponent.
+     */
     flattenComponents() {
         const result = {};
         this.everyComponent((component) => {
@@ -170,8 +283,7 @@ export default class NestedComponent extends Field {
     }
     /**
      * Perform an iteration over each component within this container component.
-     *
-     * @param {function} fn - Called for each component
+     * @param {Function} fn - Called for each component
      */
     eachComponent(fn) {
         _.each(this.getComponents(), (component, index) => {
@@ -183,11 +295,10 @@ export default class NestedComponent extends Field {
     /**
      * Returns a component provided a key. This performs a deep search within the
      * component tree.
-     *
-     * @param {string} key - The key of the component to retrieve.
-     * @param {function} [fn] - Called with the component once found.
+     * @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.
-     * @return {Component} - The component that is located.
+     * @returns {any} - The component that is located.
      */
     getComponent(path, fn, originalPath) {
         originalPath = originalPath || getStringFromComponentPath(path);
@@ -235,12 +346,11 @@ export default class NestedComponent extends Field {
     }
     /**
      * Return a component provided the Id of the component.
-     *
      * @param {string} id - The Id of the component.
-     * @param {function} fn - Called with the component once it is retrieved.
-     * @return {Object} - The component retrieved.
+     * @param {Function} fn - Called with the component once it is retrieved.
+     * @returns {object} - The component retrieved.
      */
-    getComponentById(id, fn) {
+    getComponentById(id, fn = null) {
         let comp = null;
         this.everyComponent((component, components) => {
             if (component.id === id) {
@@ -255,9 +365,12 @@ export default class NestedComponent extends Field {
     }
     /**
      * Create a new component and add it to the components array.
-     *
-     * @param component
-     * @param data
+     * @param {import('@formio/core').Component} component - The component JSON schema to create.
+     * @param {object} options - The options to create the component with.
+     * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.
+     * @param {import('@formio/core').Component} [before] - The component before which to add this component.
+     * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.
+     * @returns {any} - The created component instance.
      */
     createComponent(component, options, data, before, replacedComp) {
         if (!component) {
@@ -319,9 +432,9 @@ export default class NestedComponent extends Field {
         return super.init();
     }
     /**
-     *
-     * @param element
-     * @param data
+     * Add a new component instance to the components array.
+     * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.
+     * @param {object} [options] - The options for this component.
      */
     addComponents(data, options) {
         data = data || this.data;
@@ -337,13 +450,13 @@ export default class NestedComponent extends Field {
     }
     /**
      * Add a new component to the components array.
-     *
-     * @param {Object} component - The component JSON schema to add.
-     * @param {Object} data - The submission data object to house the data for this component.
+     * @param {import('@formio/core').Component} component - The component JSON schema to add.
+     * @param {object} data - The submission data object to house the data for this component.
      * @param {HTMLElement} before - A DOM element to insert this element before.
-     * @return {Component} - The created component instance.
+     * @param {boolean} [noAdd] - A possibly extraneous boolean flag.
+     * @returns {any} - The created component instance.
      */
-    addComponent(component, data, before, noAdd) {
+    addComponent(component, data = null, before = null, noAdd = false) {
         data = data || this.data;
         this.components = this.components || [];
         component = this.hook('addComponent', component, data, before, noAdd);
@@ -380,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]) {
@@ -404,6 +518,10 @@ export default class NestedComponent extends Field {
             childPromise,
         ]);
     }
+    /**
+     * Attach the logic to the components.
+     * @param {import('@formio/core').Component[]} components - The components to attach logic to.
+     */
     attachComponentsLogic(components) {
         components = components || this.components;
         _.each(components, (comp) => {
@@ -433,9 +551,9 @@ export default class NestedComponent extends Field {
     }
     /**
      * Remove a component from the components array and from the children object
-     *
-     * @param {Component} component - The component to remove from the components.
-     * @param {Array<Component>} components - An array of components to remove this component from.
+     * @param {import('@formio/core').Component} component - The component to remove from the components.
+     * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.
+     * @param {boolean} [all] - If set to TRUE will cascade remove all components.
      */
     removeComponent(component, components, all = false) {
         components = components || this.components;
@@ -447,12 +565,11 @@ export default class NestedComponent extends Field {
     }
     /**
      * Removes a component provided the API key of that component.
-     *
      * @param {string} key - The API key of the component to remove.
-     * @param {function} fn - Called once the component is removed.
-     * @return {null}
+     * @param {Function} fn - Called once the component is removed.
+     * @returns {null|void} - Returns nothing if the component is not found.
      */
-    removeComponentByKey(key, fn) {
+    removeComponentByKey(key, fn = null) {
         const comp = this.getComponent(key, (component, components) => {
             this.removeComponent(component, components);
             if (fn) {
@@ -468,12 +585,11 @@ export default class NestedComponent extends Field {
     }
     /**
      * Removes a component provided the Id of the component.
-     *
      * @param {string} id - The Id of the component to remove.
-     * @param {function} fn - Called when the component is removed.
-     * @return {null}
+     * @param {Function} fn - Called when the component is removed.
+     * @returns {null|void} - Returns nothing if the component is not found.
      */
-    removeComponentById(id, fn) {
+    removeComponentById(id, fn = null) {
         const comp = this.getComponentById(id, (component, components) => {
             this.removeComponent(component, components);
             if (fn) {
@@ -536,16 +652,15 @@ export default class NestedComponent extends Field {
     }
     /**
      * Allow components to hook into the next page trigger to perform their own logic.
-     *
-     * @return {*}
+     * @param {Function} next - The callback to continue to the next page.
+     * @returns {Promise} - A promise when the page has been processed.
      */
     beforePage(next) {
         return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));
     }
     /**
      * Allow components to hook into the submission to provide their own async data.
-     *
-     * @return {*}
+     * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.
      */
     beforeSubmit() {
         return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));
@@ -563,8 +678,13 @@ 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.childComponentsMap?.hasOwnProperty(component.path)
+                ? this.childComponentsMap[component.path]
+                : this.getComponent(component.path);
+        }
         if (!instance) {
             return;
         }
@@ -575,12 +695,12 @@ export default class NestedComponent extends Field {
     }
     /**
      * Perform a validation on all child components of this nested component.
-     * @param {*} components
-     * @param {*} data
-     * @param {*} flags
-     * @returns
+     * @param {import('@formio/core').Component[]} components - The components to validate.
+     * @param {import('@formio/core').DataObject} data - The data to validate.
+     * @param {object} flags - The flags to use when validating.
+     * @returns {Promise<Array>|Array} - The errors if any exist.
      */
-    validateComponents(components, data, flags = {}) {
+    validateComponents(components = null, data = null, flags = {}) {
         components = components || this.component.components;
         data = data || this.rootValue;
         const { async, dirty, process } = flags;
@@ -615,25 +735,32 @@ export default class NestedComponent extends Field {
     }
     /**
      * Validate a nested component with data, or its own internal data.
-     * @param {*} data
-     * @param {*} flags
-     * @returns
+     * @param {import('@formio/core').DataObject} data - The data to validate.
+     * @param {object} flags - The flags to use when validating.
+     * @returns {Array} - The errors if any exist.
      */
-    validate(data, flags = {}) {
+    validate(data = null, flags = {}) {
         data = data || this.rootValue;
         return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);
     }
-    checkComponentValidity(data, dirty, row, flags = {}, allErrors = []) {
+    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {
         this.childErrors = [];
         return super.checkComponentValidity(data, dirty, row, flags, allErrors);
     }
-    checkValidity(data, dirty, row, silentCheck, childErrors = []) {
-        console.log('Deprecation warning:  Component.checkValidity() will be deprecated in 6.x version of renderer. Use "validate" method instead.');
+    /**
+     * Checks the validity of the component.
+     * @param {*} data - The data to check if the component is valid.
+     * @param {boolean} dirty - If the component is dirty.
+     * @param {*} row - The contextual row data for this component.
+     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.
+     * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.
+     * @returns {boolean} - TRUE if the component is valid.
+     */
+    checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {
         childErrors.push(...this.validate(data, { dirty, silentCheck }));
         return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;
     }
-    checkAsyncValidity(data, dirty, row, silentCheck) {
-        console.log('Deprecation warning:  Component.checkAsyncValidity() will be deprecated in 6.x version of renderer.');
+    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {
         return this.ready.then(() => {
             return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {
                 return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {

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

@@ -6,12 +6,15 @@ export default class NestedArrayComponent extends NestedDataComponent {
     checkAddButtonChanged(): void;
     checkData(data: any, flags: any, row: any): any;
     processRows(method: any, data: any, opts: any, defaultValue: any, silentCheck: any): any;
-    validate(data: any, flags?: {}): any;
+    validate(data: any, flags?: {}): any[] | Promise<any[]>;
     checkRow(...args: any[]): any;
     processRow(method: any, data: any, opts: any, row: any, components: any, silentCheck: any): any;
     hasAddButton(): any;
     getComponent(path: any, fn: any, originalPath: any): any;
-    everyComponent(fn: any, rowIndex: any, options: any): void;
+    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';

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

@@ -1,6 +1,6 @@
 'use strict';
 import _ from 'lodash';
-import { componentValueTypes, getStringFromComponentPath } from '../../../utils/utils';
+import { componentValueTypes, getStringFromComponentPath, isLayoutComponent } from '../../../utils/utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {
@@ -125,7 +125,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
         }
         return result;
     }
-    everyComponent(fn, rowIndex, options) {
+    everyComponent(fn, rowIndex, options = {}) {
         if (_.isObject(rowIndex)) {
             options = rowIndex;
             rowIndex = null;
@@ -145,38 +145,60 @@ export default class NestedArrayComponent extends NestedDataComponent {
             }
         });
     }
+    _getEmailTableHeader(options) {
+        let row = '';
+        const getHeaderCell = (component) => {
+            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
+                return '';
+            }
+            const label = component.label || component.key;
+            return `<th style="padding: 5px 10px;">${label}</th>`;
+        };
+        const components = this.getComponents(0);
+        for (const component of components) {
+            if (component.isInputComponent) {
+                row += getHeaderCell(component);
+            }
+            else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
+                component.everyComponent((comp) => {
+                    row += getHeaderCell(comp);
+                }, options);
+            }
+        }
+        return `<thead><tr>${row}</tr></thead>`;
+    }
+    _getEmailTableBody(options) {
+        const getBodyCell = (component) => {
+            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
+                return '';
+            }
+            return `<td style="padding: 5px 10px;">${component.getView(component.dataValue, options)}</td>`;
+        };
+        const rows = [];
+        for (const { components } of this.iteratableRows) {
+            let row = '';
+            for (const component of components) {
+                if (component.isInputComponent) {
+                    row += getBodyCell(component);
+                }
+                else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
+                    component.everyComponent((comp) => {
+                        row += getBodyCell(comp);
+                    }, options);
+                }
+            }
+            rows.push(`<tr>${row}</tr>`);
+        }
+        return `<tbody>${rows.join('')}</tbody>`;
+    }
     getValueAsString(value, options) {
         if (options?.email) {
-            let result = (`
+            return `
         <table border="1" style="width:100%">
-          <thead>
-            <tr>
-      `);
-            this.component.components?.forEach((component) => {
-                const label = component.label || component.key;
-                result += `<th style="padding: 5px 10px;">${label}</th>`;
-            });
-            result += (`
-          </tr>
-        </thead>
-        <tbody>
-      `);
-            this.iteratableRows.forEach(({ components }) => {
-                result += '<tr>';
-                _.each(components, (component) => {
-                    result += '<td style="padding:5px 10px;">';
-                    if (component.isInputComponent && component.visible && !component.skipInEmail) {
-                        result += component.getView(component.dataValue, options);
-                    }
-                    result += '</td>';
-                });
-                result += '</tr>';
-            });
-            result += (`
-          </tbody>
+          ${this._getEmailTableHeader(options)}
+          ${this._getEmailTableBody(options)}
         </table>
-      `);
-            return result;
+      `;
         }
         if (!value || !value.length) {
             return '';
@@ -192,4 +214,10 @@ export default class NestedArrayComponent extends NestedDataComponent {
         }
         return super.getComponents();
     }
+    removeSubmissionMetadataRow(index) {
+        const componentMetadata = _.get(this.root, `submission.metadata.selectData.${this.path}`, null);
+        if (_.isArray(componentMetadata)) {
+            componentMetadata.splice(index, 1);
+        }
+    }
 }

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.d.ts

@@ -3,9 +3,15 @@ export default class NestedDataComponent extends NestedComponent {
     hasChanged(newValue: any, oldValue: any): boolean;
     get allowData(): boolean;
     get emptyValue(): {};
+    componentContext(): any;
     getValueAsString(value: any, options: any): string;
     getDataValueAsTable(value: any, options: any): string;
-    everyComponent(fn: any, options: any): void;
+    everyComponent(fn: any, options?: {}): void;
+    /**
+     * Get the value of this component.
+     * @returns {any} - Return the value of this component.
+     */
+    getValue(): any;
     updateValue(value: any, flags?: {}): boolean;
     setValue(value: any, flags?: {}): boolean;
 }

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -87,7 +87,7 @@ export default class NestedDataComponent extends NestedComponent {
     `);
         return result;
     }
-    everyComponent(fn, options) {
+    everyComponent(fn, options = {}) {
         if (options?.email) {
             if (options.fromRoot) {
                 delete options.fromRoot;
@@ -100,8 +100,7 @@ export default class NestedDataComponent extends NestedComponent {
     }
     /**
      * Get the value of this component.
-     *
-     * @returns {*}
+     * @returns {any} - Return the value of this component.
      */
     getValue() {
         return this.dataValue;