@formio/js 5.0.0-dev.5834.aaa6886 → 5.0.0-dev.5835.540c19a

package/lib/cjs/components/Components.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("./_classes/component/Component"));
 const utils_1 = __importDefault(require("./_classes/component/editForm/utils"));
 const Component_form_1 = __importDefault(require("./_classes/component/Component.form"));
+const utils_2 = require("../utils/utils");
 const lodash_1 = __importDefault(require("lodash"));
 class Components {
     static set EditFormUtils(value) {
@@ -56,7 +57,8 @@ class Components {
     static getComponentPath(component) {
         var _a;
         let path = '';
-        if (component.component.key) {
+        const componentKey = (0, utils_2.getComponentKey)(component.component);
+        if (componentKey) {
             let thisPath = ((_a = component.options) === null || _a === void 0 ? void 0 : _a.parent) || component;
             while (thisPath && !thisPath.allowData && thisPath.parent) {
                 thisPath = thisPath.parent;
@@ -68,7 +70,7 @@ 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 lodash_1.default.trim(path, '.');
         }
         return path;

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

@@ -2965,7 +2965,7 @@ class Component extends Element_1.default {
         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);
@@ -2992,6 +2992,7 @@ class Component extends Element_1.default {
             value: this.validationValue,
             path: this.path || this.component.key,
             instance: this,
+            form: this.root ? this.root._form : {},
             scope: { errors: [] },
             processors: [
                 process_1.validateProcessInfo
@@ -3468,14 +3469,16 @@ class Component extends Element_1.default {
         window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);
     }
     focus(index) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if ('beforeFocus' in this.parent) {
             this.parent.beforeFocus(this);
         }
-        index = index || ((_a = this.refs.input) === null || _a === void 0 ? void 0 : _a.length) - 1;
-        if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {
+        if (!index && !lodash_1.default.isNumber(index) && ((_b = (_a = this.refs) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.length)) {
+            index = this.refs.input.length - 1;
+        }
+        if ((_c = this.refs.input) === null || _c === void 0 ? void 0 : _c.length) {
             const focusingInput = this.refs.input[index];
-            if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {
+            if (((_d = this.component.widget) === null || _d === void 0 ? void 0 : _d.type) === 'calendar') {
                 const sibling = focusingInput.nextSibling;
                 if (sibling) {
                     sibling.focus();

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

@@ -190,6 +190,7 @@ class ListComponent extends Field_1.default {
                     return;
                 }
                 let { url } = this.component.data;
+                url = lodash_1.default.trim(url);
                 let method;
                 let body;
                 if (url.startsWith('/')) {

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

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

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

@@ -286,7 +286,7 @@ class DayComponent extends Field_1.default {
                 if (!this.component.fields.day.hide && maxDay) {
                     this.refs.day.max = maxDay;
                 }
-                if (maxDay && day > maxDay) {
+                if (maxDay && day > maxDay && this.refs.day) {
                     this.refs.day.value = this.refs.day.max;
                 }
                 updateValueAndSaveFocus(this.refs.month, 'month')();
@@ -496,27 +496,40 @@ class DayComponent extends Field_1.default {
         if (defaultValue) {
             defaults = defaultValue.split('/').map(x => parseInt(x, 10));
         }
+        const isModalEditClosed = this.component.modalEdit && !this.componentModal.isOpened;
         if (this.showDay && this.refs.day) {
-            day = parseInt(this.refs.day.value, 10);
+            day = (this.refs.day.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.day.value, 10);
         }
-        if (day === undefined || lodash_1.default.isNaN(day)) {
-            day = defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0;
+        if (day === undefined || lodash_1.default.isNaN(day) || value) {
+            day = (defaults.length !== 3)
+                ? this.getDayWithHiddenFields(defaults).day
+                : (defaults[DAY] && !lodash_1.default.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 === '' && !isModalEditClosed) ? '' : parseInt(this.refs.month.value, 10);
         }
-        if (month === undefined || lodash_1.default.isNaN(month)) {
-            month = defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;
+        if (month === undefined || lodash_1.default.isNaN(month) || value) {
+            month = (defaults.length !== 3)
+                ? this.getDayWithHiddenFields(defaults).month
+                : (defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0);
         }
         if (this.showYear && this.refs.year) {
-            year = parseInt(this.refs.year.value);
+            year = (this.refs.year.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.year.value);
         }
-        if (year === undefined || lodash_1.default.isNaN(year)) {
-            year = defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;
+        if (year === undefined || lodash_1.default.isNaN(year) || value) {
+            year = (defaults.length !== 3)
+                ? this.getDayWithHiddenFields(defaults).year
+                : (defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0);
         }
         let result;
         if (!day && !month && !year) {
+            if (!isModalEditClosed) {
+                this.dataValue = this.emptyValue;
+                if (this.options.building) {
+                    this.triggerChange();
+                }
+            }
             return null;
         }
         // add trailing zeros if the data is showed

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

@@ -79,6 +79,14 @@ class RadioComponent extends ListComponent_1.default {
         }
         return defaultValue;
     }
+    resetValue() {
+        this.unset();
+        this.setValue(this.emptyValue, {
+            noUpdateEvent: true,
+            noValidate: true,
+            resetValue: true
+        });
+    }
     get inputInfo() {
         var _a;
         const info = super.elementInfo();

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

@@ -246,7 +246,11 @@ class SelectComponent extends ListComponent_1.default {
             const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;
             return this.sanitize(value, this.shouldSanitizeValue);
         }
-        if (this.component.multiple && lodash_1.default.isArray(this.dataValue) ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val) : (this.dataValue === this.normalizeSingleValue(value))) {
+        // Inside DataTable component won't have dataValue set
+        const shouldUseSelectData = (this.component.multiple && lodash_1.default.isArray(this.dataValue)
+            ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)
+            : (this.dataValue === this.normalizeSingleValue(value))) || this.inDataTable;
+        if (shouldUseSelectData) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
@@ -1213,7 +1217,7 @@ class SelectComponent extends ListComponent_1.default {
         // Check to see if we need to save off the template data into our metadata.
         const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
         const shouldSaveData = !valueIsObject || this.component.reference;
-        if (templateValue && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {
+        if (!lodash_1.default.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {
             const submission = this.root.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
@@ -1468,8 +1472,11 @@ class SelectComponent extends ListComponent_1.default {
     asString(value, options = {}) {
         var _a;
         value = value !== null && value !== void 0 ? value : this.getValue();
-        if (options.modalPreview) {
-            const template = this.itemTemplate(value, value);
+        if (options.modalPreview || this.inDataTable) {
+            if (this.inDataTable) {
+                value = this.undoValueTyping(value);
+            }
+            const template = this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data)) ? { data: value } : value, value, options);
             return template;
         }
         //need to convert values to strings to be able to compare values with available options that are strings

package/lib/cjs/components/time/Time.js

@@ -56,6 +56,12 @@ class TimeComponent extends TextField_1.default {
         }
         return value;
     }
+    get validationValue() {
+        if ((Array.isArray(this.rawData) && !this.rawData.length) || !this.rawData) {
+            return this.dataValue;
+        }
+        return this.rawData;
+    }
     get inputInfo() {
         const info = super.inputInfo;
         info.attr.type = this.component.inputType;

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

@@ -2929,7 +2929,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);
@@ -2956,6 +2956,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
@@ -3433,7 +3434,9 @@ export default class Component extends Element {
         if ('beforeFocus' in this.parent) {
             this.parent.beforeFocus(this);
         }
-        index = index || this.refs.input?.length - 1;
+        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.js

@@ -185,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/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

@@ -284,7 +284,7 @@ export default class DayComponent extends Field {
                 if (!this.component.fields.day.hide && maxDay) {
                     this.refs.day.max = maxDay;
                 }
-                if (maxDay && day > maxDay) {
+                if (maxDay && day > maxDay && this.refs.day) {
                     this.refs.day.value = this.refs.day.max;
                 }
                 updateValueAndSaveFocus(this.refs.month, 'month')();
@@ -494,27 +494,40 @@ export default class DayComponent extends Field {
         if (defaultValue) {
             defaults = defaultValue.split('/').map(x => parseInt(x, 10));
         }
+        const isModalEditClosed = this.component.modalEdit && !this.componentModal.isOpened;
         if (this.showDay && this.refs.day) {
-            day = parseInt(this.refs.day.value, 10);
+            day = (this.refs.day.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.day.value, 10);
         }
-        if (day === undefined || _.isNaN(day)) {
-            day = defaults[DAY] && !_.isNaN(defaults[DAY]) ? defaults[DAY] : 0;
+        if (day === undefined || _.isNaN(day) || value) {
+            day = (defaults.length !== 3)
+                ? 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 === '' && !isModalEditClosed) ? '' : parseInt(this.refs.month.value, 10);
         }
-        if (month === undefined || _.isNaN(month)) {
-            month = defaults[MONTH] && !_.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;
+        if (month === undefined || _.isNaN(month) || value) {
+            month = (defaults.length !== 3)
+                ? 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 === '' && !isModalEditClosed) ? '' : parseInt(this.refs.year.value);
         }
-        if (year === undefined || _.isNaN(year)) {
-            year = defaults[YEAR] && !_.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;
+        if (year === undefined || _.isNaN(year) || value) {
+            year = (defaults.length !== 3)
+                ? this.getDayWithHiddenFields(defaults).year
+                : (defaults[YEAR] && !_.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0);
         }
         let result;
         if (!day && !month && !year) {
+            if (!isModalEditClosed) {
+                this.dataValue = this.emptyValue;
+                if (this.options.building) {
+                    this.triggerChange();
+                }
+            }
             return null;
         }
         // add trailing zeros if the data is showed

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';

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

@@ -246,7 +246,11 @@ export default class SelectComponent extends ListComponent {
             const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;
             return this.sanitize(value, this.shouldSanitizeValue);
         }
-        if (this.component.multiple && _.isArray(this.dataValue) ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val) : (this.dataValue === this.normalizeSingleValue(value))) {
+        // Inside DataTable component won't have dataValue set
+        const shouldUseSelectData = (this.component.multiple && _.isArray(this.dataValue)
+            ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)
+            : (this.dataValue === this.normalizeSingleValue(value))) || this.inDataTable;
+        if (shouldUseSelectData) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
@@ -1241,7 +1245,7 @@ export default class SelectComponent extends ListComponent {
         // Check to see if we need to save off the template data into our metadata.
         const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
         const shouldSaveData = !valueIsObject || this.component.reference;
-        if (templateValue && shouldSaveData && this.templateData && this.templateData[templateValue] && this.root?.submission) {
+        if (!_.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && this.root?.submission) {
             const submission = this.root.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
@@ -1495,8 +1499,11 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
-        if (options.modalPreview) {
-            const template = this.itemTemplate(value, value);
+        if (options.modalPreview || this.inDataTable) {
+            if (this.inDataTable) {
+                value = this.undoValueTyping(value);
+            }
+            const template = this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(value.data)) ? { data: value } : value, value, options);
             return template;
         }
         //need to convert values to strings to be able to compare values with available options that are strings

package/lib/mjs/components/time/Time.js

@@ -51,6 +51,12 @@ export default class TimeComponent extends TextFieldComponent {
         }
         return value;
     }
+    get validationValue() {
+        if ((Array.isArray(this.rawData) && !this.rawData.length) || !this.rawData) {
+            return this.dataValue;
+        }
+        return this.rawData;
+    }
     get inputInfo() {
         const info = super.inputInfo;
         info.attr.type = this.component.inputType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5834.aaa6886",
+  "version": "5.0.0-dev.5835.540c19a",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -82,7 +82,7 @@
   "dependencies": {
     "@formio/bootstrap": "3.0.0-dev.98.17ba6ea",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "v2.1.0-dev.160.d45b496",
+    "@formio/core": "v2.1.0-dev.156.78a83fd",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",