@formio/js 5.0.0-dev.5840.acb2be3 → 5.0.0-dev.5842.5155aaa
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/Changelog.md +27 -0
- package/dist/formio.form.js +3 -3
- package/dist/formio.form.min.js +1 -1
- package/dist/formio.full.js +3 -3
- package/dist/formio.full.min.js +1 -1
- package/lib/cjs/components/_classes/list/ListComponent.js +1 -0
- package/lib/cjs/components/day/Day.js +4 -3
- package/lib/cjs/components/radio/Radio.js +8 -0
- package/lib/mjs/components/_classes/list/ListComponent.js +1 -0
- package/lib/mjs/components/day/Day.js +4 -3
- package/lib/mjs/components/radio/Radio.js +8 -0
- package/package.json +1 -1
package/Changelog.md
CHANGED
|
@@ -76,6 +76,33 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
|
|
76
76
|
- FIO-8234/FIO-7195: Fixes an issue where value properties are shown instead of labels for Select component with Resource/URL data sources in read only mode and for modal preview
|
|
77
77
|
- FIO-8986: fixed setting default value for day component with hidden day and month
|
|
78
78
|
- FIO-8719: fixed error message display for nested wizard components
|
|
79
|
+
- FIO-9080 checkbox radio validation error
|
|
80
|
+
- FIO-9147: fixed an issue where the simple conditionally visible component is not validated on change
|
|
81
|
+
- FIO-9056: Fix enabling multiple values for address component
|
|
82
|
+
- FIO-9059: fixed an issue where the value for textarea with json datatype is not normalized and set correctly
|
|
83
|
+
- FIO-9075: fixed an issue where the form cannot be resubmitted if it has server errors
|
|
84
|
+
- FIO-9097 fixed navigation through the errors list
|
|
85
|
+
- FIO-8553: Replaced flatpickr-formio dependency with standard flatpickr
|
|
86
|
+
- FIO-8569: Fix sdk link
|
|
87
|
+
- FIO-8948-8950: fixed an issue where radio and select boxes with url type do not display in PDF download
|
|
88
|
+
- FIO-9034 fixed creating extra submit button
|
|
89
|
+
- FIO-8908: Fix error message appears when saving not fully filled conditionals tab
|
|
90
|
+
- FIO-8951: Updated conditions for selectData and added logic to clear selectData
|
|
91
|
+
- FIO-8556: Test coverage metrics
|
|
92
|
+
- FIO-9010: tighten up multivalue normalization by covering 'any' type models
|
|
93
|
+
- FIO-9010 fixed disappearance of components inside Columns after editing
|
|
94
|
+
- FIO-8991: fixed an issue where select value (when it is array with numbers) does not display in submission grid
|
|
95
|
+
- Fixed an issue where the 'root' may be the component that does not have a getComponent method
|
|
96
|
+
- FIO-8920 fixed errors list for the form with nested wizard
|
|
97
|
+
- FIO-8914: fixed an issue where errors list doesnot appear when submitting a PDF form
|
|
98
|
+
- FIO-8990: fixed incorrect moment export
|
|
99
|
+
- FIO-7778: validation link does not open modal
|
|
100
|
+
- FIO-8900-8899: made only 2 operators available for address component in conditionals ui and fixed setting an empty value for address
|
|
101
|
+
- FIO-8914: fixed an issue where select url does not work properly when url value has whitespaces at the end
|
|
102
|
+
- FIO-8970 resolved failing test
|
|
103
|
+
- FIO-8921: fixed an issue where newly created PDF-form cannot be saved in builder after adding some components in it
|
|
104
|
+
- FIO-8866-8864: fixed simple conditions operators for recaptcha
|
|
105
|
+
- FIO-9158: fixed an issue where Password component error message persists to displayed in Edit page
|
|
79
106
|
|
|
80
107
|
### New Features
|
|
81
108
|
|
package/dist/formio.form.js
CHANGED
|
@@ -4940,7 +4940,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4940
4940
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
4941
4941
|
|
|
4942
4942
|
"use strict";
|
|
4943
|
-
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass ListComponent extends Field_1.default {\n static schema(...extend) {\n return Field_1.default.schema({\n dataSrc: 'values',\n authenticate: false,\n ignoreCache: false,\n template: '<span>{{ item.label }}</span>',\n validate: {\n onlyAvailableItems: false\n },\n }, ...extend);\n }\n get isSelectURL() {\n return this.component.dataSrc === 'url';\n }\n get selectData() {\n const selectData = lodash_1.default.get(this.root, 'submission.metadata.selectData', {});\n return lodash_1.default.get(selectData, this.path);\n }\n get dataReady() {\n // If the root submission has been set, and we are still not attached, then assume\n // that our data is ready.\n if (this.root &&\n this.root.submissionSet &&\n !this.attached) {\n return Promise.resolve();\n }\n return this.itemsLoaded;\n }\n get shouldLoad() {\n if (this.loadingError) {\n return false;\n }\n // Live forms should always load.\n if (!this.options.readOnly) {\n return true;\n }\n // If there are template keys, then we need to see if we have the data.\n if (this.templateKeys && this.templateKeys.length) {\n // See if we already have the data we need.\n const dataValue = this.dataValue;\n const selectData = this.selectData;\n return this.templateKeys.reduce((shouldLoad, key) => {\n const hasValue = lodash_1.default.has(dataValue, key) ||\n (lodash_1.default.isArray(selectData) ? selectData.every((data) => lodash_1.default.has(data, key)) : lodash_1.default.has(selectData, key));\n return shouldLoad || !hasValue;\n }, false);\n }\n // Return that we should load.\n return true;\n }\n getTemplateKeys() {\n const template = this.component.template;\n this.templateKeys = this.options.readOnly && template\n ? (0, utils_1.getItemTemplateKeys)(template)\n : [];\n }\n get requestHeaders() {\n // Create the headers object.\n const headers = new Formio_1.Formio.Headers();\n // Add custom headers to the url.\n if (this.component.data && this.component.data.headers) {\n try {\n lodash_1.default.each(this.component.data.headers, (header) => {\n if (header.key) {\n headers.set(header.key, this.interpolate(header.value));\n }\n });\n }\n catch (err) {\n console.warn(err.message);\n }\n }\n return headers;\n }\n // Must be implemented in child classes.\n setItems() { }\n updateCustomItems() { }\n loadItems() { }\n getOptionTemplate(data, value, index) {\n if (!this.component.template) {\n return data.label;\n }\n const options = {\n noeval: true,\n data: {}\n };\n const template = this.sanitize(this.component.template\n ? this.interpolate(this.component.template, { item: data }, options)\n : data.label, this.shouldSanitizeValue);\n const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n if (templateValue && !lodash_1.default.isObject(templateValue) && options.data.item) {\n // If the value is not an object, then we need to save the template data off for when it is selected.\n this.templateData[templateValue] = options.data.item;\n }\n if (lodash_1.default.isNumber(index)) {\n this.templateData[index] = options.data.item;\n }\n return template;\n }\n itemTemplate(data, value, index) {\n if (lodash_1.default.isEmpty(data)) {\n return '';\n }\n const template = this.sanitize(this.getOptionTemplate(data, value, index), this.shouldSanitizeValue);\n if (template) {\n const label = template.replace(/<\\/?[^>]+(>|$)/g, '');\n if (!label)\n return;\n return template.replace(label, this.t(label, { _userInput: true }));\n }\n else {\n return this.sanitize(JSON.stringify(data), this.shouldSanitizeValue);\n }\n }\n get itemsLoaded() {\n return this._itemsLoaded || Promise.resolve();\n }\n set itemsLoaded(promise) {\n this._itemsLoaded = promise;\n }\n handleLoadingError(err) {\n this.loading = false;\n if (err.networkError) {\n this.networkError = true;\n }\n this.itemsLoadedResolve();\n this.emit('componentError', {\n component: this.component,\n message: err.toString(),\n });\n console.warn(`Unable to load resources for ${this.key}`);\n }\n /* eslint-disable max-statements */\n updateItems(searchInput, forceUpdate) {\n if (!this.component.data) {\n console.warn(`Select component ${this.key} does not have data configuration.`);\n this.itemsLoadedResolve();\n return;\n }\n // Only load the data if it is visible.\n if (!this.visible) {\n this.itemsLoadedResolve();\n return;\n }\n switch (this.component.dataSrc) {\n case 'values':\n this.setItems(this.component.data.values);\n break;\n case 'json':\n this.setItems(this.component.data.json);\n break;\n case 'custom':\n this.updateCustomItems(forceUpdate);\n break;\n case 'resource': {\n // If there is no resource, or we are lazyLoading, wait until active.\n if (!this.component.data.resource || (!forceUpdate && !this.active)) {\n this.itemsLoadedResolve();\n return;\n }\n let resourceUrl = this.options.formio ? this.options.formio.formsUrl : `${Formio_1.Formio.getProjectUrl()}/form`;\n resourceUrl += (`/${this.component.data.resource}/submission`);\n if (forceUpdate || this.additionalResourcesAvailable || !this.serverCount) {\n try {\n this.loadItems(resourceUrl, searchInput, this.requestHeaders);\n }\n catch (err) {\n console.warn(`Unable to load resources for ${this.key}`);\n }\n }\n else {\n this.setItems(this.downloadedResources);\n }\n break;\n }\n case 'url': {\n if (!forceUpdate && !this.active && !this.calculatedValue && this.component.type === 'select') {\n // If we are lazyLoading, wait until activated.\n this.itemsLoadedResolve();\n return;\n }\n let { url } = this.component.data;\n let method;\n let body;\n if (url.startsWith('/')) {\n // if URL starts with '/project', we should use base URL to avoid issues with URL formed like <base_url>/<project_name>/project/<project_id>/...\n const baseUrl = url.startsWith('/project') ? Formio_1.Formio.getBaseUrl() : Formio_1.Formio.getProjectUrl() || Formio_1.Formio.getBaseUrl();\n url = baseUrl + url;\n }\n if (!this.component.data.method) {\n method = 'GET';\n }\n else {\n method = this.component.data.method;\n if (method.toUpperCase() === 'POST') {\n body = this.component.data.body;\n }\n else {\n body = null;\n }\n }\n const options = this.component.authenticate ? {} : { noToken: true };\n this.loadItems(url, searchInput, this.requestHeaders, options, method, body);\n break;\n }\n case 'indexeddb': {\n if (typeof window === 'undefined') {\n return;\n }\n if (!window.indexedDB) {\n window.alert(\"Your browser doesn't support current version of indexedDB\");\n }\n if (this.component.indexeddb && this.component.indexeddb.database && this.component.indexeddb.table) {\n const request = window.indexedDB.open(this.component.indexeddb.database);\n request.onupgradeneeded = (event) => {\n if (this.component.customOptions) {\n const db = event.target.result;\n const objectStore = db.createObjectStore(this.component.indexeddb.table, { keyPath: 'myKey', autoIncrement: true });\n objectStore.transaction.oncomplete = () => {\n const transaction = db.transaction(this.component.indexeddb.table, 'readwrite');\n this.component.customOptions.forEach((item) => {\n transaction.objectStore(this.component.indexeddb.table).put(item);\n });\n };\n }\n };\n request.onerror = () => {\n window.alert(request.errorCode);\n };\n request.onsuccess = (event) => {\n const db = event.target.result;\n const transaction = db.transaction(this.component.indexeddb.table, 'readwrite');\n const objectStore = transaction.objectStore(this.component.indexeddb.table);\n new Promise((resolve) => {\n const responseItems = [];\n objectStore.getAll().onsuccess = (event) => {\n event.target.result.forEach((item) => {\n responseItems.push(item);\n });\n resolve(responseItems);\n };\n }).then((items) => {\n if (!lodash_1.default.isEmpty(this.component.indexeddb.filter)) {\n items = lodash_1.default.filter(items, this.component.indexeddb.filter);\n }\n this.setItems(items);\n });\n };\n }\n }\n }\n }\n}\nexports[\"default\"] = ListComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/list/ListComponent.js?");
|
|
4943
|
+
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass ListComponent extends Field_1.default {\n static schema(...extend) {\n return Field_1.default.schema({\n dataSrc: 'values',\n authenticate: false,\n ignoreCache: false,\n template: '<span>{{ item.label }}</span>',\n validate: {\n onlyAvailableItems: false\n },\n }, ...extend);\n }\n get isSelectURL() {\n return this.component.dataSrc === 'url';\n }\n get selectData() {\n const selectData = lodash_1.default.get(this.root, 'submission.metadata.selectData', {});\n return lodash_1.default.get(selectData, this.path);\n }\n get dataReady() {\n // If the root submission has been set, and we are still not attached, then assume\n // that our data is ready.\n if (this.root &&\n this.root.submissionSet &&\n !this.attached) {\n return Promise.resolve();\n }\n return this.itemsLoaded;\n }\n get shouldLoad() {\n if (this.loadingError) {\n return false;\n }\n // Live forms should always load.\n if (!this.options.readOnly) {\n return true;\n }\n // If there are template keys, then we need to see if we have the data.\n if (this.templateKeys && this.templateKeys.length) {\n // See if we already have the data we need.\n const dataValue = this.dataValue;\n const selectData = this.selectData;\n return this.templateKeys.reduce((shouldLoad, key) => {\n const hasValue = lodash_1.default.has(dataValue, key) ||\n (lodash_1.default.isArray(selectData) ? selectData.every((data) => lodash_1.default.has(data, key)) : lodash_1.default.has(selectData, key));\n return shouldLoad || !hasValue;\n }, false);\n }\n // Return that we should load.\n return true;\n }\n getTemplateKeys() {\n const template = this.component.template;\n this.templateKeys = this.options.readOnly && template\n ? (0, utils_1.getItemTemplateKeys)(template)\n : [];\n }\n get requestHeaders() {\n // Create the headers object.\n const headers = new Formio_1.Formio.Headers();\n // Add custom headers to the url.\n if (this.component.data && this.component.data.headers) {\n try {\n lodash_1.default.each(this.component.data.headers, (header) => {\n if (header.key) {\n headers.set(header.key, this.interpolate(header.value));\n }\n });\n }\n catch (err) {\n console.warn(err.message);\n }\n }\n return headers;\n }\n // Must be implemented in child classes.\n setItems() { }\n updateCustomItems() { }\n loadItems() { }\n getOptionTemplate(data, value, index) {\n if (!this.component.template) {\n return data.label;\n }\n const options = {\n noeval: true,\n data: {}\n };\n const template = this.sanitize(this.component.template\n ? this.interpolate(this.component.template, { item: data }, options)\n : data.label, this.shouldSanitizeValue);\n const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n if (templateValue && !lodash_1.default.isObject(templateValue) && options.data.item) {\n // If the value is not an object, then we need to save the template data off for when it is selected.\n this.templateData[templateValue] = options.data.item;\n }\n if (lodash_1.default.isNumber(index)) {\n this.templateData[index] = options.data.item;\n }\n return template;\n }\n itemTemplate(data, value, index) {\n if (lodash_1.default.isEmpty(data)) {\n return '';\n }\n const template = this.sanitize(this.getOptionTemplate(data, value, index), this.shouldSanitizeValue);\n if (template) {\n const label = template.replace(/<\\/?[^>]+(>|$)/g, '');\n if (!label)\n return;\n return template.replace(label, this.t(label, { _userInput: true }));\n }\n else {\n return this.sanitize(JSON.stringify(data), this.shouldSanitizeValue);\n }\n }\n get itemsLoaded() {\n return this._itemsLoaded || Promise.resolve();\n }\n set itemsLoaded(promise) {\n this._itemsLoaded = promise;\n }\n handleLoadingError(err) {\n this.loading = false;\n if (err.networkError) {\n this.networkError = true;\n }\n this.itemsLoadedResolve();\n this.emit('componentError', {\n component: this.component,\n message: err.toString(),\n });\n console.warn(`Unable to load resources for ${this.key}`);\n }\n /* eslint-disable max-statements */\n updateItems(searchInput, forceUpdate) {\n if (!this.component.data) {\n console.warn(`Select component ${this.key} does not have data configuration.`);\n this.itemsLoadedResolve();\n return;\n }\n // Only load the data if it is visible.\n if (!this.visible) {\n this.itemsLoadedResolve();\n return;\n }\n switch (this.component.dataSrc) {\n case 'values':\n this.setItems(this.component.data.values);\n break;\n case 'json':\n this.setItems(this.component.data.json);\n break;\n case 'custom':\n this.updateCustomItems(forceUpdate);\n break;\n case 'resource': {\n // If there is no resource, or we are lazyLoading, wait until active.\n if (!this.component.data.resource || (!forceUpdate && !this.active)) {\n this.itemsLoadedResolve();\n return;\n }\n let resourceUrl = this.options.formio ? this.options.formio.formsUrl : `${Formio_1.Formio.getProjectUrl()}/form`;\n resourceUrl += (`/${this.component.data.resource}/submission`);\n if (forceUpdate || this.additionalResourcesAvailable || !this.serverCount) {\n try {\n this.loadItems(resourceUrl, searchInput, this.requestHeaders);\n }\n catch (err) {\n console.warn(`Unable to load resources for ${this.key}`);\n }\n }\n else {\n this.setItems(this.downloadedResources);\n }\n break;\n }\n case 'url': {\n if (!forceUpdate && !this.active && !this.calculatedValue && this.component.type === 'select') {\n // If we are lazyLoading, wait until activated.\n this.itemsLoadedResolve();\n return;\n }\n let { url } = this.component.data;\n url = lodash_1.default.trim(url);\n let method;\n let body;\n if (url.startsWith('/')) {\n // if URL starts with '/project', we should use base URL to avoid issues with URL formed like <base_url>/<project_name>/project/<project_id>/...\n const baseUrl = url.startsWith('/project') ? Formio_1.Formio.getBaseUrl() : Formio_1.Formio.getProjectUrl() || Formio_1.Formio.getBaseUrl();\n url = baseUrl + url;\n }\n if (!this.component.data.method) {\n method = 'GET';\n }\n else {\n method = this.component.data.method;\n if (method.toUpperCase() === 'POST') {\n body = this.component.data.body;\n }\n else {\n body = null;\n }\n }\n const options = this.component.authenticate ? {} : { noToken: true };\n this.loadItems(url, searchInput, this.requestHeaders, options, method, body);\n break;\n }\n case 'indexeddb': {\n if (typeof window === 'undefined') {\n return;\n }\n if (!window.indexedDB) {\n window.alert(\"Your browser doesn't support current version of indexedDB\");\n }\n if (this.component.indexeddb && this.component.indexeddb.database && this.component.indexeddb.table) {\n const request = window.indexedDB.open(this.component.indexeddb.database);\n request.onupgradeneeded = (event) => {\n if (this.component.customOptions) {\n const db = event.target.result;\n const objectStore = db.createObjectStore(this.component.indexeddb.table, { keyPath: 'myKey', autoIncrement: true });\n objectStore.transaction.oncomplete = () => {\n const transaction = db.transaction(this.component.indexeddb.table, 'readwrite');\n this.component.customOptions.forEach((item) => {\n transaction.objectStore(this.component.indexeddb.table).put(item);\n });\n };\n }\n };\n request.onerror = () => {\n window.alert(request.errorCode);\n };\n request.onsuccess = (event) => {\n const db = event.target.result;\n const transaction = db.transaction(this.component.indexeddb.table, 'readwrite');\n const objectStore = transaction.objectStore(this.component.indexeddb.table);\n new Promise((resolve) => {\n const responseItems = [];\n objectStore.getAll().onsuccess = (event) => {\n event.target.result.forEach((item) => {\n responseItems.push(item);\n });\n resolve(responseItems);\n };\n }).then((items) => {\n if (!lodash_1.default.isEmpty(this.component.indexeddb.filter)) {\n items = lodash_1.default.filter(items, this.component.indexeddb.filter);\n }\n this.setItems(items);\n });\n };\n }\n }\n }\n }\n}\nexports[\"default\"] = ListComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/list/ListComponent.js?");
|
|
4944
4944
|
|
|
4945
4945
|
/***/ }),
|
|
4946
4946
|
|
|
@@ -5116,7 +5116,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5116
5116
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
5117
5117
|
|
|
5118
5118
|
"use strict";
|
|
5119
|
-
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 moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DayComponent extends Field_1.default {\n static schema(...extend) {\n return Field_1.default.schema({\n type: 'day',\n label: 'Day',\n key: 'day',\n fields: {\n day: {\n type: 'number',\n placeholder: '',\n required: false\n },\n month: {\n type: 'select',\n placeholder: '',\n required: false\n },\n year: {\n type: 'number',\n placeholder: '',\n required: false\n }\n },\n dayFirst: false,\n defaultValue: ''\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Day',\n group: 'advanced',\n icon: 'calendar',\n documentation: '/userguide/form-building/advanced-components#day',\n weight: 50,\n schema: DayComponent.schema()\n };\n }\n static get conditionOperatorsSettings() {\n return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'] });\n }\n static savedValueTypes(schema) {\n schema = schema || {};\n return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n }\n constructor(component, options, data) {\n if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {\n component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();\n }\n if (component.minDate && component.minDate.indexOf('moment(') === -1) {\n component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();\n }\n super(component, options, data);\n }\n static get serverConditionSettings() {\n return DayComponent.conditionOperatorsSettings;\n }\n /**\n * The empty value for day component.\n * @returns {''} - The empty value of the day component.\n */\n get emptyValue() {\n return '';\n }\n get valueMask() {\n return /^\\d{2}\\/\\d{2}\\/\\d{4}$/;\n }\n get dayRequired() {\n return this.showDay && lodash_1.default.get(this.component, 'fields.day.required', false);\n }\n get showDay() {\n return !lodash_1.default.get(this.component, 'fields.day.hide', false);\n }\n get monthRequired() {\n return this.showMonth && lodash_1.default.get(this.component, 'fields.month.required', false);\n }\n get showMonth() {\n return !lodash_1.default.get(this.component, 'fields.month.hide', false);\n }\n get yearRequired() {\n return this.showYear && lodash_1.default.get(this.component, 'fields.year.required', false);\n }\n get showYear() {\n return !lodash_1.default.get(this.component, 'fields.year.hide', false);\n }\n get defaultSchema() {\n return DayComponent.schema();\n }\n get shouldDisabled() {\n return super.shouldDisabled || this.parentDisabled;\n }\n get inputInfo() {\n const info = super.elementInfo();\n info.type = 'input';\n info.attr.type = 'hidden';\n info.changeEvent = 'input';\n return info;\n }\n inputDefinition(name) {\n let min, max;\n if (name === 'day') {\n min = 1;\n max = 31;\n }\n if (name === 'month') {\n min = 1;\n max = 12;\n }\n if (name === 'year') {\n min = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n max = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 1900;\n }\n return {\n type: 'input',\n ref: name,\n attr: {\n id: `${this.component.key}-${name}`,\n class: `form-control ${this.transform('class', `formio-day-component-${name}`)}`,\n type: this.component.fields[name].type === 'select' ? 'select' : 'number',\n placeholder: this.t(this.component.fields[name].placeholder),\n step: 1,\n min,\n max,\n }\n };\n }\n selectDefinition(name) {\n return {\n multiple: false,\n ref: name,\n widget: 'html5',\n attr: {\n id: `${this.component.key}-${name}`,\n class: 'form-control',\n name,\n lang: this.options.language\n }\n };\n }\n get days() {\n if (this._days) {\n return this._days;\n }\n this._days = [\n { value: '', label: lodash_1.default.get(this.component, 'fields.day.placeholder', '') }\n ];\n for (let x = 1; x <= 31; x++) {\n this._days.push({\n value: x,\n label: x.toString()\n });\n }\n return this._days;\n }\n get months() {\n if (this._months) {\n return this._months;\n }\n this._months = [\n {\n value: '',\n label: lodash_1.default.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('Month') : '')\n },\n { value: 1, label: 'January' },\n { value: 2, label: 'February' },\n { value: 3, label: 'March' },\n { value: 4, label: 'April' },\n { value: 5, label: 'May' },\n { value: 6, label: 'June' },\n { value: 7, label: 'July' },\n { value: 8, label: 'August' },\n { value: 9, label: 'September' },\n { value: 10, label: 'October' },\n { value: 11, label: 'November' },\n { value: 12, label: 'December' }\n ];\n return this._months;\n }\n get years() {\n if (this._years) {\n return this._years;\n }\n this._years = [\n { value: '', label: lodash_1.default.get(this.component, 'fields.year.placeholder', '') }\n ];\n const minYears = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n const maxYears = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 2030;\n for (let x = minYears; x <= maxYears; x++) {\n this._years.push({\n value: x,\n label: x.toString()\n });\n }\n return this._years;\n }\n setErrorClasses(elements, dirty, hasError) {\n super.setErrorClasses(elements, dirty, hasError);\n super.setErrorClasses([this.refs.day, this.refs.month, this.refs.year], dirty, hasError);\n }\n removeInputError(elements) {\n super.removeInputError([this.refs.day, this.refs.month, this.refs.year]);\n super.removeInputError(elements);\n }\n init() {\n super.init();\n const minYear = this.component.fields.year.minYear;\n const maxYear = this.component.fields.year.maxYear;\n this.component.maxYear = maxYear;\n this.component.minYear = minYear;\n const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.options.language);\n this.dayFirst = this.component.useLocaleSettings\n ? dateFormatInfo.dayFirst\n : this.component.dayFirst;\n }\n render() {\n if (this.isHtmlRenderMode()) {\n return super.render(this.renderTemplate('input'));\n }\n return super.render(this.renderTemplate('day', {\n dayFirst: this.dayFirst,\n showDay: this.showDay,\n showMonth: this.showMonth,\n showYear: this.showYear,\n day: this.renderField('day'),\n month: this.renderField('month'),\n year: this.renderField('year'),\n }));\n }\n renderField(name) {\n if (this.component.fields[name].type === 'select') {\n return this.renderTemplate('select', {\n input: this.selectDefinition(name),\n selectOptions: this[`${name}s`].reduce((html, option) => html + this.renderTemplate('selectOption', {\n option,\n selected: false,\n attrs: {}\n }), ''),\n });\n }\n else {\n return this.renderTemplate('input', {\n prefix: this.prefix,\n suffix: this.suffix,\n input: this.inputDefinition(name)\n });\n }\n }\n attach(element) {\n this.loadRefs(element, { day: 'single', month: 'single', year: 'single', input: 'multiple' });\n const superAttach = super.attach(element);\n const updateValueAndSaveFocus = (element, name) => () => {\n try {\n this.saveCaretPosition(element, name);\n }\n catch (err) {\n console.warn('An error occurred while trying to save caret position', err);\n }\n this.updateValue(null, {\n modified: true,\n });\n };\n if (this.shouldDisabled) {\n this.setDisabled(this.refs.day, true);\n this.setDisabled(this.refs.month, true);\n this.setDisabled(this.refs.year, true);\n if (this.refs.input) {\n this.refs.input.forEach((input) => this.setDisabled(input, true));\n }\n }\n else {\n this.addEventListener(this.refs.day, 'input', updateValueAndSaveFocus(this.refs.day, 'day'));\n // TODO: Need to rework this to work with day select as well.\n // Change day max input when month changes.\n this.addEventListener(this.refs.month, 'input', () => {\n const maxDay = this.refs.year ? parseInt(new Date(this.refs.year.value, this.refs.month.value, 0).getDate(), 10)\n : '';\n const day = this.getFieldValue('day');\n if (!this.component.fields.day.hide && maxDay) {\n this.refs.day.max = maxDay;\n }\n if (maxDay && day > maxDay) {\n this.refs.day.value = this.refs.day.max;\n }\n updateValueAndSaveFocus(this.refs.month, 'month')();\n });\n this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));\n this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {\n modified: true\n }));\n [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {\n super.addFocusBlurEvents(element);\n });\n }\n this.setValue(this.dataValue);\n // Force the disabled state with getters and setters.\n this.disabled = this.shouldDisabled;\n return superAttach;\n }\n validateRequired(setting, value) {\n const { day, month, year } = this.parts;\n if (this.dayRequired && !day) {\n return false;\n }\n if (this.monthRequired && !month) {\n return false;\n }\n if (this.yearRequired && !year) {\n return false;\n }\n if (!(0, utils_1.boolValue)(setting)) {\n return true;\n }\n return !this.isEmpty(value);\n }\n set disabled(disabled) {\n super.disabled = disabled;\n if (!this.refs.year || !this.refs.month || !this.refs.day) {\n return;\n }\n if (disabled) {\n this.refs.year.setAttribute('disabled', 'disabled');\n this.refs.month.setAttribute('disabled', 'disabled');\n this.refs.day.setAttribute('disabled', 'disabled');\n }\n else {\n this.refs.year.removeAttribute('disabled');\n this.refs.month.removeAttribute('disabled');\n this.refs.day.removeAttribute('disabled');\n }\n }\n normalizeValue(value) {\n if (!value || this.valueMask.test(value)) {\n return value;\n }\n const dateParts = [];\n const valueParts = value.split('/');\n const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';\n let defaultDay = '';\n let defaultMonth = '';\n let defaultYear = '';\n if (defaultValue) {\n const hasHiddenFields = defaultValue.length !== 3;\n defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];\n defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];\n defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];\n }\n if (this.options.building && defaultValue.length === 3) {\n return this.component.defaultValue;\n }\n const getNextPart = (shouldTake, defaultValue) => {\n // Only push the part if it's not an empty string\n const part = shouldTake ? valueParts.shift() : defaultValue;\n if (part !== '') {\n dateParts.push(part);\n }\n };\n if (this.dayFirst) {\n getNextPart(this.showDay, defaultDay);\n }\n getNextPart(this.showMonth, defaultMonth);\n if (!this.dayFirst) {\n getNextPart(this.showDay, defaultDay);\n }\n getNextPart(this.showYear, defaultYear);\n return dateParts.join('/');\n }\n /**\n * Set the value at a specific index and updates the component's refs.\n * @param {number} index - The index to set.\n * @param {any} value - The value to set.\n * @returns {null|void} - Returns null if the value is invalid, otherwise void.\n */\n setValueAt(index, value) {\n // temporary solution to avoid input reset\n // on invalid date.\n if (value === 'Invalid date') {\n return null;\n }\n let day, month, year;\n const parts = value.split('/');\n if (parts.length !== 3) {\n day = this.getDayWithHiddenFields(parts).day;\n month = this.getDayWithHiddenFields(parts).month;\n year = this.getDayWithHiddenFields(parts).year;\n }\n else {\n if (this.component.dayFirst) {\n day = parts.shift();\n }\n month = parts.shift();\n if (!this.component.dayFirst) {\n day = parts.shift();\n }\n year = parts.shift();\n }\n if (this.refs.day && this.showDay) {\n this.refs.day.value = day === '00' ? '' : parseInt(day, 10);\n }\n if (this.refs.month && this.showMonth) {\n this.refs.month.value = month === '00' ? '' : parseInt(month, 10);\n }\n if (this.refs.year && this.showYear) {\n this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);\n }\n }\n getDayWithHiddenFields(parts) {\n let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n if (!this.showDay) {\n MONTH = MONTH === 0 ? 0 : MONTH - 1;\n YEAR = YEAR - 1;\n DAY = null;\n }\n if (!this.showMonth) {\n if (!lodash_1.default.isNull(DAY)) {\n DAY = DAY === 0 ? 0 : DAY - 1;\n }\n YEAR = YEAR - 1;\n MONTH = null;\n }\n if (!this.showYear) {\n YEAR = null;\n }\n return {\n month: lodash_1.default.isNull(MONTH) ? '' : parts[MONTH],\n day: lodash_1.default.isNull(DAY) ? '' : parts[DAY],\n year: lodash_1.default.isNull(YEAR) ? '' : parts[YEAR],\n };\n }\n getFieldValue(name) {\n const parts = this.dataValue ? this.dataValue.split('/') : [];\n let val = 0;\n switch (name) {\n case 'month':\n val = parts[this.dayFirst ? 1 : 0];\n break;\n case 'day':\n val = parts[this.dayFirst ? 0 : 1];\n break;\n case 'year':\n val = parts[2];\n break;\n }\n val = parseInt(val, 10);\n return (!lodash_1.default.isNaN(val) && lodash_1.default.isNumber(val)) ? val : 0;\n }\n get parts() {\n return {\n day: this.getFieldValue('day'),\n month: this.getFieldValue('month'),\n year: this.getFieldValue('year'),\n };\n }\n /**\n * Get the format for the value string.\n * @returns {string} - the format for the value string.\n */\n get format() {\n let format = '';\n if (this.component.dayFirst && this.showDay) {\n format += 'D/';\n }\n if (this.showMonth) {\n format += 'M/';\n }\n if (!this.component.dayFirst && this.showDay) {\n format += 'D/';\n }\n if (this.showYear) {\n format += 'YYYY';\n return format;\n }\n else {\n // Trim off the \"/\" from the end of the format string.\n return format.length ? format.substring(0, format.length - 1) : format;\n }\n }\n /**\n * Return the date for this component.\n * @param {any} value - The value to convert to a date.\n * @returns {null|string} - The date string.\n */\n getDate(value) {\n let defaults = [], day, month, year;\n // Map positions to identifiers to get default values for each part of day\n const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n const defaultValue = value || this.component.defaultValue;\n if (defaultValue) {\n defaults = defaultValue.split('/').map(x => parseInt(x, 10));\n }\n if (this.showDay && this.refs.day) {\n day = parseInt(this.refs.day.value, 10);\n }\n if (day === undefined || lodash_1.default.isNaN(day)) {\n day = defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0;\n }\n if (this.showMonth && this.refs.month) {\n // Months are 0 indexed.\n month = parseInt(this.refs.month.value, 10);\n }\n if (month === undefined || lodash_1.default.isNaN(month)) {\n month = defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;\n }\n if (this.showYear && this.refs.year) {\n year = parseInt(this.refs.year.value);\n }\n if (year === undefined || lodash_1.default.isNaN(year)) {\n year = defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;\n }\n let result;\n if (!day && !month && !year) {\n return null;\n }\n // add trailing zeros if the data is showed\n day = this.showDay ? day.toString().padStart(2, 0) : '';\n month = this.showMonth ? month.toString().padStart(2, 0) : '';\n year = this.showYear ? year.toString().padStart(4, 0) : '';\n if (this.component.dayFirst) {\n result = `${day}${this.showDay && this.showMonth || this.showDay && this.showYear ? '/' : ''}${month}${this.showMonth && this.showYear ? '/' : ''}${year}`;\n }\n else {\n result = `${month}${this.showDay && this.showMonth || this.showMonth && this.showYear ? '/' : ''}${day}${this.showDay && this.showYear ? '/' : ''}${year}`;\n }\n return result;\n }\n /**\n * Return the date string for this component.\n * @returns {string|null} - The date string for this component.\n */\n get date() {\n return this.getDate();\n }\n /**\n * Return the raw value.\n * @returns {string} - The raw value of the component.\n */\n get validationValue() {\n return this.dataValue;\n }\n getValue() {\n const result = super.getValue();\n return (!result) ? this.dataValue : result;\n }\n /**\n * Get the value at a specific index.\n * @param {number} index - The index to get the value from.\n * @returns {*} - The value at index.\n */\n getValueAt(index) {\n const date = this.date || this.emptyValue;\n if (date) {\n this.refs.input[index].value = date;\n return this.refs.input[index].value;\n }\n else {\n this.refs.input[index].value = '';\n return null;\n }\n }\n /**\n * Get the input value of the date.\n * @param {any} value - The value to convert to a string.\n * @returns {string|null} - The string value of the date.\n */\n getValueAsString(value) {\n return this.getDate(value) || '';\n }\n focus(field) {\n var _a, _b, _c;\n if (field && typeof field === 'string' && this.refs[field]) {\n this.refs[field].focus();\n }\n else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {\n (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();\n }\n else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {\n (_b = this.refs.month) === null || _b === void 0 ? void 0 : _b.focus();\n }\n else if (!this.showDay && !this.showDay && this.showYear) {\n (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();\n }\n }\n restoreCaretPosition() {\n var _a;\n if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n const { selection, index } = this.root.currentSelection;\n if (this.refs[index]) {\n const input = this.refs[index];\n const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n if (isInputRangeSelectable(input)) {\n input.setSelectionRange(...selection);\n }\n }\n }\n }\n isPartialDay(value) {\n if (!value) {\n return true;\n }\n const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n const values = value.split('/');\n if (values.length < 3) {\n return true;\n }\n return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n }\n getValidationFormat() {\n var _a, _b, _c, _d, _e, _f;\n let validationFormat = this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n if ((_b = (_a = this.fields) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.hide) {\n validationFormat = validationFormat.replace('DD-', '');\n }\n if ((_d = (_c = this.fields) === null || _c === void 0 ? void 0 : _c.month) === null || _d === void 0 ? void 0 : _d.hide) {\n validationFormat = validationFormat.replace('MM-', '');\n }\n if ((_f = (_e = this.fields) === null || _e === void 0 ? void 0 : _e.year) === null || _f === void 0 ? void 0 : _f.hide) {\n validationFormat = validationFormat.replace('-YYYY', '');\n }\n return validationFormat;\n }\n}\nexports[\"default\"] = DayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/Day.js?");
|
|
5119
|
+
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 moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DayComponent extends Field_1.default {\n static schema(...extend) {\n return Field_1.default.schema({\n type: 'day',\n label: 'Day',\n key: 'day',\n fields: {\n day: {\n type: 'number',\n placeholder: '',\n required: false\n },\n month: {\n type: 'select',\n placeholder: '',\n required: false\n },\n year: {\n type: 'number',\n placeholder: '',\n required: false\n }\n },\n dayFirst: false,\n defaultValue: ''\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Day',\n group: 'advanced',\n icon: 'calendar',\n documentation: '/userguide/form-building/advanced-components#day',\n weight: 50,\n schema: DayComponent.schema()\n };\n }\n static get conditionOperatorsSettings() {\n return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'] });\n }\n static savedValueTypes(schema) {\n schema = schema || {};\n return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n }\n constructor(component, options, data) {\n if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {\n component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();\n }\n if (component.minDate && component.minDate.indexOf('moment(') === -1) {\n component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();\n }\n super(component, options, data);\n }\n static get serverConditionSettings() {\n return DayComponent.conditionOperatorsSettings;\n }\n /**\n * The empty value for day component.\n * @returns {''} - The empty value of the day component.\n */\n get emptyValue() {\n return '';\n }\n get valueMask() {\n return /^\\d{2}\\/\\d{2}\\/\\d{4}$/;\n }\n get dayRequired() {\n return this.showDay && lodash_1.default.get(this.component, 'fields.day.required', false);\n }\n get showDay() {\n return !lodash_1.default.get(this.component, 'fields.day.hide', false);\n }\n get monthRequired() {\n return this.showMonth && lodash_1.default.get(this.component, 'fields.month.required', false);\n }\n get showMonth() {\n return !lodash_1.default.get(this.component, 'fields.month.hide', false);\n }\n get yearRequired() {\n return this.showYear && lodash_1.default.get(this.component, 'fields.year.required', false);\n }\n get showYear() {\n return !lodash_1.default.get(this.component, 'fields.year.hide', false);\n }\n get defaultSchema() {\n return DayComponent.schema();\n }\n get shouldDisabled() {\n return super.shouldDisabled || this.parentDisabled;\n }\n get inputInfo() {\n const info = super.elementInfo();\n info.type = 'input';\n info.attr.type = 'hidden';\n info.changeEvent = 'input';\n return info;\n }\n inputDefinition(name) {\n let min, max;\n if (name === 'day') {\n min = 1;\n max = 31;\n }\n if (name === 'month') {\n min = 1;\n max = 12;\n }\n if (name === 'year') {\n min = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n max = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 1900;\n }\n return {\n type: 'input',\n ref: name,\n attr: {\n id: `${this.component.key}-${name}`,\n class: `form-control ${this.transform('class', `formio-day-component-${name}`)}`,\n type: this.component.fields[name].type === 'select' ? 'select' : 'number',\n placeholder: this.t(this.component.fields[name].placeholder),\n step: 1,\n min,\n max,\n }\n };\n }\n selectDefinition(name) {\n return {\n multiple: false,\n ref: name,\n widget: 'html5',\n attr: {\n id: `${this.component.key}-${name}`,\n class: 'form-control',\n name,\n lang: this.options.language\n }\n };\n }\n get days() {\n if (this._days) {\n return this._days;\n }\n this._days = [\n { value: '', label: lodash_1.default.get(this.component, 'fields.day.placeholder', '') }\n ];\n for (let x = 1; x <= 31; x++) {\n this._days.push({\n value: x,\n label: x.toString()\n });\n }\n return this._days;\n }\n get months() {\n if (this._months) {\n return this._months;\n }\n this._months = [\n {\n value: '',\n label: lodash_1.default.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('Month') : '')\n },\n { value: 1, label: 'January' },\n { value: 2, label: 'February' },\n { value: 3, label: 'March' },\n { value: 4, label: 'April' },\n { value: 5, label: 'May' },\n { value: 6, label: 'June' },\n { value: 7, label: 'July' },\n { value: 8, label: 'August' },\n { value: 9, label: 'September' },\n { value: 10, label: 'October' },\n { value: 11, label: 'November' },\n { value: 12, label: 'December' }\n ];\n return this._months;\n }\n get years() {\n if (this._years) {\n return this._years;\n }\n this._years = [\n { value: '', label: lodash_1.default.get(this.component, 'fields.year.placeholder', '') }\n ];\n const minYears = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n const maxYears = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 2030;\n for (let x = minYears; x <= maxYears; x++) {\n this._years.push({\n value: x,\n label: x.toString()\n });\n }\n return this._years;\n }\n setErrorClasses(elements, dirty, hasError) {\n super.setErrorClasses(elements, dirty, hasError);\n super.setErrorClasses([this.refs.day, this.refs.month, this.refs.year], dirty, hasError);\n }\n removeInputError(elements) {\n super.removeInputError([this.refs.day, this.refs.month, this.refs.year]);\n super.removeInputError(elements);\n }\n init() {\n super.init();\n const minYear = this.component.fields.year.minYear;\n const maxYear = this.component.fields.year.maxYear;\n this.component.maxYear = maxYear;\n this.component.minYear = minYear;\n const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.options.language);\n this.dayFirst = this.component.useLocaleSettings\n ? dateFormatInfo.dayFirst\n : this.component.dayFirst;\n }\n render() {\n if (this.isHtmlRenderMode()) {\n return super.render(this.renderTemplate('input'));\n }\n return super.render(this.renderTemplate('day', {\n dayFirst: this.dayFirst,\n showDay: this.showDay,\n showMonth: this.showMonth,\n showYear: this.showYear,\n day: this.renderField('day'),\n month: this.renderField('month'),\n year: this.renderField('year'),\n }));\n }\n renderField(name) {\n if (this.component.fields[name].type === 'select') {\n return this.renderTemplate('select', {\n input: this.selectDefinition(name),\n selectOptions: this[`${name}s`].reduce((html, option) => html + this.renderTemplate('selectOption', {\n option,\n selected: false,\n attrs: {}\n }), ''),\n });\n }\n else {\n return this.renderTemplate('input', {\n prefix: this.prefix,\n suffix: this.suffix,\n input: this.inputDefinition(name)\n });\n }\n }\n attach(element) {\n this.loadRefs(element, { day: 'single', month: 'single', year: 'single', input: 'multiple' });\n const superAttach = super.attach(element);\n const updateValueAndSaveFocus = (element, name) => () => {\n try {\n this.saveCaretPosition(element, name);\n }\n catch (err) {\n console.warn('An error occurred while trying to save caret position', err);\n }\n this.updateValue(null, {\n modified: true,\n });\n };\n if (this.shouldDisabled) {\n this.setDisabled(this.refs.day, true);\n this.setDisabled(this.refs.month, true);\n this.setDisabled(this.refs.year, true);\n if (this.refs.input) {\n this.refs.input.forEach((input) => this.setDisabled(input, true));\n }\n }\n else {\n this.addEventListener(this.refs.day, 'input', updateValueAndSaveFocus(this.refs.day, 'day'));\n // TODO: Need to rework this to work with day select as well.\n // Change day max input when month changes.\n this.addEventListener(this.refs.month, 'input', () => {\n const maxDay = this.refs.year ? parseInt(new Date(this.refs.year.value, this.refs.month.value, 0).getDate(), 10)\n : '';\n const day = this.getFieldValue('day');\n if (!this.component.fields.day.hide && maxDay) {\n this.refs.day.max = maxDay;\n }\n if (maxDay && day > maxDay) {\n this.refs.day.value = this.refs.day.max;\n }\n updateValueAndSaveFocus(this.refs.month, 'month')();\n });\n this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));\n this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {\n modified: true\n }));\n [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {\n super.addFocusBlurEvents(element);\n });\n }\n this.setValue(this.dataValue);\n // Force the disabled state with getters and setters.\n this.disabled = this.shouldDisabled;\n return superAttach;\n }\n validateRequired(setting, value) {\n const { day, month, year } = this.parts;\n if (this.dayRequired && !day) {\n return false;\n }\n if (this.monthRequired && !month) {\n return false;\n }\n if (this.yearRequired && !year) {\n return false;\n }\n if (!(0, utils_1.boolValue)(setting)) {\n return true;\n }\n return !this.isEmpty(value);\n }\n set disabled(disabled) {\n super.disabled = disabled;\n if (!this.refs.year || !this.refs.month || !this.refs.day) {\n return;\n }\n if (disabled) {\n this.refs.year.setAttribute('disabled', 'disabled');\n this.refs.month.setAttribute('disabled', 'disabled');\n this.refs.day.setAttribute('disabled', 'disabled');\n }\n else {\n this.refs.year.removeAttribute('disabled');\n this.refs.month.removeAttribute('disabled');\n this.refs.day.removeAttribute('disabled');\n }\n }\n normalizeValue(value) {\n if (!value || this.valueMask.test(value)) {\n return value;\n }\n const dateParts = [];\n const valueParts = value.split('/');\n const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';\n let defaultDay = '';\n let defaultMonth = '';\n let defaultYear = '';\n if (defaultValue) {\n const hasHiddenFields = defaultValue.length !== 3;\n defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];\n defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];\n defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];\n }\n if (this.options.building && defaultValue.length === 3) {\n return this.component.defaultValue;\n }\n const getNextPart = (shouldTake, defaultValue) => {\n // Only push the part if it's not an empty string\n const part = shouldTake ? valueParts.shift() : defaultValue;\n if (part !== '') {\n dateParts.push(part);\n }\n };\n if (this.dayFirst) {\n getNextPart(this.showDay, defaultDay);\n }\n getNextPart(this.showMonth, defaultMonth);\n if (!this.dayFirst) {\n getNextPart(this.showDay, defaultDay);\n }\n getNextPart(this.showYear, defaultYear);\n return dateParts.join('/');\n }\n /**\n * Set the value at a specific index and updates the component's refs.\n * @param {number} index - The index to set.\n * @param {any} value - The value to set.\n * @returns {null|void} - Returns null if the value is invalid, otherwise void.\n */\n setValueAt(index, value) {\n // temporary solution to avoid input reset\n // on invalid date.\n if (value === 'Invalid date') {\n return null;\n }\n let day, month, year;\n const parts = value.split('/');\n if (parts.length !== 3) {\n day = this.getDayWithHiddenFields(parts).day;\n month = this.getDayWithHiddenFields(parts).month;\n year = this.getDayWithHiddenFields(parts).year;\n }\n else {\n if (this.component.dayFirst) {\n day = parts.shift();\n }\n month = parts.shift();\n if (!this.component.dayFirst) {\n day = parts.shift();\n }\n year = parts.shift();\n }\n if (this.refs.day && this.showDay) {\n this.refs.day.value = day === '00' ? '' : parseInt(day, 10);\n }\n if (this.refs.month && this.showMonth) {\n this.refs.month.value = month === '00' ? '' : parseInt(month, 10);\n }\n if (this.refs.year && this.showYear) {\n this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);\n }\n }\n getDayWithHiddenFields(parts) {\n let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n if (!this.showDay) {\n MONTH = MONTH === 0 ? 0 : MONTH - 1;\n YEAR = YEAR - 1;\n DAY = null;\n }\n if (!this.showMonth) {\n if (!lodash_1.default.isNull(DAY)) {\n DAY = DAY === 0 ? 0 : DAY - 1;\n }\n YEAR = YEAR - 1;\n MONTH = null;\n }\n if (!this.showYear) {\n YEAR = null;\n }\n return {\n month: lodash_1.default.isNull(MONTH) ? '' : parts[MONTH],\n day: lodash_1.default.isNull(DAY) ? '' : parts[DAY],\n year: lodash_1.default.isNull(YEAR) ? '' : parts[YEAR],\n };\n }\n getFieldValue(name) {\n const parts = this.dataValue ? this.dataValue.split('/') : [];\n let val = 0;\n switch (name) {\n case 'month':\n val = parts[this.dayFirst ? 1 : 0];\n break;\n case 'day':\n val = parts[this.dayFirst ? 0 : 1];\n break;\n case 'year':\n val = parts[2];\n break;\n }\n val = parseInt(val, 10);\n return (!lodash_1.default.isNaN(val) && lodash_1.default.isNumber(val)) ? val : 0;\n }\n get parts() {\n return {\n day: this.getFieldValue('day'),\n month: this.getFieldValue('month'),\n year: this.getFieldValue('year'),\n };\n }\n /**\n * Get the format for the value string.\n * @returns {string} - the format for the value string.\n */\n get format() {\n let format = '';\n if (this.component.dayFirst && this.showDay) {\n format += 'D/';\n }\n if (this.showMonth) {\n format += 'M/';\n }\n if (!this.component.dayFirst && this.showDay) {\n format += 'D/';\n }\n if (this.showYear) {\n format += 'YYYY';\n return format;\n }\n else {\n // Trim off the \"/\" from the end of the format string.\n return format.length ? format.substring(0, format.length - 1) : format;\n }\n }\n /**\n * Return the date for this component.\n * @param {any} value - The value to convert to a date.\n * @returns {null|string} - The date string.\n */\n getDate(value) {\n let defaults = [], day, month, year;\n // Map positions to identifiers to get default values for each part of day\n const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n const defaultValue = value || this.component.defaultValue;\n if (defaultValue) {\n defaults = defaultValue.split('/').map(x => parseInt(x, 10));\n }\n if (this.showDay && this.refs.day) {\n day = this.refs.day.value === '' ? '' : parseInt(this.refs.day.value, 10);\n }\n if (day === undefined || lodash_1.default.isNaN(day)) {\n day = defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0;\n }\n if (this.showMonth && this.refs.month) {\n // Months are 0 indexed.\n month = this.refs.month.value === '' ? '' : parseInt(this.refs.month.value, 10);\n }\n if (month === undefined || lodash_1.default.isNaN(month)) {\n month = defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;\n }\n if (this.showYear && this.refs.year) {\n year = this.refs.year.value === '' ? '' : parseInt(this.refs.year.value);\n }\n if (year === undefined || lodash_1.default.isNaN(year)) {\n year = defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;\n }\n let result;\n if (!day && !month && !year) {\n this.dataValue = this.emptyValue;\n return null;\n }\n // add trailing zeros if the data is showed\n day = this.showDay ? day.toString().padStart(2, 0) : '';\n month = this.showMonth ? month.toString().padStart(2, 0) : '';\n year = this.showYear ? year.toString().padStart(4, 0) : '';\n if (this.component.dayFirst) {\n result = `${day}${this.showDay && this.showMonth || this.showDay && this.showYear ? '/' : ''}${month}${this.showMonth && this.showYear ? '/' : ''}${year}`;\n }\n else {\n result = `${month}${this.showDay && this.showMonth || this.showMonth && this.showYear ? '/' : ''}${day}${this.showDay && this.showYear ? '/' : ''}${year}`;\n }\n return result;\n }\n /**\n * Return the date string for this component.\n * @returns {string|null} - The date string for this component.\n */\n get date() {\n return this.getDate();\n }\n /**\n * Return the raw value.\n * @returns {string} - The raw value of the component.\n */\n get validationValue() {\n return this.dataValue;\n }\n getValue() {\n const result = super.getValue();\n return (!result) ? this.dataValue : result;\n }\n /**\n * Get the value at a specific index.\n * @param {number} index - The index to get the value from.\n * @returns {*} - The value at index.\n */\n getValueAt(index) {\n const date = this.date || this.emptyValue;\n if (date) {\n this.refs.input[index].value = date;\n return this.refs.input[index].value;\n }\n else {\n this.refs.input[index].value = '';\n return null;\n }\n }\n /**\n * Get the input value of the date.\n * @param {any} value - The value to convert to a string.\n * @returns {string|null} - The string value of the date.\n */\n getValueAsString(value) {\n return this.getDate(value) || '';\n }\n focus(field) {\n var _a, _b, _c;\n if (field && typeof field === 'string' && this.refs[field]) {\n this.refs[field].focus();\n }\n else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {\n (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();\n }\n else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {\n (_b = this.refs.month) === null || _b === void 0 ? void 0 : _b.focus();\n }\n else if (!this.showDay && !this.showDay && this.showYear) {\n (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();\n }\n }\n restoreCaretPosition() {\n var _a;\n if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n const { selection, index } = this.root.currentSelection;\n if (this.refs[index]) {\n const input = this.refs[index];\n const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n if (isInputRangeSelectable(input)) {\n input.setSelectionRange(...selection);\n }\n }\n }\n }\n isPartialDay(value) {\n if (!value) {\n return true;\n }\n const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n const values = value.split('/');\n if (values.length < 3) {\n return true;\n }\n return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n }\n getValidationFormat() {\n var _a, _b, _c, _d, _e, _f;\n let validationFormat = this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n if ((_b = (_a = this.fields) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.hide) {\n validationFormat = validationFormat.replace('DD-', '');\n }\n if ((_d = (_c = this.fields) === null || _c === void 0 ? void 0 : _c.month) === null || _d === void 0 ? void 0 : _d.hide) {\n validationFormat = validationFormat.replace('MM-', '');\n }\n if ((_f = (_e = this.fields) === null || _e === void 0 ? void 0 : _e.year) === null || _f === void 0 ? void 0 : _f.hide) {\n validationFormat = validationFormat.replace('-YYYY', '');\n }\n return validationFormat;\n }\n}\nexports[\"default\"] = DayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/Day.js?");
|
|
5120
5120
|
|
|
5121
5121
|
/***/ }),
|
|
5122
5122
|
|
|
@@ -5259,7 +5259,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5259
5259
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
5260
5260
|
|
|
5261
5261
|
"use strict";
|
|
5262
|
-
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass RadioComponent extends ListComponent_1.default {\n static schema(...extend) {\n return ListComponent_1.default.schema({\n type: 'radio',\n inputType: 'radio',\n label: 'Radio',\n key: 'radio',\n values: [{ label: '', value: '' }],\n data: {\n url: '',\n },\n fieldSet: false\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Radio',\n group: 'basic',\n icon: 'dot-circle-o',\n weight: 80,\n documentation: '/userguide/form-building/form-components#radio',\n schema: RadioComponent.schema()\n };\n }\n static get conditionOperatorsSettings() {\n return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';\n return isValuesSrc\n ? {\n type: 'select',\n dataSrc: 'custom',\n valueProperty: 'value',\n dataType: classComp.dataType || '',\n data: {\n custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,\n }\n }\n : Object.assign(Object.assign({}, classComp), { type: 'select' });\n } });\n }\n static get serverConditionSettings() {\n return RadioComponent.conditionOperatorsSettings;\n }\n static savedValueTypes(schema) {\n const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n const { dataType } = schema;\n const types = (0, utils_1.getComponentSavedTypes)(schema);\n if (types) {\n return types;\n }\n if (dataType === 'object') {\n return [object, array];\n }\n if (utils_1.componentValueTypes[dataType]) {\n return [utils_1.componentValueTypes[dataType]];\n }\n return [boolean, string, number, object, array];\n }\n constructor(component, options, data) {\n super(component, options, data);\n this.previousValue = this.dataValue || null;\n }\n get defaultSchema() {\n return RadioComponent.schema();\n }\n get defaultValue() {\n let defaultValue = super.defaultValue;\n if (!defaultValue && this.component.defaultValue === false) {\n defaultValue = this.component.defaultValue;\n }\n return defaultValue;\n }\n get inputInfo() {\n var _a;\n const info = super.elementInfo();\n info.type = 'input';\n info.changeEvent = 'click';\n info.attr.class = 'form-check-input';\n info.attr.name = info.attr.name += `[${(_a = this.root) === null || _a === void 0 ? void 0 : _a.id}-${this.id}]`;\n return info;\n }\n get emptyValue() {\n return '';\n }\n get isRadio() {\n return this.component.inputType === 'radio';\n }\n get optionSelectedClass() {\n return 'radio-selected';\n }\n get listData() {\n const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});\n return lodash_1.default.get(listData, this.path);\n }\n init() {\n super.init();\n this.templateData = {};\n // Trigger an update.//\n let updateArgs = [];\n const triggerUpdate = lodash_1.default.debounce((...args) => {\n updateArgs = [];\n return this.updateItems.apply(this, args);\n }, 100);\n this.triggerUpdate = (...args) => {\n // Make sure we always resolve the previous promise before reassign it\n if (typeof this.itemsLoadedResolve === 'function') {\n this.itemsLoadedResolve();\n }\n this.itemsLoaded = new Promise((resolve) => {\n this.itemsLoadedResolve = resolve;\n });\n if (args.length) {\n updateArgs = args;\n }\n return triggerUpdate(...updateArgs);\n };\n this.itemsLoaded = new Promise((resolve) => {\n this.itemsLoadedResolve = resolve;\n });\n this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';\n this.loadedOptions = [];\n if (!this.visible) {\n this.itemsLoadedResolve();\n }\n // Get the template keys for this radio component.\n this.getTemplateKeys();\n }\n beforeSubmit() {\n return new Promise(res => {\n this.dataReady.then(() => res(true));\n });\n }\n render() {\n if (!this.optionsLoaded) {\n return super.render(this.renderTemplate('loader'));\n }\n return super.render(this.renderTemplate('radio', {\n input: this.inputInfo,\n inline: this.component.inline,\n values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,\n value: this.dataValue,\n row: this.row,\n }));\n }\n attach(element) {\n this.loadRefs(element, { input: 'multiple', wrapper: 'multiple' });\n this.refs.input.forEach((input, index) => {\n this.addEventListener(input, this.inputInfo.changeEvent, () => {\n this.updateValue(null, {\n modified: true,\n });\n });\n if (this.component.values[index]) {\n this.addShortcut(input, this.component.values[index].shortcut);\n }\n if (this.isRadio) {\n let dataValue = this.dataValue;\n if (!lodash_1.default.isString(this.dataValue)) {\n dataValue = lodash_1.default.toString(this.dataValue);\n }\n if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {\n const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;\n input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);\n }\n else {\n input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));\n }\n this.addEventListener(input, 'keyup', (event) => {\n if (event.key === ' ' && dataValue === input.value) {\n event.preventDefault();\n this.updateValue(null, {\n modified: true,\n });\n }\n });\n }\n });\n this.triggerUpdate();\n this.setSelectedClasses();\n return super.attach(element);\n }\n detach(element) {\n if (element && this.refs.input) {\n this.refs.input.forEach((input, index) => {\n if (this.component.values[index]) {\n this.removeShortcut(input, this.component.values[index].shortcut);\n }\n });\n }\n super.detach();\n }\n getValue() {\n if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n return this.dataValue;\n }\n // If the input type of the component is checkbox the value should be determined by the checkboxes checked property\n let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;\n this.refs.input.forEach((input, index) => {\n if (input.checked) {\n value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?\n this.loadedOptions[index].value :\n input.value;\n }\n });\n return value;\n }\n validateValueProperty() {\n if (this.component.dataSrc === 'values') {\n return true;\n }\n return !lodash_1.default.some(this.refs.wrapper, (wrapper, index) => this.refs.input[index].checked && this.loadedOptions[index].invalid);\n }\n validateValueAvailability(setting, value) {\n if (!(0, utils_1.boolValue)(setting) || !value) {\n return true;\n }\n const values = this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions;\n if (values) {\n return values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !== -1;\n }\n return false;\n }\n getValueAsString(value, options = {}) {\n if (lodash_1.default.isObject(value)) {\n value = JSON.stringify(value);\n }\n else if (!lodash_1.default.isString(value)) {\n value = lodash_1.default.toString(value);\n }\n const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';\n if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {\n return value;\n }\n const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;\n const option = lodash_1.default.find(values, (v) => v.value === value);\n if (!value) {\n return lodash_1.default.get(option, 'label', '');\n }\n return lodash_1.default.get(option, 'label', '');\n }\n setValueAt(index, value) {\n if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {\n const inputValue = this.refs.input[index].value;\n this.refs.input[index].checked = (inputValue === value.toString());\n }\n }\n get shouldLoad() {\n // do not load options if the value is empty in readOnly and we have options available in metadata\n if (this.options.readOnly && this.isEmpty() && this.listData) {\n return false;\n }\n return super.shouldLoad;\n }\n loadItems(url, search, headers, options, method, body) {\n if (this.optionsLoaded) {\n this.itemsLoadedResolve();\n return;\n }\n if (!this.shouldLoad && this.listData) {\n this.loadItemsFromMetadata();\n this.itemsLoadedResolve();\n this.optionsLoaded = true;\n return;\n }\n // Ensure we have a method and remove any body if method is get\n method = method || 'GET';\n if (method.toUpperCase() === 'GET') {\n body = null;\n }\n const limit = this.component.limit || 100;\n const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n // Allow for url interpolation.\n url = this.sanitize(this.interpolate(url, {\n formioBase: Formio_1.Formio.getBaseUrl(),\n search,\n limit,\n skip,\n page: Math.abs(Math.floor(skip / limit))\n }), this.shouldSanitizeValue);\n // Set ignoreCache if it is\n options.ignoreCache = this.component.ignoreCache;\n // Make the request.\n options.header = headers;\n this.loading = true;\n Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n .then((response) => {\n this.loading = false;\n this.setItems(response);\n this.optionsLoaded = true;\n this.redraw();\n })\n .catch((err) => {\n this.optionsLoaded = true;\n this.handleLoadingError(err);\n });\n }\n loadItemsFromMetadata() {\n this.listData.forEach((item, i) => {\n this.loadedOptions[i] = {\n label: this.itemTemplate(item)\n };\n if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n this.loadedOptions[i].value = this.dataValue;\n }\n });\n this.optionsLoaded = true;\n this.redraw();\n }\n setItems(items) {\n const listData = [];\n items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);\n this.loadedOptions[i] = {\n value: this.component.valueProperty ? valueAtProperty : item,\n label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)\n };\n listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);\n if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(valueAtProperty) ||\n (!this.isRadio && lodash_1.default.isObject(valueAtProperty)) ||\n (!this.isRadio && lodash_1.default.isBoolean(valueAtProperty)))) {\n this.loadedOptions[i].invalid = true;\n }\n });\n if (this.isSelectURL) {\n const submission = this.root.submission;\n if (!submission.metadata) {\n submission.metadata = {};\n }\n if (!submission.metadata.listData) {\n submission.metadata.listData = {};\n }\n lodash_1.default.set(submission.metadata.listData, this.path, listData);\n }\n this.itemsLoadedResolve();\n }\n setSelectedClasses() {\n if (this.refs.wrapper) {\n //add/remove selected option class\n const value = this.dataValue;\n this.refs.wrapper.forEach((wrapper, index) => {\n const input = this.refs.input[index];\n const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());\n if (checked) {\n //add class to container when selected\n this.addClass(wrapper, this.optionSelectedClass);\n //change \"checked\" attribute\n input.setAttribute('checked', 'true');\n }\n else {\n this.removeClass(wrapper, this.optionSelectedClass);\n input.removeAttribute('checked');\n }\n });\n }\n }\n updateValue(value, flags) {\n const changed = super.updateValue(value, flags);\n if (changed) {\n this.setSelectedClasses();\n }\n if (!flags || !flags.modified || !this.isRadio) {\n if (changed) {\n this.previousValue = this.dataValue;\n }\n return changed;\n }\n // If they clicked on the radio that is currently selected, it needs to reset the value.\n this.currentValue = this.dataValue;\n const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;\n if (shouldResetValue) {\n this.resetValue();\n this.triggerChange(flags);\n this.setSelectedClasses();\n }\n this.previousValue = this.dataValue;\n return changed;\n }\n /**\n * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n * @param {*} value - The value to normalize\n * @returns {*} - Returns the normalized value\n */\n normalizeValue(value) {\n const dataType = this.component.dataType || 'auto';\n if (value === this.emptyValue) {\n return value;\n }\n switch (dataType) {\n case 'auto':\n if (!isNaN(parseFloat(value)) && isFinite(value) && lodash_1.default.toString(value) === Number(value).toString()) {\n value = +value;\n }\n if (value === 'true') {\n value = true;\n }\n if (value === 'false') {\n value = false;\n }\n break;\n case 'number':\n value = +value;\n break;\n case 'string':\n if (typeof value === 'object') {\n value = JSON.stringify(value);\n }\n else {\n value = String(value);\n }\n break;\n case 'boolean':\n value = !(!value || value.toString() === 'false');\n break;\n }\n if (this.isSelectURL && this.templateData && this.templateData[value]) {\n const submission = this.root.submission;\n if (!submission.metadata.selectData) {\n submission.metadata.selectData = {};\n }\n lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);\n }\n return super.normalizeValue(value);\n }\n}\nexports[\"default\"] = RadioComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/radio/Radio.js?");
|
|
5262
|
+
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass RadioComponent extends ListComponent_1.default {\n static schema(...extend) {\n return ListComponent_1.default.schema({\n type: 'radio',\n inputType: 'radio',\n label: 'Radio',\n key: 'radio',\n values: [{ label: '', value: '' }],\n data: {\n url: '',\n },\n fieldSet: false\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Radio',\n group: 'basic',\n icon: 'dot-circle-o',\n weight: 80,\n documentation: '/userguide/form-building/form-components#radio',\n schema: RadioComponent.schema()\n };\n }\n static get conditionOperatorsSettings() {\n return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';\n return isValuesSrc\n ? {\n type: 'select',\n dataSrc: 'custom',\n valueProperty: 'value',\n dataType: classComp.dataType || '',\n data: {\n custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,\n }\n }\n : Object.assign(Object.assign({}, classComp), { type: 'select' });\n } });\n }\n static get serverConditionSettings() {\n return RadioComponent.conditionOperatorsSettings;\n }\n static savedValueTypes(schema) {\n const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n const { dataType } = schema;\n const types = (0, utils_1.getComponentSavedTypes)(schema);\n if (types) {\n return types;\n }\n if (dataType === 'object') {\n return [object, array];\n }\n if (utils_1.componentValueTypes[dataType]) {\n return [utils_1.componentValueTypes[dataType]];\n }\n return [boolean, string, number, object, array];\n }\n constructor(component, options, data) {\n super(component, options, data);\n this.previousValue = this.dataValue || null;\n }\n get defaultSchema() {\n return RadioComponent.schema();\n }\n get defaultValue() {\n let defaultValue = super.defaultValue;\n if (!defaultValue && this.component.defaultValue === false) {\n defaultValue = this.component.defaultValue;\n }\n return defaultValue;\n }\n resetValue() {\n this.unset();\n this.setValue(this.emptyValue, {\n noUpdateEvent: true,\n noValidate: true,\n resetValue: true\n });\n }\n get inputInfo() {\n var _a;\n const info = super.elementInfo();\n info.type = 'input';\n info.changeEvent = 'click';\n info.attr.class = 'form-check-input';\n info.attr.name = info.attr.name += `[${(_a = this.root) === null || _a === void 0 ? void 0 : _a.id}-${this.id}]`;\n return info;\n }\n get emptyValue() {\n return '';\n }\n get isRadio() {\n return this.component.inputType === 'radio';\n }\n get optionSelectedClass() {\n return 'radio-selected';\n }\n get listData() {\n const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});\n return lodash_1.default.get(listData, this.path);\n }\n init() {\n super.init();\n this.templateData = {};\n // Trigger an update.//\n let updateArgs = [];\n const triggerUpdate = lodash_1.default.debounce((...args) => {\n updateArgs = [];\n return this.updateItems.apply(this, args);\n }, 100);\n this.triggerUpdate = (...args) => {\n // Make sure we always resolve the previous promise before reassign it\n if (typeof this.itemsLoadedResolve === 'function') {\n this.itemsLoadedResolve();\n }\n this.itemsLoaded = new Promise((resolve) => {\n this.itemsLoadedResolve = resolve;\n });\n if (args.length) {\n updateArgs = args;\n }\n return triggerUpdate(...updateArgs);\n };\n this.itemsLoaded = new Promise((resolve) => {\n this.itemsLoadedResolve = resolve;\n });\n this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';\n this.loadedOptions = [];\n if (!this.visible) {\n this.itemsLoadedResolve();\n }\n // Get the template keys for this radio component.\n this.getTemplateKeys();\n }\n beforeSubmit() {\n return new Promise(res => {\n this.dataReady.then(() => res(true));\n });\n }\n render() {\n if (!this.optionsLoaded) {\n return super.render(this.renderTemplate('loader'));\n }\n return super.render(this.renderTemplate('radio', {\n input: this.inputInfo,\n inline: this.component.inline,\n values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,\n value: this.dataValue,\n row: this.row,\n }));\n }\n attach(element) {\n this.loadRefs(element, { input: 'multiple', wrapper: 'multiple' });\n this.refs.input.forEach((input, index) => {\n this.addEventListener(input, this.inputInfo.changeEvent, () => {\n this.updateValue(null, {\n modified: true,\n });\n });\n if (this.component.values[index]) {\n this.addShortcut(input, this.component.values[index].shortcut);\n }\n if (this.isRadio) {\n let dataValue = this.dataValue;\n if (!lodash_1.default.isString(this.dataValue)) {\n dataValue = lodash_1.default.toString(this.dataValue);\n }\n if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {\n const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;\n input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);\n }\n else {\n input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));\n }\n this.addEventListener(input, 'keyup', (event) => {\n if (event.key === ' ' && dataValue === input.value) {\n event.preventDefault();\n this.updateValue(null, {\n modified: true,\n });\n }\n });\n }\n });\n this.triggerUpdate();\n this.setSelectedClasses();\n return super.attach(element);\n }\n detach(element) {\n if (element && this.refs.input) {\n this.refs.input.forEach((input, index) => {\n if (this.component.values[index]) {\n this.removeShortcut(input, this.component.values[index].shortcut);\n }\n });\n }\n super.detach();\n }\n getValue() {\n if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n return this.dataValue;\n }\n // If the input type of the component is checkbox the value should be determined by the checkboxes checked property\n let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;\n this.refs.input.forEach((input, index) => {\n if (input.checked) {\n value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?\n this.loadedOptions[index].value :\n input.value;\n }\n });\n return value;\n }\n validateValueProperty() {\n if (this.component.dataSrc === 'values') {\n return true;\n }\n return !lodash_1.default.some(this.refs.wrapper, (wrapper, index) => this.refs.input[index].checked && this.loadedOptions[index].invalid);\n }\n validateValueAvailability(setting, value) {\n if (!(0, utils_1.boolValue)(setting) || !value) {\n return true;\n }\n const values = this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions;\n if (values) {\n return values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !== -1;\n }\n return false;\n }\n getValueAsString(value, options = {}) {\n if (lodash_1.default.isObject(value)) {\n value = JSON.stringify(value);\n }\n else if (!lodash_1.default.isString(value)) {\n value = lodash_1.default.toString(value);\n }\n const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';\n if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {\n return value;\n }\n const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;\n const option = lodash_1.default.find(values, (v) => v.value === value);\n if (!value) {\n return lodash_1.default.get(option, 'label', '');\n }\n return lodash_1.default.get(option, 'label', '');\n }\n setValueAt(index, value) {\n if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {\n const inputValue = this.refs.input[index].value;\n this.refs.input[index].checked = (inputValue === value.toString());\n }\n }\n get shouldLoad() {\n // do not load options if the value is empty in readOnly and we have options available in metadata\n if (this.options.readOnly && this.isEmpty() && this.listData) {\n return false;\n }\n return super.shouldLoad;\n }\n loadItems(url, search, headers, options, method, body) {\n if (this.optionsLoaded) {\n this.itemsLoadedResolve();\n return;\n }\n if (!this.shouldLoad && this.listData) {\n this.loadItemsFromMetadata();\n this.itemsLoadedResolve();\n this.optionsLoaded = true;\n return;\n }\n // Ensure we have a method and remove any body if method is get\n method = method || 'GET';\n if (method.toUpperCase() === 'GET') {\n body = null;\n }\n const limit = this.component.limit || 100;\n const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n // Allow for url interpolation.\n url = this.sanitize(this.interpolate(url, {\n formioBase: Formio_1.Formio.getBaseUrl(),\n search,\n limit,\n skip,\n page: Math.abs(Math.floor(skip / limit))\n }), this.shouldSanitizeValue);\n // Set ignoreCache if it is\n options.ignoreCache = this.component.ignoreCache;\n // Make the request.\n options.header = headers;\n this.loading = true;\n Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n .then((response) => {\n this.loading = false;\n this.setItems(response);\n this.optionsLoaded = true;\n this.redraw();\n })\n .catch((err) => {\n this.optionsLoaded = true;\n this.handleLoadingError(err);\n });\n }\n loadItemsFromMetadata() {\n this.listData.forEach((item, i) => {\n this.loadedOptions[i] = {\n label: this.itemTemplate(item)\n };\n if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n this.loadedOptions[i].value = this.dataValue;\n }\n });\n this.optionsLoaded = true;\n this.redraw();\n }\n setItems(items) {\n const listData = [];\n items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);\n this.loadedOptions[i] = {\n value: this.component.valueProperty ? valueAtProperty : item,\n label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)\n };\n listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);\n if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(valueAtProperty) ||\n (!this.isRadio && lodash_1.default.isObject(valueAtProperty)) ||\n (!this.isRadio && lodash_1.default.isBoolean(valueAtProperty)))) {\n this.loadedOptions[i].invalid = true;\n }\n });\n if (this.isSelectURL) {\n const submission = this.root.submission;\n if (!submission.metadata) {\n submission.metadata = {};\n }\n if (!submission.metadata.listData) {\n submission.metadata.listData = {};\n }\n lodash_1.default.set(submission.metadata.listData, this.path, listData);\n }\n this.itemsLoadedResolve();\n }\n setSelectedClasses() {\n if (this.refs.wrapper) {\n //add/remove selected option class\n const value = this.dataValue;\n this.refs.wrapper.forEach((wrapper, index) => {\n const input = this.refs.input[index];\n const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());\n if (checked) {\n //add class to container when selected\n this.addClass(wrapper, this.optionSelectedClass);\n //change \"checked\" attribute\n input.setAttribute('checked', 'true');\n }\n else {\n this.removeClass(wrapper, this.optionSelectedClass);\n input.removeAttribute('checked');\n }\n });\n }\n }\n updateValue(value, flags) {\n const changed = super.updateValue(value, flags);\n if (changed) {\n this.setSelectedClasses();\n }\n if (!flags || !flags.modified || !this.isRadio) {\n if (changed) {\n this.previousValue = this.dataValue;\n }\n return changed;\n }\n // If they clicked on the radio that is currently selected, it needs to reset the value.\n this.currentValue = this.dataValue;\n const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;\n if (shouldResetValue) {\n this.resetValue();\n this.triggerChange(flags);\n this.setSelectedClasses();\n }\n this.previousValue = this.dataValue;\n return changed;\n }\n /**\n * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n * @param {*} value - The value to normalize\n * @returns {*} - Returns the normalized value\n */\n normalizeValue(value) {\n const dataType = this.component.dataType || 'auto';\n if (value === this.emptyValue) {\n return value;\n }\n switch (dataType) {\n case 'auto':\n if (!isNaN(parseFloat(value)) && isFinite(value) && lodash_1.default.toString(value) === Number(value).toString()) {\n value = +value;\n }\n if (value === 'true') {\n value = true;\n }\n if (value === 'false') {\n value = false;\n }\n break;\n case 'number':\n value = +value;\n break;\n case 'string':\n if (typeof value === 'object') {\n value = JSON.stringify(value);\n }\n else {\n value = String(value);\n }\n break;\n case 'boolean':\n value = !(!value || value.toString() === 'false');\n break;\n }\n if (this.isSelectURL && this.templateData && this.templateData[value]) {\n const submission = this.root.submission;\n if (!submission.metadata.selectData) {\n submission.metadata.selectData = {};\n }\n lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);\n }\n return super.normalizeValue(value);\n }\n}\nexports[\"default\"] = RadioComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/radio/Radio.js?");
|
|
5263
5263
|
|
|
5264
5264
|
/***/ }),
|
|
5265
5265
|
|