@formio/js 5.0.0-dev.5870.aa1e3d9 → 5.0.0-dev.5873.124778a

package/lib/cjs/Wizard.js

@@ -916,7 +916,7 @@ class Wizard extends Webform_1.default {
         const components = !currentPageOnly || this.isLastPage()
             ? this.getComponents()
             : this.currentPage.components;
-        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, childErrors) && check, true);
+        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {
         if (!this.isLastPage()) {

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/Wizard.js

@@ -903,7 +903,7 @@ export default class Wizard extends Webform {
         const components = !currentPageOnly || this.isLastPage()
             ? this.getComponents()
             : this.currentPage.components;
-        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, childErrors) && check, true);
+        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {
         if (!this.isLastPage()) {

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.5870.aa1e3d9",
+  "version": "5.0.0-dev.5873.124778a",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {