@formio/js 5.0.0-dev.5772.7636454 → 5.0.0-dev.5777.4ccabb1

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.
Files changed (16) hide show
  1. package/Changelog.md +6 -0
  2. package/dist/formio.form.js +3 -3
  3. package/dist/formio.form.min.js +1 -1
  4. package/dist/formio.full.js +4 -4
  5. package/dist/formio.full.min.js +1 -1
  6. package/lib/cjs/PDFBuilder.js +2 -1
  7. package/lib/cjs/components/_classes/multivalue/Multivalue.d.ts +0 -1
  8. package/lib/cjs/components/_classes/multivalue/Multivalue.js +43 -25
  9. package/lib/cjs/components/datagrid/DataGrid.js +1 -1
  10. package/lib/cjs/components/tags/Tags.js +3 -3
  11. package/lib/mjs/PDFBuilder.js +1 -1
  12. package/lib/mjs/components/_classes/multivalue/Multivalue.d.ts +0 -1
  13. package/lib/mjs/components/_classes/multivalue/Multivalue.js +43 -25
  14. package/lib/mjs/components/datagrid/DataGrid.js +1 -1
  15. package/lib/mjs/components/tags/Tags.js +3 -3
  16. package/package.json +1 -1
package/dist/formio.full.js CHANGED
@@ -5343,7 +5343,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
5343
5343
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
5344
5344
 
5345
5345
  "use strict";
5346
- 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\");\nconst WebformBuilder_1 = __importDefault(__webpack_require__(/*! ./WebformBuilder */ \"./lib/cjs/WebformBuilder.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst builder_1 = __importDefault(__webpack_require__(/*! ./utils/builder */ \"./lib/cjs/utils/builder.js\"));\nconst PDF_1 = __importDefault(__webpack_require__(/*! ./PDF */ \"./lib/cjs/PDF.js\"));\nclass PDFBuilder extends WebformBuilder_1.default {\n constructor() {\n let element, options;\n if (arguments[0] instanceof HTMLElement || arguments[1]) {\n element = arguments[0];\n options = arguments[1];\n }\n else {\n options = arguments[0];\n }\n // Force superclass to skip the automatic init; we'll trigger it manually\n options.skipInit = true;\n options.display = 'pdf';\n if (element) {\n super(element, options);\n }\n else {\n super(options);\n }\n this.dragDropEnabled = false;\n }\n get defaultGroups() {\n return {\n pdf: {\n title: 'PDF Fields',\n weight: 0,\n default: true,\n components: {\n textfield: true,\n number: true,\n password: true,\n email: true,\n phoneNumber: true,\n currency: true,\n checkbox: true,\n signature: true,\n select: true,\n textarea: true,\n datetime: true,\n file: true,\n htmlelement: true,\n signrequestsignature: true\n }\n },\n basic: false,\n advanced: false,\n layout: false,\n data: false,\n premium: false,\n resource: false\n };\n }\n get hasPDF() {\n return lodash_1.default.has(this.webform.form, 'settings.pdf');\n }\n get projectUrl() {\n return this.options.projectUrl || Formio_1.Formio.getProjectUrl();\n }\n init() {\n this.options.attachMode = 'builder';\n this.webform = this.webform || this.createForm(this.options);\n this.webform.init();\n }\n render() {\n const result = this.renderTemplate('pdfBuilder', {\n sidebar: this.renderTemplate('builderSidebar', {\n scrollEnabled: this.sideBarScroll,\n groupOrder: this.groupOrder,\n groupId: `builder-sidebar-${this.id}`,\n groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n group: this.groups[groupKey],\n groupKey,\n groupId: `builder-sidebar-${this.id}`,\n subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n group,\n groupKey: group.key,\n groupId: `group-container-${groupKey}`,\n subgroups: []\n })),\n })),\n }),\n form: this.hasPDF ?\n this.webform.render() :\n this.renderTemplate('pdfBuilderUpload', {})\n });\n return result;\n }\n attach(element) {\n // PDF Upload\n if (!this.hasPDF) {\n this.loadRefs(element, {\n 'fileDrop': 'single',\n 'fileBrowse': 'single',\n 'hiddenFileInputElement': 'single',\n 'uploadError': 'single',\n 'uploadProgress': 'single',\n 'uploadProgressWrapper': 'single',\n 'dragDropText': 'single'\n });\n this.addEventListener(this.refs['pdf-upload-button'], 'click', (event) => {\n event.preventDefault();\n });\n // Init the upload error.\n if (!this.projectUrl) {\n this.setUploadError('Form options.projectUrl not set. Please set the \"projectUrl\" property of the options for this form or use Formio.setProjectUrl(). This setting is necessary to upload a pdf background.');\n }\n else {\n this.setUploadError();\n }\n if (this.refs.fileDrop) {\n const element = this;\n this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n this.className = 'fileSelector fileDragOver';\n event.preventDefault();\n });\n this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n this.className = 'fileSelector';\n event.preventDefault();\n });\n this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n this.className = 'fileSelector';\n event.preventDefault();\n element.upload(event.dataTransfer.files[0]);\n return false;\n });\n }\n if (this.refs.fileBrowse && this.refs.hiddenFileInputElement) {\n this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n event.preventDefault();\n // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n // a click event on it.\n if (typeof this.refs.hiddenFileInputElement.trigger === 'function') {\n this.refs.hiddenFileInputElement.trigger('click');\n }\n else {\n this.refs.hiddenFileInputElement.click();\n }\n });\n this.addEventListener(this.refs.hiddenFileInputElement, 'change', () => {\n if (!this.refs.hiddenFileInputElement.value) {\n return;\n }\n this.upload(this.refs.hiddenFileInputElement.files[0]);\n this.refs.hiddenFileInputElement.value = '';\n });\n }\n return Promise.resolve();\n }\n // Normal PDF Builder\n return super.attach(element).then(() => {\n this.loadRefs(this.element, {\n iframeDropzone: 'single',\n 'sidebar-container': 'multiple',\n 'sidebar': 'single',\n });\n this.afterAttach();\n return this.element;\n });\n }\n afterAttach() {\n this.on('saveComponent', (component) => {\n this.webform.postMessage({ name: 'updateElement', data: component });\n });\n this.on('removeComponent', (component) => {\n this.webform.postMessage({ name: 'removeElement', data: component });\n });\n this.initIframeEvents();\n this.updateDropzoneDimensions();\n const sidebar = this.refs.sidebar;\n if (sidebar) {\n this.addClass(sidebar, 'disabled');\n this.webform.on('iframe-ready', () => {\n this.pdfLoaded = true;\n this.updateDragAndDrop();\n this.removeClass(sidebar, 'disabled');\n }, true);\n }\n }\n upload(file) {\n const formio = new Formio_1.Formio(this.projectUrl);\n if (this.refs.dragDropText) {\n this.refs.dragDropText.style.display = 'none';\n }\n if (this.refs.uploadProgressWrapper) {\n this.refs.uploadProgressWrapper.style.display = 'inherit';\n }\n formio.uploadFile('url', file, file, '', (event) => {\n if (this.refs.uploadProgress) {\n const progress = Math.floor((event.loaded / event.total) * 100);\n this.refs.uploadProgress.style.width = `${progress}%`;\n if (progress > 98) {\n this.refs.uploadProgress.innerHTML = this.t('Converting PDF. Please wait.');\n }\n else {\n this.refs.uploadProgress.innerHTML = `${this.t('Uploading')} ${progress}%`;\n }\n }\n }, `${this.projectUrl}/upload`, {}, 'file')\n .then((result) => {\n var _a, _b, _c, _d;\n let autoConversionComponentsAssigned = false;\n if (((_a = result.data.formfields) === null || _a === void 0 ? void 0 : _a.components) && result.data.formfields.components.length) {\n const formInitState = ((_b = this.webform.form.components[0]) === null || _b === void 0 ? void 0 : _b.key) === 'submit';\n const wizardInitState = ((_c = this.webform.form.components[0]) === null || _c === void 0 ? void 0 : _c.key) === 'page1' &&\n ((_d = this.webform.form.components[0]) === null || _d === void 0 ? void 0 : _d.components.length) === 0;\n const emptyFormState = this.webform.form.components.length === 0;\n if (formInitState || wizardInitState || emptyFormState) {\n autoConversionComponentsAssigned = true;\n this.webform.form.components = result.data.formfields.components;\n }\n }\n if (this.refs.dragDropText) {\n this.refs.dragDropText.style.display = 'inherit';\n }\n if (this.refs.uploadProgressWrapper) {\n this.refs.uploadProgressWrapper.style.display = 'none';\n }\n lodash_1.default.set(this.webform.form, 'settings.pdf', {\n id: result.data.file,\n src: result.data.filesServer ? `${result.data.filesServer}${result.data.path}` : `${new URL(this.projectUrl).origin}/pdf-proxy${result.data.path}`,\n nonFillableConversionUsed: autoConversionComponentsAssigned && result.data.formfields.nonFillableConversionUsed\n });\n this.emit('pdfUploaded', result.data);\n this.redraw();\n })\n .catch((err) => this.setUploadError(err));\n }\n setUploadError(message) {\n if (!this.refs.uploadError) {\n return;\n }\n this.refs.uploadError.style.display = message ? '' : 'none';\n this.refs.uploadError.innerHTML = message;\n }\n createForm(options) {\n // Instantiate the webform from the PDF class instead of Webform\n options.skipInit = false;\n options.hideLoader = true;\n this.webform = new PDF_1.default(this.element, options);\n this.webform.on('attach', () => {\n // If the dropzone exists but has been removed in a PDF rebuild, reinstate it\n if (this.refs.iframeDropzone && ![...this.refs.form.children].includes(this.refs.iframeDropzone)) {\n this.prependTo(this.refs.iframeDropzone, this.refs.form);\n }\n });\n return this.webform;\n }\n destroy(all = false) {\n super.destroy(all);\n this.webform.destroy(all);\n }\n // d8b 8888888888 888\n // Y8P 888 888\n // 888 888\n // 888 8888888 888d888 8888b. 88888b.d88b. .d88b. .d88b. 888 888 .d88b. 88888b. 888888 .d8888b\n // 888 888 888P\" \"88b 888 \"888 \"88b d8P Y8b d8P Y8b 888 888 d8P Y8b 888 \"88b 888 88K\n // 888 888 888 .d888888 888 888 888 88888888 88888888 Y88 88P 88888888 888 888 888 \"Y8888b.\n // 888 888 888 888 888 888 888 888 Y8b. Y8b. Y8bd8P Y8b. 888 888 Y88b. X88\n // 888 888 888 \"Y888888 888 888 888 \"Y8888 \"Y8888 Y88P \"Y8888 888 888 \"Y888 88888P'\n getParentContainer(component) {\n let container = [];\n let originalComponent = null;\n (0, formUtils_1.eachComponent)(this.webform._form.components, (comp, path, components) => {\n if (comp.id === component.component.id) {\n container = components;\n originalComponent = comp;\n return true;\n }\n }, true);\n return {\n formioComponent: component.parent,\n formioContainer: container,\n originalComponent\n };\n }\n initIframeEvents() {\n this.webform.off('iframe-elementUpdate');\n this.webform.off('iframe-componentUpdate');\n this.webform.off('iframe-componentClick');\n this.webform.on('iframe-elementUpdate', schema => {\n const component = this.webform.getComponentById(schema.id);\n if (component && component.component) {\n const isNew = true;\n component.component.overlay = {\n page: schema.page,\n left: schema.left,\n top: schema.top,\n height: schema.height,\n width: schema.width\n };\n if (!this.options.noNewEdit && !component.component.noNewEdit) {\n this.editComponent(component.component, this.getParentContainer(component), isNew);\n }\n this.emit('updateComponent', component.component);\n }\n return component;\n });\n this.webform.on('iframe-componentUpdate', schema => {\n const component = this.webform.getComponentById(schema.id);\n if (component && component.component) {\n component.component.overlay = {\n page: schema.overlay.page,\n left: schema.overlay.left,\n top: schema.overlay.top,\n height: schema.overlay.height,\n width: schema.overlay.width\n };\n this.emit('updateComponent', component.component);\n this.emit('change', this.form);\n }\n return component;\n });\n this.webform.on('iframe-componentClick', schema => {\n const component = this.webform.getComponentById(schema.id);\n if (component) {\n this.editComponent(component.component, this.getParentContainer(component));\n }\n }, true);\n }\n // 8888888b. 888 d8b\n // 888 \"Y88b 888 Y8P\n // 888 888 888\n // 888 888 888d888 .d88b. 88888b. 88888888 .d88b. 88888b. .d88b. 888 .d88b. .d88b. 888 .d8888b\n // 888 888 888P\" d88\"\"88b 888 \"88b d88P d88\"\"88b 888 \"88b d8P Y8b 888 d88\"\"88b d88P\"88b 888 d88P\"\n // 888 888 888 888 888 888 888 d88P 888 888 888 888 88888888 888 888 888 888 888 888 888\n // 888 .d88P 888 Y88..88P 888 d88P d88P Y88..88P 888 888 Y8b. 888 Y88..88P Y88b 888 888 Y88b.\n // 8888888P\" 888 \"Y88P\" 88888P\" 88888888 \"Y88P\" 888 888 \"Y8888 888 \"Y88P\" \"Y88888 888 \"Y8888P\n // 888 888\n // 888 Y8b d88P\n // 888 \"Y88P\"\n initDropzoneEvents() {\n if (!this.refs.iframeDropzone) {\n return;\n }\n // This is required per HTML spec in order for the drop event to fire\n this.removeEventListener(this.refs.iframeDropzone, 'dragover');\n this.removeEventListener(this.refs.iframeDropzone, 'drop');\n this.addEventListener(this.refs.iframeDropzone, 'dragover', (e) => {\n e.preventDefault();\n return false;\n });\n this.addEventListener(this.refs.iframeDropzone, 'drop', this.onDropzoneDrop.bind(this));\n }\n updateDragAndDrop() {\n if (!this.pdfLoaded) {\n return;\n }\n this.initDropzoneEvents();\n this.prepSidebarComponentsForDrag();\n }\n prepSidebarComponentsForDrag() {\n if (!this.refs['sidebar-container']) {\n return;\n }\n this.refs['sidebar-container'].forEach(container => {\n [...container.children].forEach(el => {\n el.draggable = true;\n el.setAttribute('draggable', true);\n this.removeEventListener(el, 'dragstart');\n this.removeEventListener(el, 'dragend');\n this.addEventListener(el, 'dragstart', this.onDragStart.bind(this), true);\n this.addEventListener(el, 'dragend', this.onDragEnd.bind(this), true);\n this.addEventListener(el, 'drag', (e) => {\n e.target.style.cursor = 'none';\n });\n });\n });\n }\n updateDropzoneDimensions() {\n if (!this.refs.iframeDropzone) {\n return;\n }\n const iframeRect = (0, utils_1.getElementRect)(this.webform.refs.iframeContainer);\n this.refs.iframeDropzone.style.height = iframeRect && iframeRect.height ? `${iframeRect.height}px` : '1000px';\n this.refs.iframeDropzone.style.width = iframeRect && iframeRect.width ? `${iframeRect.width}px` : '100%';\n }\n onDragStart(e) {\n // Taking the current offset of a dragged item relative to the cursor\n const { offsetX = 0, offsetY = 0 } = e;\n this.itemOffsetX = offsetX;\n this.itemOffsetY = offsetY;\n e.dataTransfer.setData('text', '');\n this.updateDropzoneDimensions();\n this.addClass(this.refs.iframeDropzone, 'enabled');\n this.dropEmitted = false;\n }\n onDropzoneDrop(e) {\n this.dropEmitted = true;\n this.dropEvent = e;\n e.preventDefault();\n return false;\n }\n onDragEnd(e) {\n // IMPORTANT - must retrieve offsets BEFORE disabling the dropzone - offsets will\n // reflect absolute positioning if accessed after the target element is hidden\n const iframeRect = this.webform.refs.iframeContainer.getBoundingClientRect();\n const layerX = this.dropEvent ? this.dropEvent.layerX : null;\n const layerY = this.dropEvent ? this.dropEvent.layerY : null;\n const WIDTH = 100;\n const HEIGHT = 20;\n // Always disable the dropzone on drag end\n this.removeClass(this.refs.iframeDropzone, 'enabled');\n // If there hasn't been a drop event on the dropzone, we're done\n if (!this.dropEvent) {\n // a 'drop' event may not be emited in the chrome browser when using a Mac, therefore an additional check has been added\n // eslint-disable-next-line no-undef\n if (!this.dropEmitted && ((0, utils_1.getBrowserInfo)().chrome || (0, utils_1.getBrowserInfo)().edge) && globalThis.navigator.userAgentData.platform === 'macOS' && iframeRect.left < e.clientX && iframeRect.top < e.clientY) {\n this.dropEvent = e;\n this.dropEvent.dataTransfer.effectAllowed = 'all';\n this.dropEmitted = true;\n }\n else {\n return;\n }\n }\n const element = e.target;\n const type = element.getAttribute('data-type');\n const key = element.getAttribute('data-key');\n const group = element.getAttribute('data-group');\n const schema = (0, utils_1.fastCloneDeep)(this.schemas[type]);\n if (key && group) {\n const info = this.getComponentInfo(key, group);\n lodash_1.default.merge(schema, info);\n }\n // Set a unique key for this component.\n builder_1.default.uniquify([this.webform._form], schema);\n this.webform._form.components.push(schema);\n schema.overlay = {\n top: layerY ? (layerY - this.itemOffsetY + HEIGHT) : (e.clientY - iframeRect.top - (this.itemOffsetY - HEIGHT) * 2),\n left: layerX ? (layerX - this.itemOffsetX) : (e.clientX - iframeRect.left - this.itemOffsetX * 2),\n width: WIDTH,\n height: HEIGHT\n };\n this.webform.addComponent(schema, {}, null, true);\n this.webform.postMessage({ name: 'addElement', data: schema });\n this.emit('addComponent', schema, this.webform, schema.key, this.webform.component.components.length, !this.options.noNewEdit && !schema.noNewEdit);\n // Delete the stored drop event now that it's been handled\n this.dropEvent = null;\n e.target.style.cursor = 'default';\n }\n highlightInvalidComponents() {\n const repeatablePaths = this.findRepeatablePaths();\n // update elements which path was duplicated if any pathes have been changed\n if (!lodash_1.default.isEqual(this.repeatablePaths, repeatablePaths)) {\n (0, formUtils_1.eachComponent)(this.webform.getComponents(), (comp, path) => {\n if (this.repeatablePaths.includes(path)) {\n this.webform.postMessage({ name: 'updateElement', data: comp.component });\n }\n });\n this.repeatablePaths = repeatablePaths;\n }\n if (!repeatablePaths.length) {\n return;\n }\n (0, formUtils_1.eachComponent)(this.webform.getComponents(), (comp, path) => {\n if (this.repeatablePaths.includes(path)) {\n this.webform.postMessage({\n name: 'showBuilderErrors',\n data: {\n compId: comp.component.id,\n errorMessage: `API Key is not unique: ${comp.key}`,\n }\n });\n }\n });\n }\n}\nexports[\"default\"] = PDFBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/PDFBuilder.js?");
5346
+ 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\");\nconst WebformBuilder_1 = __importDefault(__webpack_require__(/*! ./WebformBuilder */ \"./lib/cjs/WebformBuilder.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst builder_1 = __importDefault(__webpack_require__(/*! ./utils/builder */ \"./lib/cjs/utils/builder.js\"));\nconst PDF_1 = __importDefault(__webpack_require__(/*! ./PDF */ \"./lib/cjs/PDF.js\"));\nclass PDFBuilder extends WebformBuilder_1.default {\n constructor() {\n let element, options;\n if (arguments[0] instanceof HTMLElement || arguments[1]) {\n element = arguments[0];\n options = arguments[1];\n }\n else {\n options = arguments[0];\n }\n // Force superclass to skip the automatic init; we'll trigger it manually\n options.skipInit = true;\n options.display = 'pdf';\n if (element) {\n super(element, options);\n }\n else {\n super(options);\n }\n this.dragDropEnabled = false;\n }\n get defaultGroups() {\n return {\n pdf: {\n title: 'PDF Fields',\n weight: 0,\n default: true,\n components: {\n textfield: true,\n number: true,\n password: true,\n email: true,\n phoneNumber: true,\n currency: true,\n checkbox: true,\n signature: true,\n select: true,\n textarea: true,\n datetime: true,\n file: true,\n htmlelement: true,\n signrequestsignature: true\n }\n },\n basic: false,\n advanced: false,\n layout: false,\n data: false,\n premium: false,\n resource: false\n };\n }\n get hasPDF() {\n return lodash_1.default.has(this.webform.form, 'settings.pdf');\n }\n get projectUrl() {\n return this.options.projectUrl || Formio_1.Formio.getProjectUrl();\n }\n init() {\n this.options.attachMode = 'builder';\n this.webform = this.webform || this.createForm(this.options);\n this.webform.init();\n }\n render() {\n const result = this.renderTemplate('pdfBuilder', {\n sidebar: this.renderTemplate('builderSidebar', {\n scrollEnabled: this.sideBarScroll,\n groupOrder: this.groupOrder,\n groupId: `builder-sidebar-${this.id}`,\n groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n group: this.groups[groupKey],\n groupKey,\n groupId: `builder-sidebar-${this.id}`,\n subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n group,\n groupKey: group.key,\n groupId: `group-container-${groupKey}`,\n subgroups: []\n })),\n })),\n }),\n form: this.hasPDF ?\n this.webform.render() :\n this.renderTemplate('pdfBuilderUpload', {})\n });\n return result;\n }\n attach(element) {\n // PDF Upload\n if (!this.hasPDF) {\n this.loadRefs(element, {\n 'fileDrop': 'single',\n 'fileBrowse': 'single',\n 'hiddenFileInputElement': 'single',\n 'uploadError': 'single',\n 'uploadProgress': 'single',\n 'uploadProgressWrapper': 'single',\n 'dragDropText': 'single'\n });\n this.addEventListener(this.refs['pdf-upload-button'], 'click', (event) => {\n event.preventDefault();\n });\n // Init the upload error.\n if (!this.projectUrl) {\n this.setUploadError('Form options.projectUrl not set. Please set the \"projectUrl\" property of the options for this form or use Formio.setProjectUrl(). This setting is necessary to upload a pdf background.');\n }\n else {\n this.setUploadError();\n }\n if (this.refs.fileDrop) {\n const element = this;\n this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n this.className = 'fileSelector fileDragOver';\n event.preventDefault();\n });\n this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n this.className = 'fileSelector';\n event.preventDefault();\n });\n this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n this.className = 'fileSelector';\n event.preventDefault();\n element.upload(event.dataTransfer.files[0]);\n return false;\n });\n }\n if (this.refs.fileBrowse && this.refs.hiddenFileInputElement) {\n this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n event.preventDefault();\n // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n // a click event on it.\n if (typeof this.refs.hiddenFileInputElement.trigger === 'function') {\n this.refs.hiddenFileInputElement.trigger('click');\n }\n else {\n this.refs.hiddenFileInputElement.click();\n }\n });\n this.addEventListener(this.refs.hiddenFileInputElement, 'change', () => {\n if (!this.refs.hiddenFileInputElement.value) {\n return;\n }\n this.upload(this.refs.hiddenFileInputElement.files[0]);\n this.refs.hiddenFileInputElement.value = '';\n });\n }\n return Promise.resolve();\n }\n // Normal PDF Builder\n return super.attach(element).then(() => {\n this.loadRefs(this.element, {\n iframeDropzone: 'single',\n 'sidebar-container': 'multiple',\n 'sidebar': 'single',\n });\n this.afterAttach();\n return this.element;\n });\n }\n afterAttach() {\n this.on('saveComponent', (component) => {\n this.webform.postMessage({ name: 'updateElement', data: component });\n });\n this.on('removeComponent', (component) => {\n this.webform.postMessage({ name: 'removeElement', data: component });\n });\n this.initIframeEvents();\n this.updateDropzoneDimensions();\n const sidebar = this.refs.sidebar;\n if (sidebar) {\n this.addClass(sidebar, 'disabled');\n this.webform.on('iframe-ready', () => {\n this.pdfLoaded = true;\n this.updateDragAndDrop();\n this.removeClass(sidebar, 'disabled');\n }, true);\n }\n }\n upload(file) {\n const formio = new Formio_1.Formio(this.projectUrl);\n if (this.refs.dragDropText) {\n this.refs.dragDropText.style.display = 'none';\n }\n if (this.refs.uploadProgressWrapper) {\n this.refs.uploadProgressWrapper.style.display = 'inherit';\n }\n formio.uploadFile('url', file, file, '', (event) => {\n if (this.refs.uploadProgress) {\n const progress = Math.floor((event.loaded / event.total) * 100);\n this.refs.uploadProgress.style.width = `${progress}%`;\n if (progress > 98) {\n this.refs.uploadProgress.innerHTML = this.t('Converting PDF. Please wait.');\n }\n else {\n this.refs.uploadProgress.innerHTML = `${this.t('Uploading')} ${progress}%`;\n }\n }\n }, `${this.projectUrl}/upload`, {}, 'file')\n .then((result) => {\n var _a, _b, _c, _d;\n let autoConversionComponentsAssigned = false;\n if (((_a = result.data.formfields) === null || _a === void 0 ? void 0 : _a.components) && result.data.formfields.components.length) {\n const formInitState = ((_b = this.webform.form.components[0]) === null || _b === void 0 ? void 0 : _b.key) === 'submit';\n const wizardInitState = ((_c = this.webform.form.components[0]) === null || _c === void 0 ? void 0 : _c.key) === 'page1' &&\n ((_d = this.webform.form.components[0]) === null || _d === void 0 ? void 0 : _d.components.length) === 0;\n const emptyFormState = this.webform.form.components.length === 0;\n if (formInitState || wizardInitState || emptyFormState) {\n autoConversionComponentsAssigned = true;\n this.webform.form.components = result.data.formfields.components;\n }\n }\n if (this.refs.dragDropText) {\n this.refs.dragDropText.style.display = 'inherit';\n }\n if (this.refs.uploadProgressWrapper) {\n this.refs.uploadProgressWrapper.style.display = 'none';\n }\n lodash_1.default.set(this.webform.form, 'settings.pdf', {\n id: result.data.file,\n src: result.data.filesServer ? `${result.data.filesServer}${result.data.path}` : `${new URL(this.projectUrl).origin}/pdf-proxy${result.data.path}`,\n nonFillableConversionUsed: autoConversionComponentsAssigned && result.data.formfields.nonFillableConversionUsed\n });\n this.emit('pdfUploaded', result.data);\n this.redraw();\n })\n .catch((err) => this.setUploadError(err));\n }\n setUploadError(message) {\n if (!this.refs.uploadError) {\n return;\n }\n this.refs.uploadError.style.display = message ? '' : 'none';\n this.refs.uploadError.innerHTML = message;\n }\n createForm(options) {\n // Instantiate the webform from the PDF class instead of Webform\n options.skipInit = false;\n options.hideLoader = true;\n this.webform = new PDF_1.default(this.element, options);\n this.webform.on('attach', () => {\n // If the dropzone exists but has been removed in a PDF rebuild, reinstate it\n if (this.refs.iframeDropzone && ![...this.refs.form.children].includes(this.refs.iframeDropzone)) {\n this.prependTo(this.refs.iframeDropzone, this.refs.form);\n }\n });\n return this.webform;\n }\n destroy(all = false) {\n super.destroy(all);\n this.webform.destroy(all);\n }\n // d8b 8888888888 888\n // Y8P 888 888\n // 888 888\n // 888 8888888 888d888 8888b. 88888b.d88b. .d88b. .d88b. 888 888 .d88b. 88888b. 888888 .d8888b\n // 888 888 888P\" \"88b 888 \"888 \"88b d8P Y8b d8P Y8b 888 888 d8P Y8b 888 \"88b 888 88K\n // 888 888 888 .d888888 888 888 888 88888888 88888888 Y88 88P 88888888 888 888 888 \"Y8888b.\n // 888 888 888 888 888 888 888 888 Y8b. Y8b. Y8bd8P Y8b. 888 888 Y88b. X88\n // 888 888 888 \"Y888888 888 888 888 \"Y8888 \"Y8888 Y88P \"Y8888 888 888 \"Y888 88888P'\n getParentContainer(component) {\n let container = [];\n let originalComponent = null;\n (0, formUtils_1.eachComponent)(this.webform._form.components, (comp, path, components) => {\n if (comp.id === component.component.id) {\n container = components;\n originalComponent = comp;\n return true;\n }\n }, true);\n return {\n formioComponent: component.parent,\n formioContainer: container,\n originalComponent\n };\n }\n initIframeEvents() {\n this.webform.off('iframe-elementUpdate');\n this.webform.off('iframe-componentUpdate');\n this.webform.off('iframe-componentClick');\n this.webform.on('iframe-elementUpdate', schema => {\n const component = this.webform.getComponentById(schema.id);\n if (component && component.component) {\n const isNew = true;\n component.component.overlay = {\n page: schema.page,\n left: schema.left,\n top: schema.top,\n height: schema.height,\n width: schema.width\n };\n if (!this.options.noNewEdit && !component.component.noNewEdit) {\n this.editComponent(component.component, this.getParentContainer(component), isNew);\n }\n this.emit('updateComponent', component.component);\n }\n return component;\n });\n this.webform.on('iframe-componentUpdate', schema => {\n const component = this.webform.getComponentById(schema.id);\n if (component && component.component) {\n component.component.overlay = {\n page: schema.overlay.page,\n left: schema.overlay.left,\n top: schema.overlay.top,\n height: schema.overlay.height,\n width: schema.overlay.width\n };\n this.emit('updateComponent', component.component);\n this.emit('change', this.form);\n }\n return component;\n });\n this.webform.on('iframe-componentClick', schema => {\n const component = this.webform.getComponentById(schema.id);\n if (component) {\n this.editComponent(component.component, this.getParentContainer(component));\n }\n }, true);\n }\n // 8888888b. 888 d8b\n // 888 \"Y88b 888 Y8P\n // 888 888 888\n // 888 888 888d888 .d88b. 88888b. 88888888 .d88b. 88888b. .d88b. 888 .d88b. .d88b. 888 .d8888b\n // 888 888 888P\" d88\"\"88b 888 \"88b d88P d88\"\"88b 888 \"88b d8P Y8b 888 d88\"\"88b d88P\"88b 888 d88P\"\n // 888 888 888 888 888 888 888 d88P 888 888 888 888 88888888 888 888 888 888 888 888 888\n // 888 .d88P 888 Y88..88P 888 d88P d88P Y88..88P 888 888 Y8b. 888 Y88..88P Y88b 888 888 Y88b.\n // 8888888P\" 888 \"Y88P\" 88888P\" 88888888 \"Y88P\" 888 888 \"Y8888 888 \"Y88P\" \"Y88888 888 \"Y8888P\n // 888 888\n // 888 Y8b d88P\n // 888 \"Y88P\"\n initDropzoneEvents() {\n if (!this.refs.iframeDropzone) {\n return;\n }\n // This is required per HTML spec in order for the drop event to fire\n this.removeEventListener(this.refs.iframeDropzone, 'dragover');\n this.removeEventListener(this.refs.iframeDropzone, 'drop');\n this.addEventListener(this.refs.iframeDropzone, 'dragover', (e) => {\n e.preventDefault();\n return false;\n });\n this.addEventListener(this.refs.iframeDropzone, 'drop', this.onDropzoneDrop.bind(this));\n }\n updateDragAndDrop() {\n if (!this.pdfLoaded) {\n return;\n }\n this.initDropzoneEvents();\n this.prepSidebarComponentsForDrag();\n }\n prepSidebarComponentsForDrag() {\n if (!this.refs['sidebar-container']) {\n return;\n }\n this.refs['sidebar-container'].forEach(container => {\n [...container.children].forEach(el => {\n el.draggable = true;\n el.setAttribute('draggable', true);\n this.removeEventListener(el, 'dragstart');\n this.removeEventListener(el, 'dragend');\n this.addEventListener(el, 'dragstart', this.onDragStart.bind(this), true);\n this.addEventListener(el, 'dragend', this.onDragEnd.bind(this), true);\n this.addEventListener(el, 'drag', (e) => {\n e.target.style.cursor = 'none';\n });\n });\n });\n }\n updateDropzoneDimensions() {\n if (!this.refs.iframeDropzone) {\n return;\n }\n const iframeRect = (0, utils_1.getElementRect)(this.webform.refs.iframeContainer);\n this.refs.iframeDropzone.style.height = iframeRect && iframeRect.height ? `${iframeRect.height}px` : '1000px';\n this.refs.iframeDropzone.style.width = iframeRect && iframeRect.width ? `${iframeRect.width}px` : '100%';\n }\n onDragStart(e) {\n // Taking the current offset of a dragged item relative to the cursor\n const { offsetX = 0, offsetY = 0 } = e;\n this.itemOffsetX = offsetX;\n this.itemOffsetY = offsetY;\n e.dataTransfer.setData('text', '');\n this.updateDropzoneDimensions();\n this.addClass(this.refs.iframeDropzone, 'enabled');\n this.dropEmitted = false;\n }\n onDropzoneDrop(e) {\n this.dropEmitted = true;\n this.dropEvent = e;\n e.preventDefault();\n return false;\n }\n onDragEnd(e) {\n var _a;\n // IMPORTANT - must retrieve offsets BEFORE disabling the dropzone - offsets will\n // reflect absolute positioning if accessed after the target element is hidden\n const iframeRect = this.webform.refs.iframeContainer.getBoundingClientRect();\n const layerX = this.dropEvent ? this.dropEvent.layerX : null;\n const layerY = this.dropEvent ? this.dropEvent.layerY : null;\n const WIDTH = 100;\n const HEIGHT = 20;\n // Always disable the dropzone on drag end\n this.removeClass(this.refs.iframeDropzone, 'enabled');\n // If there hasn't been a drop event on the dropzone, we're done\n if (!this.dropEvent) {\n // a 'drop' event may not be emited in the chrome browser when using a Mac, therefore an additional check has been added\n // eslint-disable-next-line no-undef\n if (!this.dropEmitted && ((0, utils_1.getBrowserInfo)().chrome || (0, utils_1.getBrowserInfo)().edge) && globalThis.navigator.userAgentData.platform === 'macOS' && iframeRect.left < e.clientX && iframeRect.top < e.clientY) {\n this.dropEvent = e;\n this.dropEvent.dataTransfer.effectAllowed = 'all';\n this.dropEmitted = true;\n }\n else {\n return;\n }\n }\n const element = e.target;\n const type = element.getAttribute('data-type');\n const key = element.getAttribute('data-key');\n const group = element.getAttribute('data-group');\n const schema = (0, utils_1.fastCloneDeep)(this.schemas[type]);\n if (key && group) {\n const info = this.getComponentInfo(key, group);\n lodash_1.default.merge(schema, info);\n }\n // Set a unique key for this component.\n builder_1.default.uniquify(((_a = this.webform._form) === null || _a === void 0 ? void 0 : _a.components) || [], schema);\n this.webform._form.components.push(schema);\n schema.overlay = {\n top: layerY ? (layerY - this.itemOffsetY + HEIGHT) : (e.clientY - iframeRect.top - (this.itemOffsetY - HEIGHT) * 2),\n left: layerX ? (layerX - this.itemOffsetX) : (e.clientX - iframeRect.left - this.itemOffsetX * 2),\n width: WIDTH,\n height: HEIGHT\n };\n this.webform.addComponent(schema, {}, null, true);\n this.webform.postMessage({ name: 'addElement', data: schema });\n this.emit('addComponent', schema, this.webform, schema.key, this.webform.component.components.length, !this.options.noNewEdit && !schema.noNewEdit);\n // Delete the stored drop event now that it's been handled\n this.dropEvent = null;\n e.target.style.cursor = 'default';\n }\n highlightInvalidComponents() {\n const repeatablePaths = this.findRepeatablePaths();\n // update elements which path was duplicated if any pathes have been changed\n if (!lodash_1.default.isEqual(this.repeatablePaths, repeatablePaths)) {\n (0, formUtils_1.eachComponent)(this.webform.getComponents(), (comp, path) => {\n if (this.repeatablePaths.includes(path)) {\n this.webform.postMessage({ name: 'updateElement', data: comp.component });\n }\n });\n this.repeatablePaths = repeatablePaths;\n }\n if (!repeatablePaths.length) {\n return;\n }\n (0, formUtils_1.eachComponent)(this.webform.getComponents(), (comp, path) => {\n if (this.repeatablePaths.includes(path)) {\n this.webform.postMessage({\n name: 'showBuilderErrors',\n data: {\n compId: comp.component.id,\n errorMessage: `API Key is not unique: ${comp.key}`,\n }\n });\n }\n });\n }\n}\nexports[\"default\"] = PDFBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/PDFBuilder.js?");
5347
5347
 
5348
5348
  /***/ }),
5349
5349
 
@@ -5651,7 +5651,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
5651
5651
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
5652
5652
 
5653
5653
  "use strict";
5654
- 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 lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass Multivalue extends Field_1.default {\n get dataValue() {\n const parent = super.dataValue;\n if (!parent && this.component.multiple) {\n return [];\n }\n return parent;\n }\n set dataValue(value) {\n super.dataValue = value;\n }\n get defaultValue() {\n let value = super.defaultValue;\n if (this.component.multiple) {\n if (lodash_1.default.isArray(value)) {\n value = !value.length ? [super.emptyValue] : value;\n }\n else {\n value = [value];\n }\n }\n return value;\n }\n get addAnother() {\n return this.t(this.component.addAnother || 'Add Another');\n }\n useWrapper() {\n return this.component.hasOwnProperty('multiple') && this.component.multiple;\n }\n /**\n * @returns {Field} - The created field.\n */\n render() {\n // If single value field.\n if (!this.useWrapper()) {\n return super.render(`<div ${this._referenceAttributeName}=\"element\">\n ${this.renderElement(this.component.type !== 'hidden' ? this.dataValue : '')}\n </div>`);\n }\n // Make sure dataValue is in the correct array format.\n let dataValue = this.dataValue;\n if (!Array.isArray(dataValue)) {\n dataValue = dataValue ? [dataValue] : [];\n }\n // If multiple value field.\n return super.render(this.renderTemplate('multiValueTable', {\n rows: dataValue.map(this.renderRow.bind(this)).join(''),\n disabled: this.disabled,\n addAnother: this.addAnother,\n }));\n }\n renderElement() {\n return '';\n }\n /**\n * Renders a single row for multi-value components.\n * @param {any} value - The value associated with the row to render.\n * @param {number} index - The index of the row in the multi-value list.\n * @returns {any} Returns the HTML string representation of the row.\n */\n renderRow(value, index) {\n return this.renderTemplate('multiValueRow', {\n index,\n disabled: this.disabled,\n element: `${this.renderElement(value, index)}`,\n });\n }\n /**\n * @param {HTMLElement} dom - The DOM element to which the component will attach.\n * @returns {Promise} - Promise that resolves when all asynchronous tasks that have finished.\n */\n attach(dom) {\n const superAttach = super.attach(dom);\n this.loadRefs(dom, {\n addButton: 'multiple',\n input: 'multiple',\n removeRow: 'multiple',\n mask: 'multiple',\n select: 'multiple',\n });\n const promises = [];\n this.refs.input.forEach((element, index) => {\n promises.push(this.attachElement.call(this, element, index));\n });\n if (!this.component.multiple) {\n return Promise.all(promises);\n }\n this.refs.removeRow.forEach((removeButton, index) => {\n this.addEventListener(removeButton, 'click', (event) => {\n event.preventDefault();\n this.removeValue(index);\n });\n });\n // If single value field.\n this.refs.addButton.forEach((addButton) => {\n this.addEventListener(addButton, 'click', (event) => {\n event.preventDefault();\n this.addValue();\n });\n });\n return superAttach.then(() => {\n return Promise.all(promises);\n });\n }\n /**\n * Remove all event handlers.\n */\n detach() {\n if (this.refs.input && this.refs.input.length) {\n this.refs.input.forEach((input) => {\n if (input.mask) {\n input.mask.destroy ? input.mask.destroy() : input.mask.remove();\n }\n if (input.widget) {\n input.widget.destroy();\n }\n });\n }\n if (this.refs.mask && this.refs.mask.length) {\n this.refs.mask.forEach((input) => {\n if (input.mask) {\n input.mask.destroy ? input.mask.destroy() : input.mask.remove();\n }\n });\n }\n super.detach();\n }\n /**\n * Attach inputs to the element.\n * @param {HTMLElement} element - The element to attach.\n * @param {number} index - The index of the element to attach.\n */\n attachElement(element, index) {\n this.addEventListener(element, this.inputInfo.changeEvent, () => {\n // Delay update slightly to give input mask a chance to run.\n const textCase = lodash_1.default.get(this.component, 'case', 'mixed');\n if (textCase !== 'mixed') {\n const { selectionStart, selectionEnd, } = element;\n if (textCase === 'uppercase' && element.value) {\n element.value = element.value.toUpperCase();\n }\n if (textCase === 'lowercase' && element.value) {\n element.value = element.value.toLowerCase();\n }\n if (element.selectionStart && element.selectionEnd) {\n element.selectionStart = selectionStart;\n element.selectionEnd = selectionEnd;\n }\n }\n try {\n this.saveCaretPosition(element, index);\n }\n catch (err) {\n console.warn('An error occurred while trying to save caret position', err);\n }\n // If a mask is present, delay the update to allow mask to update first.\n if (element.mask) {\n setTimeout(() => {\n return this.updateValue(null, {\n modified: (this.component.type !== 'hidden')\n }, index);\n }, 1);\n }\n else {\n return this.updateValue(null, {\n modified: (this.component.type !== 'hidden')\n }, index);\n }\n });\n if (!this.attachMultiMask(index)) {\n const applyMask = () => {\n this.setInputMask(element);\n const valueMask = this.component.inputMask;\n const displayMask = this.component.displayMask;\n if (valueMask && displayMask && displayMask !== valueMask && this.refs.valueMaskInput) {\n this.setInputMask(this.refs.valueMaskInput, valueMask);\n }\n };\n if (this.inputInfo.changeEvent === 'blur') {\n this.addEventListener(element, this.inputInfo.changeEvent, () => {\n applyMask();\n this.dataValue = this.refs.input[0].value;\n if (this.checkComponentValidity()) {\n this.updateComponentValue(this.refs.input[0].value);\n }\n });\n }\n else {\n applyMask();\n }\n }\n }\n /**\n * Event handler for selecting a mask from a dropdown.\n * @param {Event} event - Event triggered by changing the selected option in mask.\n */\n onSelectMaskHandler(event) {\n this.updateMask(event.target.maskInput, this.getMaskPattern(event.target.value));\n }\n /**\n * Retrieves the mask pattern for a given mask name\n * @param {string} maskName - The name of the mask to retrieve.\n * @returns {any} The mask pattern associated with the given mask name.\n */\n getMaskPattern(maskName) {\n if (!this.multiMasks) {\n this.multiMasks = {};\n }\n if (this.multiMasks[maskName]) {\n return this.multiMasks[maskName];\n }\n const mask = this.component.inputMasks.find(inputMask => inputMask.label === maskName);\n this.multiMasks[maskName] = mask ? mask.mask : this.component.inputMasks[0].mask;\n return this.multiMasks[maskName];\n }\n /**\n * Attaches a selectable mask to an input field based on its configuration.\n * @param {number} index - The index of the select or input in component array.\n * @returns {boolean} - Returns true if the mask was successfully attached\n */\n attachMultiMask(index) {\n if (!(this.isMultipleMasksField && this.component.inputMasks.length && this.refs.input.length)) {\n return false;\n }\n const maskSelect = this.refs.select[index];\n maskSelect.onchange = this.onSelectMaskHandler.bind(this);\n maskSelect.maskInput = this.refs.mask[index];\n this.setInputMask(maskSelect.maskInput, this.component.inputMasks[0].mask);\n return true;\n }\n /**\n * @param {any} input - The input element on which the mask is to be applied.\n * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.\n */\n updateMask(input, mask) {\n if (!mask) {\n if (input.mask) {\n input.mask.destroy();\n }\n if (!this.component.placeholder) {\n input.removeAttribute('placeholder');\n }\n input.value = '';\n return;\n }\n this.setInputMask(input, mask, !this.component.placeholder);\n this.updateValue();\n }\n /**\n * Adds a new empty value to the data array.\n * @param {any} value -A value to be added to the data array.\n */\n addNewValue(value) {\n if (value === undefined) {\n value = this.component.defaultValue ?\n this.component.defaultValue : this.emptyValue;\n // If default is an empty aray, default back to empty value.\n if (Array.isArray(value) && value.length === 0) {\n value = this.emptyValue;\n }\n }\n let dataValue = this.dataValue || [];\n if (!Array.isArray(dataValue)) {\n dataValue = [dataValue];\n }\n if (Array.isArray(value)) {\n dataValue = dataValue.concat(value);\n }\n else {\n dataValue.push(value);\n }\n this.dataValue = dataValue;\n }\n /**\n * Adds a new empty value to the data array, and add a new row to contain it.\n */\n addValue() {\n this.addNewValue();\n this.redraw();\n this.checkConditions();\n if (!this.isEmpty(this.dataValue)) {\n this.restoreValue();\n }\n if (this.root) {\n this.root.onChange();\n }\n }\n}\nexports[\"default\"] = Multivalue;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/multivalue/Multivalue.js?");
5654
+ 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 lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass Multivalue extends Field_1.default {\n /**\n * Normalize values coming into updateValue.\n * @param {*} value - The value to normalize before setting.\n * @returns {*} - The normalized value.\n */\n normalizeValue(value) {\n if (this.component.multiple) {\n if (Array.isArray(value)) {\n if (value.length === 0) {\n return [this.emptyValue];\n }\n if (this.component.storeas === 'array') {\n return super.normalizeValue([value]);\n }\n return super.normalizeValue(value);\n }\n else {\n return super.normalizeValue(value == null ? [this.emptyValue] : [value]);\n }\n }\n else {\n if (Array.isArray(value) && this.component.storeas !== 'array') {\n if (this.component.storeas === 'string') {\n return super.normalizeValue(value.join(this.delimiter || ''));\n }\n return super.normalizeValue(value[0] || this.emptyValue);\n }\n else {\n return super.normalizeValue(value);\n }\n }\n }\n get dataValue() {\n return super.dataValue;\n }\n set dataValue(value) {\n super.dataValue = value;\n }\n get defaultValue() {\n let value = super.defaultValue;\n if (this.component.multiple) {\n if (lodash_1.default.isArray(value)) {\n value = !value.length ? [super.emptyValue] : value;\n }\n else {\n value = [value];\n }\n }\n return value;\n }\n get addAnother() {\n return this.t(this.component.addAnother || 'Add Another');\n }\n /**\n * @returns {Field} - The created field.\n */\n render() {\n let dataValue = this.normalizeValue(this.dataValue);\n return this.component.hasOwnProperty('multiple') && this.component.multiple\n ? super.render(this.renderTemplate('multiValueTable', {\n rows: dataValue.map(this.renderRow.bind(this)).join(''),\n disabled: this.disabled,\n addAnother: this.addAnother,\n }))\n : super.render(`<div ${this._referenceAttributeName}=\"element\">\n ${this.renderElement(this.component.type !== 'hidden' ? dataValue : '')}\n </div>`);\n }\n renderElement() {\n return '';\n }\n /**\n * Renders a single row for multi-value components.\n * @param {any} value - The value associated with the row to render.\n * @param {number} index - The index of the row in the multi-value list.\n * @returns {any} Returns the HTML string representation of the row.\n */\n renderRow(value, index) {\n return this.renderTemplate('multiValueRow', {\n index,\n disabled: this.disabled,\n element: `${this.renderElement(value, index)}`,\n });\n }\n /**\n * @param {HTMLElement} dom - The DOM element to which the component will attach.\n * @returns {Promise} - Promise that resolves when all asynchronous tasks that have finished.\n */\n attach(dom) {\n const superAttach = super.attach(dom);\n this.loadRefs(dom, {\n addButton: 'multiple',\n input: 'multiple',\n removeRow: 'multiple',\n mask: 'multiple',\n select: 'multiple',\n });\n const promises = [];\n this.refs.input.forEach((element, index) => {\n promises.push(this.attachElement.call(this, element, index));\n });\n if (!this.component.multiple) {\n return Promise.all(promises);\n }\n this.refs.removeRow.forEach((removeButton, index) => {\n this.addEventListener(removeButton, 'click', (event) => {\n event.preventDefault();\n this.removeValue(index);\n });\n });\n // If single value field.\n this.refs.addButton.forEach((addButton) => {\n this.addEventListener(addButton, 'click', (event) => {\n event.preventDefault();\n this.addValue();\n });\n });\n return superAttach.then(() => {\n return Promise.all(promises);\n });\n }\n /**\n * Remove all event handlers.\n */\n detach() {\n if (this.refs.input && this.refs.input.length) {\n this.refs.input.forEach((input) => {\n if (input.mask) {\n input.mask.destroy ? input.mask.destroy() : input.mask.remove();\n }\n if (input.widget) {\n input.widget.destroy();\n }\n });\n }\n if (this.refs.mask && this.refs.mask.length) {\n this.refs.mask.forEach((input) => {\n if (input.mask) {\n input.mask.destroy ? input.mask.destroy() : input.mask.remove();\n }\n });\n }\n super.detach();\n }\n /**\n * Attach inputs to the element.\n * @param {HTMLElement} element - The element to attach.\n * @param {number} index - The index of the element to attach.\n */\n attachElement(element, index) {\n this.addEventListener(element, this.inputInfo.changeEvent, () => {\n // Delay update slightly to give input mask a chance to run.\n const textCase = lodash_1.default.get(this.component, 'case', 'mixed');\n if (textCase !== 'mixed') {\n const { selectionStart, selectionEnd, } = element;\n if (textCase === 'uppercase' && element.value) {\n element.value = element.value.toUpperCase();\n }\n if (textCase === 'lowercase' && element.value) {\n element.value = element.value.toLowerCase();\n }\n if (element.selectionStart && element.selectionEnd) {\n element.selectionStart = selectionStart;\n element.selectionEnd = selectionEnd;\n }\n }\n try {\n this.saveCaretPosition(element, index);\n }\n catch (err) {\n console.warn('An error occurred while trying to save caret position', err);\n }\n // If a mask is present, delay the update to allow mask to update first.\n if (element.mask) {\n setTimeout(() => {\n return this.updateValue(null, {\n modified: (this.component.type !== 'hidden')\n }, index);\n }, 1);\n }\n else {\n return this.updateValue(null, {\n modified: (this.component.type !== 'hidden')\n }, index);\n }\n });\n if (!this.attachMultiMask(index)) {\n const applyMask = () => {\n this.setInputMask(element);\n const valueMask = this.component.inputMask;\n const displayMask = this.component.displayMask;\n if (valueMask && displayMask && displayMask !== valueMask && this.refs.valueMaskInput) {\n this.setInputMask(this.refs.valueMaskInput, valueMask);\n }\n };\n if (this.inputInfo.changeEvent === 'blur') {\n this.addEventListener(element, this.inputInfo.changeEvent, () => {\n applyMask();\n this.dataValue = this.refs.input[0].value;\n if (this.checkComponentValidity()) {\n this.updateComponentValue(this.refs.input[0].value);\n }\n });\n }\n else {\n applyMask();\n }\n }\n }\n /**\n * Event handler for selecting a mask from a dropdown.\n * @param {Event} event - Event triggered by changing the selected option in mask.\n */\n onSelectMaskHandler(event) {\n this.updateMask(event.target.maskInput, this.getMaskPattern(event.target.value));\n }\n /**\n * Retrieves the mask pattern for a given mask name\n * @param {string} maskName - The name of the mask to retrieve.\n * @returns {any} The mask pattern associated with the given mask name.\n */\n getMaskPattern(maskName) {\n if (!this.multiMasks) {\n this.multiMasks = {};\n }\n if (this.multiMasks[maskName]) {\n return this.multiMasks[maskName];\n }\n const mask = this.component.inputMasks.find(inputMask => inputMask.label === maskName);\n this.multiMasks[maskName] = mask ? mask.mask : this.component.inputMasks[0].mask;\n return this.multiMasks[maskName];\n }\n /**\n * Attaches a selectable mask to an input field based on its configuration.\n * @param {number} index - The index of the select or input in component array.\n * @returns {boolean} - Returns true if the mask was successfully attached\n */\n attachMultiMask(index) {\n if (!(this.isMultipleMasksField && this.component.inputMasks.length && this.refs.input.length)) {\n return false;\n }\n const maskSelect = this.refs.select[index];\n maskSelect.onchange = this.onSelectMaskHandler.bind(this);\n maskSelect.maskInput = this.refs.mask[index];\n this.setInputMask(maskSelect.maskInput, this.component.inputMasks[0].mask);\n return true;\n }\n /**\n * @param {any} input - The input element on which the mask is to be applied.\n * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.\n */\n updateMask(input, mask) {\n if (!mask) {\n if (input.mask) {\n input.mask.destroy();\n }\n if (!this.component.placeholder) {\n input.removeAttribute('placeholder');\n }\n input.value = '';\n return;\n }\n this.setInputMask(input, mask, !this.component.placeholder);\n this.updateValue();\n }\n /**\n * Adds a new empty value to the data array.\n * @param {any} value -A value to be added to the data array.\n */\n addNewValue(value) {\n if (value === undefined) {\n value = this.component.defaultValue ?\n this.component.defaultValue : this.emptyValue;\n // If default is an empty aray, default back to empty value.\n if (Array.isArray(value) && value.length === 0) {\n value = this.emptyValue;\n }\n }\n let dataValue = this.dataValue || [];\n if (!Array.isArray(dataValue)) {\n dataValue = [dataValue];\n }\n if (Array.isArray(value)) {\n dataValue = dataValue.concat(value);\n }\n else {\n dataValue.push(value);\n }\n this.dataValue = dataValue;\n }\n /**\n * Adds a new empty value to the data array, and add a new row to contain it.\n */\n addValue() {\n this.addNewValue();\n this.redraw();\n this.checkConditions();\n if (!this.isEmpty(this.dataValue)) {\n this.restoreValue();\n }\n if (this.root) {\n this.root.onChange();\n }\n }\n}\nexports[\"default\"] = Multivalue;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/multivalue/Multivalue.js?");
5655
5655
 
5656
5656
  /***/ }),
5657
5657
 
@@ -6047,7 +6047,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
6047
6047
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
6048
6048
 
6049
6049
  "use strict";
6050
- 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 NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ../Components */ \"./lib/cjs/components/Components.js\"));\nclass DataGridComponent extends NestedArrayComponent_1.default {\n static schema(...extend) {\n return NestedArrayComponent_1.default.schema({\n label: 'Data Grid',\n key: 'dataGrid',\n type: 'datagrid',\n clearOnHide: true,\n input: true,\n tree: true,\n components: []\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Data Grid',\n icon: 'th',\n group: 'data',\n documentation: '/userguide/form-building/data-components#data-grid',\n showPreview: false,\n weight: 30,\n schema: DataGridComponent.schema()\n };\n }\n constructor(...args) {\n super(...args);\n this.type = 'datagrid';\n this.tabIndex = 0;\n }\n init() {\n this.components = this.components || [];\n // Add new values based on minLength.\n this.rows = [];\n this.columns = [...this.component.components];\n if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {\n this.createRows(true);\n }\n if (this.allowReorder) {\n this.dragulaReady = this.getDragula();\n }\n this.visibleColumns = {};\n this.prevHasAddButton = this.hasAddButton();\n this.checkColumns();\n }\n get dataValue() {\n const dataValue = super.dataValue;\n if (!dataValue || !Array.isArray(dataValue)) {\n return this.emptyValue;\n }\n return dataValue;\n }\n set dataValue(value) {\n super.dataValue = value;\n }\n get defaultSchema() {\n return DataGridComponent.schema();\n }\n get initEmpty() {\n return this.component.initEmpty || this.component.noFirstRow;\n }\n get initRows() {\n return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;\n }\n get emptyValue() {\n return this.initEmpty ? [] : [{}];\n }\n get addAnotherPosition() {\n return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');\n }\n get minLength() {\n if (this.hasRowGroups()) {\n return lodash_1.default.sum(this.getGroupSizes());\n }\n else {\n return lodash_1.default.get(this.component, 'validate.minLength', 0);\n }\n }\n get defaultValue() {\n const isBuilderMode = this.builderMode;\n const isEmptyInit = this.initEmpty;\n // Ensure we have one and only one row in builder mode.\n if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {\n return isEmptyInit && !isBuilderMode ? [] : [{}];\n }\n const value = super.defaultValue;\n let defaultValue;\n if (Array.isArray(value)) {\n defaultValue = value;\n }\n else if (value && (typeof value === 'object')) {\n defaultValue = [value];\n }\n else {\n defaultValue = this.emptyValue;\n }\n for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {\n defaultValue.push({});\n }\n return defaultValue;\n }\n set disabled(disabled) {\n super.disabled = disabled;\n lodash_1.default.each(this.refs[`${this.datagridKey}-addRow`], (button) => {\n button.disabled = disabled;\n });\n lodash_1.default.each(this.refs[`${this.datagridKey}-removeRow`], (button) => {\n button.disabled = disabled;\n });\n }\n get disabled() {\n return super.disabled;\n }\n get datagridKey() {\n return `datagrid-${this.key}`;\n }\n get allowReorder() {\n return !this.options.readOnly && lodash_1.default.get(this.component, 'reorder', false);\n }\n get iteratableRows() {\n return this.rows.map((row, index) => ({\n components: row,\n data: this.dataValue[index],\n }));\n }\n isEmpty(value = this.dataValue) {\n var _a;\n const isEmpty = super.isEmpty(value);\n if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {\n return this.components.reduce((isEmpty, component) => {\n return isEmpty && component.isEmpty();\n }, true);\n }\n return isEmpty;\n }\n /**\n * Split rows into chunks.\n * @param {number[]} groups - array of numbers where each item is size of group\n * @param {Array<T>} rows - rows collection\n * @returns {Array<T[]>} - The chunked rows\n */\n getRowChunks(groups, rows) {\n const [, chunks] = groups.reduce(([startIndex, acc], size) => {\n const endIndex = startIndex + size;\n return [endIndex, [...acc, [startIndex, endIndex]]];\n }, [0, []]);\n return chunks.map(range => lodash_1.default.slice(rows, ...range));\n }\n /**\n * Create groups object.\n * Each key in object represents index of first row in group.\n * @returns {object} - The groups object.\n */\n getGroups() {\n const groups = lodash_1.default.get(this.component, 'rowGroups', []);\n const sizes = lodash_1.default.map(groups, 'numberOfRows').slice(0, -1);\n const indexes = sizes.reduce((groupIndexes, size) => {\n const last = groupIndexes[groupIndexes.length - 1];\n return groupIndexes.concat(last + size);\n }, [0]);\n return groups.reduce((gidxs, group, idx) => {\n return Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });\n }, {});\n }\n /**\n * Get group sizes.\n * @returns {number[]} - The array of group sizes.\n */\n getGroupSizes() {\n return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');\n }\n hasRowGroups() {\n return lodash_1.default.get(this, 'component.enableRowGroups', false) && !this.builderMode;\n }\n totalRowsNumber(groups) {\n return lodash_1.default.sum(lodash_1.default.map(groups, 'numberOfRows'));\n }\n setStaticValue(n) {\n this.dataValue = lodash_1.default.range(n).map(() => ({}));\n }\n hasExtraColumn() {\n return (this.hasRemoveButtons() || this.canAddColumn);\n }\n hasRemoveButtons() {\n return !this.builderMode && !this.component.disableAddingRemovingRows &&\n !this.options.readOnly &&\n !this.disabled &&\n this.fullMode &&\n (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n }\n hasTopSubmit() {\n return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);\n }\n hasBottomSubmit() {\n return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);\n }\n get canAddColumn() {\n return this.builderMode && !this.options.design;\n }\n render() {\n const columns = this.getColumns();\n let columnExtra = 0;\n const hasRemoveButtons = this.hasRemoveButtons();\n if (this.component.reorder) {\n columnExtra++;\n }\n if (hasRemoveButtons) {\n columnExtra++;\n }\n if (this.canAddColumn) {\n columnExtra++;\n }\n const colWidth = Math.floor(12 / (columns.length + columnExtra));\n return super.render(this.renderTemplate('datagrid', {\n rows: this.getRows(),\n columns: columns,\n groups: this.hasRowGroups() ? this.getGroups() : [],\n visibleColumns: this.visibleColumns,\n hasToggle: lodash_1.default.get(this, 'component.groupToggle', false),\n hasHeader: this.hasHeader(),\n hasExtraColumn: this.hasExtraColumn(),\n hasAddButton: this.hasAddButton(),\n hasRemoveButtons,\n hasTopSubmit: this.hasTopSubmit(),\n hasBottomSubmit: this.hasBottomSubmit(),\n hasGroups: this.hasRowGroups(),\n numColumns: columns.length + (this.hasExtraColumn() ? 1 : 0),\n datagridKey: this.datagridKey,\n allowReorder: this.allowReorder,\n builder: this.builderMode,\n canAddColumn: this.canAddColumn,\n tabIndex: this.tabIndex,\n placeholder: this.renderTemplate('builderPlaceholder', {\n position: this.componentComponents.length,\n }),\n colWidth: colWidth.toString()\n }));\n }\n getRows() {\n return this.rows.map(row => {\n const components = {};\n lodash_1.default.each(row, (col, key) => {\n components[key] = col.render();\n });\n return components;\n });\n }\n getColumns() {\n return this.columns.filter((comp) => {\n return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);\n });\n }\n hasHeader() {\n return this.component.components.reduce((hasHeader, col) => {\n // If any of the components has a title and it isn't hidden, display the header.\n return hasHeader || ((col.label || col.title) && !col.hideLabel);\n }, false);\n }\n attach(element) {\n this.loadRefs(element, {\n [`${this.datagridKey}-row`]: 'multiple',\n [`${this.datagridKey}-tbody`]: 'single',\n [`${this.datagridKey}-addRow`]: 'multiple',\n [`${this.datagridKey}-removeRow`]: 'multiple',\n [`${this.datagridKey}-group-header`]: 'multiple',\n [this.datagridKey]: 'multiple',\n });\n if (this.allowReorder) {\n this.refs[`${this.datagridKey}-row`].forEach((row, index) => {\n row.dragInfo = { index };\n });\n this.dragulaReady.then((dragula) => {\n // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous\n // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).\n // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must\n // be saved in this.dragula and have its container contents reset if it exists\n if (this.dragula && this.dragula.containers) {\n this.dragula.containers = [];\n }\n this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {\n moves: (_draggedElement, _oldParent, clickedElement) => {\n const clickedElementKey = clickedElement.getAttribute('data-key');\n const oldParentKey = _oldParent.getAttribute('data-key');\n //Check if the clicked button belongs to that container, if false, it belongs to the nested container\n if (oldParentKey === clickedElementKey) {\n return clickedElement.classList.contains('formio-drag-button');\n }\n }\n }).on('drop', this.onReorder.bind(this))\n .on('cloned', this.onCloned.bind(this));\n });\n }\n this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {\n this.addEventListener(addButton, 'click', this.addRow.bind(this));\n });\n this.refs[`${this.datagridKey}-removeRow`].forEach((removeButton, index) => {\n this.addEventListener(removeButton, 'click', this.removeRow.bind(this, index));\n });\n if (this.hasRowGroups()) {\n this.refs.chunks = this.getRowChunks(this.getGroupSizes(), this.refs[`${this.datagridKey}-row`]);\n this.refs[`${this.datagridKey}-group-header`].forEach((header, index) => {\n this.addEventListener(header, 'click', () => this.toggleGroup(header, index));\n });\n }\n const columns = this.getColumns();\n const rowLength = columns.length;\n this.rows.forEach((row, rowIndex) => {\n let columnIndex = 0;\n columns.forEach((col) => {\n this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());\n columnIndex++;\n });\n });\n return super.attach(element);\n }\n getComponentsContainer() {\n return this.component.components;\n }\n /**\n * Reorder values in array based on the old and new position\n * @param {any} valuesArr - An array of values.\n * @param {number} oldPosition - The index of the value in array before reordering.\n * @param {number} newPosition - The index of the value in array after reordering.\n * @param {boolean|any} movedBelow - Whether or not the value is moved below.\n * @returns {void}\n */\n reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {\n if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {\n return;\n }\n const draggedRowData = valuesArr[oldPosition];\n //insert element at new position\n valuesArr.splice(newPosition, 0, draggedRowData);\n //remove element from old position (if was moved above, after insertion it's at +1 index)\n valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n }\n onReorder(element, _target, _source, sibling) {\n if (!element.dragInfo || (sibling && !sibling.dragInfo)) {\n console.warn('There is no Drag Info available for either dragged or sibling element');\n return;\n }\n const oldPosition = element.dragInfo.index;\n //should drop at next sibling position; no next sibling means drop to last position\n const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;\n const movedBelow = newPosition > oldPosition;\n const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);\n this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);\n //reorder select data\n this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);\n // When components are reordered we need to set the dataGrid and form pristine properties to false\n this.root.pristine = false;\n this.pristine = false;\n //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)\n this.setValue(dataValue, { isReordered: true });\n this.rebuild();\n }\n onCloned(el, original) {\n if (el && el.children && original && original.children) {\n lodash_1.default.each(original.children, (child, index) => {\n const styles = getComputedStyle(child, null);\n if (styles.cssText !== '') {\n el.children[index].style.cssText = styles.cssText;\n }\n else {\n const cssText = Object.values(styles).reduce((css, propertyName) => {\n return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;\n }, '');\n el.children[index].style.cssText = cssText;\n }\n });\n }\n }\n focusOnNewRowElement(row) {\n Object.keys(row).find((key) => {\n const element = row[key].element;\n if (element) {\n const focusableElements = (0, utils_1.getFocusableElements)(element);\n if (focusableElements && focusableElements[0]) {\n focusableElements[0].focus();\n return true;\n }\n }\n return false;\n });\n }\n addRow() {\n const index = this.rows.length;\n // Handle length mismatch between rows and dataValue\n if (this.dataValue.length === index) {\n this.dataValue.push({});\n }\n let row;\n const dataValue = this.dataValue;\n const defaultValue = this.defaultValue;\n if (this.initEmpty && defaultValue[index]) {\n row = defaultValue[index];\n dataValue[index] = row;\n }\n else {\n row = dataValue[index];\n }\n this.rows[index] = this.createRowComponents(row, index);\n this.emit('dataGridAddRow', {\n component: this.component,\n row\n });\n this.checkConditions();\n this.triggerChange();\n this.redraw().then(() => {\n this.focusOnNewRowElement(this.rows[index]);\n });\n }\n updateComponentsRowIndex(components, rowIndex) {\n components.forEach((component, colIndex) => {\n var _a;\n if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {\n const newName = `[${this.key}][${rowIndex}]`;\n component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);\n }\n component.rowIndex = rowIndex;\n component.row = `${rowIndex}-${colIndex}`;\n component.path = Components_1.default.getComponentPath(component);\n });\n }\n updateRowsComponents(rowIndex) {\n this.rows.slice(rowIndex).forEach((row, index) => {\n this.updateComponentsRowIndex(Object.values(row), rowIndex + index);\n });\n }\n removeRow(index) {\n const makeEmpty = index === 0 && this.rows.length === 1;\n const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };\n this.splice(index, flags);\n this.emit('dataGridDeleteRow', { index });\n const [row] = this.rows.splice(index, 1);\n this.removeSubmissionMetadataRow(index);\n this.removeRowComponents(row);\n this.updateRowsComponents(index);\n this.setValue(this.dataValue, flags);\n this.redraw();\n }\n removeRowComponents(row) {\n lodash_1.default.each(row, (component) => this.removeComponent(component));\n }\n getRowValues() {\n return this.dataValue;\n }\n setRowComponentsData(rowIndex, rowData) {\n lodash_1.default.each(this.rows[rowIndex], (component) => {\n component.data = rowData;\n });\n }\n createRows(init, rebuild) {\n let added = false;\n const rowValues = this.getRowValues();\n // Create any missing rows.\n rowValues.forEach((row, index) => {\n if (!rebuild && this.rows[index]) {\n this.setRowComponentsData(index, row);\n }\n else {\n if (this.rows[index]) {\n this.removeRowComponents(this.rows[index]);\n }\n this.rows[index] = this.createRowComponents(row, index);\n added = true;\n }\n });\n // Delete any extra rows.\n const removedRows = this.rows.splice(rowValues.length);\n const removed = !!removedRows.length;\n // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)\n if (removed) {\n removedRows.forEach(row => this.removeRowComponents(row));\n }\n if (!init && (added || removed)) {\n this.redraw();\n }\n return added;\n }\n createRowComponents(row, rowIndex) {\n const components = {};\n this.tabIndex = 0;\n this.component.components.map((col, colIndex) => {\n const options = lodash_1.default.clone(this.options);\n options.name += `[${rowIndex}]`;\n options.row = `${rowIndex}-${colIndex}`;\n let columnComponent;\n if (this.builderMode) {\n col.id = col.id + rowIndex;\n columnComponent = col;\n }\n else {\n columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });\n }\n const component = this.createComponent(columnComponent, options, row);\n component.parentDisabled = !!this.disabled;\n component.rowIndex = rowIndex;\n component.inDataGrid = true;\n if (columnComponent.tabindex &&\n parseInt(columnComponent.tabindex) > this.tabIndex) {\n this.tabIndex = parseInt(columnComponent.tabindex);\n }\n components[col.key] = component;\n });\n return components;\n }\n checkColumns(data, flags = {}) {\n data = data || this.rootValue;\n let show = false;\n if (!this.rows || !this.rows.length) {\n return { rebuild: false, show: false };\n }\n if (this.builderMode) {\n return { rebuild: false, show: true };\n }\n const visibility = {};\n let logicRebuild = false;\n const dataValue = this.dataValue;\n this.rows.forEach((row, rowIndex) => {\n lodash_1.default.each(row, (col, key) => {\n if (col && (typeof col.checkConditions === 'function')) {\n const firstRowCheck = visibility[key] === undefined;\n visibility[key] = !!visibility[key] ||\n (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');\n if (col.component.logic && firstRowCheck) {\n const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);\n const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {\n // Don't compare columns by their auto-generated ids.\n if (key === 'id') {\n return true;\n }\n });\n if (!equalColumns) {\n logicRebuild = true;\n this.columns[compIndex] = col.component;\n }\n }\n }\n });\n });\n const rebuild = !lodash_1.default.isEqual(visibility, this.visibleColumns) || logicRebuild;\n lodash_1.default.each(visibility, (col) => {\n show |= col;\n });\n this.visibleColumns = visibility;\n return { rebuild, show };\n }\n checkComponentConditions(data, flags, row) {\n const isVisible = this.visible;\n // If table isn't visible, don't bother calculating columns.\n if (!super.checkComponentConditions(data, flags, row)) {\n return false;\n }\n const { rebuild, show } = this.checkColumns(data, flags);\n // Check if a rebuild is needed or the visibility changes.\n if (rebuild || !isVisible) {\n this.createRows(false, rebuild);\n }\n // Return if this table should show.\n return show;\n }\n setValue(value, flags = {}) {\n if (!value) {\n this.dataValue = this.defaultValue;\n this.createRows();\n return false;\n }\n if (!Array.isArray(value)) {\n if (typeof value === 'object') {\n value = [value];\n }\n else {\n this.createRows();\n value = [{}];\n }\n }\n // Make sure we always have at least one row.\n // NOTE: Removing this will break \"Public Configurations\" in portal. ;)\n if (value && !value.length && !this.initEmpty) {\n value.push({});\n }\n const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);\n const changed = this.hasChanged(value, this.dataValue);\n this.dataValue = value;\n if (this.initRows || isSettingSubmission ||\n (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {\n if (!this.createRows() && changed) {\n this.redraw();\n }\n }\n if (this.componentModal && isSettingSubmission) {\n this.componentModal.setValue(value);\n }\n this.rows.forEach((row, rowIndex) => {\n if (value.length <= rowIndex) {\n return;\n }\n lodash_1.default.each(row, (col) => {\n col.rowIndex = rowIndex;\n this.setNestedValue(col, value[rowIndex], flags);\n });\n });\n this.updateOnChange(flags, changed);\n return changed;\n }\n restoreComponentsContext() {\n this.rows.forEach((row, index) => lodash_1.default.forIn(row, (component) => component.data = this.dataValue[index]));\n }\n getComponent(path, fn) {\n path = Array.isArray(path) ? path : [path];\n const [key, ...remainingPath] = path;\n let result = [];\n if (lodash_1.default.isNumber(key) && remainingPath.length) {\n const compKey = remainingPath.pop();\n result = this.rows[key][compKey];\n // If the component is inside a Layout Component, try to find it among all the row's components\n if (!result) {\n Object.entries(this.rows[key]).forEach(([, comp]) => {\n if ('getComponent' in comp) {\n const possibleResult = comp.getComponent([compKey], fn);\n if (possibleResult) {\n result = possibleResult;\n }\n }\n });\n }\n if (result && lodash_1.default.isFunction(fn)) {\n fn(result, this.getComponents());\n }\n if (remainingPath.length && 'getComponent' in result) {\n return result.getComponent(remainingPath, fn);\n }\n return result;\n }\n if (!lodash_1.default.isString(key)) {\n return result;\n }\n this.everyComponent((component, components) => {\n if (component.component.key === key) {\n let comp = component;\n if (remainingPath.length > 0 && 'getComponent' in component) {\n comp = component.getComponent(remainingPath, fn);\n }\n else if (fn) {\n fn(component, components);\n }\n result = result.concat(comp);\n }\n });\n return result.length > 0 ? result : null;\n }\n toggleGroup(element, index) {\n element.classList.toggle('collapsed');\n lodash_1.default.each(this.refs.chunks[index], row => {\n row.classList.toggle('hidden');\n });\n }\n}\nexports[\"default\"] = DataGridComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datagrid/DataGrid.js?");
6050
+ 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 NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ../Components */ \"./lib/cjs/components/Components.js\"));\nclass DataGridComponent extends NestedArrayComponent_1.default {\n static schema(...extend) {\n return NestedArrayComponent_1.default.schema({\n label: 'Data Grid',\n key: 'dataGrid',\n type: 'datagrid',\n clearOnHide: true,\n input: true,\n tree: true,\n components: []\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Data Grid',\n icon: 'th',\n group: 'data',\n documentation: '/userguide/form-building/data-components#data-grid',\n showPreview: false,\n weight: 30,\n schema: DataGridComponent.schema()\n };\n }\n constructor(...args) {\n super(...args);\n this.type = 'datagrid';\n this.tabIndex = 0;\n }\n init() {\n this.components = this.components || [];\n // Add new values based on minLength.\n this.rows = [];\n this.columns = [...this.component.components];\n if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {\n this.createRows(true);\n }\n if (this.allowReorder) {\n this.dragulaReady = this.getDragula();\n }\n this.visibleColumns = {};\n this.prevHasAddButton = this.hasAddButton();\n this.checkColumns();\n }\n get dataValue() {\n const dataValue = super.dataValue;\n if (!dataValue || !Array.isArray(dataValue)) {\n return this.emptyValue;\n }\n return dataValue;\n }\n set dataValue(value) {\n super.dataValue = value;\n }\n get defaultSchema() {\n return DataGridComponent.schema();\n }\n get initEmpty() {\n return this.component.initEmpty || this.component.noFirstRow;\n }\n get initRows() {\n return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;\n }\n get emptyValue() {\n return this.initEmpty ? [] : [{}];\n }\n get addAnotherPosition() {\n return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');\n }\n get minLength() {\n if (this.hasRowGroups()) {\n return lodash_1.default.sum(this.getGroupSizes());\n }\n else {\n return lodash_1.default.get(this.component, 'validate.minLength', 0);\n }\n }\n get defaultValue() {\n const isBuilderMode = this.builderMode;\n const isEmptyInit = this.initEmpty;\n // Ensure we have one and only one row in builder mode.\n if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {\n return isEmptyInit && !isBuilderMode ? [] : [{}];\n }\n const value = super.defaultValue;\n let defaultValue;\n if (Array.isArray(value)) {\n defaultValue = value;\n }\n else if (value && (typeof value === 'object')) {\n defaultValue = [value];\n }\n else {\n defaultValue = this.emptyValue;\n }\n for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {\n defaultValue.push({});\n }\n return defaultValue;\n }\n set disabled(disabled) {\n super.disabled = disabled;\n lodash_1.default.each(this.refs[`${this.datagridKey}-addRow`], (button) => {\n button.disabled = disabled;\n });\n lodash_1.default.each(this.refs[`${this.datagridKey}-removeRow`], (button) => {\n button.disabled = disabled;\n });\n }\n get disabled() {\n return super.disabled;\n }\n get datagridKey() {\n return `datagrid-${this.key}`;\n }\n get allowReorder() {\n return !this.options.readOnly && lodash_1.default.get(this.component, 'reorder', false);\n }\n get iteratableRows() {\n return this.rows.map((row, index) => ({\n components: row,\n data: this.dataValue[index],\n }));\n }\n isEmpty(value = this.dataValue) {\n var _a;\n const isEmpty = super.isEmpty(value);\n if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {\n return this.components.reduce((isEmpty, component) => {\n return isEmpty && component.isEmpty();\n }, true);\n }\n return isEmpty;\n }\n /**\n * Split rows into chunks.\n * @param {number[]} groups - array of numbers where each item is size of group\n * @param {Array<T>} rows - rows collection\n * @returns {Array<T[]>} - The chunked rows\n */\n getRowChunks(groups, rows) {\n const [, chunks] = groups.reduce(([startIndex, acc], size) => {\n const endIndex = startIndex + size;\n return [endIndex, [...acc, [startIndex, endIndex]]];\n }, [0, []]);\n return chunks.map(range => lodash_1.default.slice(rows, ...range));\n }\n /**\n * Create groups object.\n * Each key in object represents index of first row in group.\n * @returns {object} - The groups object.\n */\n getGroups() {\n const groups = lodash_1.default.get(this.component, 'rowGroups', []);\n const sizes = lodash_1.default.map(groups, 'numberOfRows').slice(0, -1);\n const indexes = sizes.reduce((groupIndexes, size) => {\n const last = groupIndexes[groupIndexes.length - 1];\n return groupIndexes.concat(last + size);\n }, [0]);\n return groups.reduce((gidxs, group, idx) => {\n return Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });\n }, {});\n }\n /**\n * Get group sizes.\n * @returns {number[]} - The array of group sizes.\n */\n getGroupSizes() {\n return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');\n }\n hasRowGroups() {\n return lodash_1.default.get(this, 'component.enableRowGroups', false) && !this.builderMode;\n }\n totalRowsNumber(groups) {\n return lodash_1.default.sum(lodash_1.default.map(groups, 'numberOfRows'));\n }\n setStaticValue(n) {\n this.dataValue = lodash_1.default.range(n).map(() => ({}));\n }\n hasExtraColumn() {\n return (this.hasRemoveButtons() || this.canAddColumn);\n }\n hasRemoveButtons() {\n return !this.builderMode && !this.component.disableAddingRemovingRows &&\n !this.options.readOnly &&\n !this.disabled &&\n this.fullMode &&\n (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n }\n hasTopSubmit() {\n return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);\n }\n hasBottomSubmit() {\n return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);\n }\n get canAddColumn() {\n return this.builderMode && !this.options.design;\n }\n render() {\n const columns = this.getColumns();\n let columnExtra = 0;\n const hasRemoveButtons = this.hasRemoveButtons();\n if (this.component.reorder) {\n columnExtra++;\n }\n if (hasRemoveButtons) {\n columnExtra++;\n }\n if (this.canAddColumn) {\n columnExtra++;\n }\n const colWidth = Math.floor(12 / (columns.length + columnExtra));\n return super.render(this.renderTemplate('datagrid', {\n rows: this.getRows(),\n columns: columns,\n groups: this.hasRowGroups() ? this.getGroups() : [],\n visibleColumns: this.visibleColumns,\n hasToggle: lodash_1.default.get(this, 'component.groupToggle', false),\n hasHeader: this.hasHeader(),\n hasExtraColumn: this.hasExtraColumn(),\n hasAddButton: this.hasAddButton(),\n hasRemoveButtons,\n hasTopSubmit: this.hasTopSubmit(),\n hasBottomSubmit: this.hasBottomSubmit(),\n hasGroups: this.hasRowGroups(),\n numColumns: columns.length + (this.hasExtraColumn() ? 1 : 0),\n datagridKey: this.datagridKey,\n allowReorder: this.allowReorder,\n builder: this.builderMode,\n canAddColumn: this.canAddColumn,\n tabIndex: this.tabIndex,\n placeholder: this.renderTemplate('builderPlaceholder', {\n position: this.componentComponents.length,\n }),\n colWidth: colWidth.toString()\n }));\n }\n getRows() {\n return this.rows.map(row => {\n const components = {};\n lodash_1.default.each(row, (col, key) => {\n components[key] = col.render();\n });\n return components;\n });\n }\n getColumns() {\n return this.columns.filter((comp) => {\n return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);\n });\n }\n hasHeader() {\n return this.component.components.reduce((hasHeader, col) => {\n // If any of the components has a title and it isn't hidden, display the header.\n return hasHeader || ((col.label || col.title) && !col.hideLabel);\n }, false);\n }\n attach(element) {\n this.loadRefs(element, {\n [`${this.datagridKey}-row`]: 'multiple',\n [`${this.datagridKey}-tbody`]: 'single',\n [`${this.datagridKey}-addRow`]: 'multiple',\n [`${this.datagridKey}-removeRow`]: 'multiple',\n [`${this.datagridKey}-group-header`]: 'multiple',\n [this.datagridKey]: 'multiple',\n });\n if (this.allowReorder) {\n this.refs[`${this.datagridKey}-row`].forEach((row, index) => {\n row.dragInfo = { index };\n });\n this.dragulaReady.then((dragula) => {\n // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous\n // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).\n // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must\n // be saved in this.dragula and have its container contents reset if it exists\n if (this.dragula && this.dragula.containers) {\n this.dragula.containers = [];\n }\n this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {\n moves: (_draggedElement, _oldParent, clickedElement) => {\n const clickedElementKey = clickedElement.getAttribute('data-key');\n const oldParentKey = _oldParent.getAttribute('data-key');\n //Check if the clicked button belongs to that container, if false, it belongs to the nested container\n if (oldParentKey === clickedElementKey) {\n return clickedElement.classList.contains('formio-drag-button');\n }\n }\n }).on('drop', this.onReorder.bind(this))\n .on('cloned', this.onCloned.bind(this));\n });\n }\n this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {\n this.addEventListener(addButton, 'click', this.addRow.bind(this));\n });\n this.refs[`${this.datagridKey}-removeRow`].forEach((removeButton, index) => {\n this.addEventListener(removeButton, 'click', this.removeRow.bind(this, index));\n });\n if (this.hasRowGroups()) {\n this.refs.chunks = this.getRowChunks(this.getGroupSizes(), this.refs[`${this.datagridKey}-row`]);\n this.refs[`${this.datagridKey}-group-header`].forEach((header, index) => {\n this.addEventListener(header, 'click', () => this.toggleGroup(header, index));\n });\n }\n const columns = this.getColumns();\n const rowLength = columns.length;\n this.rows.forEach((row, rowIndex) => {\n let columnIndex = 0;\n columns.forEach((col) => {\n this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());\n columnIndex++;\n });\n });\n return super.attach(element);\n }\n getComponentsContainer() {\n return this.component.components;\n }\n /**\n * Reorder values in array based on the old and new position\n * @param {any} valuesArr - An array of values.\n * @param {number} oldPosition - The index of the value in array before reordering.\n * @param {number} newPosition - The index of the value in array after reordering.\n * @param {boolean|any} movedBelow - Whether or not the value is moved below.\n * @returns {void}\n */\n reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {\n if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {\n return;\n }\n const draggedRowData = valuesArr[oldPosition];\n //insert element at new position\n valuesArr.splice(newPosition, 0, draggedRowData);\n //remove element from old position (if was moved above, after insertion it's at +1 index)\n valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n }\n onReorder(element, _target, _source, sibling) {\n if (!element.dragInfo || (sibling && !sibling.dragInfo)) {\n console.warn('There is no Drag Info available for either dragged or sibling element');\n return;\n }\n const oldPosition = element.dragInfo.index;\n //should drop at next sibling position; no next sibling means drop to last position\n const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;\n const movedBelow = newPosition > oldPosition;\n const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);\n this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);\n //reorder select data\n this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);\n // When components are reordered we need to set the dataGrid and form pristine properties to false\n this.root.pristine = false;\n this.pristine = false;\n //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)\n this.setValue(dataValue, { isReordered: true });\n this.rebuild();\n }\n onCloned(el, original) {\n if (el && el.children && original && original.children) {\n lodash_1.default.each(original.children, (child, index) => {\n const styles = getComputedStyle(child, null);\n if (styles.cssText !== '') {\n el.children[index].style.cssText = styles.cssText;\n }\n else {\n const cssText = Object.values(styles).reduce((css, propertyName) => {\n return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;\n }, '');\n el.children[index].style.cssText = cssText;\n }\n });\n }\n }\n focusOnNewRowElement(row) {\n Object.keys(row).find((key) => {\n const element = row[key].element;\n if (element) {\n const focusableElements = (0, utils_1.getFocusableElements)(element);\n if (focusableElements && focusableElements[0]) {\n focusableElements[0].focus();\n return true;\n }\n }\n return false;\n });\n }\n addRow() {\n const index = this.rows.length;\n // Handle length mismatch between rows and dataValue\n if (this.dataValue.length === index) {\n this.dataValue.push({});\n }\n let row;\n const dataValue = this.dataValue;\n const defaultValue = this.defaultValue;\n if (this.initEmpty && defaultValue[index]) {\n row = defaultValue[index];\n dataValue[index] = row;\n }\n else {\n row = dataValue[index];\n }\n this.rows[index] = this.createRowComponents(row, index);\n this.emit('dataGridAddRow', {\n component: this.component,\n row\n });\n this.checkConditions();\n this.triggerChange();\n this.redraw().then(() => {\n this.focusOnNewRowElement(this.rows[index]);\n });\n }\n updateComponentsRowIndex(components, rowIndex) {\n components.forEach((component, colIndex) => {\n var _a;\n if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {\n const newName = `[${this.key}][${rowIndex}]`;\n component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);\n }\n component.rowIndex = rowIndex;\n component.row = `${rowIndex}-${colIndex}`;\n component.path = Components_1.default.getComponentPath(component);\n });\n }\n updateRowsComponents(rowIndex) {\n this.rows.slice(rowIndex).forEach((row, index) => {\n this.updateComponentsRowIndex(Object.values(row), rowIndex + index);\n });\n }\n removeRow(index) {\n const makeEmpty = index === 0 && this.rows.length === 1;\n const flags = { isReordered: !makeEmpty, resetValue: makeEmpty, modified: true };\n this.splice(index, flags);\n this.emit('dataGridDeleteRow', { index });\n const [row] = this.rows.splice(index, 1);\n this.removeSubmissionMetadataRow(index);\n this.removeRowComponents(row);\n this.updateRowsComponents(index);\n this.setValue(this.dataValue, flags);\n this.redraw();\n }\n removeRowComponents(row) {\n lodash_1.default.each(row, (component) => this.removeComponent(component));\n }\n getRowValues() {\n return this.dataValue;\n }\n setRowComponentsData(rowIndex, rowData) {\n lodash_1.default.each(this.rows[rowIndex], (component) => {\n component.data = rowData;\n });\n }\n createRows(init, rebuild) {\n let added = false;\n const rowValues = this.getRowValues();\n // Create any missing rows.\n rowValues.forEach((row, index) => {\n if (!rebuild && this.rows[index]) {\n this.setRowComponentsData(index, row);\n }\n else {\n if (this.rows[index]) {\n this.removeRowComponents(this.rows[index]);\n }\n this.rows[index] = this.createRowComponents(row, index);\n added = true;\n }\n });\n // Delete any extra rows.\n const removedRows = this.rows.splice(rowValues.length);\n const removed = !!removedRows.length;\n // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)\n if (removed) {\n removedRows.forEach(row => this.removeRowComponents(row));\n }\n if (!init && (added || removed)) {\n this.redraw();\n }\n return added;\n }\n createRowComponents(row, rowIndex) {\n const components = {};\n this.tabIndex = 0;\n this.component.components.map((col, colIndex) => {\n const options = lodash_1.default.clone(this.options);\n options.name += `[${rowIndex}]`;\n options.row = `${rowIndex}-${colIndex}`;\n let columnComponent;\n if (this.builderMode) {\n col.id = col.id + rowIndex;\n columnComponent = col;\n }\n else {\n columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });\n }\n const component = this.createComponent(columnComponent, options, row);\n component.parentDisabled = !!this.disabled;\n component.rowIndex = rowIndex;\n component.inDataGrid = true;\n if (columnComponent.tabindex &&\n parseInt(columnComponent.tabindex) > this.tabIndex) {\n this.tabIndex = parseInt(columnComponent.tabindex);\n }\n components[col.key] = component;\n });\n return components;\n }\n checkColumns(data, flags = {}) {\n data = data || this.rootValue;\n let show = false;\n if (!this.rows || !this.rows.length) {\n return { rebuild: false, show: false };\n }\n if (this.builderMode) {\n return { rebuild: false, show: true };\n }\n const visibility = {};\n let logicRebuild = false;\n const dataValue = this.dataValue;\n this.rows.forEach((row, rowIndex) => {\n lodash_1.default.each(row, (col, key) => {\n if (col && (typeof col.checkConditions === 'function')) {\n const firstRowCheck = visibility[key] === undefined;\n visibility[key] = !!visibility[key] ||\n (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');\n if (col.component.logic && firstRowCheck) {\n const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);\n const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {\n // Don't compare columns by their auto-generated ids.\n if (key === 'id') {\n return true;\n }\n });\n if (!equalColumns) {\n logicRebuild = true;\n this.columns[compIndex] = col.component;\n }\n }\n }\n });\n });\n const rebuild = !lodash_1.default.isEqual(visibility, this.visibleColumns) || logicRebuild;\n lodash_1.default.each(visibility, (col) => {\n show |= col;\n });\n this.visibleColumns = visibility;\n return { rebuild, show };\n }\n checkComponentConditions(data, flags, row) {\n const isVisible = this.visible;\n // If table isn't visible, don't bother calculating columns.\n if (!super.checkComponentConditions(data, flags, row)) {\n return false;\n }\n const { rebuild, show } = this.checkColumns(data, flags);\n // Check if a rebuild is needed or the visibility changes.\n if (rebuild || !isVisible) {\n this.createRows(false, rebuild);\n }\n // Return if this table should show.\n return show;\n }\n setValue(value, flags = {}) {\n if (!value) {\n this.dataValue = this.defaultValue;\n this.createRows();\n return false;\n }\n if (!Array.isArray(value)) {\n if (typeof value === 'object') {\n value = [value];\n }\n else {\n this.createRows();\n value = [{}];\n }\n }\n // Make sure we always have at least one row.\n // NOTE: Removing this will break \"Public Configurations\" in portal. ;)\n if (value && !value.length && !this.initEmpty) {\n value.push({});\n }\n const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);\n const changed = this.hasChanged(value, this.dataValue);\n this.dataValue = value;\n if (this.initRows || isSettingSubmission ||\n (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {\n if (!this.createRows() && changed) {\n this.redraw();\n }\n }\n if (this.componentModal && isSettingSubmission) {\n this.componentModal.setValue(value);\n }\n this.rows.forEach((row, rowIndex) => {\n if (value.length <= rowIndex) {\n return;\n }\n lodash_1.default.each(row, (col) => {\n col.rowIndex = rowIndex;\n this.setNestedValue(col, value[rowIndex], flags);\n });\n });\n this.updateOnChange(flags, changed);\n return changed;\n }\n restoreComponentsContext() {\n this.rows.forEach((row, index) => lodash_1.default.forIn(row, (component) => component.data = this.dataValue[index]));\n }\n getComponent(path, fn) {\n path = Array.isArray(path) ? path : [path];\n const [key, ...remainingPath] = path;\n let result = [];\n if (lodash_1.default.isNumber(key) && remainingPath.length) {\n const compKey = remainingPath.pop();\n result = this.rows[key][compKey];\n // If the component is inside a Layout Component, try to find it among all the row's components\n if (!result) {\n Object.entries(this.rows[key]).forEach(([, comp]) => {\n if ('getComponent' in comp) {\n const possibleResult = comp.getComponent([compKey], fn);\n if (possibleResult) {\n result = possibleResult;\n }\n }\n });\n }\n if (result && lodash_1.default.isFunction(fn)) {\n fn(result, this.getComponents());\n }\n if (remainingPath.length && 'getComponent' in result) {\n return result.getComponent(remainingPath, fn);\n }\n return result;\n }\n if (!lodash_1.default.isString(key)) {\n return result;\n }\n this.everyComponent((component, components) => {\n if (component.component.key === key) {\n let comp = component;\n if (remainingPath.length > 0 && 'getComponent' in component) {\n comp = component.getComponent(remainingPath, fn);\n }\n else if (fn) {\n fn(component, components);\n }\n result = result.concat(comp);\n }\n });\n return result.length > 0 ? result : null;\n }\n toggleGroup(element, index) {\n element.classList.toggle('collapsed');\n lodash_1.default.each(this.refs.chunks[index], row => {\n row.classList.toggle('hidden');\n });\n }\n}\nexports[\"default\"] = DataGridComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datagrid/DataGrid.js?");
6051
6051
 
6052
6052
  /***/ }),
6053
6053
 
@@ -7213,7 +7213,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
7213
7213
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
7214
7214
 
7215
7215
  "use strict";
7216
- eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst choices_js_1 = __importDefault(__webpack_require__(/*! @formio/choices.js */ \"./node_modules/@formio/choices.js/public/assets/scripts/choices.js\"));\nclass TagsComponent extends Input_1.default {\n static schema(...extend) {\n return Input_1.default.schema({\n type: 'tags',\n label: 'Tags',\n key: 'tags',\n delimeter: ',',\n storeas: 'string',\n maxTags: 0\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Tags',\n icon: 'tags',\n group: 'advanced',\n documentation: '/userguide/form-building/advanced-components#tags',\n weight: 30,\n schema: TagsComponent.schema()\n };\n }\n static get serverConditionSettings() {\n return TagsComponent.conditionOperatorsSettings;\n }\n static get conditionOperatorsSettings() {\n return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'] });\n }\n static savedValueTypes(schema) {\n schema = schema || {};\n return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string];\n }\n init() {\n super.init();\n }\n get emptyValue() {\n return (this.component.storeas === 'string') ? '' : [];\n }\n get defaultSchema() {\n return TagsComponent.schema();\n }\n get inputInfo() {\n const info = super.inputInfo;\n info.type = 'input';\n info.attr.type = 'text';\n info.changeEvent = 'change';\n return info;\n }\n get delimiter() {\n return this.component.delimeter || ',';\n }\n attachElement(element, index) {\n super.attachElement(element, index);\n if (!element) {\n return;\n }\n if (this.i18next) {\n element.setAttribute('dir', this.i18next.dir());\n }\n if (this.choices) {\n this.choices.destroy();\n }\n if (!choices_js_1.default) {\n return;\n }\n const hasPlaceholder = !!this.component.placeholder;\n this.choices = new choices_js_1.default(element, {\n delimiter: this.delimiter,\n editItems: true,\n allowHTML: true,\n maxItemCount: this.component.maxTags,\n removeItemButton: true,\n duplicateItemsAllowed: false,\n shadowRoot: this.root ? this.root.shadowRoot : null,\n placeholder: hasPlaceholder,\n placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,\n });\n this.choices.itemList.element.tabIndex = element.tabIndex;\n this.addEventListener(this.choices.input.element, 'blur', () => {\n // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked\n element.dispatchEvent(new Event('blur'));\n const value = this.choices.input.value;\n const maxTagsNumber = this.component.maxTags;\n const valuesCount = this.choices.getValue(true).length;\n const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());\n if (value) {\n if (maxTagsNumber && valuesCount === maxTagsNumber) {\n this.choices.addItems = false;\n this.choices.clearInput();\n }\n else if (isRepeatedValue) {\n this.choices.clearInput();\n }\n else {\n this.choices.setValue([value]);\n this.choices.clearInput();\n this.choices.hideDropdown(true);\n this.updateValue(null, {\n modified: true\n });\n }\n }\n });\n }\n detach() {\n if (this.choices) {\n this.choices.destroy();\n this.choices = null;\n }\n super.detach();\n }\n normalizeValue(value) {\n if (this.component.storeas === 'string' && Array.isArray(value)) {\n return value.join(this.delimiter);\n }\n else if (this.component.storeas === 'array' && typeof value === 'string') {\n return value.split(this.delimiter).filter(result => result);\n }\n return value;\n }\n setValue(value, flags = {}) {\n const changed = super.setValue(value, flags);\n if (this.choices) {\n let dataValue = this.dataValue;\n this.choices.removeActiveItems();\n if (dataValue) {\n if (typeof dataValue === 'string') {\n dataValue = dataValue.split(this.delimiter).filter(result => result);\n }\n const value = Array.isArray(dataValue) ? dataValue : [dataValue];\n this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));\n }\n }\n return changed;\n }\n set disabled(disabled) {\n super.disabled = disabled;\n if (!this.choices) {\n return;\n }\n if (disabled) {\n this.choices.disable();\n }\n else {\n this.choices.enable();\n }\n }\n get disabled() {\n return super.disabled;\n }\n focus() {\n if (this.refs.input && this.refs.input.length) {\n this.refs.input[0].parentNode.lastChild.focus();\n }\n }\n getValueAsString(value) {\n if (!value) {\n return '';\n }\n if (Array.isArray(value)) {\n return value.join(`${this.delimiter || ','} `);\n }\n const stringValue = value.toString();\n return this.sanitize(stringValue, this.shouldSanitizeValue);\n }\n}\nexports[\"default\"] = TagsComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/tags/Tags.js?");
7216
+ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst choices_js_1 = __importDefault(__webpack_require__(/*! @formio/choices.js */ \"./node_modules/@formio/choices.js/public/assets/scripts/choices.js\"));\nclass TagsComponent extends Input_1.default {\n static schema(...extend) {\n return Input_1.default.schema({\n type: 'tags',\n label: 'Tags',\n key: 'tags',\n delimeter: ',',\n storeas: 'string',\n maxTags: 0\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Tags',\n icon: 'tags',\n group: 'advanced',\n documentation: '/userguide/form-building/advanced-components#tags',\n weight: 30,\n schema: TagsComponent.schema()\n };\n }\n static get serverConditionSettings() {\n return TagsComponent.conditionOperatorsSettings;\n }\n static get conditionOperatorsSettings() {\n return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'] });\n }\n static savedValueTypes(schema) {\n schema = schema || {};\n return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string];\n }\n init() {\n super.init();\n }\n get emptyValue() {\n return (this.component.storeas === 'string') ? '' : [];\n }\n get defaultSchema() {\n return TagsComponent.schema();\n }\n get inputInfo() {\n const info = super.inputInfo;\n info.type = 'input';\n info.attr.type = 'text';\n info.changeEvent = 'change';\n return info;\n }\n get delimiter() {\n return this.component.delimeter || ',';\n }\n attachElement(element, index) {\n super.attachElement(element, index);\n if (!element) {\n return;\n }\n if (this.i18next) {\n element.setAttribute('dir', this.i18next.dir());\n }\n if (this.choices) {\n this.choices.destroy();\n }\n if (!choices_js_1.default) {\n return;\n }\n const hasPlaceholder = !!this.component.placeholder;\n this.choices = new choices_js_1.default(element, {\n delimiter: this.delimiter,\n editItems: true,\n allowHTML: true,\n maxItemCount: this.component.maxTags,\n removeItemButton: true,\n duplicateItemsAllowed: false,\n shadowRoot: this.root ? this.root.shadowRoot : null,\n placeholder: hasPlaceholder,\n placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,\n });\n this.choices.itemList.element.tabIndex = element.tabIndex;\n this.addEventListener(this.choices.input.element, 'blur', () => {\n // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked\n element.dispatchEvent(new Event('blur'));\n const value = this.choices.input.value;\n const maxTagsNumber = this.component.maxTags;\n const valuesCount = this.choices.getValue(true).length;\n const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());\n if (value) {\n if (maxTagsNumber && valuesCount === maxTagsNumber) {\n this.choices.addItems = false;\n this.choices.clearInput();\n }\n else if (isRepeatedValue) {\n this.choices.clearInput();\n }\n else {\n this.choices.setValue([value]);\n this.choices.clearInput();\n this.choices.hideDropdown(true);\n this.updateValue(null, {\n modified: true\n });\n }\n }\n });\n }\n detach() {\n if (this.choices) {\n this.choices.destroy();\n this.choices = null;\n }\n super.detach();\n }\n normalizeValue(value) {\n if (this.component.storeas === 'string' && Array.isArray(value)) {\n return super.normalizeValue(value.join(this.delimiter));\n }\n else if (this.component.storeas === 'array' && typeof value === 'string') {\n return super.normalizeValue(value.split(this.delimiter).filter(result => result));\n }\n return super.normalizeValue(value);\n }\n setValue(value, flags = {}) {\n const changed = super.setValue(value, flags);\n if (this.choices) {\n let dataValue = this.dataValue;\n this.choices.removeActiveItems();\n if (dataValue) {\n if (typeof dataValue === 'string') {\n dataValue = dataValue.split(this.delimiter).filter(result => result);\n }\n const value = Array.isArray(dataValue) ? dataValue : [dataValue];\n this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));\n }\n }\n return changed;\n }\n set disabled(disabled) {\n super.disabled = disabled;\n if (!this.choices) {\n return;\n }\n if (disabled) {\n this.choices.disable();\n }\n else {\n this.choices.enable();\n }\n }\n get disabled() {\n return super.disabled;\n }\n focus() {\n if (this.refs.input && this.refs.input.length) {\n this.refs.input[0].parentNode.lastChild.focus();\n }\n }\n getValueAsString(value) {\n if (!value) {\n return '';\n }\n if (Array.isArray(value)) {\n return value.join(`${this.delimiter || ','} `);\n }\n const stringValue = value.toString();\n return this.sanitize(stringValue, this.shouldSanitizeValue);\n }\n}\nexports[\"default\"] = TagsComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/tags/Tags.js?");
7217
7217
 
7218
7218
  /***/ }),
7219
7219