@formio/js 5.1.0-dev.6054.a33ccd9 → 5.1.0-dev.6055.13dee3b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/formio.form.js +1 -1
- package/dist/formio.form.min.js +1 -1
- package/dist/formio.full.js +2 -2
- package/dist/formio.full.min.js +1 -1
- package/lib/cjs/components/address/Address.d.ts +8 -0
- package/lib/cjs/components/address/Address.js +31 -8
- package/lib/cjs/components/address/editForm/Address.edit.provider.js +8 -8
- package/lib/mjs/components/address/Address.d.ts +8 -0
- package/lib/mjs/components/address/Address.js +31 -8
- package/lib/mjs/components/address/editForm/Address.edit.provider.js +8 -8
- package/package.json +1 -1
package/dist/formio.full.js
CHANGED
@@ -5754,7 +5754,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
5754
5754
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
5755
5755
|
|
5756
5756
|
"use strict";
|
5757
|
-
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?");
|
5757
|
+
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 // Added for backwards compatibility\n if (this.component.providerOptions) {\n const { params, url, queryProperty, responseProperty, displayValueProperty } = this.component.providerOptions;\n const key = params === null || params === void 0 ? void 0 : params.key;\n const autocompleteOptions = params === null || params === void 0 ? void 0 : params.autocompleteOptions;\n delete this.component.providerOptions;\n this.component.url = url;\n this.component.queryProperty = queryProperty;\n this.component.responseProperty = responseProperty;\n this.component.displayValueProperty = displayValueProperty;\n this.component.apiKey = key;\n this.component.autocompleteOptions = autocompleteOptions;\n }\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?");
|
5758
5758
|
|
5759
5759
|
/***/ }),
|
5760
5760
|
|
@@ -5787,7 +5787,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
|
|
5787
5787
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
5788
5788
|
|
5789
5789
|
"use strict";
|
5790
|
-
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: \"
|
5790
|
+
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?");
|
5791
5791
|
|
5792
5792
|
/***/ }),
|
5793
5793
|
|