@formio/js 5.1.0-dev.6050.f1c0fbe → 5.1.0-dev.6053.1bce8e0

package/dist/formio.full.js

@@ -5754,7 +5754,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            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        let provider = this.component.provider;\n        const providerOptions = this.providerOptions;\n        const map = this.component.map;\n        if (!this.builderMode) {\n            if (provider) {\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 (map) {\n                // Fallback to legacy version where Google Maps was the only provider.\n                provider = this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;\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.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 providerOptions() {\n        return {\n            params: Object.assign({ subscriptionKey: this.component.subscriptionKey, key: this.component.apiKey }, this.component.params),\n            url: this.component.url,\n            queryProperty: this.component.queryProperty,\n            responseProperty: this.component.responseProperty,\n            displayValueProperty: this.component.displayValueProperty,\n            autocompleteOptions: this.component.autocompleteOptions\n        };\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 || 'addAnother');\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 = this.component.provider;\n                const providerOptions = this.providerOptions;\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.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 || 'addAnother');\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?");
 
 /***/ }),
 
@@ -5787,7 +5787,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (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 Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nexports[\"default\"] = [\n    {\n        type: 'select',\n        input: true,\n        key: 'provider',\n        label: 'Provider',\n        placeholder: 'Select your address search provider',\n        weight: 0,\n        tooltip: 'Which address search service should be used.',\n        valueProperty: 'value',\n        dataSrc: 'custom',\n        data: {\n            custom() {\n                return lodash_1.default.values(Formio_1.Formio.Providers.getProviders('address')).sort().map((provider) => ({\n                    label: provider.displayName,\n                    value: provider.name,\n                }));\n            },\n        },\n        validate: {\n            required: true,\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: \"subscriptionKey\",\n        label: 'Subscription Key',\n        placeholder: 'Enter Subscription Key',\n        weight: 10,\n        tooltip: 'Use your Azure Maps subscription key here.',\n        validate: {\n            required: true,\n        },\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'azure'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'url',\n        label: 'Url',\n        placeholder: 'Enter Url',\n        weight: 10,\n        tooltip: 'Url to the service which should be used to search addresses for autocomplete.',\n        validate: {\n            required: true,\n        },\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'custom'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'queryProperty',\n        label: 'Query Property',\n        defaultValue: 'query',\n        placeholder: 'Enter Query Property',\n        weight: 20,\n        tooltip: 'Which query param should be used to pass as a search string. Default is `query`.',\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'custom'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'responseProperty',\n        label: 'Response Property',\n        placeholder: 'Enter Response Property',\n        weight: 30,\n        tooltip: 'The property within the response data, where iterable addresses reside. For example: results.',\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'custom'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'displayValueProperty',\n        label: 'Display Value Property',\n        placeholder: 'Display Value Property',\n        weight: 40,\n        tooltip: 'The property of each address in the response to use as the display value.',\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'custom'] },\n        },\n    },\n    {\n        type: 'textarea',\n        input: true,\n        key: 'params',\n        label: 'Params',\n        placeholder: '{ ... }',\n        weight: 50,\n        rows: 5,\n        editor: 'ace',\n        as: 'json',\n        tooltip: 'Additional query params can be specified here in a way of JSON object.',\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'custom'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'apiKey',\n        label: 'API Key',\n        placeholder: 'Enter API Key',\n        weight: 10,\n        tooltip: 'Use your Google API key here.',\n        validate: {\n            required: true,\n        },\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'google'] },\n        },\n    },\n    {\n        type: 'textarea',\n        input: true,\n        key: 'autocompleteOptions',\n        label: 'Provider options',\n        placeholder: 'Enter provider options as JSON object',\n        defaultValue: {},\n        weight: 60,\n        rows: 5,\n        as: 'json',\n        editor: 'ace',\n        tooltip: 'Specify Google Maps Autocomplete options used for address searching as JSON object. Follow the <a href =\\'https://developers.google.com/maps/documentation/javascript/places-autocomplete\\' target=\\'_blank\\'>link</a> for available options',\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'google'] },\n        },\n    },\n    {\n        type: 'textarea',\n        input: true,\n        key: 'manualModeViewString',\n        label: 'Manual Mode View String',\n        placeholder: 'Enter Manual Mode View String',\n        description: '\"address\" variable references component value, \"data\" - submission data and \"component\" - address component schema.',\n        weight: 60,\n        rows: 5,\n        editor: 'ace',\n        tooltip: 'Specify template which should be when quering view string for the component value entered in manual mode. This string is used in table view, CSV export and email rendering. When left blank combined value of all components joined with comma will be used.',\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/address/editForm/Address.edit.provider.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 Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nexports[\"default\"] = [\n    {\n        type: 'select',\n        input: true,\n        key: 'provider',\n        label: 'Provider',\n        placeholder: 'Select your address search provider',\n        weight: 0,\n        tooltip: 'Which address search service should be used.',\n        valueProperty: 'value',\n        dataSrc: 'custom',\n        data: {\n            custom() {\n                return lodash_1.default.values(Formio_1.Formio.Providers.getProviders('address')).sort().map((provider) => ({\n                    label: provider.displayName,\n                    value: provider.name,\n                }));\n            },\n        },\n        validate: {\n            required: true,\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: \"providerOptions.params.subscriptionKey\",\n        label: 'Subscription Key',\n        placeholder: 'Enter Subscription Key',\n        weight: 10,\n        tooltip: 'Use your Azure Maps subscription key here.',\n        validate: {\n            required: true,\n        },\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'azure'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'providerOptions.url',\n        label: 'Url',\n        placeholder: 'Enter Url',\n        weight: 10,\n        tooltip: 'Url to the service which should be used to search addresses for autocomplete.',\n        validate: {\n            required: true,\n        },\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'custom'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'providerOptions.queryProperty',\n        label: 'Query Property',\n        defaultValue: 'query',\n        placeholder: 'Enter Query Property',\n        weight: 20,\n        tooltip: 'Which query param should be used to pass as a search string. Default is `query`.',\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'custom'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'providerOptions.responseProperty',\n        label: 'Response Property',\n        placeholder: 'Enter Response Property',\n        weight: 30,\n        tooltip: 'The property within the response data, where iterable addresses reside. For example: results.',\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'custom'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'providerOptions.displayValueProperty',\n        label: 'Display Value Property',\n        placeholder: 'Display Value Property',\n        weight: 40,\n        tooltip: 'The property of each address in the response to use as the display value.',\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'custom'] },\n        },\n    },\n    {\n        type: 'textarea',\n        input: true,\n        key: 'providerOptions.params',\n        label: 'Params',\n        placeholder: '{ ... }',\n        weight: 50,\n        rows: 5,\n        editor: 'ace',\n        as: 'json',\n        tooltip: 'Additional query params can be specified here in a way of JSON object.',\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'custom'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'providerOptions.params.key',\n        label: 'API Key',\n        placeholder: 'Enter API Key',\n        weight: 10,\n        tooltip: 'Use your Google API key here.',\n        validate: {\n            required: true,\n        },\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'google'] },\n        },\n    },\n    {\n        type: 'textarea',\n        input: true,\n        key: 'providerOptions.params.autocompleteOptions',\n        label: 'Provider options',\n        placeholder: 'Enter provider options as JSON object',\n        defaultValue: {},\n        weight: 60,\n        rows: 5,\n        as: 'json',\n        editor: 'ace',\n        tooltip: 'Specify Google Maps Autocomplete options used for address searching as JSON object. Follow the <a href =\\'https://developers.google.com/maps/documentation/javascript/places-autocomplete\\' target=\\'_blank\\'>link</a> for available options',\n        conditional: {\n            json: { '===': [{ var: 'data.provider' }, 'google'] },\n        },\n    },\n    {\n        type: 'textarea',\n        input: true,\n        key: 'manualModeViewString',\n        label: 'Manual Mode View String',\n        placeholder: 'Enter Manual Mode View String',\n        description: '\"address\" variable references component value, \"data\" - submission data and \"component\" - address component schema.',\n        weight: 60,\n        rows: 5,\n        editor: 'ace',\n        tooltip: 'Specify template which should be when quering view string for the component value entered in manual mode. This string is used in table view, CSV export and email rendering. When left blank combined value of all components joined with comma will be used.',\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/address/editForm/Address.edit.provider.js?");
 
 /***/ }),
 
@@ -6997,7 +6997,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 utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst calculateSingleSelectData = (context, defaultValue) => {\n    const { instance, data } = context;\n    const rawDefaultValue = instance.downloadedResources.find(resource => lodash_1.default.get(resource, data.valueProperty) === defaultValue);\n    const options = { data: {}, noeval: true };\n    instance.interpolate(data.template, {\n        item: rawDefaultValue,\n    }, options);\n    return options.data.item;\n};\nconst calculateSelectData = (context) => {\n    const { instance } = context;\n    const defaultValue = instance.getValue();\n    if (instance.component.multiple) {\n        const multiSelectData = {};\n        (defaultValue !== null && defaultValue !== void 0 ? defaultValue : []).forEach((defaultValueItem) => {\n            multiSelectData[defaultValueItem] = calculateSingleSelectData(context, defaultValueItem);\n        });\n        return multiSelectData;\n    }\n    else {\n        return calculateSingleSelectData(context, defaultValue);\n    }\n};\nconst setSelectData = (context) => {\n    // Wait before downloadedResources will be set\n    setTimeout(() => {\n        var _a, _b;\n        const { instance, data } = context;\n        const selectDataComponent = (_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('selectData');\n        // clear selectData if conditions are not met or clearing default value\n        if (selectDataComponent && (!selectDataComponent.visible || !data.defaultValue)) {\n            selectDataComponent.setValue(null, { resetValue: true });\n            return;\n        }\n        // nothing can set if don't have downloaded resources\n        if (!selectDataComponent || !instance.getValue() || !((_b = instance.downloadedResources) === null || _b === void 0 ? void 0 : _b.length)) {\n            return;\n        }\n        const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;\n        const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;\n        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : null;\n        selectDataComponent.setValue(newValue, { resetValue: newValue === null });\n    }, 0);\n};\nexports[\"default\"] = [\n    {\n        key: 'dataSrc',\n        data: {\n            values: [\n                { label: 'Values', value: 'values' },\n                { label: 'URL', value: 'url' },\n                { label: 'Resource', value: 'resource' },\n                { label: 'Custom', value: 'custom' },\n                { label: 'Raw JSON', value: 'json' },\n            ],\n        },\n    },\n    {\n        type: 'textfield',\n        weight: 10,\n        input: true,\n        key: 'indexeddb.database',\n        label: 'Database name',\n        tooltip: 'The name of the indexeddb database.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'indexeddb.table',\n        label: 'Table name',\n        weight: 16,\n        tooltip: 'The name of table in the indexeddb database.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },\n        }\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 18,\n        input: true,\n        key: 'indexeddb.filter',\n        label: 'Row Filter',\n        tooltip: 'Filter table items that match the object.',\n        defaultValue: {},\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },\n        },\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 10,\n        input: true,\n        key: 'data.json',\n        label: 'Data Source Raw JSON',\n        tooltip: 'A valid JSON array to use as a data source.',\n        description: '<div>Example: <pre>[\"apple\", \"banana\", \"orange\"].</pre></div> <div>Example 2: <pre>[{\"name\": \"John\", \"email\": \"john.doe@test.com\"}, {\"name\": \"Jane\", \"email\": \"jane.doe@test.com\"}].</pre></div>',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'json'] },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        label: 'Lazy Load Data',\n        key: 'lazyLoad',\n        tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\\'s will only fire when the control is activated.',\n        weight: 11,\n        conditional: {\n            json: {\n                and: [\n                    {\n                        in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'resource',\n                                'url',\n                            ],\n                        ],\n                    },\n                    {\n                        '!==': [\n                            { var: 'data.widget' },\n                            'html5'\n                        ]\n                    }\n                ]\n            },\n        },\n    },\n    {\n        type: 'datagrid',\n        input: true,\n        label: 'Data Source Values',\n        key: 'data.values',\n        tooltip: 'Values to use as the data source. Labels are shown in the select field. Values are the corresponding values saved with the submission.',\n        weight: 10,\n        reorder: true,\n        defaultValue: [{ label: '', value: '' }],\n        components: [\n            {\n                label: 'Label',\n                key: 'label',\n                input: true,\n                type: 'textfield',\n            },\n            {\n                label: 'Value',\n                key: 'value',\n                input: true,\n                type: 'textfield',\n                allowCalculateOverride: true,\n                calculateValue: 'value = _.camelCase(row.label);',\n            },\n        ],\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'values'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        dataSrc: 'url',\n        data: {\n            url: '/form?type=resource&limit=1000000&select=_id,title',\n        },\n        authenticate: true,\n        template: '<span>{{ item.title }}</span>',\n        valueProperty: '_id',\n        clearOnHide: false,\n        label: 'Resource',\n        key: 'data.resource',\n        lazyLoad: false,\n        weight: 10,\n        tooltip: 'The resource to be used with this field.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        label: 'Data Path',\n        key: 'selectValues',\n        weight: 12,\n        description: 'The object path to the iterable items.',\n        tooltip: 'The property within the source data, where iterable items reside. For example: results.items or results[0].items',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        label: 'Value Property',\n        key: 'valueProperty',\n        skipMerge: true,\n        clearOnHide: false,\n        tooltip: 'The field to use as the value.',\n        weight: 11,\n        refreshOn: 'data.resource',\n        template: '<span>{{ item.label }}</span>',\n        valueProperty: 'key',\n        dataSrc: 'url',\n        lazyLoad: false,\n        onSetItems(component, form) {\n            const newItems = form.type === 'resource'\n                ? [{\n                        label: '{Entire Object}',\n                        key: 'data',\n                    }]\n                : [];\n            (0, utils_1.eachComponent)(form.components, (component, path) => {\n                if (component.input) {\n                    newItems.push({\n                        label: component.label || component.key,\n                        key: `data.${path}`\n                    });\n                }\n            });\n            return newItems;\n        },\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                const valueProp = context.instance.data.valueProperty;\n                const templateProp = valueProp ? valueProp : 'data';\n                const template = `<span>{{ item.${templateProp} }}</span>`;\n                const searchField = valueProp ? `${valueProp}__regex` : '';\n                context.instance.root.getComponent('template').setValue(template);\n                context.instance.root.getComponent('searchField').setValue(searchField);\n            }\n        },\n        data: {\n            url: '/form/{{ data.data.resource }}',\n        },\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '!==': [{ var: 'data.reference' }, true] },\n                    { var: 'data.data.resource' },\n                ],\n            },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        label: 'Storage Type',\n        key: 'dataType',\n        clearOnHide: true,\n        tooltip: 'The type to store the data. If you select something other than autotype, it will force it to that type.',\n        weight: 12,\n        template: '<span>{{ item.label }}</span>',\n        dataSrc: 'values',\n        data: {\n            values: [\n                { label: 'Autotype', value: 'auto' },\n                { label: 'String', value: 'string' },\n                { label: 'Number', value: 'number' },\n                { label: 'Boolean', value: 'boolean' },\n                { label: 'Object', value: 'object' },\n            ],\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'idPath',\n        weight: 12,\n        label: 'ID Path',\n        placeholder: 'id',\n        tooltip: 'Path to the select option id.'\n    },\n    {\n        type: 'textfield',\n        input: true,\n        label: 'Select Fields',\n        key: 'selectFields',\n        tooltip: 'The properties on the resource to return as part of the options. Separate property names by commas. If left blank, all properties will be returned.',\n        placeholder: 'Comma separated list of fields to select.',\n        weight: 14,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '===': [{ var: 'data.valueProperty' }, ''] },\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'disableLimit',\n        label: 'Disable limiting response',\n        tooltip: 'When enabled the request will not include the limit and skip options in the query string',\n        weight: 15,\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'searchField',\n        label: 'Search Query Name',\n        weight: 16,\n        description: 'Name of URL query parameter',\n        tooltip: 'The name of the search querystring parameter used when sending a request to filter results with. The server at the URL must handle this query parameter.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'searchDebounce',\n        label: 'Search request delay',\n        weight: 16,\n        description: 'The delay (in seconds) before the search request is sent.',\n        tooltip: 'The delay in seconds before the search request is sent, measured from the last character input in the search field.',\n        validate: {\n            min: 0,\n            customMessage: '',\n            json: '',\n            max: 1,\n        },\n        delimiter: false,\n        requireDecimal: false,\n        encrypted: false,\n        defaultValue: 0.3,\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'minSearch',\n        weight: 17,\n        label: 'Minimum Search Length',\n        tooltip: 'The minimum amount of characters they must type before a search is made.',\n        defaultValue: 0,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'url'] },\n                    { '!=': [{ var: 'data.searchField' }, ''] },\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'filter',\n        label: 'Filter Query',\n        weight: 18,\n        description: 'The filter query for results.',\n        tooltip: 'Use this to provide additional filtering using query parameters.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'sort',\n        label: 'Sort Query',\n        weight: 18,\n        description: 'The sort query for results',\n        tooltip: 'Use this to provide additional sorting using query parameters',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'limit',\n        label: 'Limit',\n        weight: 18,\n        description: 'Maximum number of items to view per page of results.',\n        tooltip: 'Use this to limit the number of items to request or view.',\n        clearOnHide: false,\n        conditional: {\n            json: {\n                and: [\n                    { in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'url',\n                                'resource'\n                            ],\n                        ] },\n                    { '!==': [{ var: 'data.disableLimit' }, true] }\n                ]\n            },\n        },\n    },\n    {\n        type: 'textarea',\n        input: true,\n        key: 'data.custom',\n        label: 'Custom Values',\n        editor: 'ace',\n        rows: 10,\n        weight: 14,\n        placeholder: \"values = data['mykey'] or values = Promise.resolve(['myValue'])\",\n        tooltip: 'Write custom code to return the value options or a promise with value options. The form data object is available.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'custom'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'refreshOn',\n        label: 'Refresh Options On',\n        weight: 19,\n        tooltip: 'Refresh data when another field changes.',\n        dataSrc: 'custom',\n        valueProperty: 'value',\n        data: {\n            custom(context) {\n                var values = [];\n                values.push({ label: 'Any Change', value: 'data' });\n                context.utils.eachComponent(context.instance.options.editForm.components, function (component, path) {\n                    if (component.key !== context.data.key) {\n                        values.push({\n                            label: component.label || component.key,\n                            value: path\n                        });\n                    }\n                });\n                return values;\n            }\n        },\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values',\n                        'custom'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'refreshOnBlur',\n        label: 'Refresh Options On Blur',\n        weight: 19,\n        tooltip: 'Refresh data when another field is blured.',\n        dataSrc: 'custom',\n        valueProperty: 'value',\n        data: {\n            custom(context) {\n                var values = [];\n                values.push({ label: 'Any Change', value: 'data' });\n                context.utils.eachComponent(context.instance.options.editForm.components, function (component, path) {\n                    if (component.key !== context.data.key) {\n                        values.push({\n                            label: component.label || component.key,\n                            value: path\n                        });\n                    }\n                });\n                return values;\n            }\n        },\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 20,\n        key: 'clearOnRefresh',\n        label: 'Clear Value On Refresh Options',\n        defaultValue: false,\n        tooltip: 'When the Refresh On field is changed, clear this components value.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values',\n                        'custom'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 21,\n        key: 'searchEnabled',\n        label: 'Enable Static Search',\n        defaultValue: true,\n        tooltip: 'When checked, the select dropdown will allow for searching within the static list of items provided.',\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 21,\n        key: 'noRefreshOnScroll',\n        label: 'Disable Options Refresh When Scrolling',\n        defaultValue: false,\n        tooltip: 'When checked, the select with search input won\\'t perform new api requests when scrolling through the list of options.',\n        conditional: {\n            json: {\n                and: [\n                    { in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'url',\n                                'resource'\n                            ],\n                        ] },\n                    { '===': [{ var: 'data.searchEnabled' }, true] }\n                ]\n            },\n        },\n    },\n    {\n        label: 'Search Threshold',\n        mask: false,\n        tableView: true,\n        alwaysEnabled: false,\n        type: 'number',\n        input: true,\n        key: 'selectThreshold',\n        validate: {\n            min: 0,\n            customMessage: '',\n            json: '',\n            max: 1,\n        },\n        delimiter: false,\n        requireDecimal: false,\n        encrypted: false,\n        defaultValue: 0.3,\n        weight: 22,\n        tooltip: 'At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match, a threshold of 1.0 would match anything.',\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 23,\n        key: 'addResource',\n        label: 'Add Resource',\n        tooltip: 'Allows to create a new resource while entering a submission.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'textfield',\n        label: 'Add Resource Label',\n        key: 'addResourceLabel',\n        tooltip: 'Set the text of the Add Resource button.',\n        placeholder: 'Add Resource',\n        weight: 24,\n        input: true,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '!!': { var: 'data.addResource' } },\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 25,\n        key: 'reference',\n        label: 'Submit as reference',\n        tooltip: 'Using this option will submit this field as a reference id and link its value to the value of the origin record.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 27,\n        key: 'readOnlyValue',\n        label: 'Read Only Value',\n        tooltip: 'Check this if you would like to show just the value when in Read Only mode.',\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 28,\n        input: true,\n        key: 'customOptions',\n        label: 'Choices.js options',\n        tooltip: 'A raw JSON object to use as options for the Select component (Choices JS).',\n        defaultValue: {},\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 29,\n        key: 'useExactSearch',\n        label: 'Use exact search',\n        tooltip: 'Disables search algorithm threshold.',\n    },\n    {\n        key: 'defaultValue',\n        onSetItems(component) {\n            setSelectData(component.evalContext());\n        },\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                setSelectData(context);\n            }\n        },\n    },\n    {\n        key: 'selectData',\n        type: 'hidden',\n        conditional: {\n            json: {\n                and: [\n                    { var: 'data.valueProperty' },\n                    { '===': [{ var: 'data.lazyLoad' }, true] },\n                    { '!==': [{ var: 'data.widget' }, 'html5'] },\n                    {\n                        or: [\n                            { '===': [{ var: 'data.dataSrc' }, 'url'] },\n                            {\n                                and: [\n                                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                                    // 'data' means entire object from resource will be used\n                                    { '!==': [{ var: 'data.valueProperty' }, 'data'] },\n                                ],\n                            }\n                        ]\n                    }\n                ]\n            },\n        },\n    },\n    {\n        key: 'template',\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                const defaultValueComponent = context.instance.root.getComponent('defaultValue');\n                if (!defaultValueComponent) {\n                    return;\n                }\n                setSelectData(defaultValueComponent.evalContext());\n            }\n        },\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/editForm/Select.edit.data.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 utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst calculateSingleSelectData = (context, defaultValue) => {\n    const { instance, data } = context;\n    const rawDefaultValue = instance.downloadedResources.find(resource => lodash_1.default.get(resource, data.valueProperty) === defaultValue);\n    const options = { data: {}, noeval: true };\n    instance.interpolate(data.template, {\n        item: rawDefaultValue,\n    }, options);\n    return options.data.item;\n};\nconst calculateSelectData = (context) => {\n    const { instance } = context;\n    const defaultValue = instance.getValue();\n    if (instance.component.multiple) {\n        const multiSelectData = {};\n        (defaultValue !== null && defaultValue !== void 0 ? defaultValue : []).forEach((defaultValueItem) => {\n            multiSelectData[defaultValueItem] = calculateSingleSelectData(context, defaultValueItem);\n        });\n        return multiSelectData;\n    }\n    else {\n        return calculateSingleSelectData(context, defaultValue);\n    }\n};\nconst setSelectData = (context) => {\n    // Wait before downloadedResources will be set\n    setTimeout(() => {\n        var _a, _b;\n        const { instance, data } = context;\n        const selectDataComponent = (_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('selectData');\n        // clear selectData if conditions are not met or clearing default value\n        if (selectDataComponent && (!selectDataComponent.visible || !data.defaultValue)) {\n            selectDataComponent.setValue(null, { resetValue: true });\n            return;\n        }\n        // nothing can set if don't have downloaded resources\n        if (!selectDataComponent || !instance.getValue() || !((_b = instance.downloadedResources) === null || _b === void 0 ? void 0 : _b.length)) {\n            return;\n        }\n        const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;\n        const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;\n        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : null;\n        selectDataComponent.setValue(newValue, { resetValue: newValue === null });\n    }, 0);\n};\nexports[\"default\"] = [\n    {\n        key: 'dataSrc',\n        data: {\n            values: [\n                { label: 'Values', value: 'values' },\n                { label: 'URL', value: 'url' },\n                { label: 'Resource', value: 'resource' },\n                { label: 'Custom', value: 'custom' },\n                { label: 'Raw JSON', value: 'json' },\n            ],\n        },\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 10,\n        input: true,\n        key: 'data.json',\n        label: 'Data Source Raw JSON',\n        tooltip: 'A valid JSON array to use as a data source.',\n        description: '<div>Example: <pre>[\"apple\", \"banana\", \"orange\"].</pre></div> <div>Example 2: <pre>[{\"name\": \"John\", \"email\": \"john.doe@test.com\"}, {\"name\": \"Jane\", \"email\": \"jane.doe@test.com\"}].</pre></div>',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'json'] },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        label: 'Lazy Load Data',\n        key: 'lazyLoad',\n        tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\\'s will only fire when the control is activated.',\n        weight: 11,\n        conditional: {\n            json: {\n                and: [\n                    {\n                        in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'resource',\n                                'url',\n                            ],\n                        ],\n                    },\n                    {\n                        '!==': [\n                            { var: 'data.widget' },\n                            'html5'\n                        ]\n                    }\n                ]\n            },\n        },\n    },\n    {\n        type: 'datagrid',\n        input: true,\n        label: 'Data Source Values',\n        key: 'data.values',\n        tooltip: 'Values to use as the data source. Labels are shown in the select field. Values are the corresponding values saved with the submission.',\n        weight: 10,\n        reorder: true,\n        defaultValue: [{ label: '', value: '' }],\n        components: [\n            {\n                label: 'Label',\n                key: 'label',\n                input: true,\n                type: 'textfield',\n            },\n            {\n                label: 'Value',\n                key: 'value',\n                input: true,\n                type: 'textfield',\n                allowCalculateOverride: true,\n                calculateValue: 'value = _.camelCase(row.label);',\n            },\n        ],\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'values'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        dataSrc: 'url',\n        data: {\n            url: '/form?type=resource&limit=1000000&select=_id,title',\n        },\n        authenticate: true,\n        template: '<span>{{ item.title }}</span>',\n        valueProperty: '_id',\n        clearOnHide: false,\n        label: 'Resource',\n        key: 'data.resource',\n        lazyLoad: false,\n        weight: 10,\n        tooltip: 'The resource to be used with this field.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        label: 'Data Path',\n        key: 'selectValues',\n        weight: 12,\n        description: 'The object path to the iterable items.',\n        tooltip: 'The property within the source data, where iterable items reside. For example: results.items or results[0].items',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        label: 'Value Property',\n        key: 'valueProperty',\n        skipMerge: true,\n        clearOnHide: false,\n        tooltip: 'The field to use as the value.',\n        weight: 11,\n        refreshOn: 'data.resource',\n        template: '<span>{{ item.label }}</span>',\n        valueProperty: 'key',\n        dataSrc: 'url',\n        lazyLoad: false,\n        onSetItems(component, form) {\n            const newItems = form.type === 'resource'\n                ? [{\n                        label: '{Entire Object}',\n                        key: 'data',\n                    }]\n                : [];\n            (0, utils_1.eachComponent)(form.components, (component, path) => {\n                if (component.input) {\n                    newItems.push({\n                        label: component.label || component.key,\n                        key: `data.${path}`\n                    });\n                }\n            });\n            return newItems;\n        },\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                const valueProp = context.instance.data.valueProperty;\n                const templateProp = valueProp ? valueProp : 'data';\n                const template = `<span>{{ item.${templateProp} }}</span>`;\n                const searchField = valueProp ? `${valueProp}__regex` : '';\n                context.instance.root.getComponent('template').setValue(template);\n                context.instance.root.getComponent('searchField').setValue(searchField);\n            }\n        },\n        data: {\n            url: '/form/{{ data.data.resource }}',\n        },\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '!==': [{ var: 'data.reference' }, true] },\n                    { var: 'data.data.resource' },\n                ],\n            },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        label: 'Storage Type',\n        key: 'dataType',\n        clearOnHide: true,\n        tooltip: 'The type to store the data. If you select something other than autotype, it will force it to that type.',\n        weight: 12,\n        template: '<span>{{ item.label }}</span>',\n        dataSrc: 'values',\n        data: {\n            values: [\n                { label: 'Autotype', value: 'auto' },\n                { label: 'String', value: 'string' },\n                { label: 'Number', value: 'number' },\n                { label: 'Boolean', value: 'boolean' },\n                { label: 'Object', value: 'object' },\n            ],\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'idPath',\n        weight: 12,\n        label: 'ID Path',\n        placeholder: 'id',\n        tooltip: 'Path to the select option id.'\n    },\n    {\n        type: 'textfield',\n        input: true,\n        label: 'Select Fields',\n        key: 'selectFields',\n        tooltip: 'The properties on the resource to return as part of the options. Separate property names by commas. If left blank, all properties will be returned.',\n        placeholder: 'Comma separated list of fields to select.',\n        weight: 14,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '===': [{ var: 'data.valueProperty' }, ''] },\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'disableLimit',\n        label: 'Disable limiting response',\n        tooltip: 'When enabled the request will not include the limit and skip options in the query string',\n        weight: 15,\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'searchField',\n        label: 'Search Query Name',\n        weight: 16,\n        description: 'Name of URL query parameter',\n        tooltip: 'The name of the search querystring parameter used when sending a request to filter results with. The server at the URL must handle this query parameter.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'searchDebounce',\n        label: 'Search request delay',\n        weight: 16,\n        description: 'The delay (in seconds) before the search request is sent.',\n        tooltip: 'The delay in seconds before the search request is sent, measured from the last character input in the search field.',\n        validate: {\n            min: 0,\n            customMessage: '',\n            json: '',\n            max: 1,\n        },\n        delimiter: false,\n        requireDecimal: false,\n        encrypted: false,\n        defaultValue: 0.3,\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'minSearch',\n        weight: 17,\n        label: 'Minimum Search Length',\n        tooltip: 'The minimum amount of characters they must type before a search is made.',\n        defaultValue: 0,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'url'] },\n                    { '!=': [{ var: 'data.searchField' }, ''] },\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'filter',\n        label: 'Filter Query',\n        weight: 18,\n        description: 'The filter query for results.',\n        tooltip: 'Use this to provide additional filtering using query parameters.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'sort',\n        label: 'Sort Query',\n        weight: 18,\n        description: 'The sort query for results',\n        tooltip: 'Use this to provide additional sorting using query parameters',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'limit',\n        label: 'Limit',\n        weight: 18,\n        description: 'Maximum number of items to view per page of results.',\n        tooltip: 'Use this to limit the number of items to request or view.',\n        clearOnHide: false,\n        conditional: {\n            json: {\n                and: [\n                    { in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'url',\n                                'resource'\n                            ],\n                        ] },\n                    { '!==': [{ var: 'data.disableLimit' }, true] }\n                ]\n            },\n        },\n    },\n    {\n        type: 'textarea',\n        input: true,\n        key: 'data.custom',\n        label: 'Custom Values',\n        editor: 'ace',\n        rows: 10,\n        weight: 14,\n        placeholder: \"values = data['mykey'] or values = Promise.resolve(['myValue'])\",\n        tooltip: 'Write custom code to return the value options or a promise with value options. The form data object is available.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'custom'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'refreshOn',\n        label: 'Refresh Options On',\n        weight: 19,\n        tooltip: 'Refresh data when another field changes.',\n        dataSrc: 'custom',\n        valueProperty: 'value',\n        data: {\n            custom(context) {\n                var values = [];\n                values.push({ label: 'Any Change', value: 'data' });\n                context.utils.eachComponent(context.instance.options.editForm.components, function (component, path) {\n                    if (component.key !== context.data.key) {\n                        values.push({\n                            label: component.label || component.key,\n                            value: path\n                        });\n                    }\n                });\n                return values;\n            }\n        },\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values',\n                        'custom'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'refreshOnBlur',\n        label: 'Refresh Options On Blur',\n        weight: 19,\n        tooltip: 'Refresh data when another field is blured.',\n        dataSrc: 'custom',\n        valueProperty: 'value',\n        data: {\n            custom(context) {\n                var values = [];\n                values.push({ label: 'Any Change', value: 'data' });\n                context.utils.eachComponent(context.instance.options.editForm.components, function (component, path) {\n                    if (component.key !== context.data.key) {\n                        values.push({\n                            label: component.label || component.key,\n                            value: path\n                        });\n                    }\n                });\n                return values;\n            }\n        },\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 20,\n        key: 'clearOnRefresh',\n        label: 'Clear Value On Refresh Options',\n        defaultValue: false,\n        tooltip: 'When the Refresh On field is changed, clear this components value.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values',\n                        'custom'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 21,\n        key: 'searchEnabled',\n        label: 'Enable Static Search',\n        defaultValue: true,\n        tooltip: 'When checked, the select dropdown will allow for searching within the static list of items provided.',\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 21,\n        key: 'noRefreshOnScroll',\n        label: 'Disable Options Refresh When Scrolling',\n        defaultValue: false,\n        tooltip: 'When checked, the select with search input won\\'t perform new api requests when scrolling through the list of options.',\n        conditional: {\n            json: {\n                and: [\n                    { in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'url',\n                                'resource'\n                            ],\n                        ] },\n                    { '===': [{ var: 'data.searchEnabled' }, true] }\n                ]\n            },\n        },\n    },\n    {\n        label: 'Search Threshold',\n        mask: false,\n        tableView: true,\n        alwaysEnabled: false,\n        type: 'number',\n        input: true,\n        key: 'selectThreshold',\n        validate: {\n            min: 0,\n            customMessage: '',\n            json: '',\n            max: 1,\n        },\n        delimiter: false,\n        requireDecimal: false,\n        encrypted: false,\n        defaultValue: 0.3,\n        weight: 22,\n        tooltip: 'At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match, a threshold of 1.0 would match anything.',\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 23,\n        key: 'addResource',\n        label: 'Add Resource',\n        tooltip: 'Allows to create a new resource while entering a submission.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'textfield',\n        label: 'Add Resource Label',\n        key: 'addResourceLabel',\n        tooltip: 'Set the text of the Add Resource button.',\n        placeholder: 'Add Resource',\n        weight: 24,\n        input: true,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '!!': { var: 'data.addResource' } },\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 25,\n        key: 'reference',\n        label: 'Submit as reference',\n        tooltip: 'Using this option will submit this field as a reference id and link its value to the value of the origin record.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 27,\n        key: 'readOnlyValue',\n        label: 'Read Only Value',\n        tooltip: 'Check this if you would like to show just the value when in Read Only mode.',\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 28,\n        input: true,\n        key: 'customOptions',\n        label: 'Choices.js options',\n        tooltip: 'A raw JSON object to use as options for the Select component (Choices JS).',\n        defaultValue: {},\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 29,\n        key: 'useExactSearch',\n        label: 'Use exact search',\n        tooltip: 'Disables search algorithm threshold.',\n    },\n    {\n        key: 'defaultValue',\n        onSetItems(component) {\n            setSelectData(component.evalContext());\n        },\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                setSelectData(context);\n            }\n        },\n    },\n    {\n        key: 'selectData',\n        type: 'hidden',\n        conditional: {\n            json: {\n                and: [\n                    { var: 'data.valueProperty' },\n                    { '===': [{ var: 'data.lazyLoad' }, true] },\n                    { '!==': [{ var: 'data.widget' }, 'html5'] },\n                    {\n                        or: [\n                            { '===': [{ var: 'data.dataSrc' }, 'url'] },\n                            {\n                                and: [\n                                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                                    // 'data' means entire object from resource will be used\n                                    { '!==': [{ var: 'data.valueProperty' }, 'data'] },\n                                ],\n                            }\n                        ]\n                    }\n                ]\n            },\n        },\n    },\n    {\n        key: 'template',\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                const defaultValueComponent = context.instance.root.getComponent('defaultValue');\n                if (!defaultValueComponent) {\n                    return;\n                }\n                setSelectData(defaultValueComponent.evalContext());\n            }\n        },\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/editForm/Select.edit.data.js?");
 
 /***/ }),