@formio/js 5.1.0-dev.6112.86987a5 → 5.1.0-dev.6112.b627acb

package/lib/cjs/Element.js

@@ -533,9 +533,9 @@ class Element {
         if (this.component.filter === string && !this.options.building) {
             const evalContext = this.evalContext(data);
             evalContext.data = lodash_1.default.mapValues(evalContext.data, (val) => lodash_1.default.isString(val) ? encodeURIComponent(val) : val);
-            return utils_1.default.Evaluator.interpolate(string, evalContext, options);
+            return utils_1.default.interpolate(string, evalContext, options);
         }
-        return utils_1.default.Evaluator.interpolate(string, this.evalContext(data), options);
+        return utils_1.default.interpolate(string, this.evalContext(data), options);
     }
     /**
      * Performs an evaluation using the evaluation context of this component.

package/lib/cjs/PDFBuilder.js

@@ -454,18 +454,20 @@ class PDFBuilder extends WebformBuilder_1.default {
         const repeatablePathsComps = this.findComponentsWithRepeatablePaths();
         // update elements which path was duplicated if any pathes have been changed
         if (!lodash_1.default.isEqual(this.repeatablePathsComps, repeatablePathsComps)) {
-            (0, utils_1.eachComponent)(this.webform.getComponents(), (comp) => {
-                if (this.repeatablePathsComps.includes(comp.component)) {
-                    this.webform.postMessage({ name: 'updateElement', data: comp.component });
-                }
-            });
+            if (!lodash_1.default.isEmpty(this.repeatablePathsComps)) {
+                (0, utils_1.eachComponent)(this.webform.getComponents(), (comp) => {
+                    if (this.repeatablePathsComps.includes(comp.component)) {
+                        this.webform.postMessage({ name: 'updateElement', data: comp.component });
+                    }
+                });
+            }
             this.repeatablePathsComps = repeatablePathsComps;
         }
         if (!repeatablePathsComps.length) {
             return;
         }
         (0, utils_1.eachComponent)(this.webform.getComponents(), (comp) => {
-            if (this.repeatablePathsComps.includes(comp)) {
+            if (this.repeatablePathsComps.includes(comp.component)) {
                 this.webform.postMessage({
                     name: 'showBuilderErrors',
                     data: {

package/lib/cjs/Webform.js

@@ -361,6 +361,14 @@ class Webform extends NestedDataComponent_1.default {
     get shadowRoot() {
         return this.options.shadowRoot;
     }
+    // Webforms have no default value setting, so this should be always false
+    // I does not affect setting default value to nested forms
+    get shouldAddDefaultValue() {
+        return false;
+    }
+    get componentsMap() {
+        return this.childComponentsMap || {};
+    }
     /**
      * Add a language for translations
      * @param {string} code - The language code for the language being added.
@@ -1119,7 +1127,7 @@ class Webform extends NestedDataComponent_1.default {
         const componentErrors = {};
         errors.forEach((err) => {
             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);
+            const path = (0, utils_1.getStringFromComponentPath)(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] = [];
             }

package/lib/cjs/WebformBuilder.js

@@ -83,8 +83,16 @@ class WebformBuilder extends Component_1.default {
         }
         this.groupOrder = this.groupOrder
             .filter(group => group && !group.ignore)
-            .sort((a, b) => a.weight - b.weight)
-            .map(group => group.key);
+            .sort((a, b) => a.weight - b.weight);
+        const defaultOpenedGroup = this.groupOrder.find(x => x.key !== 'basic' && x.default);
+        if (defaultOpenedGroup) {
+            this.groupOrder.forEach(x => {
+                if ('default' in x && x.key !== defaultOpenedGroup.key) {
+                    x.default = false;
+                }
+            });
+        }
+        this.groupOrder = this.groupOrder.map(group => group.key);
         for (const type in Components_1.default.components) {
             const component = Components_1.default.components[type];
             if (component.builderInfo && component.builderInfo.schema) {
@@ -521,8 +529,8 @@ class WebformBuilder extends Component_1.default {
                     }
                     return elem;
                 };
-                const hideShow = (group, show) => {
-                    if (show) {
+                const hideShow = (group, forceShow, toggle = false) => {
+                    if (forceShow || (toggle && !Array.from(group.classList).includes('show'))) {
                         group.classList.add(['show']);
                         group.style.display = 'inherit';
                     }
@@ -544,7 +552,9 @@ class WebformBuilder extends Component_1.default {
                             const openByDefault = getAttribute(group, 'default') === 'true';
                             const groupId = group.getAttribute('id').slice('group-'.length);
                             const groupParent = getAttribute(group, 'parent').slice('#builder-sidebar-'.length);
-                            hideShow(group, ((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index));
+                            if (((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index)) {
+                                hideShow(group, false, true);
+                            }
                         });
                     }, true);
                 });
@@ -1099,7 +1109,7 @@ class WebformBuilder extends Component_1.default {
                     const newComp = parentComponent.addComponent(defaultValueComponent.component, defaultValueComponent.data, sibling);
                     lodash_1.default.pull(newComp.validators, 'required');
                     parentComponent.tabs[tabIndex].splice(index, 1, newComp);
-                    newComp.checkValidity = () => true;
+                    newComp.processOwnValidation = true;
                     newComp.build(defaultValueComponent.element);
                     if (this.preview && !this.preview.defaultChanged) {
                         const defaultValue = lodash_1.default.get(this.preview._data, this.editForm._data.key);
@@ -1198,6 +1208,7 @@ class WebformBuilder extends Component_1.default {
             submissionData = submissionData.componentJson || submissionData;
             if (submissionData.components && this.originalDefaultValue) {
                 submissionData.components = this.originalDefaultValue.components;
+                this.originalDefaultValue = null;
             }
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);

package/lib/cjs/Wizard.js

@@ -599,7 +599,7 @@ class Wizard extends Webform_1.default {
             if (!this._seenPages.includes(parentNum)) {
                 this._seenPages = this._seenPages.concat(parentNum);
             }
-            this.redraw().then(() => {
+            return this.redraw().then(() => {
                 this.checkData(this.submission.data);
                 this.triggerCaptcha(this.currentPage.components);
                 const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
@@ -607,7 +607,6 @@ class Wizard extends Webform_1.default {
                     this.showErrors(errors, true, true);
                 }
             });
-            return Promise.resolve();
         }
         else if (!this.pages.length) {
             this.redraw();
@@ -821,6 +820,11 @@ class Wizard extends Webform_1.default {
         }
     }
     setValue(submission, flags = {}, ignoreEstablishment) {
+        if (!submission || !submission.data) {
+            submission = {
+                data: {},
+            };
+        }
         const changed = this.getPages({ all: true }).reduce((changed, page) => {
             return this.setNestedValue(page, submission.data, flags, changed) || changed;
         }, false);
@@ -931,10 +935,7 @@ class Wizard extends Webform_1.default {
             if (pageIndex >= 0) {
                 const page = this.pages[pageIndex];
                 if (page && page !== this.currentPage) {
-                    return this.setPage(pageIndex).then(() => {
-                        this.showErrors(this.validate(this.localData, { dirty: true }));
-                        super.focusOnComponent(key);
-                    });
+                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key));
                 }
             }
         }

package/lib/cjs/WizardBuilder.js

@@ -183,6 +183,10 @@ class WizardBuilder extends WebformBuilder_1.default {
         this.navigationDragula = null;
         super.detach();
     }
+    destroy(all = false) {
+        this.off('saveComponent');
+        super.destroy(all);
+    }
     rebuild() {
         var _a;
         const page = this.currentPage;

package/lib/cjs/components/Components.js

@@ -57,7 +57,7 @@ class Components {
             // eslint-disable-next-line new-cap
             comp = new Components.components['datagrid'](component, options, data);
         }
-        else if (component.tree) {
+        else if (component.tree || (component.input && Array.isArray(component.components))) {
             // eslint-disable-next-line new-cap
             comp = new Components.components['nesteddata'](component, options, data);
         }
@@ -75,6 +75,12 @@ class Components {
         if (comp.path) {
             comp.componentsMap[comp.path] = comp;
         }
+        // Reset the componentMatches on the root element if any new component is created.
+        let parent = comp.parent;
+        while (parent) {
+            parent.componentMatches = {};
+            parent = parent.parent;
+        }
         return comp;
     }
 }

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

@@ -168,6 +168,7 @@ declare class Component extends Element {
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear(): boolean;
+    hasCondionallyHiddenLayoutParent(): boolean;
     parentConditionallyHidden(): boolean;
     /**
      * Returns true if any of the parents default their component "hidden" property to true.

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

@@ -450,6 +450,16 @@ class Component extends Element_1.default {
         }
         return false;
     }
+    hasCondionallyHiddenLayoutParent() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent._conditionallyHidden && utils_1.default.isLayoutComponent(currentParent) && currentParent.component.clearOnHide === true) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
@@ -633,10 +643,13 @@ class Component extends Element_1.default {
         if (!component) {
             component = this.component;
         }
+        if (!this.path) {
+            return false;
+        }
         if (lodash_1.default.isArray(this.options[visibility])) {
-            return this.options[visibility].includes(component.key);
+            return this.options[visibility].includes(this.path);
         }
-        return this.options[visibility][component.key];
+        return this.options[visibility][this.path];
     }
     shouldForceHide(component) {
         return this.shouldForceVisibility(component, 'hide');
@@ -716,7 +729,7 @@ class Component extends Element_1.default {
             this._conditionallyClear = true;
             return this._conditionallyClear;
         }
-        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
+        this._conditionallyClear = this.hasSetValue ? this.hasCondionallyHiddenLayoutParent() : this.parentShouldConditionallyClear();
         return this._conditionallyClear;
     }
     /**
@@ -1170,15 +1183,21 @@ class Component extends Element_1.default {
      * @returns {string} - The modal preview template.
      */
     getModalPreviewTemplate() {
-        var _a;
+        var _a, _b;
         const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;
         let modalLabel;
         if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {
             modalLabel = { className: 'field-required' };
         }
+        let messages = '';
+        if ((_b = this.errors) === null || _b === void 0 ? void 0 : _b.length) {
+            messages = this.errors.map((err) => {
+                return err.level === 'error' ? this.renderTemplate('message', Object.assign({}, err)) : '';
+            }).join('');
+        }
         return this.renderModalPreview({
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),
-            messages: '',
+            messages,
             labelInfo: modalLabel,
         });
     }
@@ -2557,7 +2576,7 @@ class Component extends Element_1.default {
         if ((value !== null) && (value !== undefined)) {
             value = this.hook('setDataValue', value, this.key, this._data);
         }
-        if ((value === null) || (value === undefined)) {
+        if ((value === null) || (value === undefined) || lodash_1.default.isNaN(value)) {
             this.unset();
             return;
         }
@@ -2590,17 +2609,6 @@ class Component extends Element_1.default {
             noUpdateEvent: true,
             noDefault: true
         });
-        if (utils_1.default.isLayoutComponent(this.component) && this.component.clearOnHide === true && !this.hasValue()) {
-            utils_1.default.eachComponent(this.components, (component) => {
-                if (component.component.clearOnHide !== false) {
-                    component.setValue(null, {
-                        noUpdateEvent: true,
-                        noDefault: true
-                    });
-                    component.unset();
-                }
-            });
-        }
         this.unset();
     }
     getCustomDefaultValue(defaultValue) {
@@ -2726,6 +2734,11 @@ class Component extends Element_1.default {
                 this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);
             }
         }
+        // Also reset value of the modal component, otherwise it will keep the old value locally and the preview
+        // element won't refresh
+        if (this.componentModal && flags && flags.resetValue) {
+            this.componentModal.setValue(value);
+        }
         return changed;
     }
     /**

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

@@ -82,6 +82,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -101,6 +102,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -126,6 +128,7 @@ declare const _default: ({
         value: string;
     })[];
     placeholder?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -141,6 +144,7 @@ declare const _default: ({
     tooltip: string;
     key: string;
     input: boolean;
+    customConditional: string;
     logic: ({
         name: string;
         trigger: {
@@ -211,6 +215,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     as?: undefined;
     editor?: undefined;
@@ -226,6 +231,7 @@ declare const _default: ({
     placeholder?: undefined;
     inline?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -248,6 +254,7 @@ declare const _default: ({
     placeholder?: undefined;
     inline?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;

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

@@ -61,6 +61,7 @@ exports.default = [
         tooltip: 'Encrypt this field on the server. This is two way encryption which is not suitable for passwords.',
         key: 'encrypted',
         input: true,
+        customConditional: 'show = data.encrypted;',
         logic: [
             {
                 name: 'disabled',

package/lib/cjs/components/_classes/nested/NestedComponent.d.ts

@@ -108,6 +108,7 @@ export default class NestedComponent extends Field {
      * @returns {any} - The component that is located.
      */
     getComponent(path: string): any;
+    componentMatches: {} | undefined;
     /**
      * Return a component provided the Id of the component.
      * @param {string} id - The Id of the component.
@@ -154,7 +155,7 @@ export default class NestedComponent extends Field {
      * @param {import('@formio/core').Component[]} components - The components to attach logic to.
      */
     attachComponentsLogic(components: import('@formio/core').Component[]): void;
-    attachComponents(element: any, components: any, container: any): Promise<any>;
+    attachComponents(element: any, components: any, container: any): Promise<void> | Promise<any[]>;
     /**
      * Remove a component from the components array and from the children object
      * @param {import('@formio/core').Component} component - The component to remove from the components.

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

@@ -311,6 +311,13 @@ class NestedComponent extends Field_1.default {
      */
     getComponent(path) {
         var _a;
+        // If the component is found
+        if (!this.componentMatches) {
+            this.componentMatches = {};
+        }
+        if (this.componentMatches && this.componentMatches[path]) {
+            return this.componentMatches[path];
+        }
         path = utils_1.default.getStringFromComponentPath(path);
         const matches = {
             path: undefined,
@@ -336,7 +343,8 @@ class NestedComponent extends Field_1.default {
                 return match;
             });
         });
-        return (_a = utils_1.default.getBestMatch(matches)) === null || _a === void 0 ? void 0 : _a.instance;
+        this.componentMatches[path] = (_a = utils_1.default.getBestMatch(matches)) === null || _a === void 0 ? void 0 : _a.instance;
+        return this.componentMatches[path];
     }
     /**
      * Return a component provided the Id of the component.
@@ -530,8 +538,7 @@ class NestedComponent extends Field_1.default {
         container = container || this.component.components;
         element = this.hook('attachComponents', element, components, container, this);
         if (!element) {
-            // Return a non-resolving promise.
-            return (new Promise(() => { }));
+            return Promise.resolve();
         }
         let index = 0;
         const promises = [];
@@ -550,12 +557,16 @@ class NestedComponent extends Field_1.default {
      * @param {boolean} [all] - If set to TRUE will cascade remove all components.
      */
     removeComponent(component, components, all = false) {
+        var _a, _b;
         components = components || this.components;
         component.destroy(all);
         lodash_1.default.remove(components, { id: component.id });
         if (this.componentsMap[component.path]) {
             delete this.componentsMap[component.path];
         }
+        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.componentsMap[component.path]) {
+            (_b = this.root) === null || _b === void 0 ? true : delete _b.componentsMap[component.path];
+        }
     }
     /**
      * Removes a component provided the API key of that component.
@@ -800,8 +811,10 @@ class NestedComponent extends Field_1.default {
         return this.data;
     }
     resetValue() {
-        super.resetValue();
+        // Reset values of child components first, then reset the parent one, otherwise it will restore the default
+        // value of parent component and clear it one by one while resetting child components
         this.getComponents().forEach((comp) => comp.resetValue());
+        super.resetValue();
         this.setPristine(true);
     }
     get dataReady() {
@@ -813,7 +826,7 @@ class NestedComponent extends Field_1.default {
             return false;
         }
         if (component.type === 'components') {
-            if (component.tree && component.hasValue(value)) {
+            if ((component.tree || component.hasInput) && component.hasValue(value)) {
                 return component.setValue(lodash_1.default.get(value, component.key), flags);
             }
             return component.setValue(value, flags);

package/lib/cjs/components/address/Address.js

@@ -249,7 +249,7 @@ class AddressComponent extends Container_1.default {
         if (this.manualMode) {
             this.restoreComponentsContext();
         }
-        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission) {
+        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission || flags.resetValue) {
             this.redraw();
         }
         return changed;
@@ -571,11 +571,11 @@ class AddressComponent extends Container_1.default {
         }
         if (valueInManualMode) {
             if (this.component.manualModeViewString) {
-                return this.interpolate(this.component.manualModeViewString, {
+                return this.evaluate(this.component.manualModeViewString, {
                     address,
-                    data: this.data,
+                    data: value,
                     component: this.component,
-                });
+                }, 'value');
             }
             return this.getComponents()
                 .filter((component) => component.hasValue(address))

package/lib/cjs/components/address/editForm/Address.edit.provider.js

@@ -147,7 +147,7 @@ exports.default = [
         key: 'manualModeViewString',
         label: 'Manual Mode View String',
         placeholder: 'Enter Manual Mode View String',
-        description: '"address" variable references component value, "data" - submission data and "component" - address component schema.',
+        description: '"data.address" references component value and "component" - address component schema.',
         weight: 60,
         rows: 5,
         editor: 'ace',

package/lib/cjs/components/datagrid/DataGrid.js

@@ -419,12 +419,16 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     updateComponentsRowIndex(components, rowIndex) {
         components.forEach((component, colIndex) => {
             var _a;
+            if (this.componentsMap[component.paths.dataPath]) {
+                delete this.componentsMap[component.paths.dataPath];
+            }
             if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {
                 const newName = `[${this.key}][${rowIndex}]`;
                 component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);
             }
             component.rowIndex = rowIndex;
             component.row = `${rowIndex}-${colIndex}`;
+            this.componentsMap[component.paths.dataPath] = component;
         });
     }
     updateRowsComponents(rowIndex) {
@@ -492,11 +496,18 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
             options.onChange = (flags, changed, modified) => {
+                var _a, _b;
                 if (changed.component.type === 'form') {
                     const formComp = (0, utils_1.getComponent)(this.component.components, changed.component.key);
                     lodash_1.default.set(formComp, 'components', changed.component.components);
                 }
-                this.triggerChange({ modified });
+                // If we're in a nested form we need to ensure our changes are triggered upstream
+                if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {
+                    changed.instance.root.triggerChange(flags, changed, modified);
+                }
+                else {
+                    this.triggerChange({ modified });
+                }
             };
             let columnComponent;
             if (this.builderMode) {

package/lib/cjs/components/editgrid/EditGrid.d.ts

@@ -73,10 +73,10 @@ export default class EditGridComponent extends NestedArrayComponent {
         rowIndex: any;
     } | undefined;
     emptyRow: any;
-    addRowModal(rowIndex: any): Promise<any>;
+    addRowModal(rowIndex: any): Promise<void> | Promise<any[]>;
     alert: Alert | null | undefined;
     showDialog(rowIndex: any): Promise<any>;
-    editRow(rowIndex: any): Promise<any>;
+    editRow(rowIndex: any): Promise<void> | Promise<any[]>;
     clearErrors(rowIndex: any): void;
     cancelRow(rowIndex: any): void;
     saveRow(rowIndex: any, modified: any): boolean | undefined;
@@ -101,7 +101,6 @@ export default class EditGridComponent extends NestedArrayComponent {
     changeState(changed: any, flags: any): void;
     openWhenEmpty(): void;
     restoreRowContext(editRow: any, flags?: {}): void;
-    emptyRows(): void;
     hasChanged: (newValue: any, oldValue: any) => boolean;
 }
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';

package/lib/cjs/components/editgrid/EditGrid.js

@@ -1200,14 +1200,6 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             this.setNestedValue(component, editRow.data, flags);
         });
     }
-    emptyRows() {
-        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));
-        this.editRows = [];
-    }
-    resetValue() {
-        super.resetValue();
-        this.emptyRows();
-    }
 }
 exports.default = EditGridComponent;
 EditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;

package/lib/cjs/components/form/Form.d.ts

@@ -29,7 +29,7 @@ export default class FormComponent extends Component {
      * Prints out the value of form components as a datagrid value.
      */
     getValueAsString(value: any, options: any): any;
-    attach(element: any): Promise<void>;
+    attach(element: any): Promise<any>;
     get hasLoadedForm(): any;
     get isRevisionChanged(): any;
     get subFormData(): any;
@@ -42,6 +42,7 @@ export default class FormComponent extends Component {
     everyComponent(...args: any[]): any;
     setSubFormDisabled(subForm: any): void;
     updateSubWizards(subForm: any): void;
+    setComponentsMap(): void;
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.