@formio/js 5.0.0-rc.43 → 5.0.0-rc.44

package/dist/formio.utils.min.js.LICENSE.txt

@@ -12,7 +12,7 @@
 
 /*! @license DOMPurify 3.1.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.0/LICENSE */
 
-/*! formiojs v5.0.0-rc.43 | https://unpkg.com/formiojs@5.0.0-rc.43/LICENSE.txt */
+/*! formiojs v5.0.0-rc.44 | https://unpkg.com/formiojs@5.0.0-rc.44/LICENSE.txt */
 
 /**
  * @license

package/lib/cjs/Element.js

@@ -98,6 +98,8 @@ class Element {
      *
      * @param {string} event - The event you wish to register the handler for.
      * @param {function} cb - The callback handler to handle this event.
+     * @param {boolean} [internal] - This is an internal event handler.
+     * @param {boolean} [once] - This event should only fire once.
      */
     on(event, cb, internal, once = false) {
         if (!this.events) {

package/lib/cjs/Form.js

@@ -125,7 +125,9 @@ class Form extends Element_1.default {
             this.element.appendChild(this.loader);
         }
         else if (this.loader) {
-            this.element.removeChild(this.loader);
+            if (this.element.contains(this.loader)) {
+                this.element.removeChild(this.loader);
+            }
             this.loader = null;
         }
     }

package/lib/cjs/Webform.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const compare_versions_1 = require("compare-versions");
+const core_1 = require("@formio/core");
 const EventEmitter_1 = __importDefault(require("./EventEmitter"));
 const i18n_1 = __importDefault(require("./i18n"));
 const Formio_1 = require("./Formio");
@@ -39,6 +40,89 @@ function getOptions(options) {
     }
     return options;
 }
+/**
+ * Represents a JSON value.
+ * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON
+ */
+/**
+ * Represents a JSON array.
+ * @typedef {Array<JSON>} JSONArray
+ */
+/**
+ * Represents a JSON object.
+ * @typedef {{[key: string]: JSON}} JSONObject
+ */
+/**
+ * @typedef {Object} FormioHooks
+ * @property {function} [beforeSubmit]
+ * @property {function} [beforeCancel]
+ * @property {function} [beforeNext]
+ * @property {function} [beforePrev]
+ * @property {function} [attachComponent]
+ * @property {function} [setDataValue]
+ * @property {function} [addComponents]
+ * @property {function} [addComponent]
+ * @property {function} [customValidation]
+ * @property {function} [attachWebform]
+ */
+/**
+ * @typedef {Object} SanitizeConfig
+ * @property {string[]} [addAttr]
+ * @property {string[]} [addTags]
+ * @property {string[]} [allowedAttrs]
+ * @property {string[]} [allowedTags]
+ * @property {string[]} [allowedUriRegex]
+ * @property {string[]} [addUriSafeAttr]
+ */
+/**
+ * @typedef {Object} ButtonSettings
+ * @property {boolean} [showPrevious]
+ * @property {boolean} [showNext]
+ * @property {boolean} [showCancel]
+ * @property {boolean} [showSubmit]
+ */
+/**
+ * @typedef {Object} FormOptions
+ * @property {boolean} [saveDraft] - Enable the save draft feature.
+ * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
+ * @property {boolean} [readOnly] - Set this form to readOnly.
+ * @property {boolean} [noAlerts] - Disable the alerts dialog.
+ * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {string} [template] - Custom logic for creation of elements.
+ * @property {boolean} [noDefaults] - Exclude default values from the settings.
+ * @property {any} [fileService] - The file service for this form.
+ * @property {EventEmitter} [events] - The EventEmitter for this form.
+ * @property {string} [language] - The language to render this form in.
+ * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.
+ * @property {boolean} [viewAsHtml] - View the form as raw HTML.
+ * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.
+ * @property {boolean} [highlightErrors] - Highlight any errors on the form.
+ * @property {string} [componentErrorClass] - The error class for components.
+ * @property {any} [templates] - The templates for this form.
+ * @property {string} [iconset] - The iconset for this form.
+ * @property {Component[]} [components] - The components for this form.
+ * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.
+ * @property {boolean} [showHiddenFields] - Show hidden fields.
+ * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.
+ * @property {{[key: string]: boolean}} [show] - Components to show for this form.
+ * @property {Formio} [formio] - The Formio instance for this form.
+ * @property {string} [decimalSeparator] - The decimal separator for this form.
+ * @property {string} [thousandsSeparator] - The thousands separator for this form.
+ * @property {FormioHooks} [hooks] - The hooks for this form.
+ * @property {boolean} [alwaysDirty] - Always be dirty.
+ * @property {boolean} [skipDraftRestore] - Skip restoring a draft.
+ * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.
+ * @property {string} [cdnUrl] - The CDN url for this form.
+ * @property {boolean} [flatten] - Flatten the form.
+ * @property {boolean} [sanitize] - Sanitize the form.
+ * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.
+ * @property {ButtonSettings} [buttonSettings] - The button settings for this form.
+ * @property {Object} [breadCrumbSettings] - The breadcrumb settings for this form.
+ * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).
+ * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).
+ * @property {boolean} [showCheckboxBackground] - Show the checkbox background.
+ * @property {number} [zoom] - The zoom for PDF forms.
+ */
 /**
  * Renders a Form.io form within the webpage.
  */
@@ -46,25 +130,19 @@ class Webform extends NestedDataComponent_1.default {
     /**
      * Creates a new Form instance.
      *
-     * @param {Object} options - The options to create a new form instance.
-     * @param {boolean} options.saveDraft - Set this if you would like to enable the save draft feature.
-     * @param {boolean} options.saveDraftThrottle - The throttle for the save draft feature.
-     * @param {boolean} options.readOnly - Set this form to readOnly
-     * @param {boolean} options.noAlerts - Set to true to disable the alerts dialog.
-     * @param {boolean} options.i18n - The translation file for this rendering. @see https://github.com/formio/formio.js/blob/master/i18n.js
-     * @param {boolean} options.template - Provides a way to inject custom logic into the creation of every element rendered within the form.
+     * @param {HTMLElement | Object | FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
+     * @param {FormOptions} [options] - The options to create a new form instance.
      */
-    /* eslint-disable max-statements */
-    constructor() {
-        let element, options;
-        if (arguments[0] instanceof HTMLElement || arguments[1]) {
-            element = arguments[0];
-            options = arguments[1];
+    constructor(elementOrOptions, options) {
+        let element, formOptions;
+        if (elementOrOptions instanceof HTMLElement || options) {
+            element = elementOrOptions;
+            formOptions = options;
         }
         else {
-            options = arguments[0];
+            formOptions = elementOrOptions;
         }
-        super(null, getOptions(options));
+        super(null, getOptions(formOptions));
         this.executeShortcuts = (event) => {
             const { target } = event;
             if (!this.keyboardCatchableElement(target)) {

package/lib/cjs/WebformBuilder.js

@@ -178,7 +178,7 @@ class WebformBuilder extends Component_1.default {
                 return element;
             }
             // Attach container and component to element for later reference.
-            const containerElement = element.querySelector(`[ref="${component.component.key}-container"]`) || element;
+            const containerElement = element.querySelector(`[${this._referenceAttributeName}="${component.component.key}-container"]`) || element;
             containerElement.formioContainer = container;
             containerElement.formioComponent = component;
             // Add container to draggable list.
@@ -1025,7 +1025,7 @@ class WebformBuilder extends Component_1.default {
             };
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));
-            const previewElement = this.componentEdit.querySelector('[ref="preview"]');
+            const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}="preview"]`);
             if (previewElement) {
                 this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);
                 this.preview.attach(previewElement);
@@ -1193,7 +1193,7 @@ class WebformBuilder extends Component_1.default {
         this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);
     }
     attachEditComponentControls(component, parent, isNew, original, ComponentClass) {
-        const cancelButtons = this.componentEdit.querySelectorAll('[ref="cancelButton"]');
+        const cancelButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="cancelButton"]`);
         cancelButtons.forEach((cancelButton) => {
             this.editForm.addEventListener(cancelButton, 'click', (event) => {
                 event.preventDefault();
@@ -1203,7 +1203,7 @@ class WebformBuilder extends Component_1.default {
                 this.highlightInvalidComponents();
             });
         });
-        const removeButtons = this.componentEdit.querySelectorAll('[ref="removeButton"]');
+        const removeButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="removeButton"]`);
         removeButtons.forEach((removeButton) => {
             this.editForm.addEventListener(removeButton, 'click', (event) => {
                 event.preventDefault();
@@ -1215,7 +1215,7 @@ class WebformBuilder extends Component_1.default {
                 this.highlightInvalidComponents();
             });
         });
-        const saveButtons = this.componentEdit.querySelectorAll('[ref="saveButton"]');
+        const saveButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="saveButton"]`);
         saveButtons.forEach((saveButton) => {
             this.editForm.addEventListener(saveButton, 'click', (event) => {
                 event.preventDefault();
@@ -1231,7 +1231,7 @@ class WebformBuilder extends Component_1.default {
                 this.saveComponent(component, parent, isNew, original);
             });
         });
-        const previewButtons = this.componentEdit.querySelectorAll('[ref="previewButton"]');
+        const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="previewButton"]`);
         previewButtons.forEach((previewButton) => {
             this.editForm.addEventListener(previewButton, 'click', (event) => {
                 event.preventDefault();
@@ -1244,7 +1244,7 @@ class WebformBuilder extends Component_1.default {
                     showPreview: this.showPreview,
                     helplinks: this.helplinks,
                 }));
-                this.editForm.attach(this.componentEdit.querySelector('[ref="editForm"]'));
+                this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });
@@ -1336,7 +1336,7 @@ class WebformBuilder extends Component_1.default {
         }));
         this.dialog = this.createModal(this.componentEdit, lodash_1.default.get(this.options, 'dialogAttr', {}));
         // This is the attach step.
-        this.editForm.attach(this.componentEdit.querySelector('[ref="editForm"]'));
+        this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
         this.hook('editFormWrapper');
         this.updateComponent(componentCopy);
         this.editForm.on('change', (event) => {

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

@@ -354,6 +354,10 @@ class Component extends Element_1.default {
         this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;
         this._visible = this._parentVisible && this.conditionallyVisible(null, data);
         this._parentDisabled = false;
+        /**
+         * The reference attribute name for this component
+         */
+        this._referenceAttributeName = 'ref';
         /**
          * Used to trigger a new change in this component.
          * @type {function} - Call to trigger a change in this component.
@@ -809,21 +813,22 @@ class Component extends Element_1.default {
         const name = names[names.length - 1];
         const templatesByName = Templates_1.default.defaultTemplates[name];
         if (!templatesByName) {
-            return `Unknown template: ${name}`;
+            return { template: `Unknown template: ${name}` };
         }
         const templateByMode = this.checkTemplateMode(templatesByName, modes);
         if (templateByMode) {
-            return templateByMode;
+            return { template: templateByMode };
         }
-        return templatesByName.form;
+        return { template: templatesByName.form };
     }
     checkTemplate(templates, names, modes) {
         for (const name of names) {
             const templatesByName = templates[name];
             if (templatesByName) {
+                const { referenceAttributeName } = templatesByName;
                 const templateByMode = this.checkTemplateMode(templatesByName, modes);
                 if (templateByMode) {
-                    return templateByMode;
+                    return { template: templateByMode, referenceAttributeName };
                 }
             }
         }
@@ -880,7 +885,11 @@ class Component extends Element_1.default {
             `${name}`,
         ];
         // Allow template alters.
-        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(this.getTemplate(names, mode), data), data, mode);
+        const { referenceAttributeName, template } = this.getTemplate(names, mode);
+        if (referenceAttributeName) {
+            this._referenceAttributeName = referenceAttributeName;
+        }
+        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);
     }
     /**
      * Sanitize an html string.
@@ -996,11 +1005,19 @@ class Component extends Element_1.default {
         // Return current timezone if none are provided.
         return (0, utils_1.currentTimezone)();
     }
-    loadRefs(element, refs) {
+    /**
+     *
+     * @param {HTMLElement} element - The containing DOM element to query for the ref value.
+     * @param {object} refs - The references to load.
+     * @param {string} [referenceAttributeName] - The attribute name to use for the reference.
+     */
+    loadRefs(element, refs, referenceAttributeName) {
         for (const ref in refs) {
             const refType = refs[ref];
             const isString = typeof refType === 'string';
-            const selector = isString && refType.includes('scope') ? `:scope > [ref="${ref}"]` : `[ref="${ref}"]`;
+            const selector = isString && refType.includes('scope')
+                ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}="${ref}"]`
+                : `[${referenceAttributeName || this._referenceAttributeName || 'ref'}="${ref}"]`;
             if (isString && refType.startsWith('single')) {
                 this.refs[ref] = element.querySelector(selector);
             }
@@ -1076,7 +1093,7 @@ class Component extends Element_1.default {
         });
     }
     createComponentModal(element, modalShouldBeOpened, currentValue) {
-        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue);
+        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
     }
     attach(element) {
         if (!this.builderMode && !this.previewMode && this.component.modalEdit) {

package/lib/cjs/components/_classes/componentModal/ComponentModal.js

@@ -10,7 +10,8 @@ class ComponentModal {
         const children = component.renderTemplate('component', data, topLevel);
         return component.renderTemplate('componentModal', Object.assign(Object.assign({}, data), { children }));
     }
-    constructor(component, element, isOpened, currentValue) {
+    constructor(component, element, isOpened, currentValue, referenceAttributeName = 'ref') {
+        this._referenceAttributeName = referenceAttributeName;
         this.isOpened = isOpened;
         this.component = component;
         this.element = element;
@@ -146,10 +147,10 @@ class ComponentModal {
     showDialog() {
         this.dialogElement = this.component.ce('div');
         const dialogContent = `
-      <h3 ref="dialogHeader">${this.component.t('Do you want to clear changes?')}</h3>
+      <h3 ${this._referenceAttributeName}="dialogHeader">${this.component.t('Do you want to clear changes?')}</h3>
       <div style="display:flex; justify-content: flex-end;">
-        <button ref="dialogCancelButton" class="btn btn-secondary">${this.component.t('Cancel')}</button>
-        <button ref="dialogYesButton" class="btn btn-danger">${this.component.t('Yes, delete it')}</button>
+        <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary">${this.component.t('Cancel')}</button>
+        <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger">${this.component.t('Yes, delete it')}</button>
       </div>
     `;
         this.dialogElement.innerHTML = dialogContent;

package/lib/cjs/components/_classes/input/Input.js

@@ -106,7 +106,7 @@ class Input extends Multivalue_1.default {
             }).trim();
             if (this.component.prefix !== calendarIcon) {
                 // converting string to HTML markup to render correctly DateTime component in portal.form.io
-                return (0, utils_1.convertStringToHTMLElement)(calendarIcon, '[ref="icon"]');
+                return (0, utils_1.convertStringToHTMLElement)(calendarIcon, `[${this._referenceAttributeName}="icon"]`);
             }
         }
         return this.component.suffix;

package/lib/cjs/components/_classes/multivalue/Multivalue.js

@@ -37,7 +37,7 @@ class Multivalue extends Field_1.default {
     render() {
         // If single value field.
         if (!this.useWrapper()) {
-            return super.render(`<div ref="element">
+            return super.render(`<div ${this._referenceAttributeName}="element">
           ${this.renderElement(this.component.type !== 'hidden' ? this.dataValue : '')}
         </div>`);
         }

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -7,6 +7,7 @@ const lodash_1 = __importDefault(require("lodash"));
 const Field_1 = __importDefault(require("../field/Field"));
 const Components_1 = __importDefault(require("../../Components"));
 const utils_1 = require("../../../utils/utils");
+const Component_1 = __importDefault(require("../component/Component"));
 const process_1 = require("@formio/core/process");
 class NestedComponent extends Field_1.default {
     static schema(...extend) {
@@ -188,8 +189,9 @@ class NestedComponent extends Field_1.default {
      * component tree.
      *
      * @param {string} key - The key of the component to retrieve.
-     * @param {function} fn - Called with the component once found.
-     * @return {Object} - The component that is located.
+     * @param {function} [fn] - Called with the component once found.
+     * @param {string} [originalPath] - The original path to the component.
+     * @return {Component} - The component that is located.
      */
     getComponent(path, fn, originalPath) {
         originalPath = originalPath || (0, utils_1.getStringFromComponentPath)(path);

package/lib/cjs/components/datagrid/DataGrid.js

@@ -263,7 +263,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     loadRefs(element, refs) {
         super.loadRefs(element, refs);
         if (refs['messageContainer'] === 'single') {
-            const container = lodash_1.default.last(element.querySelectorAll('[ref=messageContainer]'));
+            const container = lodash_1.default.last(element.querySelectorAll(`[${this._referenceAttributeName}=messageContainer]`));
             this.refs['messageContainer'] = container || this.refs['messageContainer'];
         }
     }

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

@@ -120,10 +120,10 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     }
     get defaultDialogTemplate() {
         return `
-    <h3 ref="dialogHeader">${this.t('Do you want to clear data?')}</h3>
+    <h3 ${this._referenceAttributeName}="dialogHeader">${this.t('Do you want to clear data?')}</h3>
     <div style="display:flex; justify-content: flex-end;">
-      <button ref="dialogCancelButton" class="btn btn-secondary" aria-label="${this.t('Cancel')}">${this.t('Cancel')}</button>
-      <button ref="dialogYesButton" class="btn btn-danger" aria-label="${this.t('Yes, delete it')}">${this.t('Yes, delete it')}</button>
+      <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary" aria-label="${this.t('Cancel')}">${this.t('Cancel')}</button>
+      <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger" aria-label="${this.t('Yes, delete it')}">${this.t('Yes, delete it')}</button>
     </div>
   `;
     }

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

@@ -293,7 +293,7 @@ class FormComponent extends Component_1.default {
                 if (!this.builderMode && this.component.modalEdit) {
                     const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
                     const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
-                    this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue);
+                    this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
                     this.setOpenModalElement();
                 }
                 this.calculateValue();

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

@@ -43,13 +43,13 @@ class HTMLComponent extends Component_1.default {
             return ` ${this.component.content} `;
         }
         const submission = lodash_1.default.get(this.root, 'submission', {});
-        const content = this.component.content ? this.interpolate(this.component.content, {
+        const content = this.component.content ? this.interpolate(this.sanitize(this.component.content, this.shouldSanitizeValue), {
             metadata: submission.metadata || {},
             submission: submission,
             data: this.rootValue,
             row: this.data
         }) : '';
-        return this.sanitize(content, this.shouldSanitizeValue);
+        return content;
     }
     get singleTags() {
         return ['br', 'img', 'hr'];

package/lib/cjs/components/html/fixtures/comp3.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Text Field',
+            applyMaskOn: 'change',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            input: true,
+        },
+        {
+            label: 'HTML',
+            attrs: [
+                {
+                    attr: '',
+                    value: '',
+                },
+            ],
+            content: '<img src=1 onerror=alert("htmlContent")>\n<div class="myClass {{data.textField + \'-class\'}}">{{' +
+                ' data.textField ? data.textField : \'No Text\'}}</div>',
+            refreshOnChange: true,
+            key: 'html',
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

package/lib/cjs/components/html/fixtures/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp2 = exports.comp1 = void 0;
+exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
 exports.comp2 = comp2_1.default;
+const comp3_1 = __importDefault(require("./comp3"));
+exports.comp3 = comp3_1.default;

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

@@ -166,7 +166,8 @@ class RadioComponent extends ListComponent_1.default {
                     dataValue = lodash_1.default.toString(this.dataValue);
                 }
                 if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {
-                    input.checked = lodash_1.default.isEqual(this.loadedOptions[index].value, this.dataValue);
+                    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);
                 }
                 else {
                     input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
@@ -362,18 +363,36 @@ class RadioComponent extends ListComponent_1.default {
      * @return {*}
      */
     normalizeValue(value) {
+        const dataType = this.component.dataType || 'auto';
         if (value === this.emptyValue) {
             return value;
         }
-        const isEquivalent = lodash_1.default.toString(value) === Number(value).toString();
-        if (!isNaN(parseFloat(value)) && isFinite(value) && isEquivalent) {
-            value = +value;
-        }
-        if (value === 'true') {
-            value = true;
-        }
-        if (value === 'false') {
-            value = false;
+        switch (dataType) {
+            case 'auto':
+                if (!isNaN(parseFloat(value)) && isFinite(value) && lodash_1.default.toString(value) === Number(value).toString()) {
+                    value = +value;
+                }
+                if (value === 'true') {
+                    value = true;
+                }
+                if (value === 'false') {
+                    value = false;
+                }
+                break;
+            case 'number':
+                value = +value;
+                break;
+            case 'string':
+                if (typeof value === 'object') {
+                    value = JSON.stringify(value);
+                }
+                else {
+                    value = String(value);
+                }
+                break;
+            case 'boolean':
+                value = !(!value || value.toString() === 'false');
+                break;
         }
         if (this.isSelectURL && this.templateData && this.templateData[value]) {
             const submission = this.root.submission;

package/lib/cjs/components/radio/editForm/Radio.edit.data.js

@@ -76,6 +76,26 @@ exports.default = [
             json: { '===': [{ var: 'data.dataSrc' }, 'values'] },
         },
     },
+    {
+        type: 'select',
+        input: true,
+        label: 'Storage Type',
+        key: 'dataType',
+        clearOnHide: true,
+        tooltip: 'The type to store the data. If you select something other than autotype, it will force it to that type.',
+        weight: 12,
+        template: '<span>{{ item.label }}</span>',
+        dataSrc: 'values',
+        data: {
+            values: [
+                { label: 'Autotype', value: 'auto' },
+                { label: 'String', value: 'string' },
+                { label: 'Number', value: 'number' },
+                { label: 'Boolean', value: 'boolean' },
+                { label: 'Object', value: 'object' },
+            ],
+        },
+    },
     {
         key: 'template',
         conditional: {