@formio/js 5.0.0-rc.87 → 5.0.0-rc.89

package/lib/cjs/utils/utils.js

@@ -11,21 +11,9 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -37,6 +25,7 @@ exports._ = lodash_1.default;
 const json_logic_js_1 = __importDefault(require("json-logic-js"));
 exports.jsonLogic = json_logic_js_1.default;
 const moment_timezone_1 = __importDefault(require("moment-timezone/moment-timezone"));
+exports.moment = moment_timezone_1.default;
 const jstimezonedetect_1 = __importDefault(require("jstimezonedetect"));
 const operators_1 = require("./jsonlogic/operators");
 const dompurify_1 = __importDefault(require("dompurify"));
@@ -62,7 +51,6 @@ json_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {
 json_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {
     return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();
 });
-exports.moment = __importStar(require("moment-timezone/moment-timezone"));
 /**
  * Sets the path to the component and parent schema.
  * @param {import('@formio/core').Component} component - The component to set the path for.

package/lib/mjs/components/Components.js

@@ -1,6 +1,7 @@
 import Component from './_classes/component/Component';
 import EditFormUtils from './_classes/component/editForm/utils';
 import BaseEditForm from './_classes/component/Component.form';
+import { getComponentKey } from '../utils/utils';
 import _ from 'lodash';
 export default class Components {
     static _editFormUtils = EditFormUtils;
@@ -52,7 +53,8 @@ export default class Components {
      */
     static getComponentPath(component) {
         let path = '';
-        if (component.component.key) {
+        const componentKey = getComponentKey(component.component);
+        if (componentKey) {
             let thisPath = component.options?.parent || component;
             while (thisPath && !thisPath.allowData && thisPath.parent) {
                 thisPath = thisPath.parent;
@@ -64,7 +66,7 @@ export default class Components {
             const rowIndex = component.row;
             const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
             path = `${thisPath.path}${rowIndexPath}.`;
-            path += component.component.key;
+            path += componentKey;
             return _.trim(path, '.');
         }
         return path;

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

@@ -2904,7 +2904,7 @@ export default class Component extends Element {
         if (this.options.alwaysDirty) {
             flags.dirty = true;
         }
-        if (flags.fromSubmission && this.hasValue(data)) {
+        if (flags.fromSubmission && this.hasValue(data) && !(this.pristine && this.protected)) {
             flags.dirty = true;
         }
         this.setDirty(flags.dirty);
@@ -2931,6 +2931,7 @@ export default class Component extends Element {
             value: this.validationValue,
             path: this.path || this.component.key,
             instance: this,
+            form: this.root ? this.root._form : {},
             scope: { errors: [] },
             processors: [
                 validateProcessInfo
@@ -3404,6 +3405,9 @@ export default class Component extends Element {
         if ('beforeFocus' in this.parent) {
             this.parent.beforeFocus(this);
         }
+        if (!index && !_.isNumber(index) && this.refs?.input?.length) {
+            index = this.refs.input.length - 1;
+        }
         if (this.refs.input?.length) {
             const focusingInput = this.refs.input[index];
             if (this.component.widget?.type === 'calendar') {

package/lib/mjs/components/_classes/list/ListComponent.d.ts

@@ -1,6 +1,7 @@
 export default class ListComponent extends Field {
     get isSelectURL(): boolean;
     get selectData(): any;
+    get dataReady(): any;
     get shouldLoad(): boolean;
     getTemplateKeys(): void;
     templateKeys: string[] | undefined;
@@ -10,6 +11,9 @@ export default class ListComponent extends Field {
     loadItems(): void;
     getOptionTemplate(data: any, value: any, index: any): any;
     itemTemplate(data: any, value: any, index: any): any;
+    set itemsLoaded(promise: any);
+    get itemsLoaded(): any;
+    _itemsLoaded: any;
     handleLoadingError(err: any): void;
     loading: boolean | undefined;
     networkError: boolean | undefined;

package/lib/mjs/components/_classes/list/ListComponent.js

@@ -21,6 +21,16 @@ export default class ListComponent extends Field {
         const selectData = _.get(this.root, 'submission.metadata.selectData', {});
         return _.get(selectData, this.path);
     }
+    get dataReady() {
+        // If the root submission has been set, and we are still not attached, then assume
+        // that our data is ready.
+        if (this.root &&
+            this.root.submissionSet &&
+            !this.attached) {
+            return Promise.resolve();
+        }
+        return this.itemsLoaded;
+    }
     get shouldLoad() {
         if (this.loadingError) {
             return false;
@@ -107,6 +117,12 @@ export default class ListComponent extends Field {
             return this.sanitize(JSON.stringify(data), this.shouldSanitizeValue);
         }
     }
+    get itemsLoaded() {
+        return this._itemsLoaded || Promise.resolve();
+    }
+    set itemsLoaded(promise) {
+        this._itemsLoaded = promise;
+    }
     handleLoadingError(err) {
         this.loading = false;
         if (err.networkError) {
@@ -169,6 +185,7 @@ export default class ListComponent extends Field {
                     return;
                 }
                 let { url } = this.component.data;
+                url = _.trim(url);
                 let method;
                 let body;
                 if (url.startsWith('/')) {

package/lib/mjs/components/_classes/nested/fixtures/comp4.d.ts

@@ -0,0 +1,4 @@
+declare namespace _default {
+    let components: any[];
+}
+export default _default;

package/lib/mjs/components/_classes/nested/fixtures/comp4.js

@@ -0,0 +1,7 @@
+import comp from '../checkbox/comp2';
+export default {
+    components: [
+        { ...comp },
+        { ...comp, value: 'false' }
+    ]
+};

package/lib/mjs/components/_classes/nested/fixtures/index.d.ts

@@ -1,3 +1,4 @@
 export { default as comp1 } from "./comp1";
 export { default as comp2 } from "./comp2";
 export { default as comp3 } from "./comp3";
+export { default as comp4 } from "./comp4";

package/lib/mjs/components/_classes/nested/fixtures/index.js

@@ -1,3 +1,4 @@
 export { default as comp1 } from './comp1';
 export { default as comp2 } from './comp2';
 export { default as comp3 } from './comp3';
+export { default as comp4 } from './comp4';

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

@@ -210,6 +210,16 @@ export default class AddressComponent extends ContainerComponent {
     isValueInLegacyFormat(value) {
         return value && !value.mode;
     }
+    set dataValue(value) {
+        super.dataValue = value;
+    }
+    get dataValue() {
+        const resultValue = _.get(this._data, this.component.path);
+        if (!_.isArray(resultValue) && this.component.multiple) {
+            return [resultValue];
+        }
+        return super.dataValue;
+    }
     normalizeValue(value) {
         return (this.manualModeEnabled && this.isValueInLegacyFormat(value))
             ? {

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

@@ -495,26 +495,33 @@ export default class DayComponent extends Field {
             defaults = defaultValue.split('/').map(x => parseInt(x, 10));
         }
         if (this.showDay && this.refs.day) {
-            day = parseInt(this.refs.day.value, 10);
+            day = this.refs.day.value === '' ? '' : parseInt(this.refs.day.value, 10);
         }
         if (day === undefined || _.isNaN(day)) {
-            day = defaults[DAY] && !_.isNaN(defaults[DAY]) ? defaults[DAY] : 0;
+            day = (defaults.length !== 3 && value)
+                ? this.getDayWithHiddenFields(defaults).day
+                : (defaults[DAY] && !_.isNaN(defaults[DAY]) ? defaults[DAY] : 0);
         }
         if (this.showMonth && this.refs.month) {
             // Months are 0 indexed.
-            month = parseInt(this.refs.month.value, 10);
+            month = this.refs.month.value === '' ? '' : parseInt(this.refs.month.value, 10);
         }
         if (month === undefined || _.isNaN(month)) {
-            month = defaults[MONTH] && !_.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;
+            month = (defaults.length !== 3 && value)
+                ? this.getDayWithHiddenFields(defaults).month
+                : (defaults[MONTH] && !_.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0);
         }
         if (this.showYear && this.refs.year) {
-            year = parseInt(this.refs.year.value);
+            year = this.refs.year.value === '' ? '' : parseInt(this.refs.year.value);
         }
         if (year === undefined || _.isNaN(year)) {
-            year = defaults[YEAR] && !_.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;
+            year = (defaults.length !== 3 && value)
+                ? this.getDayWithHiddenFields(defaults).year
+                : (defaults[YEAR] && !_.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0);
         }
         let result;
         if (!day && !month && !year) {
+            this.dataValue = this.emptyValue;
             return null;
         }
         // add trailing zeros if the data is showed

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

@@ -23,10 +23,10 @@ export default class RadioComponent extends ListComponent {
     get listData(): any;
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
-    itemsLoaded: Promise<any> | undefined;
     itemsLoadedResolve: ((value: any) => void) | undefined;
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
+    beforeSubmit(): Promise<any>;
     render(): import("../_classes/field/Field").default;
     attach(element: any): Promise<void>;
     detach(element: any): void;

package/lib/mjs/components/radio/Radio.js

@@ -80,6 +80,14 @@ export default class RadioComponent extends ListComponent {
         }
         return defaultValue;
     }
+    resetValue() {
+        this.unset();
+        this.setValue(this.emptyValue, {
+            noUpdateEvent: true,
+            noValidate: true,
+            resetValue: true
+        });
+    }
     get inputInfo() {
         const info = super.elementInfo();
         info.type = 'input';
@@ -126,12 +134,23 @@ export default class RadioComponent extends ListComponent {
         this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
-        this.optionsLoaded = false;
+        this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';
         this.loadedOptions = [];
+        if (!this.visible) {
+            this.itemsLoadedResolve();
+        }
         // Get the template keys for this radio component.
         this.getTemplateKeys();
     }
+    beforeSubmit() {
+        return new Promise(res => {
+            this.dataReady.then(() => res(true));
+        });
+    }
     render() {
+        if (!this.optionsLoaded) {
+            return super.render(this.renderTemplate('loader'));
+        }
         return super.render(this.renderTemplate('radio', {
             input: this.inputInfo,
             inline: this.component.inline,
@@ -242,12 +261,22 @@ export default class RadioComponent extends ListComponent {
             this.refs.input[index].checked = (inputValue === value.toString());
         }
     }
+    get shouldLoad() {
+        // do not load options if the value is empty in readOnly and we have options available in metadata
+        if (this.options.readOnly && this.isEmpty() && this.listData) {
+            return false;
+        }
+        return super.shouldLoad;
+    }
     loadItems(url, search, headers, options, method, body) {
         if (this.optionsLoaded) {
+            this.itemsLoadedResolve();
             return;
         }
         if (!this.shouldLoad && this.listData) {
             this.loadItemsFromMetadata();
+            this.itemsLoadedResolve();
+            this.optionsLoaded = true;
             return;
         }
         // Ensure we have a method and remove any body if method is get
@@ -268,6 +297,7 @@ export default class RadioComponent extends ListComponent {
             this.redraw();
         })
             .catch((err) => {
+            this.optionsLoaded = true;
             this.handleLoadingError(err);
         });
     }
@@ -308,6 +338,7 @@ export default class RadioComponent extends ListComponent {
             }
             _.set(submission.metadata.listData, this.path, listData);
         }
+        this.itemsLoadedResolve();
     }
     setSelectedClasses() {
         if (this.refs.wrapper) {

package/lib/mjs/components/radio/fixtures/comp13.d.ts

@@ -0,0 +1,49 @@
+declare namespace _default {
+    let _id: string;
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        optionsLabelPosition: string;
+        inline: boolean;
+        tableView: boolean;
+        dataSrc: string;
+        values: {
+            label: string;
+            value: string;
+            shortcut: string;
+        }[];
+        valueProperty: string;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        data: {
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
+        };
+        input: boolean;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        optionsLabelPosition?: undefined;
+        inline?: undefined;
+        dataSrc?: undefined;
+        values?: undefined;
+        valueProperty?: undefined;
+        validateWhenHidden?: undefined;
+        data?: undefined;
+    })[];
+    let project: string;
+}
+export default _default;

package/lib/mjs/components/radio/fixtures/comp13.js

@@ -0,0 +1,47 @@
+export default {
+    _id: '66ebe22841267c275a4cb34e',
+    title: 'test radio url 1',
+    name: 'testRadioUrl1',
+    path: 'testradiourl1',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Radio',
+            optionsLabelPosition: 'right',
+            inline: false,
+            tableView: false,
+            dataSrc: 'url',
+            values: [
+                {
+                    label: '',
+                    value: '',
+                    shortcut: '',
+                },
+            ],
+            valueProperty: 'identifier',
+            validateWhenHidden: false,
+            key: 'radio',
+            type: 'radio',
+            data: {
+                url: 'https://test.test/options',
+                headers: [
+                    {
+                        key: '',
+                        value: '',
+                    },
+                ],
+            },
+            input: true,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+    project: '66e930e238963ab0230de6df',
+};

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

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

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

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

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

@@ -54,8 +54,6 @@ export default class SelectComponent extends ListComponent {
     static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
-    set itemsLoaded(promise: any);
-    get itemsLoaded(): any;
     itemsLoadedResolve: ((value: any) => void) | undefined;
     isFromSearch: boolean | undefined;
     searchServerCount: any;
@@ -65,7 +63,6 @@ export default class SelectComponent extends ListComponent {
     defaultDownloadedResources: any;
     activated: boolean | undefined;
     shouldPositionDropdown: any;
-    get dataReady(): any;
     get emptyValue(): {};
     get valueProperty(): any;
     get inputInfo(): any;
@@ -141,7 +138,6 @@ export default class SelectComponent extends ListComponent {
     lazyLoadInit: boolean | undefined;
     isInitApiCallNeeded(hasValue: any): any;
     setChoicesValue(value: any, hasPreviousValue: any, flags?: {}): void;
-    _itemsLoaded: any;
     validateValueAvailability(setting: any, value: any): boolean;
     /**
      * Performs required transformations on the initial value to use in selectOptions

package/lib/mjs/components/select/Select.js

@@ -151,16 +151,6 @@ export default class SelectComponent extends ListComponent {
         // Get the template keys for this select component.
         this.getTemplateKeys();
     }
-    get dataReady() {
-        // If the root submission has been set, and we are still not attached, then assume
-        // that our data is ready.
-        if (this.root &&
-            this.root.submissionSet &&
-            !this.attached) {
-            return Promise.resolve();
-        }
-        return this.itemsLoaded;
-    }
     get defaultSchema() {
         return SelectComponent.schema();
     }
@@ -1398,12 +1388,6 @@ export default class SelectComponent extends ListComponent {
             }
         }
     }
-    get itemsLoaded() {
-        return this._itemsLoaded || Promise.resolve();
-    }
-    set itemsLoaded(promise) {
-        this._itemsLoaded = promise;
-    }
     validateValueAvailability(setting, value) {
         if (!boolValue(setting) || !value) {
             return true;

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

@@ -0,0 +1,49 @@
+declare namespace _default {
+    let _id: string;
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        optionsLabelPosition: string;
+        tableView: boolean;
+        dataSrc: string;
+        values: {
+            label: string;
+            value: string;
+            shortcut: string;
+        }[];
+        valueProperty: string;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        data: {
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
+        };
+        input: boolean;
+        inputType: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        optionsLabelPosition?: undefined;
+        dataSrc?: undefined;
+        values?: undefined;
+        valueProperty?: undefined;
+        validateWhenHidden?: undefined;
+        data?: undefined;
+        inputType?: undefined;
+    })[];
+    let project: string;
+}
+export default _default;

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

@@ -0,0 +1,47 @@
+export default {
+    _id: '66ebfb1141267c275a4cce11',
+    title: 'test selectboxes url',
+    name: 'testSelectboxesUrl',
+    path: 'testselectboxesurl',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select Boxes',
+            optionsLabelPosition: 'right',
+            tableView: false,
+            dataSrc: 'url',
+            values: [
+                {
+                    label: '',
+                    value: '',
+                    shortcut: '',
+                },
+            ],
+            valueProperty: 'identifier',
+            validateWhenHidden: false,
+            key: 'selectBoxes',
+            type: 'selectboxes',
+            data: {
+                url: 'https://test.test/options',
+                headers: [
+                    {
+                        key: '',
+                        value: '',
+                    },
+                ],
+            },
+            input: true,
+            inputType: 'checkbox',
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+    project: '66e930e238963ab0230de6df',
+};

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 };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };

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

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

package/lib/mjs/utils/utils.d.ts

@@ -531,4 +531,4 @@ import jsonLogic from 'json-logic-js';
 import ConditionOperators from './conditionOperators';
 import { Evaluator } from './Evaluator';
 export const interpolate: typeof Evaluator.interpolate;
-export { jsonLogic, ConditionOperators, Evaluator, _ };
+export { jsonLogic, ConditionOperators, moment, Evaluator, _ };

package/lib/mjs/utils/utils.js

@@ -24,8 +24,7 @@ jsonLogic.add_operation('relativeMinDate', (relativeMinDate) => {
 jsonLogic.add_operation('relativeMaxDate', (relativeMaxDate) => {
     return moment().add(relativeMaxDate, 'days').toISOString();
 });
-export { jsonLogic, ConditionOperators };
-export * as moment from 'moment-timezone/moment-timezone';
+export { jsonLogic, ConditionOperators, moment };
 /**
  * Sets the path to the component and parent schema.
  * @param {import('@formio/core').Component} component - The component to set the path for.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.87",
+  "version": "5.0.0-rc.89",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -81,7 +81,7 @@
   "dependencies": {
     "@formio/bootstrap": "3.0.0-rc.37",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "2.3.0-rc.6",
+    "@formio/core": "2.3.0-rc.8",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",