@formio/js 5.0.0-dev.5940.cf4089b → 5.0.0-dev.5947.acce78f

package/dist/formio.utils.min.js.LICENSE.txt

@@ -18,8 +18,6 @@
  * MIT licensed
  */
 
-/*! @license DOMPurify 3.1.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.6/LICENSE */
-
 /*! @license DOMPurify 3.2.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.0/LICENSE */
 
 /*! formiojs v5.0.0-rc.59 | https://unpkg.com/formiojs@5.0.0-rc.59/LICENSE.txt */
@@ -45,4 +43,4 @@
 
 //! moment.js
 
-//! version : 0.5.45
+//! version : 0.5.46

package/lib/cjs/Webform.d.ts

@@ -426,7 +426,7 @@ declare class Webform extends NestedDataComponent {
      */
     cancel(noconfirm: boolean): boolean;
     setMetadata(submission: any): void;
-    submitForm(options?: {}): Promise<any>;
+    submitForm(options?: {}, local?: boolean): Promise<any>;
     setServerErrors(error: any): void;
     serverErrors: any;
     executeSubmit(options: any): Promise<object>;

package/lib/cjs/Webform.js

@@ -585,11 +585,12 @@ class Webform extends NestedDataComponent_1.default {
      * @returns {Promise} - The promise that is triggered when the form is set.
      */
     setForm(form, flags = {}) {
-        var _a, _b, _c;
+        var _a;
         const isFormAlreadySet = this._form && ((_a = this._form.components) === null || _a === void 0 ? void 0 : _a.length);
         try {
             // Do not set the form again if it has been already set
             if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {
+                this.formReadyResolve();
                 return Promise.resolve();
             }
             // Create the form.
@@ -597,13 +598,11 @@ class Webform extends NestedDataComponent_1.default {
             if (this.onSetForm) {
                 this.onSetForm(lodash_1.default.cloneDeep(this._form), form);
             }
-            if ((_c = (_b = this.parent) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.modalEdit) {
-                return Promise.resolve();
-            }
         }
         catch (err) {
             console.warn(err);
             // If provided form is not a valid JSON object, do not set it too
+            this.formReadyReject(err);
             return Promise.resolve();
         }
         // Allow the form to provide component overrides.
@@ -847,6 +846,9 @@ class Webform extends NestedDataComponent_1.default {
         return changed;
     }
     getValue() {
+        if (!this._submission) {
+            this._submission = {};
+        }
         if (!this._submission.data) {
             this._submission.data = {};
         }
@@ -1108,29 +1110,24 @@ class Webform extends NestedDataComponent_1.default {
             return;
         }
         // Mark any components as invalid if in a custom message.
+        const componentErrors = {};
         errors.forEach((err) => {
-            const { components = [] } = err;
-            if (err.component) {
-                components.push(err.component);
-            }
-            if (err.path) {
-                components.push(err.path);
+            var _a, _b;
+            const path = err.path || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);
+            if (!componentErrors[path]) {
+                componentErrors[path] = [];
             }
-            components.forEach((path) => {
-                const originalPath = (0, utils_1.getStringFromComponentPath)(path);
-                const component = this.getComponent(path, lodash_1.default.identity, originalPath);
-                if (err.fromServer) {
-                    if (component.serverErrors) {
-                        component.serverErrors.push(err);
-                    }
-                    else {
-                        component.serverErrors = [err];
-                    }
-                }
-                const components = lodash_1.default.compact(Array.isArray(component) ? component : [component]);
-                components.forEach((component) => component.setCustomValidity(err.message, true));
-            });
+            componentErrors[path].push(err);
         });
+        // Iterate through all of our component errors and apply them to the components.
+        for (let path in componentErrors) {
+            const component = this.getComponent(path);
+            const errors = componentErrors[path];
+            if (component) {
+                component.serverErrors = errors.filter((err) => err.fromServer);
+                component.setCustomValidity(errors, true);
+            }
+        }
         const displayedErrors = [];
         if (errors.length) {
             errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });
@@ -1322,7 +1319,7 @@ class Webform extends NestedDataComponent_1.default {
             onLine: navigator.onLine,
         });
     }
-    submitForm(options = {}) {
+    submitForm(options = {}, local = false) {
         this.clearServerErrors();
         return new Promise((resolve, reject) => {
             // Read-only forms should never submit.
@@ -1348,6 +1345,7 @@ class Webform extends NestedDataComponent_1.default {
                             return reject("Invalid Submission");
                         }
                         const errors = this.validate(submission.data, {
+                            local,
                             dirty: true,
                             silentCheck: false,
                             process: "submit",
@@ -1362,12 +1360,13 @@ class Webform extends NestedDataComponent_1.default {
                     console.error(err);
                 }
                 this.everyComponent((comp) => {
+                    var _a, _b;
                     if (submission._vnote && comp.type === "form" && comp.component.reference) {
-                        lodash_1.default.get(submission.data, comp.path, {})._vnote = submission._vnote;
+                        lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;
                     }
                     const { persistent } = comp.component;
                     if (persistent === "client-only") {
-                        lodash_1.default.unset(submission.data, comp.path);
+                        lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);
                     }
                 });
                 this.hook("customValidation", Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {
@@ -1534,7 +1533,7 @@ class Webform extends NestedDataComponent_1.default {
             return;
         }
         const captchaComponent = [];
-        (0, formUtils_1.eachComponent)(this.components, (component) => {
+        this.eachComponent((component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }

package/lib/cjs/WebformBuilder.js

@@ -1112,20 +1112,12 @@ class WebformBuilder extends Component_1.default {
     findRepeatablePaths() {
         const repeatablePaths = [];
         const keys = new Map();
-        (0, formUtils_1.eachComponent)(this.form.components, (comp, path) => {
-            if (!comp.key) {
-                return;
-            }
-            if (keys.has(comp.key)) {
-                if (keys.get(comp.key).includes(path)) {
-                    repeatablePaths.push(path);
-                }
-                else {
-                    keys.set(comp.key, [...keys.get(comp.key), path]);
-                }
+        (0, formUtils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {
+            if (keys.has(paths.dataPath)) {
+                repeatablePaths.push(paths.dataPath);
             }
             else {
-                keys.set(comp.key, [path]);
+                keys.set(paths.dataPath, true);
             }
         }, true);
         return repeatablePaths;
@@ -1258,7 +1250,8 @@ class WebformBuilder extends Component_1.default {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
-                this.updateComponent((_a = this.editForm.submission.data) !== null && _a !== void 0 ? _a : component);
+                const editFormData = (_a = this.editForm.submission) === null || _a === void 0 ? void 0 : _a.data;
+                this.updateComponent((editFormData === null || editFormData === void 0 ? void 0 : editFormData.componentJson) || editFormData || component);
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });

package/lib/cjs/Wizard.js

@@ -375,11 +375,11 @@ class Wizard extends Webform_1.default {
         this.emit('wizardPageSelected', this.pages[index], index);
     }
     attachHeader() {
-        var _a;
+        var _a, _b;
         const isAllowPrevious = this.isAllowPrevious();
-        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], this.currentPanel.tooltip);
+        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);
         if (this.isBreadcrumbClickable() || isAllowPrevious) {
-            (_a = this.refs[`${this.wizardKey}-link`]) === null || _a === void 0 ? void 0 : _a.forEach((link, index) => {
+            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {
                 if (!isAllowPrevious || index <= this.enabledIndex) {
                     this.addEventListener(link, 'click', (event) => {
                         this.emit('wizardNavigationClicked', this.pages[index]);
@@ -728,7 +728,7 @@ class Wizard extends Webform_1.default {
         var _a, _b;
         const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);
         // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
-        return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.currentPage.parent.data, flags);
+        return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.root.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -903,13 +903,6 @@ class Wizard extends Webform_1.default {
             this.redraw();
         }
     }
-    redraw() {
-        var _a, _b;
-        if ((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.modalEdit) {
-            return this.parent.redraw();
-        }
-        return super.redraw();
-    }
     rebuild() {
         const currentPage = this.page;
         const setCurrentPage = () => this.setPage(currentPage);

package/lib/cjs/components/Components.d.ts

@@ -256,13 +256,6 @@ export default class Components {
     static setComponents(comps: any): void;
     static addComponent(name: any, comp: any): void;
     static setComponent(name: any, comp: any): void;
-    /**
-     * Return a path of component's value.
-     * @param {Component} component - The component instance.
-     * @returns {string} - The component's value path.
-     */
-    static getComponentPath(component: Component): string;
     static create(component: any, options: any, data: any): any;
 }
 import BaseEditForm from './_classes/component/Component.form';
-import Component from './_classes/component/Component';

package/lib/cjs/components/Components.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("./_classes/component/Component"));
 const utils_1 = __importDefault(require("./_classes/component/editForm/utils"));
 const Component_form_1 = __importDefault(require("./_classes/component/Component.form"));
-const utils_2 = require("../utils/utils");
 const lodash_1 = __importDefault(require("lodash"));
 class Components {
     static set EditFormUtils(value) {
@@ -49,35 +48,6 @@ class Components {
     static setComponent(name, comp) {
         Components.components[name] = comp;
     }
-    /**
-     * Return a path of component's value.
-     * @param {Component} component - The component instance.
-     * @returns {string} - The component's value path.
-     */
-    static getComponentPath(component) {
-        var _a;
-        let path = '';
-        const componentKey = (0, utils_2.getComponentKey)(component.component);
-        if (componentKey) {
-            let thisPath = ((_a = component.options) === null || _a === void 0 ? void 0 : _a.parent) || component;
-            while (thisPath && !thisPath.allowData && thisPath.parent) {
-                thisPath = thisPath.parent;
-            }
-            // TODO: any component that is nested in e.g. a Data Grid or an Edit Grid is going to receive a row prop; the problem
-            // is that options.row is passed to each further nested component, which results in erroneous paths like
-            // `editGrid[0].container[0].textField` rather than `editGrid[0].container.textField`. This should be adapted for other
-            // components with a tree-like data model
-            const rowIndex = component.row;
-            const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
-            path = `${thisPath.path}${rowIndexPath}.`;
-            if (rowIndexPath && (0, utils_2.getModelType)(thisPath) === 'nestedDataArray') {
-                path = `${path}data.`;
-            }
-            path += componentKey;
-            return lodash_1.default.trim(path, '.');
-        }
-        return path;
-    }
     static create(component, options, data) {
         let comp = null;
         if (component.type && Components.components.hasOwnProperty(component.type)) {
@@ -102,9 +72,7 @@ class Components {
         else {
             comp = new Component_1.default(component, options, data);
         }
-        const path = Components.getComponentPath(comp);
-        if (path) {
-            comp.path = path;
+        if (comp.path) {
             comp.componentsMap[comp.path] = comp;
         }
         return comp;

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

@@ -42,14 +42,13 @@ declare class Component extends Element {
      */
     private _hasCondition;
     /**
-     * References to dom elements
+     * The row index for this component.
      */
-    refs: {};
+    _rowIndex: number | undefined;
     /**
-     * The data path to this specific component instance.
-     * @type {string}
+     * References to dom elements
      */
-    path: string;
+    refs: {};
     /**
      * An array of all the children components errors.
      */
@@ -114,6 +113,11 @@ declare class Component extends Element {
      * @type {Component}
      */
     parent: Component;
+    /**
+     * The component paths for this component.
+     * @type {import('@formio/core').ComponentPaths} - The component paths.
+     */
+    paths: import('@formio/core').ComponentPaths;
     _path: string;
     /**
      * Determines if this component is visible, or not.
@@ -158,7 +162,7 @@ declare class Component extends Element {
      * @type {*}
      */
     info: any;
-    get componentsMap(): any;
+    get componentsMap(): object;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -182,6 +186,17 @@ declare class Component extends Element {
      * @returns {boolean} - TRUE if the component is disabled.
      */
     get disabled(): boolean;
+    /**
+     * 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;
     afterComponentAssign(): void;
     createAddon(addonConfiguration: any): any;
     get shouldDisabled(): any;
@@ -190,6 +205,8 @@ declare class Component extends Element {
     get hasInput(): any;
     get defaultSchema(): any;
     get key(): any;
+    set path(path: string | undefined);
+    get path(): string | undefined;
     set parentVisible(value: any);
     get parentVisible(): any;
     set parentDisabled(value: boolean);
@@ -212,7 +229,7 @@ declare class Component extends Element {
     _currentForm: any;
     get fullMode(): boolean;
     get builderMode(): boolean;
-    get calculatedPath(): string;
+    get calculatedPath(): string | undefined;
     get labelPosition(): any;
     get labelWidth(): any;
     get labelMargin(): any;

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

@@ -243,6 +243,7 @@ class Component extends Element_1.default {
      */
     /* eslint-disable max-statements */
     constructor(component, options, data) {
+        var _a, _b, _c, _d;
         super(Object.assign({
             renderMode: 'form',
             attachMode: 'full',
@@ -258,6 +259,10 @@ class Component extends Element_1.default {
          * @private
          */
         this._hasCondition = null;
+        /**
+         * The row index for this component.
+         */
+        this._rowIndex = undefined;
         /**
          * References to dom elements
          */
@@ -268,11 +273,6 @@ class Component extends Element_1.default {
             this.options.components[component.type]) {
             lodash_1.default.merge(component, this.options.components[component.type]);
         }
-        /**
-         * The data path to this specific component instance.
-         * @type {string}
-         */
-        this.path = (component === null || component === void 0 ? void 0 : component.key) || '';
         /**
          * An array of all the children components errors.
          */
@@ -341,6 +341,11 @@ class Component extends Element_1.default {
          * @type {Component}
          */
         this.parent = this.options.parent;
+        /**
+         * The component paths for this component.
+         * @type {import('@formio/core').ComponentPaths} - The component paths.
+         */
+        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));
         this.options.name = this.options.name || 'data';
         this._path = '';
         // Needs for Nextgen Rules Engine
@@ -447,12 +452,7 @@ class Component extends Element_1.default {
     /* eslint-enable max-statements */
     get componentsMap() {
         var _a;
-        if ((_a = this.localRoot) === null || _a === void 0 ? void 0 : _a.childComponentsMap) {
-            return this.localRoot.childComponentsMap;
-        }
-        const localMap = {};
-        localMap[this.path] = this;
-        return localMap;
+        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};
     }
     get data() {
         return this._data;
@@ -499,6 +499,23 @@ class Component extends Element_1.default {
             this.component.addons.forEach((addon) => this.createAddon(addon));
         }
     }
+    /**
+     * 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) {
+        var _a, _b;
+        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));
+        this._rowIndex = value;
+    }
     afterComponentAssign() {
         //implement in extended classes
     }
@@ -568,6 +585,12 @@ class Component extends Element_1.default {
     get key() {
         return lodash_1.default.get(this.component, 'key', '');
     }
+    get path() {
+        return this.paths.dataPath;
+    }
+    set path(path) {
+        throw new Error('Should not be setting the path of a component.');
+    }
     set parentVisible(value) {
         this._parentVisible = value;
     }
@@ -1274,6 +1297,7 @@ class Component extends Element_1.default {
      * @returns {void}
      */
     checkRefresh(refreshData, changed, flags) {
+        var _a, _b;
         const changePath = lodash_1.default.get(changed, 'instance.path', false);
         // Don't let components change themselves.
         if (changePath && this.path === changePath) {
@@ -1282,7 +1306,7 @@ class Component extends Element_1.default {
         if (refreshData === 'data') {
             this.refresh(this.data, changed, flags);
         }
-        else if ((changePath && (0, utils_1.getComponentPath)(changed.instance) === refreshData) && changed && changed.instance &&
+        else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&
             // Make sure the changed component is not in a different "context". Solves issues where refreshOn being set
             // in fields inside EditGrids could alter their state from other rows (which is bad).
             this.inContext(changed.instance)) {
@@ -2892,6 +2916,10 @@ class Component extends Element_1.default {
      * @returns {string} - The message to show when the component is invalid.
      */
     invalidMessage(data, dirty, ignoreCondition, row) {
+        var _a;
+        if (!row) {
+            row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);
+        }
         if (!ignoreCondition && !this.checkCondition(row, data)) {
             return '';
         }
@@ -2909,6 +2937,8 @@ class Component extends Element_1.default {
             data,
             row,
             path: this.path || this.component.key,
+            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,
+            paths: this.paths,
             scope: validationScope,
             instance: this,
             processors: [
@@ -2962,7 +2992,7 @@ class Component extends Element_1.default {
         if (flags.silentCheck) {
             return [];
         }
-        let isDirty = this.dirty || flags.dirty;
+        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);
         if (this.options.alwaysDirty) {
             isDirty = true;
         }
@@ -2977,6 +3007,7 @@ class Component extends Element_1.default {
      * @returns {Array<any>} - An array of errors if the component is invalid.
      */
     validateComponent(data = null, row = null, flags = {}) {
+        var _a;
         data = data || this.rootValue;
         row = row || this.data;
         const { async = false } = flags;
@@ -2987,7 +3018,10 @@ class Component extends Element_1.default {
             component: this.component,
             data,
             row,
+            local: !!flags.local,
             value: this.validationValue,
+            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,
+            paths: this.paths,
             path: this.path || this.component.key,
             instance: this,
             form: this.root ? this.root._form : {},

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

@@ -64,6 +64,7 @@ class ComponentModal {
             modalOverlay: 'single',
             modalContents: 'single',
             modalClose: 'single',
+            componentContent: 'single',
             openModalWrapper: 'single',
             openModal: 'single',
             modalSave: 'single',

package/lib/cjs/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.
@@ -211,12 +196,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.