@formio/js 5.0.0-dev.5734.79d4f47 → 5.0.0-dev.5739.0b95c46

package/lib/cjs/Form.d.ts

@@ -398,10 +398,10 @@ export default class Form extends Element {
     getFormInitOptions(url: string, form: import('@formio/core').Form): object;
     /**
      * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
-    setForm(formParam: import('@formio/core').Form): Promise<Webform | Wizard | PDF>;
+    setForm(formParam: import('@formio/core').Form | string): Promise<Webform | Wizard | PDF>;
     _form: any;
     getSubmission(formio: any, opts: any): any;
     /**

package/lib/cjs/Form.js

@@ -195,7 +195,7 @@ class Form extends Element_1.default {
     }
     /**
      * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
     setForm(formParam) {
@@ -222,8 +222,14 @@ class Form extends Element_1.default {
                     }
                     this.loading = false;
                     this.instance = this.instance || this.create(form.display);
-                    const options = this.getFormInitOptions(formParam, form);
-                    this.instance.setUrl(formParam, options);
+                    // If we're in builder mode, instance.setUrl is not a function, so just manually set the URL.
+                    if (this.instance.setUrl) {
+                        const options = this.getFormInitOptions(formParam, form);
+                        this.instance.setUrl(formParam, options);
+                    }
+                    else {
+                        this.instance.url = formParam;
+                    }
                     this.instance.nosubmit = false;
                     this._form = this.instance.form = form;
                     if (submission) {

package/lib/cjs/Webform.js

@@ -826,7 +826,6 @@ class Webform extends NestedDataComponent_1.default {
         if (!submission || !submission.data) {
             submission = {
                 data: {},
-                metadata: submission.metadata,
             };
         }
         // Metadata needs to be available before setValue

package/lib/cjs/components/datamap/DataMap.js

@@ -241,7 +241,7 @@ class DataMapComponent extends DataGrid_1.default {
             delete dataValue[key];
             const comp = components[this.valueKey];
             comp.component.key = newKey;
-            comp.path = Components_1.default.calculateComponentPath(comp);
+            comp.path = Components_1.default.getComponentPath(comp);
             key = newKey;
         });
         const valueComponent = lodash_1.default.clone(this.component.valueComponent);

package/lib/cjs/components/datetime/fixtures/comp14.d.ts

@@ -0,0 +1,35 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        tableView: boolean;
+        datePicker: {
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+        };
+        enableMinDateInput: boolean;
+        enableMaxDateInput: boolean;
+        validateWhenHidden: boolean;
+        key: string;
+        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/cjs/components/datetime/fixtures/comp14.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            "label": "Date / Time",
+            "tableView": false,
+            "datePicker": {
+                "disableWeekends": false,
+                "disableWeekdays": false
+            },
+            "enableMinDateInput": false,
+            "enableMaxDateInput": false,
+            "validateWhenHidden": false,
+            "key": "dateTime",
+            "type": "datetime",
+            "input": true,
+            "widget": {
+                "type": "calendar",
+                "displayInTimezone": "viewer",
+                "locale": "en",
+                "useLocaleSettings": false,
+                "allowInput": true,
+                "mode": "single",
+                "enableTime": true,
+                "noCalendar": false,
+                "format": "yyyy-MM-dd hh:mm a",
+                "hourIncrement": 1,
+                "minuteIncrement": 1,
+                "time_24hr": false,
+                "minDate": null,
+                "disableWeekends": false,
+                "disableWeekdays": false,
+                "maxDate": null
+            }
+        }
+    ]
+};

package/lib/cjs/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 comp14 from './comp14';
+export { comp1, comp2, comp3, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14 };

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp3 = exports.comp2 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp1 = void 0;
+exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -28,3 +28,5 @@ const comp12_1 = __importDefault(require("./comp12"));
 exports.comp12 = comp12_1.default;
 const comp13_1 = __importDefault(require("./comp13"));
 exports.comp13 = comp13_1.default;
+const comp14_1 = __importDefault(require("./comp14"));
+exports.comp14 = comp14_1.default;

package/lib/cjs/widgets/CalendarWidget.js

@@ -101,16 +101,10 @@ class CalendarWidget extends InputWidget_1.default {
         this.settings.altFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.format);
         this.settings.dateFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.dateFormat);
         this.settings.position = 'auto center';
+        // This is called when a date is picked in Flatpickrs calendar
         this.settings.onChange = () => {
-            if (this.settings.allowInput) {
-                if (this.settings.isManuallyOverriddenValue && this.settings.enableTime) {
-                    this.calendar._input.value = this.settings.manualInputValue;
-                }
-                else {
-                    this.settings.manualInputValue = '';
-                }
-                this.settings.isManuallyOverriddenValue = false;
-            }
+            // Because a date was picked using flatpickrs calendar we can be sure that we don't have a manually overridden value
+            this.settings.isManuallyOverriddenValue = false;
             this.emit('update');
         };
         this.settings.onOpen = () => this.hook('onCalendarOpen');
@@ -118,9 +112,13 @@ class CalendarWidget extends InputWidget_1.default {
             this.hook('onCalendarClose');
             this.closedOn = Date.now();
             if (this.settings.allowInput && this.settings.enableTime) {
-                this.calendar._input.value = this.settings.manualInputValue || this.calendar._input.value;
-                this.settings.isManuallyOverriddenValue = false;
-                this.emit('update');
+                // We need to make sure that this block of code runs after Flatpickr sets the inputs value so that we can
+                // override the value Flatpickr sets with a manual value if we are in the state of manually overridden value
+                setTimeout(() => {
+                    this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
+                    this._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
+                    this.emit('update');
+                });
             }
             if (this.settings.wasDefaultValueChanged) {
                 this.calendar._input.value = this.settings.defaultValue;
@@ -272,7 +270,7 @@ class CalendarWidget extends InputWidget_1.default {
      */
     getValue() {
         // Standard output format.
-        if (!this.calendar) {
+        if (!this.calendar || this.settings.isManuallyOverriddenValue) {
             return super.getValue();
         }
         // Get the selected dates from the calendar widget.
@@ -357,19 +355,24 @@ class CalendarWidget extends InputWidget_1.default {
         // Create a new flatpickr.
         this.calendar = new Flatpickr(this._input, Object.assign(Object.assign({}, this.settings), { disableMobile: true }));
         this.addEventListener(this.calendar.altInput, 'input', (event) => {
-            if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {
-                this.settings.manualInputValue = event.target.value;
-                this.settings.isManuallyOverriddenValue = true;
-                this.settings.currentValue = event.target.value;
-            }
-            if (event.target.value === '' && this.calendar.selectedDates.length > 0) {
-                this.settings.wasDefaultValueChanged = true;
-                this.settings.defaultValue = event.target.value;
-                this.calendar.clear();
-            }
-            else {
-                this.settings.wasDefaultValueChanged = false;
-            }
+            // Need to give time for the input mask to update so that the manualInputValue can be properly set
+            setTimeout(() => {
+                if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {
+                    this.settings.manualInputValue = event.target.value;
+                    this._input.value = this.settings.manualInputValue;
+                    this.settings.isManuallyOverriddenValue = true;
+                    this.settings.currentValue = event.target.value;
+                    this.emit('update');
+                }
+                if (event.target.value === '' && this.calendar.selectedDates.length > 0) {
+                    this.settings.wasDefaultValueChanged = true;
+                    this.settings.defaultValue = event.target.value;
+                    this.calendar.clear();
+                }
+                else {
+                    this.settings.wasDefaultValueChanged = false;
+                }
+            });
         });
         const excludedFromMaskFormats = ['MMMM'];
         if (!this.settings.readOnly && !lodash_1.default.some(excludedFromMaskFormats, format => lodash_1.default.includes(this.settings.format, format))) {
@@ -397,6 +400,10 @@ class CalendarWidget extends InputWidget_1.default {
         // Make sure we commit the value after a blur event occurs.
         this.addEventListener(this.calendar._input, 'blur', (event) => {
             var _a, _b, _c, _d;
+            // If we have manually overridden the value then we shouldn't call setDate because this will fill the input mask
+            if (this.settings.isManuallyOverriddenValue) {
+                return;
+            }
             const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;
             const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
             if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {

package/lib/mjs/Form.d.ts

@@ -398,10 +398,10 @@ export default class Form extends Element {
     getFormInitOptions(url: string, form: import('@formio/core').Form): object;
     /**
      * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
-    setForm(formParam: import('@formio/core').Form): Promise<Webform | Wizard | PDF>;
+    setForm(formParam: import('@formio/core').Form | string): Promise<Webform | Wizard | PDF>;
     _form: any;
     getSubmission(formio: any, opts: any): any;
     /**

package/lib/mjs/Form.js

@@ -264,7 +264,7 @@ export default class Form extends Element {
     }
     /**
      * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
     setForm(formParam) {
@@ -291,8 +291,14 @@ export default class Form extends Element {
                     }
                     this.loading = false;
                     this.instance = this.instance || this.create(form.display);
-                    const options = this.getFormInitOptions(formParam, form);
-                    this.instance.setUrl(formParam, options);
+                    // If we're in builder mode, instance.setUrl is not a function, so just manually set the URL.
+                    if (this.instance.setUrl) {
+                        const options = this.getFormInitOptions(formParam, form);
+                        this.instance.setUrl(formParam, options);
+                    }
+                    else {
+                        this.instance.url = formParam;
+                    }
                     this.instance.nosubmit = false;
                     this._form = this.instance.form = form;
                     if (submission) {

package/lib/mjs/Webform.js

@@ -830,7 +830,6 @@ export default class Webform extends NestedDataComponent {
         if (!submission || !submission.data) {
             submission = {
                 data: {},
-                metadata: submission.metadata,
             };
         }
         // Metadata needs to be available before setValue

package/lib/mjs/components/datamap/DataMap.js

@@ -236,7 +236,7 @@ export default class DataMapComponent extends DataGridComponent {
             delete dataValue[key];
             const comp = components[this.valueKey];
             comp.component.key = newKey;
-            comp.path = Components.calculateComponentPath(comp);
+            comp.path = Components.getComponentPath(comp);
             key = newKey;
         });
         const valueComponent = _.clone(this.component.valueComponent);

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

@@ -0,0 +1,35 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        tableView: boolean;
+        datePicker: {
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+        };
+        enableMinDateInput: boolean;
+        enableMaxDateInput: boolean;
+        validateWhenHidden: boolean;
+        key: string;
+        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/comp14.js

@@ -0,0 +1,36 @@
+export default {
+    components: [
+        {
+            "label": "Date / Time",
+            "tableView": false,
+            "datePicker": {
+                "disableWeekends": false,
+                "disableWeekdays": false
+            },
+            "enableMinDateInput": false,
+            "enableMaxDateInput": false,
+            "validateWhenHidden": false,
+            "key": "dateTime",
+            "type": "datetime",
+            "input": true,
+            "widget": {
+                "type": "calendar",
+                "displayInTimezone": "viewer",
+                "locale": "en",
+                "useLocaleSettings": false,
+                "allowInput": true,
+                "mode": "single",
+                "enableTime": true,
+                "noCalendar": false,
+                "format": "yyyy-MM-dd hh:mm a",
+                "hourIncrement": 1,
+                "minuteIncrement": 1,
+                "time_24hr": false,
+                "minDate": null,
+                "disableWeekends": false,
+                "disableWeekdays": false,
+                "maxDate": null
+            }
+        }
+    ]
+};

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 comp14 from './comp14';
+export { comp1, comp2, comp3, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14 };

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 comp14 from './comp14';
+export { comp1, comp2, comp3, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14 };

package/lib/mjs/widgets/CalendarWidget.js

@@ -95,16 +95,10 @@ export default class CalendarWidget extends InputWidget {
         this.settings.altFormat = convertFormatToFlatpickr(this.settings.format);
         this.settings.dateFormat = convertFormatToFlatpickr(this.settings.dateFormat);
         this.settings.position = 'auto center';
+        // This is called when a date is picked in Flatpickrs calendar
         this.settings.onChange = () => {
-            if (this.settings.allowInput) {
-                if (this.settings.isManuallyOverriddenValue && this.settings.enableTime) {
-                    this.calendar._input.value = this.settings.manualInputValue;
-                }
-                else {
-                    this.settings.manualInputValue = '';
-                }
-                this.settings.isManuallyOverriddenValue = false;
-            }
+            // Because a date was picked using flatpickrs calendar we can be sure that we don't have a manually overridden value
+            this.settings.isManuallyOverriddenValue = false;
             this.emit('update');
         };
         this.settings.onOpen = () => this.hook('onCalendarOpen');
@@ -112,9 +106,13 @@ export default class CalendarWidget extends InputWidget {
             this.hook('onCalendarClose');
             this.closedOn = Date.now();
             if (this.settings.allowInput && this.settings.enableTime) {
-                this.calendar._input.value = this.settings.manualInputValue || this.calendar._input.value;
-                this.settings.isManuallyOverriddenValue = false;
-                this.emit('update');
+                // We need to make sure that this block of code runs after Flatpickr sets the inputs value so that we can
+                // override the value Flatpickr sets with a manual value if we are in the state of manually overridden value
+                setTimeout(() => {
+                    this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
+                    this._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
+                    this.emit('update');
+                });
             }
             if (this.settings.wasDefaultValueChanged) {
                 this.calendar._input.value = this.settings.defaultValue;
@@ -264,7 +262,7 @@ export default class CalendarWidget extends InputWidget {
      */
     getValue() {
         // Standard output format.
-        if (!this.calendar) {
+        if (!this.calendar || this.settings.isManuallyOverriddenValue) {
             return super.getValue();
         }
         // Get the selected dates from the calendar widget.
@@ -348,19 +346,24 @@ export default class CalendarWidget extends InputWidget {
         // Create a new flatpickr.
         this.calendar = new Flatpickr(this._input, { ...this.settings, disableMobile: true });
         this.addEventListener(this.calendar.altInput, 'input', (event) => {
-            if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {
-                this.settings.manualInputValue = event.target.value;
-                this.settings.isManuallyOverriddenValue = true;
-                this.settings.currentValue = event.target.value;
-            }
-            if (event.target.value === '' && this.calendar.selectedDates.length > 0) {
-                this.settings.wasDefaultValueChanged = true;
-                this.settings.defaultValue = event.target.value;
-                this.calendar.clear();
-            }
-            else {
-                this.settings.wasDefaultValueChanged = false;
-            }
+            // Need to give time for the input mask to update so that the manualInputValue can be properly set
+            setTimeout(() => {
+                if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {
+                    this.settings.manualInputValue = event.target.value;
+                    this._input.value = this.settings.manualInputValue;
+                    this.settings.isManuallyOverriddenValue = true;
+                    this.settings.currentValue = event.target.value;
+                    this.emit('update');
+                }
+                if (event.target.value === '' && this.calendar.selectedDates.length > 0) {
+                    this.settings.wasDefaultValueChanged = true;
+                    this.settings.defaultValue = event.target.value;
+                    this.calendar.clear();
+                }
+                else {
+                    this.settings.wasDefaultValueChanged = false;
+                }
+            });
         });
         const excludedFromMaskFormats = ['MMMM'];
         if (!this.settings.readOnly && !_.some(excludedFromMaskFormats, format => _.includes(this.settings.format, format))) {
@@ -387,6 +390,10 @@ export default class CalendarWidget extends InputWidget {
         }
         // Make sure we commit the value after a blur event occurs.
         this.addEventListener(this.calendar._input, 'blur', (event) => {
+            // If we have manually overridden the value then we shouldn't call setDate because this will fill the input mask
+            if (this.settings.isManuallyOverriddenValue) {
+                return;
+            }
             const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;
             const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
             if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5734.79d4f47",
+  "version": "5.0.0-dev.5739.0b95c46",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {