@formio/js 5.0.0-dev.5867.8552ccf → 5.0.0-dev.5871.544083b

package/lib/cjs/Webform.js

@@ -1533,7 +1533,7 @@ class Webform extends NestedDataComponent_1.default {
             return;
         }
         const captchaComponent = [];
-        this.eachComponent((component) => {
+        (0, formUtils_1.eachComponent)(this.components, (component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }

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

@@ -2962,14 +2962,12 @@ class Component extends Element_1.default {
         if (flags.silentCheck) {
             return [];
         }
+        let isDirty = this.dirty || flags.dirty;
         if (this.options.alwaysDirty) {
-            flags.dirty = true;
+            isDirty = true;
         }
-        if (flags.fromSubmission && this.hasValue(data)) {
-            flags.dirty = this.pristine && this.component.protected ? false : true;
-        }
-        this.setDirty(flags.dirty);
-        return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);
+        this.setDirty(isDirty);
+        return this.setComponentValidity(errors, isDirty, flags.silentCheck, flags.fromSubmission);
     }
     /**
      * Perform a component validation.

package/lib/cjs/components/editgrid/EditGrid.d.ts

@@ -89,8 +89,8 @@ export default class EditGridComponent extends NestedArrayComponent {
     hasOpenRows(): any;
     getAttachedData(data?: null): any;
     shouldValidateDraft(editRow: any): any;
-    shouldValidateRow(editRow: any, dirty: any): any;
-    validateRow(editRow: any, dirty: any, forceSilentCheck: any): any;
+    shouldValidateRow(editRow: any, dirty: any, fromSubmission: any): any;
+    validateRow(editRow: any, dirty: any, forceSilentCheck: any, fromSubmission: any): any;
     showRowErrorAlerts(editRow: any, errors: any): void;
     /**
      * @returns {boolean} - Return that this component processes its own validation.

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

@@ -983,17 +983,18 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             !this.hasOpenRows()) ||
             ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted);
     }
-    shouldValidateRow(editRow, dirty) {
+    shouldValidateRow(editRow, dirty, fromSubmission) {
         return this.shouldValidateDraft(editRow) ||
             editRow.state === EditRowState.Saving ||
             editRow.state === EditRowState.Editing ||
             editRow.alerts ||
+            fromSubmission ||
             dirty;
     }
-    validateRow(editRow, dirty, forceSilentCheck) {
+    validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {
         var _a;
         editRow.errors = [];
-        if (this.shouldValidateRow(editRow, dirty)) {
+        if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {
             const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;
             const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);
             const editGridValue = lodash_1.default.get(rootValue, this.path, []);
@@ -1065,7 +1066,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     }
     checkComponentValidity(data, dirty, row, options = {}, errors = []) {
         var _a, _b;
-        const { silentCheck } = options;
+        const { silentCheck, fromSubmission } = options;
         const superValid = super.checkComponentValidity(data, dirty, row, options, errors);
         // If super tells us that component invalid and there is no need to update alerts, just return false
         if (!superValid && (!this.alert && !this.hasOpenRows())) {
@@ -1075,7 +1076,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         const allRowErrors = [];
         this.editRows.forEach((editRow, index) => {
             // Trigger all errors on the row.
-            const rowErrors = this.validateRow(editRow, dirty, silentCheck);
+            const rowErrors = this.validateRow(editRow, dirty, silentCheck, fromSubmission);
             errors.push(...rowErrors);
             allRowErrors.push(...rowErrors);
             if (this.rowRefs) {

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

@@ -21,6 +21,7 @@ export default class RadioComponent extends ListComponent {
     get isRadio(): boolean;
     get optionSelectedClass(): string;
     get listData(): any;
+    get selectMetadata(): any;
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
     itemsLoadedResolve: ((value: any) => void) | undefined;

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

@@ -109,6 +109,12 @@ class RadioComponent extends ListComponent_1.default {
         const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});
         return lodash_1.default.get(listData, this.path);
     }
+    get selectMetadata() {
+        return super.selectData;
+    }
+    get selectData() {
+        return this.selectMetadata || this.component.selectData;
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -244,12 +250,15 @@ class RadioComponent extends ListComponent_1.default {
         else if (!lodash_1.default.isString(value)) {
             value = lodash_1.default.toString(value);
         }
-        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
-        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
+        const shouldUseSelectData = (options.modalPreview || this.inDataTable)
+            && this.component.dataSrc === 'url' && (this.loadedOptions.length || this.selectData);
+        if (this.component.dataSrc !== 'values' && !shouldUseSelectData) {
             return value;
         }
-        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
-        const option = lodash_1.default.find(values, (v) => v.value === value);
+        const values = shouldUseSelectData ? this.loadedOptions : this.component.values;
+        const option = !(values === null || values === void 0 ? void 0 : values.length) && shouldUseSelectData ? {
+            label: this.itemTemplate(this.selectData),
+        } : lodash_1.default.find(values, (v) => v.value === value);
         if (!value) {
             return lodash_1.default.get(option, 'label', '');
         }

package/lib/cjs/components/selectboxes/SelectBoxes.js

@@ -166,12 +166,19 @@ class SelectBoxesComponent extends Radio_1.default {
         return changed;
     }
     getValueAsString(value, options = {}) {
+        var _a, _b;
         if (!value) {
             return '';
         }
         if (this.isSelectURL) {
-            if (options.modalPreview && this.loadedOptions) {
-                return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+            if (options.modalPreview || this.options.readOnly || this.inDataTable) {
+                const checkedItems = lodash_1.default.keys(lodash_1.default.pickBy(value, (val) => val));
+                if (((_a = this.selectData) === null || _a === void 0 ? void 0 : _a.length) === checkedItems.length) {
+                    return this.selectData.map(item => this.itemTemplate(item)).join(', ');
+                }
+                else if ((_b = this.loadedOptions) === null || _b === void 0 ? void 0 : _b.length) {
+                    return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+                }
             }
             return (0, lodash_1.default)(value).pickBy((val) => val).keys().join(', ');
         }

package/lib/cjs/components/textarea/TextArea.d.ts

@@ -20,10 +20,10 @@ export default class TextAreaComponent extends TextFieldComponent {
     setReadOnlyValue(value: any, index: any): void;
     get isJsonValue(): any;
     /**
-   * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
-   * @param {*} value - The value to normalize
-   * @returns {*} - Returns the normalized value
-   */
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
+     */
     normalizeValue(value: any): any;
     normalizeSingleValue(value: any): any;
     setConvertedValue(value: any, index: any): any;

package/lib/cjs/components/textarea/TextArea.js

@@ -310,10 +310,10 @@ class TextAreaComponent extends TextField_1.default {
         return this.component.as && this.component.as === 'json';
     }
     /**
-   * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
-   * @param {*} value - The value to normalize
-   * @returns {*} - Returns the normalized value
-   */
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
+     */
     normalizeValue(value) {
         if (this.component.multiple && Array.isArray(value)) {
             return value.map((singleValue) => this.normalizeSingleValue(singleValue));

package/lib/mjs/Webform.js

@@ -1536,7 +1536,7 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         const captchaComponent = [];
-        this.eachComponent((component) => {
+        eachComponent(this.components, (component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }

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

@@ -2926,14 +2926,12 @@ export default class Component extends Element {
         if (flags.silentCheck) {
             return [];
         }
+        let isDirty = this.dirty || flags.dirty;
         if (this.options.alwaysDirty) {
-            flags.dirty = true;
+            isDirty = true;
         }
-        if (flags.fromSubmission && this.hasValue(data)) {
-            flags.dirty = this.pristine && this.component.protected ? false : true;
-        }
-        this.setDirty(flags.dirty);
-        return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);
+        this.setDirty(isDirty);
+        return this.setComponentValidity(errors, isDirty, flags.silentCheck, flags.fromSubmission);
     }
     /**
      * Perform a component validation.

package/lib/mjs/components/editgrid/EditGrid.d.ts

@@ -89,8 +89,8 @@ export default class EditGridComponent extends NestedArrayComponent {
     hasOpenRows(): any;
     getAttachedData(data?: null): any;
     shouldValidateDraft(editRow: any): any;
-    shouldValidateRow(editRow: any, dirty: any): any;
-    validateRow(editRow: any, dirty: any, forceSilentCheck: any): any;
+    shouldValidateRow(editRow: any, dirty: any, fromSubmission: any): any;
+    validateRow(editRow: any, dirty: any, forceSilentCheck: any, fromSubmission: any): any;
     showRowErrorAlerts(editRow: any, errors: any): void;
     /**
      * @returns {boolean} - Return that this component processes its own validation.

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

@@ -973,16 +973,17 @@ export default class EditGridComponent extends NestedArrayComponent {
             !this.hasOpenRows()) ||
             this.root?.submitted;
     }
-    shouldValidateRow(editRow, dirty) {
+    shouldValidateRow(editRow, dirty, fromSubmission) {
         return this.shouldValidateDraft(editRow) ||
             editRow.state === EditRowState.Saving ||
             editRow.state === EditRowState.Editing ||
             editRow.alerts ||
+            fromSubmission ||
             dirty;
     }
-    validateRow(editRow, dirty, forceSilentCheck) {
+    validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {
         editRow.errors = [];
-        if (this.shouldValidateRow(editRow, dirty)) {
+        if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {
             const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;
             const rootValue = fastCloneDeep(this.rootValue);
             const editGridValue = _.get(rootValue, this.path, []);
@@ -1053,7 +1054,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         return true;
     }
     checkComponentValidity(data, dirty, row, options = {}, errors = []) {
-        const { silentCheck } = options;
+        const { silentCheck, fromSubmission } = options;
         const superValid = super.checkComponentValidity(data, dirty, row, options, errors);
         // If super tells us that component invalid and there is no need to update alerts, just return false
         if (!superValid && (!this.alert && !this.hasOpenRows())) {
@@ -1063,7 +1064,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         const allRowErrors = [];
         this.editRows.forEach((editRow, index) => {
             // Trigger all errors on the row.
-            const rowErrors = this.validateRow(editRow, dirty, silentCheck);
+            const rowErrors = this.validateRow(editRow, dirty, silentCheck, fromSubmission);
             errors.push(...rowErrors);
             allRowErrors.push(...rowErrors);
             if (this.rowRefs) {

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

@@ -21,6 +21,7 @@ export default class RadioComponent extends ListComponent {
     get isRadio(): boolean;
     get optionSelectedClass(): string;
     get listData(): any;
+    get selectMetadata(): any;
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
     itemsLoadedResolve: ((value: any) => void) | undefined;

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

@@ -109,6 +109,12 @@ export default class RadioComponent extends ListComponent {
         const listData = _.get(this.root, 'submission.metadata.listData', {});
         return _.get(listData, this.path);
     }
+    get selectMetadata() {
+        return super.selectData;
+    }
+    get selectData() {
+        return this.selectMetadata || this.component.selectData;
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -244,12 +250,15 @@ export default class RadioComponent extends ListComponent {
         else if (!_.isString(value)) {
             value = _.toString(value);
         }
-        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
-        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
+        const shouldUseSelectData = (options.modalPreview || this.inDataTable)
+            && this.component.dataSrc === 'url' && (this.loadedOptions.length || this.selectData);
+        if (this.component.dataSrc !== 'values' && !shouldUseSelectData) {
             return value;
         }
-        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
-        const option = _.find(values, (v) => v.value === value);
+        const values = shouldUseSelectData ? this.loadedOptions : this.component.values;
+        const option = !values?.length && shouldUseSelectData ? {
+            label: this.itemTemplate(this.selectData),
+        } : _.find(values, (v) => v.value === value);
         if (!value) {
             return _.get(option, 'label', '');
         }

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -172,8 +172,14 @@ export default class SelectBoxesComponent extends RadioComponent {
             return '';
         }
         if (this.isSelectURL) {
-            if (options.modalPreview && this.loadedOptions) {
-                return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+            if (options.modalPreview || this.options.readOnly || this.inDataTable) {
+                const checkedItems = _.keys(_.pickBy(value, (val) => val));
+                if (this.selectData?.length === checkedItems.length) {
+                    return this.selectData.map(item => this.itemTemplate(item)).join(', ');
+                }
+                else if (this.loadedOptions?.length) {
+                    return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+                }
             }
             return _(value).pickBy((val) => val).keys().join(', ');
         }

package/lib/mjs/components/textarea/TextArea.d.ts

@@ -20,10 +20,10 @@ export default class TextAreaComponent extends TextFieldComponent {
     setReadOnlyValue(value: any, index: any): void;
     get isJsonValue(): any;
     /**
-   * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
-   * @param {*} value - The value to normalize
-   * @returns {*} - Returns the normalized value
-   */
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
+     */
     normalizeValue(value: any): any;
     normalizeSingleValue(value: any): any;
     setConvertedValue(value: any, index: any): any;

package/lib/mjs/components/textarea/TextArea.js

@@ -305,10 +305,10 @@ export default class TextAreaComponent extends TextFieldComponent {
         return this.component.as && this.component.as === 'json';
     }
     /**
-   * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
-   * @param {*} value - The value to normalize
-   * @returns {*} - Returns the normalized value
-   */
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
+     */
     normalizeValue(value) {
         if (this.component.multiple && Array.isArray(value)) {
             return value.map((singleValue) => this.normalizeSingleValue(singleValue));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5867.8552ccf",
+  "version": "5.0.0-dev.5871.544083b",
   "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.170.9d1e8b7",
+    "@formio/core": "2.3.0-dev.160.cabaa43",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",