@formio/js 5.0.0-dev.5837.9b0fdec → 5.0.0-dev.5839.ce94528

package/dist/formio.form.js

@@ -4786,7 +4786,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ./_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst utils_1 = __importDefault(__webpack_require__(/*! ./_classes/component/editForm/utils */ \"./lib/cjs/components/_classes/component/editForm/utils.js\"));\nconst Component_form_1 = __importDefault(__webpack_require__(/*! ./_classes/component/Component.form */ \"./lib/cjs/components/_classes/component/Component.form.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass Components {\n    static set EditFormUtils(value) {\n        Components._editFormUtils = value;\n    }\n    static get EditFormUtils() {\n        return Components._editFormUtils;\n    }\n    static set baseEditForm(value) {\n        Components._baseEditForm = value;\n    }\n    static get baseEditForm() {\n        return Components._baseEditForm;\n    }\n    static recalculateComponents() {\n        if (window && window.Formio && window.Formio.AllComponents) {\n            Components.setComponents(window.Formio.AllComponents);\n        }\n    }\n    static get components() {\n        if (!Components._components) {\n            Components._components = {};\n        }\n        return Components._components;\n    }\n    static setComponents(comps) {\n        // Set the tableView method on BaseComponent.\n        if (comps.base) {\n            // Implement the tableView method.\n            comps.base.tableView = function (value, options) {\n                const comp = Components.create(options.component, options.options || {}, options.data || {}, true);\n                return comp.getView(value);\n            };\n        }\n        lodash_1.default.assign(Components.components, comps);\n    }\n    static addComponent(name, comp) {\n        return Components.setComponent(name, comp);\n    }\n    static setComponent(name, comp) {\n        Components.components[name] = comp;\n    }\n    /**\n     * Return a path of component's value.\n     * @param {Component} component - The component instance.\n     * @returns {string} - The component's value path.\n     */\n    static getComponentPath(component) {\n        var _a;\n        let path = '';\n        if (component.component.key) {\n            let thisPath = ((_a = component.options) === null || _a === void 0 ? void 0 : _a.parent) || component;\n            while (thisPath && !thisPath.allowData && thisPath.parent) {\n                thisPath = thisPath.parent;\n            }\n            // TODO: any component that is nested in e.g. a Data Grid or an Edit Grid is going to receive a row prop; the problem\n            // is that options.row is passed to each further nested component, which results in erroneous paths like\n            // `editGrid[0].container[0].textField` rather than `editGrid[0].container.textField`. This should be adapted for other\n            // components with a tree-like data model\n            const rowIndex = component.row;\n            const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';\n            path = `${thisPath.path}${rowIndexPath}.`;\n            path += component.component.key;\n            return lodash_1.default.trim(path, '.');\n        }\n        return path;\n    }\n    static create(component, options, data) {\n        let comp = null;\n        if (component.type && Components.components.hasOwnProperty(component.type)) {\n            comp = new Components.components[component.type](component, options, data);\n        }\n        else if (component.arrayTree) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['datagrid'](component, options, data);\n        }\n        else if (component.tree) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['nesteddata'](component, options, data);\n        }\n        else if (Array.isArray(component.components)) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['nested'](component, options, data);\n        }\n        else if (options && options.server) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['hidden'](component, options, data);\n        }\n        else {\n            comp = new Component_1.default(component, options, data);\n        }\n        const path = Components.getComponentPath(comp);\n        if (path) {\n            comp.path = path;\n            comp.componentsMap[comp.path] = comp;\n        }\n        return comp;\n    }\n}\nComponents._editFormUtils = utils_1.default;\nComponents._baseEditForm = Component_form_1.default;\nexports[\"default\"] = Components;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/Components.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ./_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst utils_1 = __importDefault(__webpack_require__(/*! ./_classes/component/editForm/utils */ \"./lib/cjs/components/_classes/component/editForm/utils.js\"));\nconst Component_form_1 = __importDefault(__webpack_require__(/*! ./_classes/component/Component.form */ \"./lib/cjs/components/_classes/component/Component.form.js\"));\nconst utils_2 = __webpack_require__(/*! ../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass Components {\n    static set EditFormUtils(value) {\n        Components._editFormUtils = value;\n    }\n    static get EditFormUtils() {\n        return Components._editFormUtils;\n    }\n    static set baseEditForm(value) {\n        Components._baseEditForm = value;\n    }\n    static get baseEditForm() {\n        return Components._baseEditForm;\n    }\n    static recalculateComponents() {\n        if (window && window.Formio && window.Formio.AllComponents) {\n            Components.setComponents(window.Formio.AllComponents);\n        }\n    }\n    static get components() {\n        if (!Components._components) {\n            Components._components = {};\n        }\n        return Components._components;\n    }\n    static setComponents(comps) {\n        // Set the tableView method on BaseComponent.\n        if (comps.base) {\n            // Implement the tableView method.\n            comps.base.tableView = function (value, options) {\n                const comp = Components.create(options.component, options.options || {}, options.data || {}, true);\n                return comp.getView(value);\n            };\n        }\n        lodash_1.default.assign(Components.components, comps);\n    }\n    static addComponent(name, comp) {\n        return Components.setComponent(name, comp);\n    }\n    static setComponent(name, comp) {\n        Components.components[name] = comp;\n    }\n    /**\n     * Return a path of component's value.\n     * @param {Component} component - The component instance.\n     * @returns {string} - The component's value path.\n     */\n    static getComponentPath(component) {\n        var _a;\n        let path = '';\n        const componentKey = (0, utils_2.getComponentKey)(component.component);\n        if (componentKey) {\n            let thisPath = ((_a = component.options) === null || _a === void 0 ? void 0 : _a.parent) || component;\n            while (thisPath && !thisPath.allowData && thisPath.parent) {\n                thisPath = thisPath.parent;\n            }\n            // TODO: any component that is nested in e.g. a Data Grid or an Edit Grid is going to receive a row prop; the problem\n            // is that options.row is passed to each further nested component, which results in erroneous paths like\n            // `editGrid[0].container[0].textField` rather than `editGrid[0].container.textField`. This should be adapted for other\n            // components with a tree-like data model\n            const rowIndex = component.row;\n            const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';\n            path = `${thisPath.path}${rowIndexPath}.`;\n            path += componentKey;\n            return lodash_1.default.trim(path, '.');\n        }\n        return path;\n    }\n    static create(component, options, data) {\n        let comp = null;\n        if (component.type && Components.components.hasOwnProperty(component.type)) {\n            comp = new Components.components[component.type](component, options, data);\n        }\n        else if (component.arrayTree) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['datagrid'](component, options, data);\n        }\n        else if (component.tree) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['nesteddata'](component, options, data);\n        }\n        else if (Array.isArray(component.components)) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['nested'](component, options, data);\n        }\n        else if (options && options.server) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['hidden'](component, options, data);\n        }\n        else {\n            comp = new Component_1.default(component, options, data);\n        }\n        const path = Components.getComponentPath(comp);\n        if (path) {\n            comp.path = path;\n            comp.componentsMap[comp.path] = comp;\n        }\n        return comp;\n    }\n}\nComponents._editFormUtils = utils_1.default;\nComponents._baseEditForm = Component_form_1.default;\nexports[\"default\"] = Components;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/Components.js?");
 
 /***/ }),
 
@@ -4995,7 +4995,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.AddressComponentMode = void 0;\nconst autocompleter_1 = __importDefault(__webpack_require__(/*! autocompleter */ \"./node_modules/autocompleter/autocomplete.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst GoogleAddressProvider_1 = __webpack_require__(/*! ../../providers/address/GoogleAddressProvider */ \"./lib/cjs/providers/address/GoogleAddressProvider.js\");\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst NestedComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst Container_1 = __importDefault(__webpack_require__(/*! ../container/Container */ \"./lib/cjs/components/container/Container.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nexports.AddressComponentMode = {\n    Autocomplete: 'autocomplete',\n    Manual: 'manual',\n};\nconst RemoveValueIconHiddenClass = 'address-autocomplete-remove-value-icon--hidden';\nconst ChildConditional = 'show = _.get(instance, \\'parent.manualMode\\', false);';\nclass AddressComponent extends Container_1.default {\n    static schema(...extend) {\n        return Container_1.default.schema({\n            type: 'address',\n            label: 'Address',\n            key: 'address',\n            switchToManualModeLabel: 'Can\\'t find address? Switch to manual mode.',\n            provider: '',\n            providerOptions: {},\n            manualModeViewString: '',\n            hideLabel: false,\n            disableClearIcon: false,\n            enableManualMode: false,\n            components: [\n                {\n                    label: 'Address 1',\n                    tableView: false,\n                    key: 'address1',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Address 2',\n                    tableView: false,\n                    key: 'address2',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'City',\n                    tableView: false,\n                    key: 'city',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'State',\n                    tableView: false,\n                    key: 'state',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Country',\n                    tableView: false,\n                    key: 'country',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Zip Code',\n                    tableView: false,\n                    key: 'zip',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n            ],\n        }, ...extend);\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    static get builderInfo() {\n        return {\n            title: 'Address',\n            group: 'advanced',\n            icon: 'home',\n            documentation: '/userguide/form-building/advanced-components#address',\n            weight: 35,\n            schema: AddressComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return AddressComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    mergeSchema(component = {}) {\n        let { defaultSchema } = this;\n        if (component.components) {\n            defaultSchema = lodash_1.default.omit(defaultSchema, 'components');\n        }\n        return lodash_1.default.defaultsDeep(component, defaultSchema);\n    }\n    init() {\n        this.components = this.components || [];\n        if (this.builderMode || this.manualModeEnabled) {\n            NestedComponent_1.default.prototype.addComponents.call(this, this.manualMode ? this.address : {});\n        }\n        Field_1.default.prototype.init.call(this);\n        if (!this.builderMode) {\n            if (this.component.provider) {\n                const { provider, providerOptions, } = this.component;\n                if (lodash_1.default.get(providerOptions, 'params.subscriptionKey')) {\n                    lodash_1.default.set(providerOptions, \"params['subscription-key']\", lodash_1.default.get(providerOptions, 'params.subscriptionKey'));\n                    lodash_1.default.unset(providerOptions, 'params.subscriptionKey');\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n            else if (this.component.map) {\n                // Fallback to legacy version where Google Maps was the only provider.\n                this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;\n                this.component.providerOptions = this.component.providerOptions || {};\n                const { map, provider, providerOptions, } = this.component;\n                const { key, region, } = map;\n                if (key) {\n                    lodash_1.default.set(providerOptions, 'params.key', key);\n                }\n                if (region) {\n                    lodash_1.default.set(providerOptions, 'params.region', region);\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n    }\n    initializeProvider(provider, options = {}) {\n        const url = this.interpolate(options.url);\n        const Provider = Formio_1.Formio.Providers.getProvider('address', provider);\n        return new Provider(Object.assign(Object.assign({}, options), { url }));\n    }\n    get emptyValue() {\n        return this.manualModeEnabled\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: {},\n            }\n            : {};\n    }\n    get mode() {\n        var _a, _b;\n        if (!this.manualModeEnabled) {\n            return exports.AddressComponentMode.Autocomplete;\n        }\n        return (_b = (_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : exports.AddressComponentMode.Autocomplete;\n    }\n    set mode(value) {\n        if (this.manualModeEnabled) {\n            this.dataValue.mode = value;\n        }\n    }\n    get autocompleteMode() {\n        return this.mode === exports.AddressComponentMode.Autocomplete;\n    }\n    get manualMode() {\n        return this.mode === exports.AddressComponentMode.Manual;\n    }\n    get manualModeEnabled() {\n        return !this.isMultiple && Boolean(this.component.enableManualMode);\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            component.data = this.address;\n            component.setValue(component.dataValue, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    get isMultiple() {\n        return Boolean(this.component.multiple);\n    }\n    get address() {\n        if (this.isMultiple) {\n            return lodash_1.default.isArray(this.dataValue) ? this.dataValue : [this.dataValue];\n        }\n        // Manual mode is not implementing for multiple value\n        return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;\n    }\n    set address(value) {\n        if (this.manualModeEnabled && !this.isMultiple && !lodash_1.default.isEqual(value, this.emptyValue)) {\n            this.dataValue.address = value;\n        }\n        else {\n            this.dataValue = value;\n        }\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (this.isMultiple) {\n            defaultValue = lodash_1.default.isArray(defaultValue) ? defaultValue : [defaultValue];\n        }\n        return defaultValue;\n    }\n    get defaultSchema() {\n        return AddressComponent.schema();\n    }\n    isValueInLegacyFormat(value) {\n        return value && !value.mode;\n    }\n    normalizeValue(value) {\n        return (this.manualModeEnabled && this.isValueInLegacyFormat(value))\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: value,\n            }\n            : value;\n    }\n    setValue(value, flags = {}) {\n        const changed = Field_1.default.prototype.setValue.call(this, value, flags);\n        if (this.manualMode) {\n            this.restoreComponentsContext();\n        }\n        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission) {\n            this.redraw();\n        }\n        return changed;\n    }\n    static get modeSwitcherRef() {\n        return 'modeSwitcher';\n    }\n    static get removeValueIconRef() {\n        return 'removeValueIcon';\n    }\n    static get searchInputRef() {\n        return 'searchInput';\n    }\n    static get addRowButtonRef() {\n        return 'addButton';\n    }\n    static get removeRowButtonRef() {\n        return 'removeRow';\n    }\n    get modeSwitcher() {\n        return this.refs\n            ? (this.refs[AddressComponent.modeSwitcherRef] || null)\n            : null;\n    }\n    get removeValueIcon() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeValueIconRef] || null)\n            : null;\n    }\n    get searchInput() {\n        return this.refs\n            ? (this.refs[AddressComponent.searchInputRef] || null)\n            : null;\n    }\n    get addRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.addRowButtonRef] || null)\n            : null;\n    }\n    get removeRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeRowButtonRef] || null)\n            : null;\n    }\n    get searchInputAttributes() {\n        const attr = {\n            name: this.options.name,\n            type: 'text',\n            class: 'form-control',\n            lang: this.options.language,\n            tabindex: this.component.tabindex || 0,\n        };\n        if (this.component.placeholder) {\n            attr.placeholder = this.t(this.component.placeholder), { _userInput: true };\n        }\n        if (this.disabled) {\n            attr.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attr, this.component.attributes);\n        return attr;\n    }\n    get templateName() {\n        return 'address';\n    }\n    get gridTemplateName() {\n        return 'multiValueTable';\n    }\n    get rowTemplateName() {\n        return 'multiValueRow';\n    }\n    get hasChildren() {\n        return !this.isMultiple && (this.builderMode || this.manualModeEnabled);\n    }\n    get addAnother() {\n        return this.t(this.component.addAnother || 'Add Another');\n    }\n    renderElement(value) {\n        return this.renderTemplate(this.templateName, {\n            children: this.hasChildren ? this.renderComponents() : '',\n            nestedKey: this.nestedKey,\n            inputAttributes: this.searchInputAttributes,\n            ref: {\n                modeSwitcher: AddressComponent.modeSwitcherRef,\n                removeValueIcon: AddressComponent.removeValueIconRef,\n                searchInput: AddressComponent.searchInputRef,\n            },\n            displayValue: this.getDisplayValue(value),\n            mode: {\n                autocomplete: this.autocompleteMode,\n                manual: this.manualMode,\n            },\n        });\n    }\n    renderRow(value, index) {\n        return this.renderTemplate(this.rowTemplateName, {\n            index,\n            disabled: this.disabled,\n            element: `${this.renderElement(value, index)}`,\n        });\n    }\n    renderGrid() {\n        return this.renderTemplate(this.gridTemplateName, {\n            rows: this.address.map(this.renderRow.bind(this)).join(''),\n            disabled: this.disabled,\n            addAnother: this.addAnother,\n        });\n    }\n    render() {\n        if (this.isMultiple) {\n            return super.render(this.renderGrid());\n        }\n        return super.render(this.renderElement());\n    }\n    onSelectAddress(address, element, index) {\n        if (this.isMultiple) {\n            this.address[index] = address;\n            this.address = [...this.address];\n        }\n        else {\n            this.address = address;\n        }\n        this.triggerChange({\n            modified: true,\n        });\n        if (element) {\n            element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n        }\n        this.updateRemoveIcon(index);\n    }\n    addRow() {\n        this.address = this.address.concat(this.emptyValue);\n        super.redraw();\n    }\n    attach(element) {\n        const result = ((this.builderMode || this.manualMode) ? super.attach : Field_1.default.prototype.attach).call(this, element);\n        if (!this.builderMode) {\n            if (!this.provider && this.component.provider) {\n                const { provider, providerOptions, } = this.component;\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n        this.loadRefs(element, {\n            [AddressComponent.addRowButtonRef]: 'single',\n            [AddressComponent.modeSwitcherRef]: 'single',\n            [AddressComponent.removeRowButtonRef]: 'multiple',\n            [AddressComponent.removeValueIconRef]: 'multiple',\n            [AddressComponent.searchInputRef]: 'multiple',\n        });\n        this.searchInput.forEach((element, index) => {\n            if (!this.builderMode && element && this.provider) {\n                if (this.component.provider === 'google') {\n                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this));\n                }\n                else {\n                    (0, autocompleter_1.default)({\n                        input: element,\n                        debounceWaitMs: 300,\n                        fetch: (text, update) => {\n                            const query = text;\n                            this.provider.search(query).then(update);\n                        },\n                        render: (address) => {\n                            const div = this.ce('div');\n                            div.textContent = this.getDisplayValue(address);\n                            return div;\n                        },\n                        onSelect: (address) => {\n                            this.onSelectAddress(address, element, index);\n                        },\n                    });\n                }\n                this.addEventListener(element, 'blur', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (element.value) {\n                        element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n                    }\n                });\n                this.addEventListener(element, 'keyup', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (!element.value) {\n                        this.clearAddress(element, index);\n                    }\n                });\n            }\n        });\n        if (this.addRowButton) {\n            this.addEventListener(this.addRowButton, 'click', event => {\n                event.preventDefault();\n                this.addRow();\n            });\n        }\n        this.removeRowButton.forEach((removeRowButton, index) => {\n            this.addEventListener(removeRowButton, 'click', event => {\n                event.preventDefault();\n                this.removeValue(index);\n            });\n        });\n        if (this.modeSwitcher) {\n            this.addEventListener(this.modeSwitcher, 'change', () => {\n                if (!this.modeSwitcher) {\n                    return;\n                }\n                this.dataValue = this.emptyValue;\n                this.mode = this.modeSwitcher.checked\n                    ? exports.AddressComponentMode.Manual\n                    : exports.AddressComponentMode.Autocomplete;\n                if (!this.builderMode) {\n                    if (this.manualMode) {\n                        this.restoreComponentsContext();\n                    }\n                    this.triggerChange({\n                        modified: true,\n                    });\n                }\n                this.redraw();\n            });\n        }\n        if (!this.builderMode) {\n            this.removeValueIcon.forEach((removeValueIcon, index) => {\n                this.updateRemoveIcon(index);\n                const removeValueHandler = () => {\n                    var _a;\n                    const searchInput = (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a[index];\n                    this.clearAddress(searchInput, index);\n                    if (searchInput) {\n                        searchInput.focus();\n                    }\n                };\n                this.addEventListener(removeValueIcon, 'click', removeValueHandler);\n                this.addEventListener(removeValueIcon, 'keydown', ({ key }) => {\n                    if (key === 'Enter') {\n                        removeValueHandler();\n                    }\n                });\n            });\n            lodash_1.default.each(this.refs.searchInput || [], el => this.addFocusBlurEvents(el));\n        }\n        return result;\n    }\n    addChildComponent(component) {\n        component.customConditional = ChildConditional;\n    }\n    redraw() {\n        const modeSwitcherInFocus = (this.modeSwitcher && (document.activeElement === this.modeSwitcher));\n        return super.redraw()\n            .then((result) => {\n            if (modeSwitcherInFocus && this.modeSwitcher) {\n                this.modeSwitcher.focus();\n            }\n            return result;\n        });\n    }\n    clearAddress(element, index) {\n        var _a;\n        if (!this.isEmpty()) {\n            this.triggerChange();\n        }\n        if ((_a = this.address) === null || _a === void 0 ? void 0 : _a[index]) {\n            this.address[index] = this.emptyValue;\n        }\n        else {\n            this.address = this.emptyValue;\n        }\n        if (element) {\n            element.value = '';\n        }\n        this.updateRemoveIcon(index);\n    }\n    getDisplayValue(value = this.address) {\n        return (this.provider && !this.manualMode)\n            ? this.provider.getDisplayValue(value)\n            : '';\n    }\n    validateMultiple() {\n        return this.isMultiple;\n    }\n    updateRemoveIcon(index) {\n        var _a;\n        const removeValueIcon = (_a = this.removeValueIcon) === null || _a === void 0 ? void 0 : _a[index];\n        if (removeValueIcon) {\n            const value = this.isMultiple ? this.address[index] : this.address;\n            if (this.isEmpty(value) || this.disabled) {\n                this.addClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n            else {\n                this.removeClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n        }\n    }\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        const normalizedValue = this.normalizeValue(value);\n        const { address, mode, } = (this.manualModeEnabled\n            ? normalizedValue\n            : {\n                address: normalizedValue,\n                mode: exports.AddressComponentMode.Autocomplete,\n            });\n        const valueInManualMode = (mode === exports.AddressComponentMode.Manual);\n        if (this.provider && !valueInManualMode) {\n            return this.getDisplayValue(address);\n        }\n        if (valueInManualMode) {\n            if (this.component.manualModeViewString) {\n                return this.interpolate(this.component.manualModeViewString, {\n                    address,\n                    data: this.data,\n                    component: this.component,\n                });\n            }\n            return this.getComponents()\n                .filter((component) => component.hasValue(address))\n                .map((component) => [component, lodash_1.default.get(address, component.key)])\n                .filter(([component, componentValue]) => !component.isEmpty(componentValue))\n                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))\n                .join(', ');\n        }\n        return super.getValueAsString(address, options);\n    }\n    focus() {\n        if (this.searchInput && this.searchInput[0]) {\n            this.searchInput[0].focus();\n        }\n    }\n}\nexports[\"default\"] = AddressComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/address/Address.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.AddressComponentMode = void 0;\nconst autocompleter_1 = __importDefault(__webpack_require__(/*! autocompleter */ \"./node_modules/autocompleter/autocomplete.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst GoogleAddressProvider_1 = __webpack_require__(/*! ../../providers/address/GoogleAddressProvider */ \"./lib/cjs/providers/address/GoogleAddressProvider.js\");\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst NestedComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst Container_1 = __importDefault(__webpack_require__(/*! ../container/Container */ \"./lib/cjs/components/container/Container.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nexports.AddressComponentMode = {\n    Autocomplete: 'autocomplete',\n    Manual: 'manual',\n};\nconst RemoveValueIconHiddenClass = 'address-autocomplete-remove-value-icon--hidden';\nconst ChildConditional = 'show = _.get(instance, \\'parent.manualMode\\', false);';\nclass AddressComponent extends Container_1.default {\n    static schema(...extend) {\n        return Container_1.default.schema({\n            type: 'address',\n            label: 'Address',\n            key: 'address',\n            switchToManualModeLabel: 'Can\\'t find address? Switch to manual mode.',\n            provider: '',\n            providerOptions: {},\n            manualModeViewString: '',\n            hideLabel: false,\n            disableClearIcon: false,\n            enableManualMode: false,\n            components: [\n                {\n                    label: 'Address 1',\n                    tableView: false,\n                    key: 'address1',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Address 2',\n                    tableView: false,\n                    key: 'address2',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'City',\n                    tableView: false,\n                    key: 'city',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'State',\n                    tableView: false,\n                    key: 'state',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Country',\n                    tableView: false,\n                    key: 'country',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Zip Code',\n                    tableView: false,\n                    key: 'zip',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n            ],\n        }, ...extend);\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    static get builderInfo() {\n        return {\n            title: 'Address',\n            group: 'advanced',\n            icon: 'home',\n            documentation: '/userguide/form-building/advanced-components#address',\n            weight: 35,\n            schema: AddressComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return AddressComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    mergeSchema(component = {}) {\n        let { defaultSchema } = this;\n        if (component.components) {\n            defaultSchema = lodash_1.default.omit(defaultSchema, 'components');\n        }\n        return lodash_1.default.defaultsDeep(component, defaultSchema);\n    }\n    init() {\n        this.components = this.components || [];\n        if (this.builderMode || this.manualModeEnabled) {\n            NestedComponent_1.default.prototype.addComponents.call(this, this.manualMode ? this.address : {});\n        }\n        Field_1.default.prototype.init.call(this);\n        if (!this.builderMode) {\n            if (this.component.provider) {\n                const { provider, providerOptions, } = this.component;\n                if (lodash_1.default.get(providerOptions, 'params.subscriptionKey')) {\n                    lodash_1.default.set(providerOptions, \"params['subscription-key']\", lodash_1.default.get(providerOptions, 'params.subscriptionKey'));\n                    lodash_1.default.unset(providerOptions, 'params.subscriptionKey');\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n            else if (this.component.map) {\n                // Fallback to legacy version where Google Maps was the only provider.\n                this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;\n                this.component.providerOptions = this.component.providerOptions || {};\n                const { map, provider, providerOptions, } = this.component;\n                const { key, region, } = map;\n                if (key) {\n                    lodash_1.default.set(providerOptions, 'params.key', key);\n                }\n                if (region) {\n                    lodash_1.default.set(providerOptions, 'params.region', region);\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n    }\n    initializeProvider(provider, options = {}) {\n        const url = this.interpolate(options.url);\n        const Provider = Formio_1.Formio.Providers.getProvider('address', provider);\n        return new Provider(Object.assign(Object.assign({}, options), { url }));\n    }\n    get emptyValue() {\n        return this.manualModeEnabled\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: {},\n            }\n            : {};\n    }\n    get mode() {\n        var _a, _b;\n        if (!this.manualModeEnabled) {\n            return exports.AddressComponentMode.Autocomplete;\n        }\n        return (_b = (_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : exports.AddressComponentMode.Autocomplete;\n    }\n    set mode(value) {\n        if (this.manualModeEnabled) {\n            this.dataValue.mode = value;\n        }\n    }\n    get autocompleteMode() {\n        return this.mode === exports.AddressComponentMode.Autocomplete;\n    }\n    get manualMode() {\n        return this.mode === exports.AddressComponentMode.Manual;\n    }\n    get manualModeEnabled() {\n        return !this.isMultiple && Boolean(this.component.enableManualMode);\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            component.data = this.address;\n            component.setValue(component.dataValue, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    get isMultiple() {\n        return Boolean(this.component.multiple);\n    }\n    get address() {\n        if (this.isMultiple) {\n            return lodash_1.default.isArray(this.dataValue) ? this.dataValue : [this.dataValue];\n        }\n        // Manual mode is not implementing for multiple value\n        return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;\n    }\n    set address(value) {\n        if (this.manualModeEnabled && !this.isMultiple && !lodash_1.default.isEqual(value, this.emptyValue)) {\n            this.dataValue.address = value;\n        }\n        else {\n            this.dataValue = value;\n        }\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (this.isMultiple) {\n            defaultValue = lodash_1.default.isArray(defaultValue) ? defaultValue : [defaultValue];\n        }\n        return defaultValue;\n    }\n    get defaultSchema() {\n        return AddressComponent.schema();\n    }\n    isValueInLegacyFormat(value) {\n        return value && !value.mode;\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get dataValue() {\n        const resultValue = lodash_1.default.get(this._data, this.component.path);\n        if (!lodash_1.default.isArray(resultValue) && this.component.multiple) {\n            return [resultValue];\n        }\n        return super.dataValue;\n    }\n    normalizeValue(value) {\n        return (this.manualModeEnabled && this.isValueInLegacyFormat(value))\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: value,\n            }\n            : value;\n    }\n    setValue(value, flags = {}) {\n        const changed = Field_1.default.prototype.setValue.call(this, value, flags);\n        if (this.manualMode) {\n            this.restoreComponentsContext();\n        }\n        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission) {\n            this.redraw();\n        }\n        return changed;\n    }\n    static get modeSwitcherRef() {\n        return 'modeSwitcher';\n    }\n    static get removeValueIconRef() {\n        return 'removeValueIcon';\n    }\n    static get searchInputRef() {\n        return 'searchInput';\n    }\n    static get addRowButtonRef() {\n        return 'addButton';\n    }\n    static get removeRowButtonRef() {\n        return 'removeRow';\n    }\n    get modeSwitcher() {\n        return this.refs\n            ? (this.refs[AddressComponent.modeSwitcherRef] || null)\n            : null;\n    }\n    get removeValueIcon() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeValueIconRef] || null)\n            : null;\n    }\n    get searchInput() {\n        return this.refs\n            ? (this.refs[AddressComponent.searchInputRef] || null)\n            : null;\n    }\n    get addRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.addRowButtonRef] || null)\n            : null;\n    }\n    get removeRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeRowButtonRef] || null)\n            : null;\n    }\n    get searchInputAttributes() {\n        const attr = {\n            name: this.options.name,\n            type: 'text',\n            class: 'form-control',\n            lang: this.options.language,\n            tabindex: this.component.tabindex || 0,\n        };\n        if (this.component.placeholder) {\n            attr.placeholder = this.t(this.component.placeholder), { _userInput: true };\n        }\n        if (this.disabled) {\n            attr.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attr, this.component.attributes);\n        return attr;\n    }\n    get templateName() {\n        return 'address';\n    }\n    get gridTemplateName() {\n        return 'multiValueTable';\n    }\n    get rowTemplateName() {\n        return 'multiValueRow';\n    }\n    get hasChildren() {\n        return !this.isMultiple && (this.builderMode || this.manualModeEnabled);\n    }\n    get addAnother() {\n        return this.t(this.component.addAnother || 'Add Another');\n    }\n    renderElement(value) {\n        return this.renderTemplate(this.templateName, {\n            children: this.hasChildren ? this.renderComponents() : '',\n            nestedKey: this.nestedKey,\n            inputAttributes: this.searchInputAttributes,\n            ref: {\n                modeSwitcher: AddressComponent.modeSwitcherRef,\n                removeValueIcon: AddressComponent.removeValueIconRef,\n                searchInput: AddressComponent.searchInputRef,\n            },\n            displayValue: this.getDisplayValue(value),\n            mode: {\n                autocomplete: this.autocompleteMode,\n                manual: this.manualMode,\n            },\n        });\n    }\n    renderRow(value, index) {\n        return this.renderTemplate(this.rowTemplateName, {\n            index,\n            disabled: this.disabled,\n            element: `${this.renderElement(value, index)}`,\n        });\n    }\n    renderGrid() {\n        return this.renderTemplate(this.gridTemplateName, {\n            rows: this.address.map(this.renderRow.bind(this)).join(''),\n            disabled: this.disabled,\n            addAnother: this.addAnother,\n        });\n    }\n    render() {\n        if (this.isMultiple) {\n            return super.render(this.renderGrid());\n        }\n        return super.render(this.renderElement());\n    }\n    onSelectAddress(address, element, index) {\n        if (this.isMultiple) {\n            this.address[index] = address;\n            this.address = [...this.address];\n        }\n        else {\n            this.address = address;\n        }\n        this.triggerChange({\n            modified: true,\n        });\n        if (element) {\n            element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n        }\n        this.updateRemoveIcon(index);\n    }\n    addRow() {\n        this.address = this.address.concat(this.emptyValue);\n        super.redraw();\n    }\n    attach(element) {\n        const result = ((this.builderMode || this.manualMode) ? super.attach : Field_1.default.prototype.attach).call(this, element);\n        if (!this.builderMode) {\n            if (!this.provider && this.component.provider) {\n                const { provider, providerOptions, } = this.component;\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n        this.loadRefs(element, {\n            [AddressComponent.addRowButtonRef]: 'single',\n            [AddressComponent.modeSwitcherRef]: 'single',\n            [AddressComponent.removeRowButtonRef]: 'multiple',\n            [AddressComponent.removeValueIconRef]: 'multiple',\n            [AddressComponent.searchInputRef]: 'multiple',\n        });\n        this.searchInput.forEach((element, index) => {\n            if (!this.builderMode && element && this.provider) {\n                if (this.component.provider === 'google') {\n                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this));\n                }\n                else {\n                    (0, autocompleter_1.default)({\n                        input: element,\n                        debounceWaitMs: 300,\n                        fetch: (text, update) => {\n                            const query = text;\n                            this.provider.search(query).then(update);\n                        },\n                        render: (address) => {\n                            const div = this.ce('div');\n                            div.textContent = this.getDisplayValue(address);\n                            return div;\n                        },\n                        onSelect: (address) => {\n                            this.onSelectAddress(address, element, index);\n                        },\n                    });\n                }\n                this.addEventListener(element, 'blur', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (element.value) {\n                        element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n                    }\n                });\n                this.addEventListener(element, 'keyup', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (!element.value) {\n                        this.clearAddress(element, index);\n                    }\n                });\n            }\n        });\n        if (this.addRowButton) {\n            this.addEventListener(this.addRowButton, 'click', event => {\n                event.preventDefault();\n                this.addRow();\n            });\n        }\n        this.removeRowButton.forEach((removeRowButton, index) => {\n            this.addEventListener(removeRowButton, 'click', event => {\n                event.preventDefault();\n                this.removeValue(index);\n            });\n        });\n        if (this.modeSwitcher) {\n            this.addEventListener(this.modeSwitcher, 'change', () => {\n                if (!this.modeSwitcher) {\n                    return;\n                }\n                this.dataValue = this.emptyValue;\n                this.mode = this.modeSwitcher.checked\n                    ? exports.AddressComponentMode.Manual\n                    : exports.AddressComponentMode.Autocomplete;\n                if (!this.builderMode) {\n                    if (this.manualMode) {\n                        this.restoreComponentsContext();\n                    }\n                    this.triggerChange({\n                        modified: true,\n                    });\n                }\n                this.redraw();\n            });\n        }\n        if (!this.builderMode) {\n            this.removeValueIcon.forEach((removeValueIcon, index) => {\n                this.updateRemoveIcon(index);\n                const removeValueHandler = () => {\n                    var _a;\n                    const searchInput = (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a[index];\n                    this.clearAddress(searchInput, index);\n                    if (searchInput) {\n                        searchInput.focus();\n                    }\n                };\n                this.addEventListener(removeValueIcon, 'click', removeValueHandler);\n                this.addEventListener(removeValueIcon, 'keydown', ({ key }) => {\n                    if (key === 'Enter') {\n                        removeValueHandler();\n                    }\n                });\n            });\n            lodash_1.default.each(this.refs.searchInput || [], el => this.addFocusBlurEvents(el));\n        }\n        return result;\n    }\n    addChildComponent(component) {\n        component.customConditional = ChildConditional;\n    }\n    redraw() {\n        const modeSwitcherInFocus = (this.modeSwitcher && (document.activeElement === this.modeSwitcher));\n        return super.redraw()\n            .then((result) => {\n            if (modeSwitcherInFocus && this.modeSwitcher) {\n                this.modeSwitcher.focus();\n            }\n            return result;\n        });\n    }\n    clearAddress(element, index) {\n        var _a;\n        if (!this.isEmpty()) {\n            this.triggerChange();\n        }\n        if ((_a = this.address) === null || _a === void 0 ? void 0 : _a[index]) {\n            this.address[index] = this.emptyValue;\n        }\n        else {\n            this.address = this.emptyValue;\n        }\n        if (element) {\n            element.value = '';\n        }\n        this.updateRemoveIcon(index);\n    }\n    getDisplayValue(value = this.address) {\n        return (this.provider && !this.manualMode)\n            ? this.provider.getDisplayValue(value)\n            : '';\n    }\n    validateMultiple() {\n        return this.isMultiple;\n    }\n    updateRemoveIcon(index) {\n        var _a;\n        const removeValueIcon = (_a = this.removeValueIcon) === null || _a === void 0 ? void 0 : _a[index];\n        if (removeValueIcon) {\n            const value = this.isMultiple ? this.address[index] : this.address;\n            if (this.isEmpty(value) || this.disabled) {\n                this.addClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n            else {\n                this.removeClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n        }\n    }\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        const normalizedValue = this.normalizeValue(value);\n        const { address, mode, } = (this.manualModeEnabled\n            ? normalizedValue\n            : {\n                address: normalizedValue,\n                mode: exports.AddressComponentMode.Autocomplete,\n            });\n        const valueInManualMode = (mode === exports.AddressComponentMode.Manual);\n        if (this.provider && !valueInManualMode) {\n            return this.getDisplayValue(address);\n        }\n        if (valueInManualMode) {\n            if (this.component.manualModeViewString) {\n                return this.interpolate(this.component.manualModeViewString, {\n                    address,\n                    data: this.data,\n                    component: this.component,\n                });\n            }\n            return this.getComponents()\n                .filter((component) => component.hasValue(address))\n                .map((component) => [component, lodash_1.default.get(address, component.key)])\n                .filter(([component, componentValue]) => !component.isEmpty(componentValue))\n                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))\n                .join(', ');\n        }\n        return super.getValueAsString(address, options);\n    }\n    focus() {\n        if (this.searchInput && this.searchInput[0]) {\n            this.searchInput[0].focus();\n        }\n    }\n}\nexports[\"default\"] = AddressComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/address/Address.js?");
 
 /***/ }),
 
@@ -5259,7 +5259,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass RadioComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'radio',\n            inputType: 'radio',\n            label: 'Radio',\n            key: 'radio',\n            values: [{ label: '', value: '' }],\n            data: {\n                url: '',\n            },\n            fieldSet: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Radio',\n            group: 'basic',\n            icon: 'dot-circle-o',\n            weight: 80,\n            documentation: '/userguide/form-building/form-components#radio',\n            schema: RadioComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';\n                return isValuesSrc\n                    ? {\n                        type: 'select',\n                        dataSrc: 'custom',\n                        valueProperty: 'value',\n                        dataType: classComp.dataType || '',\n                        data: {\n                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,\n                        }\n                    }\n                    : Object.assign(Object.assign({}, classComp), { type: 'select' });\n            } });\n    }\n    static get serverConditionSettings() {\n        return RadioComponent.conditionOperatorsSettings;\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.previousValue = this.dataValue || null;\n    }\n    get defaultSchema() {\n        return RadioComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultValue === false) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get inputInfo() {\n        var _a;\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.changeEvent = 'click';\n        info.attr.class = 'form-check-input';\n        info.attr.name = info.attr.name += `[${(_a = this.root) === null || _a === void 0 ? void 0 : _a.id}-${this.id}]`;\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get isRadio() {\n        return this.component.inputType === 'radio';\n    }\n    get optionSelectedClass() {\n        return 'radio-selected';\n    }\n    get listData() {\n        const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});\n        return lodash_1.default.get(listData, this.path);\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.//\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';\n        this.loadedOptions = [];\n        if (!this.visible) {\n            this.itemsLoadedResolve();\n        }\n        // Get the template keys for this radio component.\n        this.getTemplateKeys();\n    }\n    beforeSubmit() {\n        return new Promise(res => {\n            this.dataReady.then(() => res(true));\n        });\n    }\n    render() {\n        if (!this.optionsLoaded) {\n            return super.render(this.renderTemplate('loader'));\n        }\n        return super.render(this.renderTemplate('radio', {\n            input: this.inputInfo,\n            inline: this.component.inline,\n            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,\n            value: this.dataValue,\n            row: this.row,\n        }));\n    }\n    attach(element) {\n        this.loadRefs(element, { input: 'multiple', wrapper: 'multiple' });\n        this.refs.input.forEach((input, index) => {\n            this.addEventListener(input, this.inputInfo.changeEvent, () => {\n                this.updateValue(null, {\n                    modified: true,\n                });\n            });\n            if (this.component.values[index]) {\n                this.addShortcut(input, this.component.values[index].shortcut);\n            }\n            if (this.isRadio) {\n                let dataValue = this.dataValue;\n                if (!lodash_1.default.isString(this.dataValue)) {\n                    dataValue = lodash_1.default.toString(this.dataValue);\n                }\n                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {\n                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;\n                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);\n                }\n                else {\n                    input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));\n                }\n                this.addEventListener(input, 'keyup', (event) => {\n                    if (event.key === ' ' && dataValue === input.value) {\n                        event.preventDefault();\n                        this.updateValue(null, {\n                            modified: true,\n                        });\n                    }\n                });\n            }\n        });\n        this.triggerUpdate();\n        this.setSelectedClasses();\n        return super.attach(element);\n    }\n    detach(element) {\n        if (element && this.refs.input) {\n            this.refs.input.forEach((input, index) => {\n                if (this.component.values[index]) {\n                    this.removeShortcut(input, this.component.values[index].shortcut);\n                }\n            });\n        }\n        super.detach();\n    }\n    getValue() {\n        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        // If the input type of the component is checkbox the value should be determined by the checkboxes checked property\n        let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;\n        this.refs.input.forEach((input, index) => {\n            if (input.checked) {\n                value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?\n                    this.loadedOptions[index].value :\n                    input.value;\n            }\n        });\n        return value;\n    }\n    validateValueProperty() {\n        if (this.component.dataSrc === 'values') {\n            return true;\n        }\n        return !lodash_1.default.some(this.refs.wrapper, (wrapper, index) => this.refs.input[index].checked && this.loadedOptions[index].invalid);\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions;\n        if (values) {\n            return values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    getValueAsString(value, options = {}) {\n        if (lodash_1.default.isObject(value)) {\n            value = JSON.stringify(value);\n        }\n        else if (!lodash_1.default.isString(value)) {\n            value = lodash_1.default.toString(value);\n        }\n        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';\n        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {\n            return value;\n        }\n        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;\n        const option = lodash_1.default.find(values, (v) => v.value === value);\n        if (!value) {\n            return lodash_1.default.get(option, 'label', '');\n        }\n        return lodash_1.default.get(option, 'label', '');\n    }\n    setValueAt(index, value) {\n        if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {\n            const inputValue = this.refs.input[index].value;\n            this.refs.input[index].checked = (inputValue === value.toString());\n        }\n    }\n    get shouldLoad() {\n        // do not load options if the value is empty in readOnly and we have options available in metadata\n        if (this.options.readOnly && this.isEmpty() && this.listData) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        if (this.optionsLoaded) {\n            this.itemsLoadedResolve();\n            return;\n        }\n        if (!this.shouldLoad && this.listData) {\n            this.loadItemsFromMetadata();\n            this.itemsLoadedResolve();\n            this.optionsLoaded = true;\n            return;\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        // Allow for url interpolation.\n        url = this.sanitize(this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        }), this.shouldSanitizeValue);\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response);\n            this.optionsLoaded = true;\n            this.redraw();\n        })\n            .catch((err) => {\n            this.optionsLoaded = true;\n            this.handleLoadingError(err);\n        });\n    }\n    loadItemsFromMetadata() {\n        this.listData.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                label: this.itemTemplate(item)\n            };\n            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n                this.loadedOptions[i].value = this.dataValue;\n            }\n        });\n        this.optionsLoaded = true;\n        this.redraw();\n    }\n    setItems(items) {\n        const listData = [];\n        items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n            const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);\n            this.loadedOptions[i] = {\n                value: this.component.valueProperty ? valueAtProperty : item,\n                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)\n            };\n            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);\n            if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(valueAtProperty) ||\n                (!this.isRadio && lodash_1.default.isObject(valueAtProperty)) ||\n                (!this.isRadio && lodash_1.default.isBoolean(valueAtProperty)))) {\n                this.loadedOptions[i].invalid = true;\n            }\n        });\n        if (this.isSelectURL) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.listData) {\n                submission.metadata.listData = {};\n            }\n            lodash_1.default.set(submission.metadata.listData, this.path, listData);\n        }\n        this.itemsLoadedResolve();\n    }\n    setSelectedClasses() {\n        if (this.refs.wrapper) {\n            //add/remove selected option class\n            const value = this.dataValue;\n            this.refs.wrapper.forEach((wrapper, index) => {\n                const input = this.refs.input[index];\n                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());\n                if (checked) {\n                    //add class to container when selected\n                    this.addClass(wrapper, this.optionSelectedClass);\n                    //change \"checked\" attribute\n                    input.setAttribute('checked', 'true');\n                }\n                else {\n                    this.removeClass(wrapper, this.optionSelectedClass);\n                    input.removeAttribute('checked');\n                }\n            });\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed) {\n            this.setSelectedClasses();\n        }\n        if (!flags || !flags.modified || !this.isRadio) {\n            if (changed) {\n                this.previousValue = this.dataValue;\n            }\n            return changed;\n        }\n        // If they clicked on the radio that is currently selected, it needs to reset the value.\n        this.currentValue = this.dataValue;\n        const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;\n        if (shouldResetValue) {\n            this.resetValue();\n            this.triggerChange(flags);\n            this.setSelectedClasses();\n        }\n        this.previousValue = this.dataValue;\n        return changed;\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        const dataType = this.component.dataType || 'auto';\n        if (value === this.emptyValue) {\n            return value;\n        }\n        switch (dataType) {\n            case 'auto':\n                if (!isNaN(parseFloat(value)) && isFinite(value) && lodash_1.default.toString(value) === Number(value).toString()) {\n                    value = +value;\n                }\n                if (value === 'true') {\n                    value = true;\n                }\n                if (value === 'false') {\n                    value = false;\n                }\n                break;\n            case 'number':\n                value = +value;\n                break;\n            case 'string':\n                if (typeof value === 'object') {\n                    value = JSON.stringify(value);\n                }\n                else {\n                    value = String(value);\n                }\n                break;\n            case 'boolean':\n                value = !(!value || value.toString() === 'false');\n                break;\n        }\n        if (this.isSelectURL && this.templateData && this.templateData[value]) {\n            const submission = this.root.submission;\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);\n        }\n        return super.normalizeValue(value);\n    }\n}\nexports[\"default\"] = RadioComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/radio/Radio.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass RadioComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'radio',\n            inputType: 'radio',\n            label: 'Radio',\n            key: 'radio',\n            values: [{ label: '', value: '' }],\n            data: {\n                url: '',\n            },\n            fieldSet: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Radio',\n            group: 'basic',\n            icon: 'dot-circle-o',\n            weight: 80,\n            documentation: '/userguide/form-building/form-components#radio',\n            schema: RadioComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';\n                return isValuesSrc\n                    ? {\n                        type: 'select',\n                        dataSrc: 'custom',\n                        valueProperty: 'value',\n                        dataType: classComp.dataType || '',\n                        data: {\n                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,\n                        }\n                    }\n                    : Object.assign(Object.assign({}, classComp), { type: 'select' });\n            } });\n    }\n    static get serverConditionSettings() {\n        return RadioComponent.conditionOperatorsSettings;\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.previousValue = this.dataValue || null;\n    }\n    get defaultSchema() {\n        return RadioComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultValue === false) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    resetValue() {\n        this.unset();\n        this.setValue(this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\n    }\n    get inputInfo() {\n        var _a;\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.changeEvent = 'click';\n        info.attr.class = 'form-check-input';\n        info.attr.name = info.attr.name += `[${(_a = this.root) === null || _a === void 0 ? void 0 : _a.id}-${this.id}]`;\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get isRadio() {\n        return this.component.inputType === 'radio';\n    }\n    get optionSelectedClass() {\n        return 'radio-selected';\n    }\n    get listData() {\n        const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});\n        return lodash_1.default.get(listData, this.path);\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.//\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';\n        this.loadedOptions = [];\n        if (!this.visible) {\n            this.itemsLoadedResolve();\n        }\n        // Get the template keys for this radio component.\n        this.getTemplateKeys();\n    }\n    beforeSubmit() {\n        return new Promise(res => {\n            this.dataReady.then(() => res(true));\n        });\n    }\n    render() {\n        if (!this.optionsLoaded) {\n            return super.render(this.renderTemplate('loader'));\n        }\n        return super.render(this.renderTemplate('radio', {\n            input: this.inputInfo,\n            inline: this.component.inline,\n            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,\n            value: this.dataValue,\n            row: this.row,\n        }));\n    }\n    attach(element) {\n        this.loadRefs(element, { input: 'multiple', wrapper: 'multiple' });\n        this.refs.input.forEach((input, index) => {\n            this.addEventListener(input, this.inputInfo.changeEvent, () => {\n                this.updateValue(null, {\n                    modified: true,\n                });\n            });\n            if (this.component.values[index]) {\n                this.addShortcut(input, this.component.values[index].shortcut);\n            }\n            if (this.isRadio) {\n                let dataValue = this.dataValue;\n                if (!lodash_1.default.isString(this.dataValue)) {\n                    dataValue = lodash_1.default.toString(this.dataValue);\n                }\n                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {\n                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;\n                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);\n                }\n                else {\n                    input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));\n                }\n                this.addEventListener(input, 'keyup', (event) => {\n                    if (event.key === ' ' && dataValue === input.value) {\n                        event.preventDefault();\n                        this.updateValue(null, {\n                            modified: true,\n                        });\n                    }\n                });\n            }\n        });\n        this.triggerUpdate();\n        this.setSelectedClasses();\n        return super.attach(element);\n    }\n    detach(element) {\n        if (element && this.refs.input) {\n            this.refs.input.forEach((input, index) => {\n                if (this.component.values[index]) {\n                    this.removeShortcut(input, this.component.values[index].shortcut);\n                }\n            });\n        }\n        super.detach();\n    }\n    getValue() {\n        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        // If the input type of the component is checkbox the value should be determined by the checkboxes checked property\n        let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;\n        this.refs.input.forEach((input, index) => {\n            if (input.checked) {\n                value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?\n                    this.loadedOptions[index].value :\n                    input.value;\n            }\n        });\n        return value;\n    }\n    validateValueProperty() {\n        if (this.component.dataSrc === 'values') {\n            return true;\n        }\n        return !lodash_1.default.some(this.refs.wrapper, (wrapper, index) => this.refs.input[index].checked && this.loadedOptions[index].invalid);\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions;\n        if (values) {\n            return values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    getValueAsString(value, options = {}) {\n        if (lodash_1.default.isObject(value)) {\n            value = JSON.stringify(value);\n        }\n        else if (!lodash_1.default.isString(value)) {\n            value = lodash_1.default.toString(value);\n        }\n        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';\n        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {\n            return value;\n        }\n        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;\n        const option = lodash_1.default.find(values, (v) => v.value === value);\n        if (!value) {\n            return lodash_1.default.get(option, 'label', '');\n        }\n        return lodash_1.default.get(option, 'label', '');\n    }\n    setValueAt(index, value) {\n        if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {\n            const inputValue = this.refs.input[index].value;\n            this.refs.input[index].checked = (inputValue === value.toString());\n        }\n    }\n    get shouldLoad() {\n        // do not load options if the value is empty in readOnly and we have options available in metadata\n        if (this.options.readOnly && this.isEmpty() && this.listData) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        if (this.optionsLoaded) {\n            this.itemsLoadedResolve();\n            return;\n        }\n        if (!this.shouldLoad && this.listData) {\n            this.loadItemsFromMetadata();\n            this.itemsLoadedResolve();\n            this.optionsLoaded = true;\n            return;\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        // Allow for url interpolation.\n        url = this.sanitize(this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        }), this.shouldSanitizeValue);\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response);\n            this.optionsLoaded = true;\n            this.redraw();\n        })\n            .catch((err) => {\n            this.optionsLoaded = true;\n            this.handleLoadingError(err);\n        });\n    }\n    loadItemsFromMetadata() {\n        this.listData.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                label: this.itemTemplate(item)\n            };\n            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n                this.loadedOptions[i].value = this.dataValue;\n            }\n        });\n        this.optionsLoaded = true;\n        this.redraw();\n    }\n    setItems(items) {\n        const listData = [];\n        items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n            const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);\n            this.loadedOptions[i] = {\n                value: this.component.valueProperty ? valueAtProperty : item,\n                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)\n            };\n            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);\n            if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(valueAtProperty) ||\n                (!this.isRadio && lodash_1.default.isObject(valueAtProperty)) ||\n                (!this.isRadio && lodash_1.default.isBoolean(valueAtProperty)))) {\n                this.loadedOptions[i].invalid = true;\n            }\n        });\n        if (this.isSelectURL) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.listData) {\n                submission.metadata.listData = {};\n            }\n            lodash_1.default.set(submission.metadata.listData, this.path, listData);\n        }\n        this.itemsLoadedResolve();\n    }\n    setSelectedClasses() {\n        if (this.refs.wrapper) {\n            //add/remove selected option class\n            const value = this.dataValue;\n            this.refs.wrapper.forEach((wrapper, index) => {\n                const input = this.refs.input[index];\n                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());\n                if (checked) {\n                    //add class to container when selected\n                    this.addClass(wrapper, this.optionSelectedClass);\n                    //change \"checked\" attribute\n                    input.setAttribute('checked', 'true');\n                }\n                else {\n                    this.removeClass(wrapper, this.optionSelectedClass);\n                    input.removeAttribute('checked');\n                }\n            });\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed) {\n            this.setSelectedClasses();\n        }\n        if (!flags || !flags.modified || !this.isRadio) {\n            if (changed) {\n                this.previousValue = this.dataValue;\n            }\n            return changed;\n        }\n        // If they clicked on the radio that is currently selected, it needs to reset the value.\n        this.currentValue = this.dataValue;\n        const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;\n        if (shouldResetValue) {\n            this.resetValue();\n            this.triggerChange(flags);\n            this.setSelectedClasses();\n        }\n        this.previousValue = this.dataValue;\n        return changed;\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        const dataType = this.component.dataType || 'auto';\n        if (value === this.emptyValue) {\n            return value;\n        }\n        switch (dataType) {\n            case 'auto':\n                if (!isNaN(parseFloat(value)) && isFinite(value) && lodash_1.default.toString(value) === Number(value).toString()) {\n                    value = +value;\n                }\n                if (value === 'true') {\n                    value = true;\n                }\n                if (value === 'false') {\n                    value = false;\n                }\n                break;\n            case 'number':\n                value = +value;\n                break;\n            case 'string':\n                if (typeof value === 'object') {\n                    value = JSON.stringify(value);\n                }\n                else {\n                    value = String(value);\n                }\n                break;\n            case 'boolean':\n                value = !(!value || value.toString() === 'false');\n                break;\n        }\n        if (this.isSelectURL && this.templateData && this.templateData[value]) {\n            const submission = this.root.submission;\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);\n        }\n        return super.normalizeValue(value);\n    }\n}\nexports[\"default\"] = RadioComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/radio/Radio.js?");
 
 /***/ }),