@formio/js 5.1.0-dev.5892.54c1dc7 → 5.1.0-dev.5936.81a1533

package/lib/cjs/WebformBuilder.js

@@ -1144,19 +1144,12 @@ class WebformBuilder extends Component_1.default {
     highlightInvalidComponents() {
         const repeatablePaths = this.findRepeatablePaths();
         let hasInvalidComponents = false;
-        // Matches anything expect letters and  '_' at the beginning of the key and anything except of letters, numbers,
-        // '-', '.' and '_' in the rest of the key
-        const badCharacters = /^[^A-Za-z_]+|[^A-Za-z0-9\-._]+/g;
         this.webform.everyComponent((comp) => {
             const path = comp.path;
             if (repeatablePaths.includes(path)) {
                 comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
-            else if (comp.key.replace(badCharacters, '') === '') {
-                comp.setCustomValidity(this.t('apiKeyNotValid', { key: comp.key }));
-                hasInvalidComponents = true;
-            }
             else {
                 comp.setCustomValidity();
             }

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

@@ -27,8 +27,8 @@ export default class RadioComponent extends ListComponent {
     itemsLoadedResolve: ((value: any) => void) | undefined;
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
+    valuesMap: Map<any, any> | undefined;
     beforeSubmit(): Promise<any>;
-    convertValues(values: any): any;
     render(): string;
     attach(element: any): Promise<void>;
     detach(element: any): void;
@@ -36,18 +36,14 @@ export default class RadioComponent extends ListComponent {
     validateValueAvailability(setting: any, value: any): boolean;
     getValueAsString(value: any, options?: {}): any;
     setValueAt(index: any, value: any): void;
+    prepareValue(item: any, options?: {}): any;
+    getValueByInput(input: any): any;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     loadItemsFromMetadata(): void;
     setItems(items: any): void;
     setSelectedClasses(): void;
+    setMetadata(value: any): void;
     updateValue(value: any, flags: any): boolean;
     currentValue: 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
-     */
-    convertByDataType(value: any): any;
-    normalizeValue(value: any): any;
 }
 import ListComponent from '../_classes/list/ListComponent';

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

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
 const Formio_1 = require("../../Formio");
-const utils_1 = require("../../utils");
+const utils_1 = require("../../utils/utils");
+const uuid_1 = require("uuid");
 class RadioComponent extends ListComponent_1.default {
     static schema(...extend) {
         return ListComponent_1.default.schema({
@@ -142,6 +143,7 @@ class RadioComponent extends ListComponent_1.default {
         });
         this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';
         this.loadedOptions = [];
+        this.valuesMap = new Map();
         if (!this.visible) {
             this.itemsLoadedResolve();
         }
@@ -153,12 +155,6 @@ class RadioComponent extends ListComponent_1.default {
             this.dataReady.then(() => res(true));
         });
     }
-    convertValues(values) {
-        if (this.options.renderMode === 'html' && this.type === 'radio') {
-            return values.map(x => (Object.assign(Object.assign({}, x), { value: this.convertByDataType(x.value) })));
-        }
-        return values;
-    }
     render() {
         if (!this.optionsLoaded) {
             return super.render(this.renderTemplate('loader'));
@@ -166,7 +162,7 @@ class RadioComponent extends ListComponent_1.default {
         return super.render(this.renderTemplate('radio', {
             input: this.inputInfo,
             inline: this.component.inline,
-            values: this.component.dataSrc === 'values' ? this.convertValues(this.component.values) : this.loadedOptions,
+            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,
             value: this.dataValue,
             row: this.row,
         }));
@@ -187,9 +183,12 @@ class RadioComponent extends ListComponent_1.default {
                 if (!lodash_1.default.isString(this.dataValue)) {
                     dataValue = lodash_1.default.toString(this.dataValue);
                 }
-                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {
-                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;
-                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);
+                if (this.isSelectURL) {
+                    const valueKey = this.loadedOptions[index].value;
+                    const optionValue = this.valuesMap.has(valueKey)
+                        ? this.valuesMap.get(valueKey)
+                        : valueKey;
+                    input.checked = lodash_1.default.isEqual(this.normalizeValue(optionValue), this.dataValue);
                 }
                 else {
                     input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
@@ -226,9 +225,14 @@ class RadioComponent extends ListComponent_1.default {
         let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;
         this.refs.input.forEach((input, index) => {
             if (input.checked) {
-                value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?
-                    this.loadedOptions[index].value :
-                    input.value;
+                if (!this.isSelectURL) {
+                    value = input.value;
+                    return;
+                }
+                const optionValue = this.loadedOptions[index].value;
+                value = this.valuesMap.has(optionValue)
+                    ? this.valuesMap.get(optionValue)
+                    : optionValue;
             }
         });
         return value;
@@ -272,8 +276,8 @@ class RadioComponent extends ListComponent_1.default {
     }
     setValueAt(index, value) {
         if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {
-            const inputValue = this.refs.input[index].value;
-            this.refs.input[index].checked = (inputValue === value.toString());
+            const inputValue = this.getValueByInput(this.refs.input[index]);
+            this.refs.input[index].checked = lodash_1.default.isEqual(inputValue, value);
         }
     }
     get shouldLoad() {
@@ -283,6 +287,23 @@ class RadioComponent extends ListComponent_1.default {
         }
         return super.shouldLoad;
     }
+    prepareValue(item, options = {}) {
+        const value = this.component.valueProperty && !options.skipValueProperty
+            ? lodash_1.default.get(item, this.component.valueProperty)
+            : item;
+        if (this.component.type === 'radio' && typeof value !== 'string') {
+            const uuid = (0, uuid_1.v4)();
+            this.valuesMap.set(uuid, value);
+            return uuid;
+        }
+        return value;
+    }
+    getValueByInput(input) {
+        const inputValue = input.value;
+        return this.valuesMap.has(inputValue)
+            ? this.valuesMap.get(inputValue)
+            : inputValue;
+    }
     loadItems(url, search, headers, options, method, body) {
         if (this.optionsLoaded) {
             this.itemsLoadedResolve();
@@ -333,7 +354,7 @@ class RadioComponent extends ListComponent_1.default {
                 label: this.itemTemplate(item)
             };
             if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {
-                this.loadedOptions[i].value = this.dataValue;
+                this.loadedOptions[i].value = this.prepareValue(this.dataValue, { skipValueProperty: true });
             }
         });
         this.optionsLoaded = true;
@@ -343,12 +364,15 @@ class RadioComponent extends ListComponent_1.default {
         const listData = [];
         items === null || items === void 0 ? void 0 : items.forEach((item, i) => {
             const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);
-            this.loadedOptions[i] = {
-                value: this.component.valueProperty ? valueAtProperty : item,
-                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)
-            };
-            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);
-            const value = this.loadedOptions[i].value;
+            const value = this.prepareValue(item);
+            const label = this.component.valueProperty
+                ? this.itemTemplate(item, valueAtProperty, i)
+                : this.itemTemplate(item, item, i);
+            this.loadedOptions[i] = { label, value };
+            listData.push(this.templateData[i]);
+            if (this.valuesMap.has(value)) {
+                this.templateData[value] = this.templateData[i];
+            }
             if (!this.isRadio && (lodash_1.default.isObject(value) || lodash_1.default.isBoolean(value) || lodash_1.default.isUndefined(value))) {
                 this.loadedOptions[i].invalid = true;
             }
@@ -371,7 +395,11 @@ class RadioComponent extends ListComponent_1.default {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (value === undefined || value === null) ? false : (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
+                        : lodash_1.default.isEqual(this.normalizeValue(this.getValueByInput(input)), value);
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
@@ -385,10 +413,26 @@ class RadioComponent extends ListComponent_1.default {
             });
         }
     }
+    setMetadata(value) {
+        var _a;
+        let key = value;
+        if (typeof value !== 'string') {
+            const checkedInput = Array.prototype.find.call((_a = this.refs.input) !== null && _a !== void 0 ? _a : [], (input => input.type === 'radio' && input.getAttribute('checked')));
+            key = (checkedInput === null || checkedInput === void 0 ? void 0 : checkedInput.value) || key;
+        }
+        if (this.isSelectURL && this.templateData && this.templateData[key]) {
+            const submission = this.root.submission;
+            if (!submission.metadata.selectData) {
+                submission.metadata.selectData = {};
+            }
+            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[key]);
+        }
+    }
     updateValue(value, flags) {
         const changed = super.updateValue(value, flags);
         if (changed) {
             this.setSelectedClasses();
+            this.setMetadata(this.dataValue);
         }
         if (!flags || !flags.modified || !this.isRadio) {
             if (changed) {
@@ -412,7 +456,7 @@ class RadioComponent extends ListComponent_1.default {
      * @param {*} value - The value to normalize
      * @returns {*} - Returns the normalized value
      */
-    convertByDataType(value) {
+    normalizeValue(value) {
         const dataType = this.component.dataType || 'auto';
         if (value === this.emptyValue) {
             return value;
@@ -444,18 +488,10 @@ class RadioComponent extends ListComponent_1.default {
                 value = !(!value || value.toString() === 'false');
                 break;
         }
-        return value;
+        return super.normalizeValue(value);
     }
-    normalizeValue(value) {
-        const valueConverted = this.convertByDataType(value);
-        if (this.isSelectURL && this.templateData && this.templateData[valueConverted]) {
-            const submission = this.root.submission;
-            if (!submission.metadata.selectData) {
-                submission.metadata.selectData = {};
-            }
-            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[valueConverted]);
-        }
-        return super.normalizeValue(valueConverted);
+    isSingleInputValue() {
+        return true;
     }
 }
 exports.default = RadioComponent;

package/lib/cjs/components/selectboxes/SelectBoxes.d.ts

@@ -8,12 +8,6 @@ export default class SelectBoxesComponent extends RadioComponent {
      * @returns {boolean} - If the value is empty.
      */
     isEmpty(value?: any): boolean;
-    /**
-     * Normalize values coming into updateValue.
-     * @param {any} value - The value to normalize.
-     * @returns {*} - The normalized value
-     */
-    normalizeValue(value: any): any;
     setInputsDisabled(value: any, onlyUnchecked: any): void;
     checkComponentValidity(data: any, dirty: any, rowData: any, options: any, errors?: any[]): boolean;
 }

package/lib/cjs/translations/en.d.ts

@@ -70,7 +70,6 @@ declare const _default: {
     reCaptchaTokenValidationError: string;
     reCaptchaTokenNotSpecifiedError: string;
     apiKey: string;
-    apiKeyNotValid: string;
     typeRemaining: string;
     typeCount: string;
     requiredDayField: string;

package/lib/cjs/translations/en.js

@@ -5,6 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 const bootstrap_1 = __importDefault(require("@formio/bootstrap"));
-exports.default = Object.assign(Object.assign({}, (((_a = bootstrap_1.default === null || bootstrap_1.default === void 0 ? void 0 : bootstrap_1.default.translations) === null || _a === void 0 ? void 0 : _a.en) || {})), { unsavedRowsError: 'Please save all rows before proceeding.', invalidRowsError: 'Please correct invalid rows before proceeding.', invalidRowError: 'Invalid row. Please correct it or delete.', invalidOption: '{{field}} is an invalid value.', invalidDay: '{{field}} is not a valid day.', complete: 'Submission Complete', error: 'Please fix the following errors before submitting.', errorListHotkey: 'Press Ctrl + Alt + X to go back to the error list.', errorsListNavigationMessage: 'Click to navigate to the field with following error.', submitError: 'Please check the form and correct all errors before submitting.', required: '{{field}} is required', unique: '{{field}} must be unique', array: '{{field}} must be an array', array_nonempty: '{{field}} must be a non-empty array', nonarray: '{{field}} must not be an array', select: '{{field}} contains an invalid selection', pattern: '{{field}} does not match the pattern {{pattern}}', minLength: '{{field}} must have at least {{length}} characters.', maxLength: '{{field}} must have no more than {{length}} characters.', minWords: '{{field}} must have at least {{length}} words.', maxWords: '{{field}} must have no more than {{length}} words.', min: '{{field}} cannot be less than {{min}}.', max: '{{field}} cannot be greater than {{max}}.', maxDate: '{{field}} should not contain date after {{maxDate}}', minDate: '{{field}} should not contain date before {{minDate}}', maxYear: '{{field}} should not contain year greater than {{maxYear}}', minYear: '{{field}} should not contain year less than {{minYear}}', minSelectedCount: 'You must select at least {{minCount}} items', maxSelectedCount: 'You may only select up to {{maxCount}} items', invalid_email: '{{field}} must be a valid email.', invalid_url: '{{field}} must be a valid url.', invalid_regex: '{{field}} does not match the pattern {{regex}}.', invalid_date: '{{field}} is not a valid date.', invalid_day: '{{field}} is not a valid day.', invalidValueProperty: 'Invalid Value Property', mask: '{{field}} does not match the mask.', valueIsNotAvailable: '{{ field }} is an invalid value.', stripe: '{{stripe}}', month: 'Month', day: 'Day', year: 'Year', january: 'January', february: 'February', march: 'March', april: 'April', may: 'May', june: 'June', july: 'July', august: 'August', september: 'September', october: 'October', november: 'November', december: 'December', next: 'Next', previous: 'Previous', cancel: 'Cancel', submit: 'Submit Form', confirmCancel: 'Are you sure you want to cancel?', saveDraftInstanceError: 'Cannot save draft because there is no formio instance.', saveDraftAuthError: 'Cannot save draft unless a user is authenticated.', restoreDraftInstanceError: 'Cannot restore draft because there is no formio instance.', saveDraftError: 'Unable to save draft.', restoreDraftError: 'Unable to restore draft.', time: 'Invalid time', cancelButtonAriaLabel: 'Cancel button. Click to reset the form', previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab', nextButtonAriaLabel: 'Next button. Click to go to the next tab', submitButtonAriaLabel: 'Submit Form button. Click to submit the form', reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error', reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission', apiKey: 'API Key is not unique: {{key}}', apiKeyNotValid: 'API Key is not valid: {{key}}', typeRemaining: '{{ remaining }} {{ type }} remaining.', typeCount: '{{ count }} {{ type }}', requiredDayField: '{{ field }} is required', requiredDayEmpty: '{{ field }} is required', requiredMonthField: '{{ field }} is required', requiredYearField: '{{ field }} is required', formNotReady: 'Form not ready. Use form.ready promise', noFormElement: 'No DOM element for form.', notUniqueKey: 'API Key is not unique', newFormSchema: 'Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.', missingUrl: 'Missing URL argument', urlNotAttachedToBtn: 'You should add a URL to this button.', loadingProjectSettingsError: 'Could not load project settings', sessionStorageSupportError: 'Session storage is not supported in this browser.', builderUniqueError: `You cannot add more than one {{componentKeyOrTitle}} component to one page.`, pageNotFound: 'Page not found', noDragInfoError: 'There is no Drag Info available for either dragged or sibling element', addonSupportTypeError: 'Addon {{label}} does not support component of type {{type}}', setPathError: 'Should not be setting the path of a component.', calculatedPathDeprecation: 'component.calculatedPath was deprecated, use component.path instead.', unknownTemplate: 'Unknown template: {{name}}', unknownComponent: 'Unknown component: {{type}}', renderTemplateFunctionDeprecation: `Form.io 'render' template function is deprecated.
+exports.default = Object.assign(Object.assign({}, (((_a = bootstrap_1.default === null || bootstrap_1.default === void 0 ? void 0 : bootstrap_1.default.translations) === null || _a === void 0 ? void 0 : _a.en) || {})), { unsavedRowsError: 'Please save all rows before proceeding.', invalidRowsError: 'Please correct invalid rows before proceeding.', invalidRowError: 'Invalid row. Please correct it or delete.', invalidOption: '{{field}} is an invalid value.', invalidDay: '{{field}} is not a valid day.', complete: 'Submission Complete', error: 'Please fix the following errors before submitting.', errorListHotkey: 'Press Ctrl + Alt + X to go back to the error list.', errorsListNavigationMessage: 'Click to navigate to the field with following error.', submitError: 'Please check the form and correct all errors before submitting.', required: '{{field}} is required', unique: '{{field}} must be unique', array: '{{field}} must be an array', array_nonempty: '{{field}} must be a non-empty array', nonarray: '{{field}} must not be an array', select: '{{field}} contains an invalid selection', pattern: '{{field}} does not match the pattern {{pattern}}', minLength: '{{field}} must have at least {{length}} characters.', maxLength: '{{field}} must have no more than {{length}} characters.', minWords: '{{field}} must have at least {{length}} words.', maxWords: '{{field}} must have no more than {{length}} words.', min: '{{field}} cannot be less than {{min}}.', max: '{{field}} cannot be greater than {{max}}.', maxDate: '{{field}} should not contain date after {{maxDate}}', minDate: '{{field}} should not contain date before {{minDate}}', maxYear: '{{field}} should not contain year greater than {{maxYear}}', minYear: '{{field}} should not contain year less than {{minYear}}', minSelectedCount: 'You must select at least {{minCount}} items', maxSelectedCount: 'You may only select up to {{maxCount}} items', invalid_email: '{{field}} must be a valid email.', invalid_url: '{{field}} must be a valid url.', invalid_regex: '{{field}} does not match the pattern {{regex}}.', invalid_date: '{{field}} is not a valid date.', invalid_day: '{{field}} is not a valid day.', invalidValueProperty: 'Invalid Value Property', mask: '{{field}} does not match the mask.', valueIsNotAvailable: '{{ field }} is an invalid value.', stripe: '{{stripe}}', month: 'Month', day: 'Day', year: 'Year', january: 'January', february: 'February', march: 'March', april: 'April', may: 'May', june: 'June', july: 'July', august: 'August', september: 'September', october: 'October', november: 'November', december: 'December', next: 'Next', previous: 'Previous', cancel: 'Cancel', submit: 'Submit Form', confirmCancel: 'Are you sure you want to cancel?', saveDraftInstanceError: 'Cannot save draft because there is no formio instance.', saveDraftAuthError: 'Cannot save draft unless a user is authenticated.', restoreDraftInstanceError: 'Cannot restore draft because there is no formio instance.', saveDraftError: 'Unable to save draft.', restoreDraftError: 'Unable to restore draft.', time: 'Invalid time', cancelButtonAriaLabel: 'Cancel button. Click to reset the form', previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab', nextButtonAriaLabel: 'Next button. Click to go to the next tab', submitButtonAriaLabel: 'Submit Form button. Click to submit the form', reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error', reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission', apiKey: 'API Key is not unique: {{key}}', typeRemaining: '{{ remaining }} {{ type }} remaining.', typeCount: '{{ count }} {{ type }}', requiredDayField: '{{ field }} is required', requiredDayEmpty: '{{ field }} is required', requiredMonthField: '{{ field }} is required', requiredYearField: '{{ field }} is required', formNotReady: 'Form not ready. Use form.ready promise', noFormElement: 'No DOM element for form.', notUniqueKey: 'API Key is not unique', newFormSchema: 'Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.', missingUrl: 'Missing URL argument', urlNotAttachedToBtn: 'You should add a URL to this button.', loadingProjectSettingsError: 'Could not load project settings', sessionStorageSupportError: 'Session storage is not supported in this browser.', builderUniqueError: `You cannot add more than one {{componentKeyOrTitle}} component to one page.`, pageNotFound: 'Page not found', noDragInfoError: 'There is no Drag Info available for either dragged or sibling element', addonSupportTypeError: 'Addon {{label}} does not support component of type {{type}}', setPathError: 'Should not be setting the path of a component.', calculatedPathDeprecation: 'component.calculatedPath was deprecated, use component.path instead.', unknownTemplate: 'Unknown template: {{name}}', unknownComponent: 'Unknown component: {{type}}', renderTemplateFunctionDeprecation: `Form.io 'render' template function is deprecated.
     If you need to render template (template A) inside of another template (template B),
     pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`, whenReadyDeprecation: 'The whenReady() method has been deprecated. Please use the dataReady property instead.', loadResourcesError: 'Unable to load resources for {{componentKey}}', noSelectDataConfiguration: 'Select component {{componentKey}} does not have data configuration.', indexedDBSupportError: "Your browser doesn't support current version of indexedDB", caretPositionSavingError: 'An error occurred while trying to save caret position', iteratableRowsError: 'Getter #iteratableRows() is not implemented', checkRowDeprecation: 'Deprecation Warning: checkRow method has been replaced with processRow', noOAuthBtn: 'You must add the OAuth button to a form for it to function properly', noOAuthConfiguration: 'OAuth not configured. You must configure oauth for your project before it will work.', oAuthErrorsTitle: 'The Following Error Has Occured', noOAuthFormUrl: 'You must attach a Form API url to your form in order to use OAuth buttons.', oAuthStateError: 'OAuth state does not match. Please try logging in again.', componentInvalidRowValidation: 'Invalid row validation for {{componentKey}}', videoPlayerNotFound: 'Video player not found in template.', synchronizationFailed: 'Synchronization is failed', fileWithDuplicatedNameInProgress: 'File with the same name is already being uploaded', fileWithDuplicatedNameLoaded: 'File with the same name is already uploaded', nestedForm: 'Nested form', noDataProvided: 'No data provided', subformSubmissionLoadingError: 'Unable to load subform submission {{submissionId}}:', noDelimiterSet: 'In order for thousands separator to work properly, you must set the delimiter to true in the component json', noSiteKey: 'There is no Site Key specified in settings in form JSON', failedToNormalize: 'Failed to normalize value', failedToCompareItems: 'Error while comparing items', editorFocusError: 'An editor did not initialize properly when trying to focus:', quillImageUploadFailed: 'Quill image upload failed', noFilesSelected: 'No files selected', needConfigurationForQuill: 'The WYSIWYG settings are configured for CKEditor. For this renderer, you will need to use configurations for the Quill Editor. See https://quilljs.com/docs/configuration for more information.', waitPdfConverting: 'Converting PDF. Please wait.', uploading: 'Uploading', pasteBelow: 'Paste below', copy: 'Copy', move: 'Move', edit: 'Edit', editJson: 'Edit JSON', remove: 'Remove', clickToSetValue: 'Click to set value', words: 'words', characters: 'characters', addAnother: 'Add Another', yes: 'Yes', no: 'No', wantToClearData: 'Do you want to clear data?', yesDelete: 'Yes, delete it', waitFileProcessing: 'Processing file. Please wait...', wrongFileType: 'File is the wrong type; it must be {{ pattern }}', fileTooSmall: 'File is too small; it must be at least {{ size }}', fileTooBig: 'File is too big; it must be at most {{ size }}', noFileService: 'File Service not provided.', fileProcessingFailed: 'File processing has been failed.', readyForUpload: 'Ready to be uploaded into storage', readyForRemovingFromStorage: 'Ready to be removed from storage', preparingFileToRemove: 'Preparing file to remove', succefullyRemoved: 'Succefully removed', succefullyUploaded: 'Succefully uploaded', maxSelectItems: 'You may only select up to {{maxCount}} items', minSelectItems: 'You must select at least {{minCount}} items', clickToSign: 'Click to Sign', surveyQuestion: 'Question', surveyQuestionValue: 'Value', success: 'Success', noResultsFound: 'No results found', noChoices: 'No choices to choose from', typeToSearch: 'Type to search', loading: 'Loading' });

package/lib/cjs/utils/utils.js

@@ -209,20 +209,13 @@ function checkSimpleConditional(component, condition, row, data, instance) {
             return true;
         }
         const conditionsResult = lodash_1.default.map(conditions, (cond) => {
+            var _a, _b;
             const { value: comparedValue, operator, component: conditionComponentPath } = cond;
             if (!conditionComponentPath) {
                 return true;
             }
             const splittedConditionPath = conditionComponentPath.split('.');
-            const checkParentTypeInTree = (instance, componentType) => {
-                if (!(instance === null || instance === void 0 ? void 0 : instance.parent)) {
-                    return false;
-                }
-                return (instance === null || instance === void 0 ? void 0 : instance.parent.type) === componentType || checkParentTypeInTree(instance.parent, componentType);
-            };
-            const conditionalPaths = checkParentTypeInTree(instance, 'datagrid') || checkParentTypeInTree(instance, 'editgrid')
-                ? []
-                : getConditionalPathsRecursive(splittedConditionPath, data);
+            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);
             if (conditionalPaths.length > 0) {
                 return conditionalPaths.map((path) => {
                     const value = getComponentActualValue(path, data, row);
@@ -341,7 +334,7 @@ function getRow(component, row, instance, conditional) {
     }
     const dataParent = getDataParentComponent(instance);
     if (dataParent) {
-        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath;
+        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;
         const isTriggerCondtionComponentPath = condition.when || !condition.conditions
             ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)
             : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });

package/lib/mjs/WebformBuilder.js

@@ -1127,19 +1127,12 @@ export default class WebformBuilder extends Component {
     highlightInvalidComponents() {
         const repeatablePaths = this.findRepeatablePaths();
         let hasInvalidComponents = false;
-        // Matches anything expect letters and  '_' at the beginning of the key and anything except of letters, numbers,
-        // '-', '.' and '_' in the rest of the key
-        const badCharacters = /^[^A-Za-z_]+|[^A-Za-z0-9\-._]+/g;
         this.webform.everyComponent((comp) => {
             const path = comp.path;
             if (repeatablePaths.includes(path)) {
                 comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
-            else if (comp.key.replace(badCharacters, '') === '') {
-                comp.setCustomValidity(this.t('apiKeyNotValid', { key: comp.key }));
-                hasInvalidComponents = true;
-            }
             else {
                 comp.setCustomValidity();
             }

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

@@ -27,8 +27,8 @@ export default class RadioComponent extends ListComponent {
     itemsLoadedResolve: ((value: any) => void) | undefined;
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
+    valuesMap: Map<any, any> | undefined;
     beforeSubmit(): Promise<any>;
-    convertValues(values: any): any;
     render(): string;
     attach(element: any): Promise<void>;
     detach(element: any): void;
@@ -36,18 +36,14 @@ export default class RadioComponent extends ListComponent {
     validateValueAvailability(setting: any, value: any): boolean;
     getValueAsString(value: any, options?: {}): any;
     setValueAt(index: any, value: any): void;
+    prepareValue(item: any, options?: {}): any;
+    getValueByInput(input: any): any;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     loadItemsFromMetadata(): void;
     setItems(items: any): void;
     setSelectedClasses(): void;
+    setMetadata(value: any): void;
     updateValue(value: any, flags: any): boolean;
     currentValue: 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
-     */
-    convertByDataType(value: any): any;
-    normalizeValue(value: any): any;
 }
 import ListComponent from '../_classes/list/ListComponent';

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

@@ -1,7 +1,8 @@
 import _ from 'lodash';
 import ListComponent from '../_classes/list/ListComponent';
 import { Formio } from '../../Formio';
-import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { v4 as uuidv4 } from 'uuid';
 export default class RadioComponent extends ListComponent {
     static schema(...extend) {
         return ListComponent.schema({
@@ -142,6 +143,7 @@ export default class RadioComponent extends ListComponent {
         });
         this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';
         this.loadedOptions = [];
+        this.valuesMap = new Map();
         if (!this.visible) {
             this.itemsLoadedResolve();
         }
@@ -153,12 +155,6 @@ export default class RadioComponent extends ListComponent {
             this.dataReady.then(() => res(true));
         });
     }
-    convertValues(values) {
-        if (this.options.renderMode === 'html' && this.type === 'radio') {
-            return values.map(x => ({ ...x, value: this.convertByDataType(x.value) }));
-        }
-        return values;
-    }
     render() {
         if (!this.optionsLoaded) {
             return super.render(this.renderTemplate('loader'));
@@ -166,7 +162,7 @@ export default class RadioComponent extends ListComponent {
         return super.render(this.renderTemplate('radio', {
             input: this.inputInfo,
             inline: this.component.inline,
-            values: this.component.dataSrc === 'values' ? this.convertValues(this.component.values) : this.loadedOptions,
+            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,
             value: this.dataValue,
             row: this.row,
         }));
@@ -187,9 +183,12 @@ export default class RadioComponent extends ListComponent {
                 if (!_.isString(this.dataValue)) {
                     dataValue = _.toString(this.dataValue);
                 }
-                if (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) {
-                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;
-                    input.checked = _.isEqual(optionValue, this.dataValue);
+                if (this.isSelectURL) {
+                    const valueKey = this.loadedOptions[index].value;
+                    const optionValue = this.valuesMap.has(valueKey)
+                        ? this.valuesMap.get(valueKey)
+                        : valueKey;
+                    input.checked = _.isEqual(this.normalizeValue(optionValue), this.dataValue);
                 }
                 else {
                     input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
@@ -226,9 +225,14 @@ export default class RadioComponent extends ListComponent {
         let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;
         this.refs.input.forEach((input, index) => {
             if (input.checked) {
-                value = (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) ?
-                    this.loadedOptions[index].value :
-                    input.value;
+                if (!this.isSelectURL) {
+                    value = input.value;
+                    return;
+                }
+                const optionValue = this.loadedOptions[index].value;
+                value = this.valuesMap.has(optionValue)
+                    ? this.valuesMap.get(optionValue)
+                    : optionValue;
             }
         });
         return value;
@@ -272,8 +276,8 @@ export default class RadioComponent extends ListComponent {
     }
     setValueAt(index, value) {
         if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {
-            const inputValue = this.refs.input[index].value;
-            this.refs.input[index].checked = (inputValue === value.toString());
+            const inputValue = this.getValueByInput(this.refs.input[index]);
+            this.refs.input[index].checked = _.isEqual(inputValue, value);
         }
     }
     get shouldLoad() {
@@ -283,6 +287,23 @@ export default class RadioComponent extends ListComponent {
         }
         return super.shouldLoad;
     }
+    prepareValue(item, options = {}) {
+        const value = this.component.valueProperty && !options.skipValueProperty
+            ? _.get(item, this.component.valueProperty)
+            : item;
+        if (this.component.type === 'radio' && typeof value !== 'string') {
+            const uuid = uuidv4();
+            this.valuesMap.set(uuid, value);
+            return uuid;
+        }
+        return value;
+    }
+    getValueByInput(input) {
+        const inputValue = input.value;
+        return this.valuesMap.has(inputValue)
+            ? this.valuesMap.get(inputValue)
+            : inputValue;
+    }
     loadItems(url, search, headers, options, method, body) {
         if (this.optionsLoaded) {
             this.itemsLoadedResolve();
@@ -333,7 +354,7 @@ export default class RadioComponent extends ListComponent {
                 label: this.itemTemplate(item)
             };
             if (_.isEqual(item, this.selectData || _.pick(this.dataValue, _.keys(item)))) {
-                this.loadedOptions[i].value = this.dataValue;
+                this.loadedOptions[i].value = this.prepareValue(this.dataValue, { skipValueProperty: true });
             }
         });
         this.optionsLoaded = true;
@@ -343,12 +364,15 @@ export default class RadioComponent extends ListComponent {
         const listData = [];
         items?.forEach((item, i) => {
             const valueAtProperty = _.get(item, this.component.valueProperty);
-            this.loadedOptions[i] = {
-                value: this.component.valueProperty ? valueAtProperty : item,
-                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)
-            };
-            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);
-            const value = this.loadedOptions[i].value;
+            const value = this.prepareValue(item);
+            const label = this.component.valueProperty
+                ? this.itemTemplate(item, valueAtProperty, i)
+                : this.itemTemplate(item, item, i);
+            this.loadedOptions[i] = { label, value };
+            listData.push(this.templateData[i]);
+            if (this.valuesMap.has(value)) {
+                this.templateData[value] = this.templateData[i];
+            }
             if (!this.isRadio && (_.isObject(value) || _.isBoolean(value) || _.isUndefined(value))) {
                 this.loadedOptions[i].invalid = true;
             }
@@ -371,7 +395,11 @@ export default class RadioComponent extends ListComponent {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (value === undefined || value === null) ? false : (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
+                        : _.isEqual(this.normalizeValue(this.getValueByInput(input)), value);
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
@@ -385,10 +413,25 @@ export default class RadioComponent extends ListComponent {
             });
         }
     }
+    setMetadata(value) {
+        let key = value;
+        if (typeof value !== 'string') {
+            const checkedInput = Array.prototype.find.call(this.refs.input ?? [], (input => input.type === 'radio' && input.getAttribute('checked')));
+            key = checkedInput?.value || key;
+        }
+        if (this.isSelectURL && this.templateData && this.templateData[key]) {
+            const submission = this.root.submission;
+            if (!submission.metadata.selectData) {
+                submission.metadata.selectData = {};
+            }
+            _.set(submission.metadata.selectData, this.path, this.templateData[key]);
+        }
+    }
     updateValue(value, flags) {
         const changed = super.updateValue(value, flags);
         if (changed) {
             this.setSelectedClasses();
+            this.setMetadata(this.dataValue);
         }
         if (!flags || !flags.modified || !this.isRadio) {
             if (changed) {
@@ -412,7 +455,7 @@ export default class RadioComponent extends ListComponent {
      * @param {*} value - The value to normalize
      * @returns {*} - Returns the normalized value
      */
-    convertByDataType(value) {
+    normalizeValue(value) {
         const dataType = this.component.dataType || 'auto';
         if (value === this.emptyValue) {
             return value;
@@ -444,17 +487,9 @@ export default class RadioComponent extends ListComponent {
                 value = !(!value || value.toString() === 'false');
                 break;
         }
-        return value;
+        return super.normalizeValue(value);
     }
-    normalizeValue(value) {
-        const valueConverted = this.convertByDataType(value);
-        if (this.isSelectURL && this.templateData && this.templateData[valueConverted]) {
-            const submission = this.root.submission;
-            if (!submission.metadata.selectData) {
-                submission.metadata.selectData = {};
-            }
-            _.set(submission.metadata.selectData, this.path, this.templateData[valueConverted]);
-        }
-        return super.normalizeValue(valueConverted);
+    isSingleInputValue() {
+        return true;
     }
 }

package/lib/mjs/components/selectboxes/SelectBoxes.d.ts

@@ -8,12 +8,6 @@ export default class SelectBoxesComponent extends RadioComponent {
      * @returns {boolean} - If the value is empty.
      */
     isEmpty(value?: any): boolean;
-    /**
-     * Normalize values coming into updateValue.
-     * @param {any} value - The value to normalize.
-     * @returns {*} - The normalized value
-     */
-    normalizeValue(value: any): any;
     setInputsDisabled(value: any, onlyUnchecked: any): void;
     checkComponentValidity(data: any, dirty: any, rowData: any, options: any, errors?: any[]): boolean;
 }

package/lib/mjs/translations/en.d.ts

@@ -70,7 +70,6 @@ declare const _default: {
     reCaptchaTokenValidationError: string;
     reCaptchaTokenNotSpecifiedError: string;
     apiKey: string;
-    apiKeyNotValid: string;
     typeRemaining: string;
     typeCount: string;
     requiredDayField: string;

package/lib/mjs/translations/en.js

@@ -72,7 +72,6 @@ export default {
     reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',
     reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',
     apiKey: 'API Key is not unique: {{key}}',
-    apiKeyNotValid: 'API Key is not valid: {{key}}',
     typeRemaining: '{{ remaining }} {{ type }} remaining.',
     typeCount: '{{ count }} {{ type }}',
     requiredDayField: '{{ field }} is required',