@formio/js 5.1.0-dev.6039.a838d78 → 5.1.0-dev.6042.18ef5d3

package/lib/cjs/components/datetime/editForm/DateTime.edit.validation.js

@@ -11,35 +11,44 @@ exports.default = [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Minimum Date',
+        tooltip: "The minimum date that can be picked. You can also use Moment.js functions. For example: moment().subtract(10, 'days')",
+        applyMaskOn: 'change',
         key: 'datePicker.minDate',
-        label: 'Use calendar to set minDate',
-        skipMerge: true,
-        weight: 10,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMinDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMinDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set minDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMinDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMinDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
-        enableTime: false,
-        key: 'datePicker.minDate',
         skipMerge: true,
-        label: 'Minimum Date',
         weight: 10,
-        tooltip: 'The minimum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().subtract(10, \'days\')',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMinDateInput;
-        },
     },
     {
         type: 'checkbox',
@@ -51,34 +60,46 @@ exports.default = [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Maximum Date',
+        tooltip: "The maximum date that can be picked. You can also use Moment.js functions. For example: moment().add(10, 'days')",
+        applyMaskOn: 'change',
+        tableView: true,
+        validateWhenHidden: false,
         key: 'datePicker.maxDate',
-        skipMerge: true,
-        label: 'Use calendar to set maxDate',
-        weight: 20,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMaxDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMaxDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set maxDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMaxDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMaxDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
         enableTime: false,
-        key: 'datePicker.maxDate',
         skipMerge: true,
-        label: 'Maximum Date',
-        tooltip: 'The maximum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().add(10, \'days\')',
         weight: 20,
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMaxDateInput;
-        },
     }
 ];

package/lib/cjs/components/day/editForm/Day.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         weight: 15,
         type: 'checkbox',

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

@@ -553,14 +553,6 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
         });
     }
-    restoreComponentsContext() {
-        this.getComponents().forEach((component) => {
-            var _a;
-            const rowData = this.dataValue[component.rowIndex];
-            const editRowData = (_a = this.editRows[component.rowIndex]) === null || _a === void 0 ? void 0 : _a.data;
-            component.data = rowData || editRowData;
-        });
-    }
     flattenComponents(rowIndex) {
         const result = {};
         this.everyComponent((component) => {
@@ -1115,7 +1107,9 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             errors.push(...this._errors);
             return false;
         }
-        const message = this.invalid || this.invalidMessage(data, dirty, false, row);
+        // TODO: this is the only place invalidMessage gets called, and it's not clear why it's needed - we already validate the editGrid
+        // component above with super.checkComponentValidity
+        const message = this.invalid || this.invalidMessage(data, dirty, false, row, options);
         if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);
@@ -1159,9 +1153,6 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        if (this.parent) {
-            this.parent.checkComponentConditions();
-        }
         this.dataValue = value;
         // Refresh editRow data when data changes.
         this.dataValue.forEach((row, rowIndex) => {
@@ -1192,7 +1183,6 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        this.checkData();
         this.changeState(changed, flags);
         return changed;
     }

package/lib/cjs/components/email/editForm/Email.edit.display.js

@@ -9,6 +9,18 @@ exports.default = [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true

package/lib/cjs/components/fieldset/editForm/Fieldset.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/cjs/components/file/File.js

@@ -905,14 +905,17 @@ class FileComponent extends Field_1.default {
     }
     uploadFile(fileToSync) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
+            const filePromise = this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
             // Progress callback
-            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, 
+            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {
+                this.emit('fileUploadingStart', filePromise);
+            }, 
             // Abort upload callback
             (abort) => this.abortUploads.push({
                 id: fileToSync.id,
                 abort,
             }), this.getMultipartOptions(fileToSync));
+            return yield filePromise;
         });
     }
     upload() {
@@ -934,6 +937,7 @@ class FileComponent extends Field_1.default {
                     fileToSync.message = this.t('succefullyUploaded');
                     fileInfo.originalName = fileToSync.originalName;
                     fileInfo.hash = fileToSync.hash;
+                    this.emit('fileUploadingEnd', Promise.resolve(fileInfo));
                 }
                 catch (response) {
                     fileToSync.status = 'error';
@@ -943,6 +947,7 @@ class FileComponent extends Field_1.default {
                         : response.type === 'abort'
                             ? this.t('Request was aborted')
                             : response.toString();
+                    this.emit('fileUploadingEnd', Promise.reject(response));
                     this.emit('fileUploadError', {
                         fileToSync,
                         response,

package/lib/cjs/components/file/editForm/File.edit.file.d.ts

@@ -16,6 +16,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -45,6 +46,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -91,6 +93,7 @@ declare const _default: ({
     data?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -120,6 +123,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -149,6 +153,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -160,6 +165,7 @@ declare const _default: ({
     tooltip: string;
     rows: number;
     editor: string;
+    as: string;
     input: boolean;
     weight: number;
     placeholder: string;
@@ -207,6 +213,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -227,6 +234,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -247,6 +255,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -276,6 +285,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -305,6 +315,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -332,6 +343,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
 } | {
     type: string;
     input: boolean;
@@ -353,6 +365,7 @@ declare const _default: ({
     tableView?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;

package/lib/cjs/components/file/editForm/File.edit.file.js

@@ -120,6 +120,7 @@ exports.default = [
         tooltip: 'Pass your custom xhr options(optional)',
         rows: 5,
         editor: 'ace',
+        as: 'json',
         input: true,
         weight: 15,
         placeholder: `{

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

@@ -115,6 +115,10 @@ class FormComponent extends Component_1.default {
     get emptyValue() {
         return { data: {} };
     }
+    // In order for the subform values to set properly, we must always say that nested forms have a default value.
+    get hasDefaultValue() {
+        return true;
+    }
     get ready() {
         return this.subFormReady || Promise.resolve();
     }
@@ -448,7 +452,7 @@ class FormComponent extends Component_1.default {
     loadSubForm(fromAttach, beforeSubmit) {
         var _a, _b, _c, _d, _e;
         const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;
-        if (this.builderMode || (this.conditionallyHidden && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
+        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -520,7 +524,7 @@ class FormComponent extends Component_1.default {
      * @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 || !this.component.clearOnHide);
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();
     }
     /**
      * Returns the data for the subform.
@@ -592,20 +596,16 @@ class FormComponent extends Component_1.default {
             return Promise.resolve(this.dataValue);
         }
         // 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) {
+        const loadHiddenForm = !this.component.clearOnHide;
+        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading && !this.subForm) {
             return this.createSubForm(true, true)
-                .then(this.submitSubForm(false))
-                .then(() => {
-                return this.dataValue;
-            })
+                .then(() => this.submitSubForm(false))
+                .then(() => this.dataValue)
                 .then(() => super.beforeSubmit());
         }
         else {
             return this.submitSubForm(false)
-                .then(() => {
-                return this.dataValue;
-            })
+                .then(() => this.dataValue)
                 .then(() => super.beforeSubmit());
         }
     }

package/lib/cjs/components/hidden/editForm/Hidden.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/cjs/components/html/HTML.js

@@ -58,8 +58,7 @@ class HTMLComponent extends Component_1.default {
         super.checkRefreshOn(changed);
         let visible;
         if (this.hasCondition()) {
-            this._conditionallyHidden = this.checkConditionallyHidden();
-            visible = !this.conditionallyHidden;
+            visible = !this.conditionallyHidden();
         }
         else {
             visible = !this.component.hidden;

package/lib/cjs/components/html/editForm/HTML.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/cjs/components/number/editForm/Number.edit.display.js

@@ -13,6 +13,18 @@ exports.default = [
         key: 'allowMultipleMasks',
         ignore: true
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/cjs/components/password/editForm/Password.edit.display.js

@@ -12,5 +12,17 @@ exports.default = [
     {
         key: 'allowMultipleMasks',
         ignore: true
-    }
+    },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
 ];

package/lib/cjs/components/phonenumber/PhoneNumber.form.js

@@ -22,7 +22,15 @@ function default_1(...extend) {
                 {
                     key: 'showCharCount',
                     ignore: true
-                }
+                },
+                {
+                    key: 'widget.type',
+                    ignore: true
+                },
+                {
+                    key: 'widget',
+                    ignore: true
+                },
             ]
         },
         {

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

@@ -365,7 +365,7 @@ class RadioComponent extends ListComponent_1.default {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
+                const checked = (value === undefined || value === null) ? false : (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);

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

@@ -1459,7 +1459,7 @@ class SelectComponent extends ListComponent_1.default {
     asString(value, options = {}) {
         var _a;
         value = value !== null && value !== void 0 ? value : this.getValue();
-        if (options.modalPreview || this.inDataTable) {
+        if (options.modalPreview || this.inDataTable || options.email) {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }