@formio/js 5.1.0-rc.2 → 5.1.0-rc.20

package/lib/mjs/components/datetime/fixtures/index.d.ts

@@ -1,8 +1,4 @@
 import comp1 from './comp1';
-import comp10 from './comp10';
-import comp11 from './comp11';
-import comp12 from './comp12';
-import comp13 from './comp13';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp5 from './comp5';
@@ -10,4 +6,9 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
-export { comp1, comp10, comp11, comp12, comp13, comp2, comp3, comp5, comp6, comp7, comp8, comp9 };
+import comp10 from './comp10';
+import comp11 from './comp11';
+import comp12 from './comp12';
+import comp13 from './comp13';
+import requiredFieldLogicComp from './requiredFieldLogicComp';
+export { comp1, comp2, comp3, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, requiredFieldLogicComp };

package/lib/mjs/components/datetime/fixtures/index.js

@@ -10,4 +10,5 @@ import comp10 from './comp10';
 import comp11 from './comp11';
 import comp12 from './comp12';
 import comp13 from './comp13';
-export { comp1, comp10, comp11, comp12, comp13, comp2, comp3, comp5, comp6, comp7, comp8, comp9 };
+import requiredFieldLogicComp from './requiredFieldLogicComp';
+export { comp1, comp2, comp3, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, requiredFieldLogicComp };

package/lib/mjs/components/datetime/fixtures/requiredFieldLogicComp.d.ts

@@ -0,0 +1,57 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        displayInTimezone: string;
+        format: string;
+        tableView: boolean;
+        datePicker: {
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+        };
+        timePicker: {
+            showMeridian: boolean;
+        };
+        enableMinDateInput: boolean;
+        enableMaxDateInput: boolean;
+        validateWhenHidden: boolean;
+        key: string;
+        logic: {
+            name: string;
+            trigger: {
+                type: string;
+                javascript: string;
+            };
+            actions: {
+                name: string;
+                type: string;
+                property: {
+                    label: string;
+                    value: string;
+                    type: string;
+                };
+                state: boolean;
+            }[];
+        }[];
+        type: string;
+        input: boolean;
+        widget: {
+            type: string;
+            displayInTimezone: string;
+            locale: string;
+            useLocaleSettings: boolean;
+            allowInput: boolean;
+            mode: string;
+            enableTime: boolean;
+            noCalendar: boolean;
+            format: string;
+            hourIncrement: number;
+            minuteIncrement: number;
+            time_24hr: boolean;
+            minDate: null;
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            maxDate: null;
+        };
+    }[];
+}
+export default _default;

package/lib/mjs/components/datetime/fixtures/requiredFieldLogicComp.js

@@ -0,0 +1,62 @@
+export default {
+    components: [
+        {
+            "label": "dateTime",
+            "displayInTimezone": "submission",
+            "format": "MM/dd/yyyy:HH:mm:ss",
+            "tableView": false,
+            "datePicker": {
+                "disableWeekends": false,
+                "disableWeekdays": false
+            },
+            "timePicker": {
+                "showMeridian": false
+            },
+            "enableMinDateInput": false,
+            "enableMaxDateInput": false,
+            "validateWhenHidden": false,
+            "key": "dateTime",
+            "logic": [
+                {
+                    "name": "requiredLogic",
+                    "trigger": {
+                        "type": "javascript",
+                        "javascript": "result = true;"
+                    },
+                    "actions": [
+                        {
+                            "name": "setRequired",
+                            "type": "property",
+                            "property": {
+                                "label": "Required",
+                                "value": "validate.required",
+                                "type": "boolean"
+                            },
+                            "state": true
+                        }
+                    ]
+                }
+            ],
+            "type": "datetime",
+            "input": true,
+            "widget": {
+                "type": "calendar",
+                "displayInTimezone": "submission",
+                "locale": "en",
+                "useLocaleSettings": false,
+                "allowInput": true,
+                "mode": "single",
+                "enableTime": true,
+                "noCalendar": false,
+                "format": "MM/dd/yyyy:HH:mm:ss",
+                "hourIncrement": 1,
+                "minuteIncrement": 1,
+                "time_24hr": true,
+                "minDate": null,
+                "disableWeekends": false,
+                "disableWeekdays": false,
+                "maxDate": null
+            }
+        }
+    ]
+};

package/lib/mjs/components/day/Day.d.ts

@@ -85,7 +85,7 @@ export default class DayComponent extends Field {
     }[] | undefined;
     setErrorClasses(elements: any, dirty: any, hasError: any): void;
     dayFirst: any;
-    render(): Field;
+    render(): string;
     renderField(name: any): any;
     attach(element: any): Promise<void>;
     set disabled(disabled: any);

package/lib/mjs/components/day/Day.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import Field from '../_classes/field/Field';
 import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
+import { getDayFormat } from '@formio/core';
 export default class DayComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -474,24 +475,7 @@ export default class DayComponent extends Field {
      * @returns {string} - the format for the value string.
      */
     get format() {
-        let format = '';
-        if (this.component.dayFirst && this.showDay) {
-            format += 'D/';
-        }
-        if (this.showMonth) {
-            format += 'M/';
-        }
-        if (!this.component.dayFirst && this.showDay) {
-            format += 'D/';
-        }
-        if (this.showYear) {
-            format += 'YYYY';
-            return format;
-        }
-        else {
-            // Trim off the "/" from the end of the format string.
-            return format.length ? format.substring(0, format.length - 1) : format;
-        }
+        return getDayFormat(this.component);
     }
     /**
      * Return the date for this component.

package/lib/mjs/components/editgrid/fixtures/index.d.ts

@@ -20,4 +20,4 @@ import comp20 from './comp20';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp18, comp19, comp20, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue };

package/lib/mjs/components/editgrid/fixtures/index.js

@@ -14,12 +14,10 @@ import comp13 from './comp13';
 import comp14 from './comp14';
 import comp15 from './comp15';
 import comp16 from './comp16';
-import comp17 from './comp17';
 import comp18 from './comp18';
 import comp19 from './comp19';
 import comp20 from './comp20';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
-import compTestEvents from './comp-test-events';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp18, comp19, comp20, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue };

package/lib/mjs/components/file/File.d.ts

@@ -45,7 +45,7 @@ export default class FileComponent extends Field {
         type: number;
         actions: number;
     };
-    render(): Field;
+    render(): string;
     getVideoStream(constraints: any): any;
     stopVideoStream(videoStream: any): void;
     getFrame(videoPlayer: any): Promise<any>;

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

@@ -32,6 +32,7 @@ export default class FormComponent extends Component {
     attach(element: any): Promise<void>;
     get hasLoadedForm(): any;
     get isRevisionChanged(): any;
+    get subFormData(): any;
     subFormReady: Promise<any> | null | undefined;
     /**
      * Pass everyComponent to subform.
@@ -44,16 +45,18 @@ export default class FormComponent extends Component {
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
+     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.
      * @returns {*} - The subform instance.
      */
-    createSubForm(fromAttach?: boolean | undefined): any;
+    createSubForm(fromAttach?: boolean | undefined, beforeSubmit?: boolean | undefined): any;
     hideSubmitButton(component: any): void;
     /**
      * Load the subform.
      * @param {boolean} fromAttach - This function is being called from an `attach` method.
+     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
-    loadSubForm(fromAttach: boolean): Promise<any>;
+    loadSubForm(fromAttach: boolean, beforeSubmit: boolean): Promise<any>;
     subFormLoading: boolean | undefined;
     checkComponentConditions(data: any, flags: any, row: any): any;
     calculateValue(data: any, flags: any, row: any): any;

package/lib/mjs/components/form/Form.js

@@ -138,6 +138,8 @@ export default class FormComponent extends Component {
         options.events = this.createEmitter();
         // Make sure to not show the submit button in wizards in the nested forms.
         _.set(options, 'buttonSettings.showSubmit', false);
+        // Set the parent option to the subform so those references are stable when the subform is created
+        options.parent = this;
         if (!this.options) {
             return options;
         }
@@ -327,6 +329,9 @@ export default class FormComponent extends Component {
             && _.isNumber(this.formObj._vid)
             && this.formObj._vid !== this.subFormRevision;
     }
+    get subFormData() {
+        return this.dataValue?.data || {};
+    }
     destroy(all = false) {
         if (this.subForm) {
             this.subForm.destroy(all);
@@ -370,10 +375,11 @@ export default class FormComponent extends Component {
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
+     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.
      * @returns {*} - The subform instance.
      */
-    createSubForm(fromAttach) {
-        this.subFormReady = this.loadSubForm(fromAttach).then((form) => {
+    createSubForm(fromAttach, beforeSubmit) {
+        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {
             if (!form) {
                 return;
             }
@@ -389,12 +395,11 @@ export default class FormComponent extends Component {
             return (new Form(form, this.getSubOptions())).ready.then((instance) => {
                 this.subForm = instance;
                 this.subForm.currentForm = this;
+                this.subForm.parentVisible = this.visible;
                 const componentsMap = this.componentsMap;
                 const formComponentsMap = this.subForm.componentsMap;
                 _.assign(componentsMap, formComponentsMap);
                 this.component.components = this.subForm.components.map((comp) => comp.component);
-                this.subForm.parent = this;
-                this.subForm.parentVisible = this.visible;
                 this.subForm.on('change', () => {
                     if (this.subForm) {
                         this.dataValue = this.subForm.getValue();
@@ -431,10 +436,12 @@ export default class FormComponent extends Component {
     /**
      * Load the subform.
      * @param {boolean} fromAttach - This function is being called from an `attach` method.
+     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
-    loadSubForm(fromAttach) {
-        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
+    loadSubForm(fromAttach, beforeSubmit) {
+        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;
+        if (this.builderMode || (this.conditionallyHidden && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -476,14 +483,14 @@ export default class FormComponent extends Component {
             return visible;
         }
         if (this.subForm) {
-            return this.subForm.checkConditions(data, flags, row);
+            return this.subForm.checkConditions(this.subFormData, flags);
         }
         // There are few cases when subForm is not loaded when a change is triggered,
         // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode
         else if (this.subFormReady) {
             this.subFormReady.then(() => {
                 if (this.subForm) {
-                    return this.subForm.checkConditions(data, flags, row);
+                    return this.subForm.checkConditions(this.subFormData, flags);
                 }
             });
         }
@@ -491,7 +498,7 @@ export default class FormComponent extends Component {
     }
     calculateValue(data, flags, row) {
         if (this.subForm) {
-            return this.subForm.calculateValue(data, flags, row);
+            return this.subForm.calculateValue(this.subFormData, flags);
         }
         return super.calculateValue(data, flags, row);
     }
@@ -506,7 +513,7 @@ export default class FormComponent extends Component {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
-        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.conditionallyHidden;
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && (!this.conditionallyHidden || !this.component.clearOnHide);
     }
     /**
      * Returns the data for the subform.
@@ -576,11 +583,23 @@ export default class FormComponent extends Component {
             this.dataValue = submission;
             return Promise.resolve(this.dataValue);
         }
-        return this.submitSubForm(false)
-            .then(() => {
-            return this.dataValue;
-        })
-            .then(() => super.beforeSubmit());
+        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data
+        const loadHiddenForm = !this.subForm && !this.component.clearOnHide;
+        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading) {
+            return this.createSubForm(true, true)
+                .then(this.submitSubForm(false))
+                .then(() => {
+                return this.dataValue;
+            })
+                .then(() => super.beforeSubmit());
+        }
+        else {
+            return this.submitSubForm(false)
+                .then(() => {
+                return this.dataValue;
+            })
+                .then(() => super.beforeSubmit());
+        }
     }
     isSubFormLazyLoad() {
         return this.root?._form?.display === 'wizard' && this.component.lazyLoad;

package/lib/mjs/components/form/editForm/Form.edit.data.js

@@ -6,7 +6,7 @@ export default [
     {
         weight: 140,
         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.',

package/lib/mjs/components/radio/Radio.d.ts

@@ -28,7 +28,7 @@ export default class RadioComponent extends ListComponent {
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
     beforeSubmit(): Promise<any>;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     attach(element: any): Promise<void>;
     detach(element: any): void;
     validateValueProperty(): boolean;

package/lib/mjs/components/select/Select.d.ts

@@ -112,7 +112,7 @@ export default class SelectComponent extends ListComponent {
     activate(): void;
     setLoadingItem(addToCurrentList?: boolean): void;
     get active(): boolean | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     wrapElement(element: any): any;
     choicesOptions(): any;
     attach(element: any): Promise<void> | undefined;

package/lib/mjs/components/selectboxes/fixtures/index.d.ts

@@ -5,4 +5,5 @@ import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };
+import comp8 from './comp8';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };

package/lib/mjs/components/selectboxes/fixtures/index.js

@@ -5,4 +5,5 @@ import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };
+import comp8 from './comp8';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };

package/lib/mjs/components/survey/Survey.d.ts

@@ -14,7 +14,7 @@ export default class SurveyComponent extends Field {
         operators: string[];
     };
     static savedValueTypes(schema: any): string[];
-    render(): Field;
+    render(): string;
     attach(element: any): Promise<void>;
     setValue(value: any, flags?: {}): boolean;
     get emptyValue(): {};

package/lib/mjs/components/table/Table.d.ts

@@ -19,6 +19,6 @@ export default class TableComponent extends NestedComponent {
     get colWidth(): string;
     noField: boolean;
     table: any[] | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/mjs/components/tabs/Tabs.d.ts

@@ -16,7 +16,7 @@ export default class TabsComponent extends NestedComponent {
     currentTab: number;
     noField: boolean;
     tabs: any[] | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     detach(all: any): void;
     /**
      * Set the current tab.

package/lib/mjs/components/tags/fixtures/index.d.ts

@@ -4,4 +4,4 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };
+export { comp1, comp2, comp3, comp4, comp5, comp6 };

package/lib/mjs/components/tags/fixtures/index.js

@@ -4,6 +4,4 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-import comp7 from './comp7';
-import comp8 from './comp8';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };
+export { comp1, comp2, comp3, comp4, comp5, comp6 };

package/lib/mjs/components/textfield/TextField.js

@@ -86,6 +86,9 @@ export default class TextFieldComponent extends Input {
                 locale: this.component.widget.locale || this.options.language,
                 saveAs: 'text'
             };
+            // update originalComponent to include widget settings after component initialization 
+            // originalComponent is used to restore the component (and widget) after evaluating field logic 
+            this.originalComponent = FormioUtils.fastCloneDeep(this.component);
         }
     }
     attach(element) {

package/lib/mjs/components/textfield/fixtures/index.d.ts

@@ -6,4 +6,5 @@ import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
 import withDisplayAndInputMasks from './comp-with-display-and-value-masks';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, withDisplayAndInputMasks };
+import requiredFieldLogicComp from './requiredFieldLogicComp';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, withDisplayAndInputMasks, requiredFieldLogicComp };

package/lib/mjs/components/textfield/fixtures/index.js

@@ -6,4 +6,5 @@ import comp5 from './comp5';
 import comp6 from './comp6';
 import withDisplayAndInputMasks from './comp-with-display-and-value-masks';
 import comp7 from './comp7';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, withDisplayAndInputMasks };
+import requiredFieldLogicComp from './requiredFieldLogicComp';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, withDisplayAndInputMasks, requiredFieldLogicComp };

package/lib/mjs/components/textfield/fixtures/requiredFieldLogicComp.d.ts

@@ -0,0 +1,48 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        widget: {
+            type: string;
+            altInput: boolean;
+            allowInput: boolean;
+            clickOpens: boolean;
+            enableDate: boolean;
+            enableTime: boolean;
+            mode: string;
+            noCalendar: boolean;
+            format: string;
+            dateFormat: string;
+            useLocaleSettings: boolean;
+            hourIncrement: number;
+            minuteIncrement: number;
+            time_24hr: boolean;
+            saveAs: string;
+            displayInTimezone: string;
+            locale: string;
+        };
+        applyMaskOn: string;
+        tableView: boolean;
+        validateWhenHidden: boolean;
+        key: string;
+        logic: {
+            name: string;
+            trigger: {
+                type: string;
+                javascript: string;
+            };
+            actions: {
+                name: string;
+                type: string;
+                property: {
+                    label: string;
+                    value: string;
+                    type: string;
+                };
+                state: boolean;
+            }[];
+        }[];
+        type: string;
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/mjs/components/textfield/fixtures/requiredFieldLogicComp.js

@@ -0,0 +1,53 @@
+export default {
+    components: [
+        {
+            "label": "Text Field",
+            "widget": {
+                "type": "calendar",
+                "altInput": true,
+                "allowInput": true,
+                "clickOpens": true,
+                "enableDate": true,
+                "enableTime": true,
+                "mode": "single",
+                "noCalendar": false,
+                "format": "MM/dd/yyyy:HH:mm:ss",
+                "dateFormat": "MM/dd/yyyy:HH:mm:ss",
+                "useLocaleSettings": false,
+                "hourIncrement": 1,
+                "minuteIncrement": 5,
+                "time_24hr": false,
+                "saveAs": "text",
+                "displayInTimezone": "viewer",
+                "locale": "en"
+            },
+            "applyMaskOn": "change",
+            "tableView": true,
+            "validateWhenHidden": false,
+            "key": "textField",
+            "logic": [
+                {
+                    "name": "requiredLogic",
+                    "trigger": {
+                        "type": "javascript",
+                        "javascript": "result = true;"
+                    },
+                    "actions": [
+                        {
+                            "name": "setRequired",
+                            "type": "property",
+                            "property": {
+                                "label": "Required",
+                                "value": "validate.required",
+                                "type": "boolean"
+                            },
+                            "state": true
+                        }
+                    ]
+                }
+            ],
+            "type": "textfield",
+            "input": true
+        }
+    ]
+};

package/lib/mjs/formio.embed.d.ts

@@ -1 +1 @@
-export {};
+export { Formio } from "./InlineEmbed";

package/lib/mjs/formio.embed.js

@@ -1,2 +1,3 @@
 import { embed } from './InlineEmbed';
 embed();
+export { Formio } from './InlineEmbed';

package/lib/mjs/providers/address/GoogleAddressProvider.d.ts

@@ -82,6 +82,11 @@ export class GoogleAddressProvider extends AddressProvider {
     search(): Promise<void>;
     makeRequest(): Promise<void>;
     getDisplayValue(address: any): any;
+    /**
+     * Tries to remove the library if api key for loaded script is different.
+     * @param {ProviderOptions} options - The options for the provider.
+     */
+    tryRemoveLibrary(options?: ProviderOptions): void;
 }
 export type AutocompleteOptions = {
     /**