@formio/js 5.0.0-dev.5794.12ca15f → 5.0.0-dev.5797.3f96a70

package/lib/cjs/components/select/fixtures/comp25.d.ts

@@ -1,44 +1,59 @@
 declare namespace _default {
-    let title: string;
-    let name: string;
-    let path: string;
-    let type: string;
-    let display: string;
     let components: ({
         label: string;
-        widget: string;
         tableView: boolean;
-        data: {
-            values: {
-                label: string;
-                value: string;
-            }[];
-        };
-        dataType: string;
+        modal: boolean;
+        rowDrafts: boolean;
         key: string;
         type: string;
+        displayAsTable: boolean;
         input: boolean;
-        applyMaskOn?: undefined;
-        conditional?: undefined;
+        components: ({
+            label: string;
+            widget: string;
+            tableView: boolean;
+            data: {
+                values: {
+                    label: string;
+                    value: string;
+                }[];
+            };
+            validate: {
+                required: boolean;
+            };
+            key: string;
+            type: string;
+            input: boolean;
+            applyMaskOn?: undefined;
+            validateWhenHidden?: undefined;
+        } | {
+            label: string;
+            applyMaskOn: string;
+            tableView: boolean;
+            validate: {
+                required: boolean;
+            };
+            validateWhenHidden: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            widget?: undefined;
+            data?: undefined;
+        })[];
+        showValidations?: undefined;
+        saveOnEnter?: undefined;
     } | {
         label: string;
-        applyMaskOn: string;
+        showValidations: boolean;
         tableView: boolean;
         key: string;
         type: string;
         input: boolean;
-        conditional: {
-            show: boolean;
-            conjunction: string;
-            conditions: {
-                component: string;
-                operator: string;
-                value: number;
-            }[];
-        };
-        widget?: undefined;
-        data?: undefined;
-        dataType?: undefined;
+        saveOnEnter: boolean;
+        modal?: undefined;
+        rowDrafts?: undefined;
+        displayAsTable?: undefined;
+        components?: undefined;
     })[];
 }
 export default _default;

package/lib/cjs/components/select/fixtures/comp25.js

@@ -1,59 +1,66 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    title: 'FIO-8072',
-    name: 'fio8072',
-    path: 'fio8072',
-    type: 'form',
-    display: 'form',
-    components: [
+    "components": [
         {
-            label: 'Select',
-            widget: 'choicesjs',
-            tableView: true,
-            data: {
-                values: [
-                    {
-                        label: 'A',
-                        value: '1',
+            "label": "Edit Grid",
+            "tableView": false,
+            "modal": true,
+            "rowDrafts": true,
+            "key": "editGrid",
+            "type": "editgrid",
+            "displayAsTable": false,
+            "input": true,
+            "components": [
+                {
+                    "label": "Select",
+                    "widget": "choicesjs",
+                    "tableView": true,
+                    "data": {
+                        "values": [
+                            {
+                                "label": "a",
+                                "value": "a"
+                            },
+                            {
+                                "label": "b",
+                                "value": "b"
+                            },
+                            {
+                                "label": "c",
+                                "value": "c"
+                            }
+                        ]
                     },
-                    {
-                        label: 'B',
-                        value: '2',
+                    "validate": {
+                        "required": true
                     },
-                    {
-                        label: 'C',
-                        value: '10',
+                    "key": "select",
+                    "type": "select",
+                    "input": true
+                },
+                {
+                    "label": "Text Field",
+                    "applyMaskOn": "change",
+                    "tableView": true,
+                    "validate": {
+                        "required": true
                     },
-                    {
-                        label: 'D',
-                        value: '1d',
-                    },
-                ],
-            },
-            dataType: 'number',
-            key: 'select',
-            type: 'select',
-            input: true,
+                    "validateWhenHidden": false,
+                    "key": "textField",
+                    "type": "textfield",
+                    "input": true
+                }
+            ]
         },
         {
-            label: 'Text Field',
-            applyMaskOn: 'change',
-            tableView: true,
-            key: 'textField',
-            type: 'textfield',
-            input: true,
-            conditional: {
-                show: true,
-                conjunction: 'all',
-                conditions: [
-                    {
-                        component: 'select',
-                        operator: 'lessThan',
-                        value: 5,
-                    },
-                ],
-            },
-        },
-    ],
+            "label": "Submit",
+            "showValidations": false,
+            "tableView": false,
+            "key": "submit",
+            "type": "button",
+            "input": true,
+            "saveOnEnter": false
+        }
+    ]
 };

package/lib/cjs/components/select/fixtures/comp26.d.ts

@@ -0,0 +1,44 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        widget: string;
+        tableView: boolean;
+        data: {
+            values: {
+                label: string;
+                value: string;
+            }[];
+        };
+        dataType: string;
+        key: string;
+        type: string;
+        input: boolean;
+        applyMaskOn?: undefined;
+        conditional?: undefined;
+    } | {
+        label: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        conditional: {
+            show: boolean;
+            conjunction: string;
+            conditions: {
+                component: string;
+                operator: string;
+                value: number;
+            }[];
+        };
+        widget?: undefined;
+        data?: undefined;
+        dataType?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/select/fixtures/comp26.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    title: 'FIO-8072',
+    name: 'fio8072',
+    path: 'fio8072',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            data: {
+                values: [
+                    {
+                        label: 'A',
+                        value: '1',
+                    },
+                    {
+                        label: 'B',
+                        value: '2',
+                    },
+                    {
+                        label: 'C',
+                        value: '10',
+                    },
+                    {
+                        label: 'D',
+                        value: '1d',
+                    },
+                ],
+            },
+            dataType: 'number',
+            key: 'select',
+            type: 'select',
+            input: true,
+        },
+        {
+            label: 'Text Field',
+            applyMaskOn: 'change',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            input: true,
+            conditional: {
+                show: true,
+                conjunction: 'all',
+                conditions: [
+                    {
+                        component: 'select',
+                        operator: 'lessThan',
+                        value: 5,
+                    },
+                ],
+            },
+        },
+    ],
+};

package/lib/cjs/components/select/fixtures/index.d.ts

@@ -22,5 +22,6 @@ import comp22 from './comp22';
 import comp23 from './comp23';
 import comp24 from './comp24';
 import comp25 from './comp25';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23, comp24, comp25 };
+import comp26 from './comp26';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23, comp24, comp25, comp26 };
 export { multiSelect, multiSelectOptions } from "./comp3";

package/lib/cjs/components/select/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.comp25 = exports.comp24 = exports.comp23 = exports.comp22 = exports.comp21 = exports.comp20 = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
+exports.comp26 = exports.comp25 = exports.comp24 = exports.comp23 = exports.comp22 = exports.comp21 = exports.comp20 = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -55,3 +55,5 @@ const comp24_1 = __importDefault(require("./comp24"));
 exports.comp24 = comp24_1.default;
 const comp25_1 = __importDefault(require("./comp25"));
 exports.comp25 = comp25_1.default;
+const comp26_1 = __importDefault(require("./comp26"));
+exports.comp26 = comp26_1.default;

package/lib/cjs/widgets/CalendarWidget.js

@@ -102,14 +102,8 @@ class CalendarWidget extends InputWidget_1.default {
         this.settings.dateFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.dateFormat);
         this.settings.position = 'auto center';
         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;
+            if (this.settings.allowInput && this.settings.enableTime) {
+                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
             }
             this.emit('update');
         };
@@ -118,8 +112,7 @@ 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.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
                 this.emit('update');
             }
             if (this.settings.wasDefaultValueChanged) {
@@ -358,9 +351,14 @@ class CalendarWidget extends InputWidget_1.default {
         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) {
+                if (event.target.mask) {
+                    event.target.mask.textMaskInputElement.update();
+                }
                 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;
@@ -371,6 +369,18 @@ class CalendarWidget extends InputWidget_1.default {
                 this.settings.wasDefaultValueChanged = false;
             }
         });
+        if (this.calendar.daysContainer) {
+            this.calendar.daysContainer.addEventListener('click', () => {
+                this.settings.isManuallyOverriddenValue = false;
+                this.calendar.updateValue(false);
+            });
+        }
+        if (this.calendar.timeContainer) {
+            this.calendar.timeContainer.addEventListener('click', () => {
+                this.settings.isManuallyOverriddenValue = false;
+                this.calendar.updateValue(false);
+            });
+        }
         const excludedFromMaskFormats = ['MMMM'];
         if (!this.settings.readOnly && !lodash_1.default.some(excludedFromMaskFormats, format => lodash_1.default.includes(this.settings.format, format))) {
             // Enforce the input mask of the format.
@@ -397,6 +407,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/Webform.js

@@ -1247,10 +1247,14 @@ export default class Webform extends NestedDataComponent {
         }
         this.checkData(value.data, flags);
         const shouldValidate = !flags.noValidate ||
-            flags.fromIFrame ||
+            flags.fromIframe ||
             (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
         const errors = shouldValidate
-            ? this.validate(value.data, { ...flags, process: "change" })
+            ? this.validate(value.data, {
+                ...flags,
+                noValidate: false,
+                process: 'change'
+            })
             : [];
         value.isValid = errors.length === 0;
         this.loading = false;

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

@@ -1076,7 +1076,7 @@ declare class Component extends Element {
     elementInfo(): any;
     autofocus(): void;
     scrollIntoView(element?: any): void;
-    focus(index?: number): void;
+    focus(index: any): void;
     /**
      * Get `Formio` instance for working with files
      * @returns {import('@formio/core').Formio} - The Formio instance file service.

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

@@ -2988,7 +2988,7 @@ export default class Component extends Element {
                         this.parent.childErrors.push(...errors);
                     }
                     else {
-                        _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                        _.remove(this.parent.childErrors, (err) => (err?.component?.key || err?.context?.key) === this.component.key);
                     }
                 }
                 this.showValidationErrors(errors, data, row, flags);
@@ -3004,7 +3004,7 @@ export default class Component extends Element {
                     this.parent.childErrors.push(...errors);
                 }
                 else {
-                    _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                    _.remove(this.parent.childErrors, (err) => (err?.component?.key || err?.context?.key) === this.component.key);
                 }
             }
             return errors.length === 0;
@@ -3425,10 +3425,11 @@ export default class Component extends Element {
         const { left, top } = element.getBoundingClientRect();
         window.scrollTo(left + window.scrollX, top + window.scrollY);
     }
-    focus(index = (this.refs.input.length - 1)) {
+    focus(index) {
         if ('beforeFocus' in this.parent) {
             this.parent.beforeFocus(this);
         }
+        index = 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/multivalue/Multivalue.d.ts

@@ -1,4 +1,12 @@
 export default class Multivalue extends Field {
+    /**
+     * Normalize values coming into updateValue.
+     * @param {*} value - The value to normalize before setting.
+     * @param {Object} flags - Flags to use when normalizing the value.
+     * @param {*} emptyValue - The empty value for the field.
+     * @returns {*} - The normalized value.
+     */
+    normalizeValue(value: any, flags?: Object, emptyValue?: any): any;
     get addAnother(): string;
     /**
      * @returns {Field} - The created field.

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -4,37 +4,39 @@ export default class Multivalue extends Field {
     /**
      * Normalize values coming into updateValue.
      * @param {*} value - The value to normalize before setting.
+     * @param {Object} flags - Flags to use when normalizing the value.
+     * @param {*} emptyValue - The empty value for the field.
      * @returns {*} - The normalized value.
      */
-    normalizeValue(value) {
+    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {
         if (this.component.multiple) {
             if (Array.isArray(value)) {
                 if (value.length === 0) {
-                    return [this.emptyValue];
+                    return [emptyValue];
                 }
                 if (this.component.storeas === 'array') {
-                    return super.normalizeValue([value]);
+                    return super.normalizeValue([value], flags);
                 }
-                return super.normalizeValue(value);
+                return super.normalizeValue(value, flags);
             }
             else {
-                return super.normalizeValue(value == null ? [this.emptyValue] : [value]);
+                return super.normalizeValue(value == null ? [emptyValue] : [value], flags);
             }
         }
         else {
-            if (Array.isArray(value) && this.component.storeas !== 'array') {
+            if (Array.isArray(value) && !Array.isArray(emptyValue)) {
                 if (this.component.storeas === 'string') {
-                    return super.normalizeValue(value.join(this.delimiter || ''));
+                    return super.normalizeValue(value.join(this.delimiter || ''), flags);
                 }
-                return super.normalizeValue(value[0] || this.emptyValue);
+                return super.normalizeValue(value[0] || emptyValue, flags);
             }
             else {
-                return super.normalizeValue(value);
+                return super.normalizeValue(value, flags);
             }
         }
     }
     get dataValue() {
-        return super.dataValue;
+        return this.normalizeValue(super.dataValue);
     }
     set dataValue(value) {
         super.dataValue = value;

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/components/day/Day.d.ts

@@ -97,6 +97,11 @@ export default class DayComponent extends Field {
      * @returns {null|void} - Returns null if the value is invalid, otherwise void.
      */
     setValueAt(index: number, value: any): null | void;
+    getDayWithHiddenFields(parts: any): {
+        month: any;
+        day: any;
+        year: any;
+    };
     getFieldValue(name: any): number;
     get parts(): {
         day: number;
@@ -130,7 +135,6 @@ export default class DayComponent extends Field {
      * @returns {string|null} - The string value of the date.
      */
     getValueAsString(value: any): string | null;
-    focus(field: any): void;
     isPartialDay(value: any): boolean;
     getValidationFormat(): string;
 }