@formio/js 5.0.0-rc.17 → 5.0.0-rc.18

package/dist/formio.form.min.js.LICENSE.txt

@@ -24,7 +24,7 @@
     MIT License: http://getify.mit-license.org
 */
 
-/*! formiojs v5.0.0-rc.17 | https://unpkg.com/formiojs@5.0.0-rc.17/LICENSE.txt */
+/*! formiojs v5.0.0-rc.18 | https://unpkg.com/formiojs@5.0.0-rc.18/LICENSE.txt */
 
 /**
  * @license

package/dist/formio.full.js

@@ -5193,7 +5193,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst native_promise_only_1 = __importDefault(__webpack_require__(/*! native-promise-only */ \"./node_modules/native-promise-only/lib/npo.src.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 native_promise_only_1.default.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.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 && 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?");
+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 native_promise_only_1 = __importDefault(__webpack_require__(/*! native-promise-only */ \"./node_modules/native-promise-only/lib/npo.src.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 native_promise_only_1.default.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 && 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?");
 
 /***/ }),
 
@@ -6920,7 +6920,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst signature_pad_1 = __importDefault(__webpack_require__(/*! signature_pad */ \"./node_modules/signature_pad/dist/signature_pad.js\"));\nconst resize_observer_polyfill_1 = __importDefault(__webpack_require__(/*! resize-observer-polyfill */ \"./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass SignatureComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'signature',\n            label: 'Signature',\n            key: 'signature',\n            footer: 'Sign above',\n            width: '100%',\n            height: '150px',\n            penColor: 'black',\n            backgroundColor: 'rgb(245,245,235)',\n            minWidth: '0.5',\n            maxWidth: '2.5',\n            keepOverlayRatio: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Signature',\n            group: 'advanced',\n            icon: 'pencil',\n            weight: 120,\n            documentation: '/userguide/form-building/form-components#signature',\n            schema: SignatureComponent.schema()\n        };\n    }\n    init() {\n        var _a, _b, _c, _d, _e;\n        super.init();\n        this.currentWidth = 0;\n        this.scale = 1;\n        this.ratio = 1;\n        if (!this.component.width) {\n            this.component.width = '100%';\n        }\n        if (!this.component.height) {\n            this.component.height = '200px';\n        }\n        if (this.component.keepOverlayRatio\n            && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.display) === 'pdf'\n            && ((_b = this.component.overlay) === null || _b === void 0 ? void 0 : _b.width)\n            && ((_c = this.component.overlay) === null || _c === void 0 ? void 0 : _c.height)) {\n            this.ratio = ((_d = this.component.overlay) === null || _d === void 0 ? void 0 : _d.width) / ((_e = this.component.overlay) === null || _e === void 0 ? void 0 : _e.height);\n            this.component.width = '100%';\n            this.component.height = 'auto';\n        }\n    }\n    get emptyValue() {\n        return '';\n    }\n    get defaultSchema() {\n        return SignatureComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        return info;\n    }\n    get className() {\n        return `${super.className} signature-pad`;\n    }\n    labelIsHidden() {\n        return this.component.hideLabel;\n    }\n    setValue(value, flags = {}) {\n        const changed = super.setValue(value, flags);\n        if (this.refs.signatureImage && (this.options.readOnly || this.disabled)) {\n            this.refs.signatureImage.setAttribute('src', value);\n            this.showCanvas(false);\n        }\n        if (this.signaturePad) {\n            if (!value) {\n                this.signaturePad.clear();\n            }\n            else if (changed) {\n                this.triggerChange();\n            }\n        }\n        if (this.signaturePad && this.dataValue && this.signaturePad.isEmpty()) {\n            this.setDataToSigaturePad();\n        }\n        return changed;\n    }\n    showCanvas(show) {\n        if (show) {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'inherit';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'none';\n            }\n        }\n        else {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'none';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'inherit';\n                this.refs.signatureImage.style.maxHeight = '100%';\n            }\n        }\n    }\n    onDisabled() {\n        this.showCanvas(!super.disabled);\n        if (this.signaturePad) {\n            if (super.disabled) {\n                this.signaturePad.off();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.add('disabled');\n                }\n                if (this.refs.signatureImage && this.dataValue) {\n                    this.refs.signatureImage.setAttribute('src', this.dataValue);\n                }\n            }\n            else {\n                this.signaturePad.on();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.remove('disabled');\n                }\n            }\n        }\n    }\n    checkSize(force, scale) {\n        if (this.refs.padBody && (force || this.refs.padBody && this.refs.padBody.offsetWidth !== this.currentWidth)) {\n            this.scale = force ? scale : this.scale;\n            this.currentWidth = this.refs.padBody.offsetWidth;\n            const width = this.currentWidth * this.scale;\n            this.refs.canvas.width = width;\n            const height = this.ratio ? width / this.ratio : this.refs.padBody.offsetHeight * this.scale;\n            const maxHeight = this.refs.padBody.offsetHeight * this.scale;\n            this.refs.canvas.height = height > maxHeight ? maxHeight : height;\n            this.refs.canvas.style.maxWidth = `${this.currentWidth * this.scale}px`;\n            this.refs.canvas.style.maxHeight = `${maxHeight}px`;\n            const ctx = this.refs.canvas.getContext('2d');\n            ctx.setTransform(1, 0, 0, 1, 0, 0);\n            ctx.scale((1 / this.scale), (1 / this.scale));\n            ctx.fillStyle = this.signaturePad.backgroundColor;\n            ctx.fillRect(0, 0, this.refs.canvas.width, this.refs.canvas.height);\n            this.signaturePad.clear();\n            if (this.dataValue) {\n                this.setDataToSigaturePad();\n            }\n            this.showCanvas(true);\n        }\n    }\n    renderElement(value, index) {\n        return this.renderTemplate('signature', {\n            element: super.renderElement(value, index),\n            required: lodash_1.default.get(this.component, 'validate.required', false),\n        });\n    }\n    get hasModalSaveButton() {\n        return false;\n    }\n    getModalPreviewTemplate() {\n        return this.renderTemplate('modalPreview', {\n            previewText: this.dataValue ?\n                `<img src=${this.dataValue} ref='openModal' style=\"width: 100%;height: 100%;\" />` :\n                this.t('Click to Sign')\n        });\n    }\n    attach(element) {\n        this.loadRefs(element, { canvas: 'single', refresh: 'single', padBody: 'single', signatureImage: 'single' });\n        const superAttach = super.attach(element);\n        if (this.refs.refresh && this.options.readOnly) {\n            this.refs.refresh.classList.add('disabled');\n        }\n        // Create the signature pad.\n        if (this.refs.canvas) {\n            this.signaturePad = new signature_pad_1.default(this.refs.canvas, {\n                minWidth: this.component.minWidth,\n                maxWidth: this.component.maxWidth,\n                penColor: this.component.penColor,\n                backgroundColor: this.component.backgroundColor\n            });\n            this.signaturePad.addEventListener('endStroke', () => this.setValue(this.signaturePad.toDataURL()));\n            this.refs.signatureImage.setAttribute('src', this.signaturePad.toDataURL());\n            this.onDisabled();\n            // Ensure the signature is always the size of its container.\n            if (this.refs.padBody) {\n                if (!this.refs.padBody.style.maxWidth) {\n                    this.refs.padBody.style.maxWidth = '100%';\n                }\n                if (!this.builderMode && !this.options.preview) {\n                    this.observer = new resize_observer_polyfill_1.default(() => {\n                        this.checkSize();\n                    });\n                    this.observer.observe(this.refs.padBody);\n                }\n                this.addEventListener(window, 'resize', lodash_1.default.debounce(() => this.checkSize(), 10));\n                setTimeout(function checkWidth() {\n                    if (this.refs.padBody && this.refs.padBody.offsetWidth) {\n                        this.checkSize();\n                    }\n                    else {\n                        setTimeout(checkWidth.bind(this), 20);\n                    }\n                }.bind(this), 20);\n            }\n        }\n        this.addEventListener(this.refs.refresh, 'click', (event) => {\n            event.preventDefault();\n            this.showCanvas(true);\n            this.signaturePad.clear();\n            this.setValue(this.defaultValue);\n        });\n        this.setValue(this.dataValue);\n        return superAttach;\n    }\n    /* eslint-enable max-statements */\n    detach() {\n        if (this.observer) {\n            this.observer.disconnect();\n            this.observer = null;\n        }\n        if (this.signaturePad) {\n            this.signaturePad.off();\n        }\n        this.signaturePad = null;\n        this.currentWidth = 0;\n        super.detach();\n    }\n    getValueAsString(value) {\n        return value ? 'Yes' : 'No';\n    }\n    focus() {\n        this.refs.padBody.focus();\n    }\n    setDataToSigaturePad() {\n        this.signaturePad.fromDataURL(this.dataValue, {\n            ratio: 1,\n            width: this.refs.canvas.width,\n            height: this.refs.canvas.height,\n        });\n    }\n}\nexports[\"default\"] = SignatureComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/signature/Signature.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst signature_pad_1 = __importDefault(__webpack_require__(/*! signature_pad */ \"./node_modules/signature_pad/dist/signature_pad.js\"));\nconst resize_observer_polyfill_1 = __importDefault(__webpack_require__(/*! resize-observer-polyfill */ \"./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass SignatureComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'signature',\n            label: 'Signature',\n            key: 'signature',\n            footer: 'Sign above',\n            width: '100%',\n            height: '150px',\n            penColor: 'black',\n            backgroundColor: 'rgb(245,245,235)',\n            minWidth: '0.5',\n            maxWidth: '2.5',\n            keepOverlayRatio: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Signature',\n            group: 'advanced',\n            icon: 'pencil',\n            weight: 120,\n            documentation: '/developers/integrations/esign/esign-integrations#signature-component',\n            schema: SignatureComponent.schema()\n        };\n    }\n    init() {\n        var _a, _b, _c, _d, _e;\n        super.init();\n        this.currentWidth = 0;\n        this.scale = 1;\n        this.ratio = 1;\n        if (!this.component.width) {\n            this.component.width = '100%';\n        }\n        if (!this.component.height) {\n            this.component.height = '200px';\n        }\n        if (this.component.keepOverlayRatio\n            && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.display) === 'pdf'\n            && ((_b = this.component.overlay) === null || _b === void 0 ? void 0 : _b.width)\n            && ((_c = this.component.overlay) === null || _c === void 0 ? void 0 : _c.height)) {\n            this.ratio = ((_d = this.component.overlay) === null || _d === void 0 ? void 0 : _d.width) / ((_e = this.component.overlay) === null || _e === void 0 ? void 0 : _e.height);\n            this.component.width = '100%';\n            this.component.height = 'auto';\n        }\n    }\n    get emptyValue() {\n        return '';\n    }\n    get defaultSchema() {\n        return SignatureComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        return info;\n    }\n    get className() {\n        return `${super.className} signature-pad`;\n    }\n    labelIsHidden() {\n        return this.component.hideLabel;\n    }\n    setValue(value, flags = {}) {\n        const changed = super.setValue(value, flags);\n        if (this.refs.signatureImage && (this.options.readOnly || this.disabled)) {\n            this.refs.signatureImage.setAttribute('src', value);\n            this.showCanvas(false);\n        }\n        if (this.signaturePad) {\n            if (!value) {\n                this.signaturePad.clear();\n            }\n            else if (changed) {\n                this.triggerChange();\n            }\n        }\n        if (this.signaturePad && this.dataValue && this.signaturePad.isEmpty()) {\n            this.setDataToSigaturePad();\n        }\n        return changed;\n    }\n    showCanvas(show) {\n        if (show) {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'inherit';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'none';\n            }\n        }\n        else {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'none';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'inherit';\n                this.refs.signatureImage.style.maxHeight = '100%';\n            }\n        }\n    }\n    onDisabled() {\n        this.showCanvas(!super.disabled);\n        if (this.signaturePad) {\n            if (super.disabled) {\n                this.signaturePad.off();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.add('disabled');\n                }\n                if (this.refs.signatureImage && this.dataValue) {\n                    this.refs.signatureImage.setAttribute('src', this.dataValue);\n                }\n            }\n            else {\n                this.signaturePad.on();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.remove('disabled');\n                }\n            }\n        }\n    }\n    checkSize(force, scale) {\n        if (this.refs.padBody && (force || this.refs.padBody && this.refs.padBody.offsetWidth !== this.currentWidth)) {\n            this.scale = force ? scale : this.scale;\n            this.currentWidth = this.refs.padBody.offsetWidth;\n            const width = this.currentWidth * this.scale;\n            this.refs.canvas.width = width;\n            const height = this.ratio ? width / this.ratio : this.refs.padBody.offsetHeight * this.scale;\n            const maxHeight = this.refs.padBody.offsetHeight * this.scale;\n            this.refs.canvas.height = height > maxHeight ? maxHeight : height;\n            this.refs.canvas.style.maxWidth = `${this.currentWidth * this.scale}px`;\n            this.refs.canvas.style.maxHeight = `${maxHeight}px`;\n            const ctx = this.refs.canvas.getContext('2d');\n            ctx.setTransform(1, 0, 0, 1, 0, 0);\n            ctx.scale((1 / this.scale), (1 / this.scale));\n            ctx.fillStyle = this.signaturePad.backgroundColor;\n            ctx.fillRect(0, 0, this.refs.canvas.width, this.refs.canvas.height);\n            this.signaturePad.clear();\n            if (this.dataValue) {\n                this.setDataToSigaturePad();\n            }\n            this.showCanvas(true);\n        }\n    }\n    renderElement(value, index) {\n        return this.renderTemplate('signature', {\n            element: super.renderElement(value, index),\n            required: lodash_1.default.get(this.component, 'validate.required', false),\n        });\n    }\n    get hasModalSaveButton() {\n        return false;\n    }\n    getModalPreviewTemplate() {\n        return this.renderTemplate('modalPreview', {\n            previewText: this.dataValue ?\n                `<img src=${this.dataValue} ref='openModal' style=\"width: 100%;height: 100%;\" />` :\n                this.t('Click to Sign')\n        });\n    }\n    attach(element) {\n        this.loadRefs(element, { canvas: 'single', refresh: 'single', padBody: 'single', signatureImage: 'single' });\n        const superAttach = super.attach(element);\n        if (this.refs.refresh && this.options.readOnly) {\n            this.refs.refresh.classList.add('disabled');\n        }\n        // Create the signature pad.\n        if (this.refs.canvas) {\n            this.signaturePad = new signature_pad_1.default(this.refs.canvas, {\n                minWidth: this.component.minWidth,\n                maxWidth: this.component.maxWidth,\n                penColor: this.component.penColor,\n                backgroundColor: this.component.backgroundColor\n            });\n            this.signaturePad.addEventListener('endStroke', () => this.setValue(this.signaturePad.toDataURL()));\n            this.refs.signatureImage.setAttribute('src', this.signaturePad.toDataURL());\n            this.onDisabled();\n            // Ensure the signature is always the size of its container.\n            if (this.refs.padBody) {\n                if (!this.refs.padBody.style.maxWidth) {\n                    this.refs.padBody.style.maxWidth = '100%';\n                }\n                if (!this.builderMode && !this.options.preview) {\n                    this.observer = new resize_observer_polyfill_1.default(() => {\n                        this.checkSize();\n                    });\n                    this.observer.observe(this.refs.padBody);\n                }\n                this.addEventListener(window, 'resize', lodash_1.default.debounce(() => this.checkSize(), 10));\n                setTimeout(function checkWidth() {\n                    if (this.refs.padBody && this.refs.padBody.offsetWidth) {\n                        this.checkSize();\n                    }\n                    else {\n                        setTimeout(checkWidth.bind(this), 20);\n                    }\n                }.bind(this), 20);\n            }\n        }\n        this.addEventListener(this.refs.refresh, 'click', (event) => {\n            event.preventDefault();\n            this.showCanvas(true);\n            this.signaturePad.clear();\n            this.setValue(this.defaultValue);\n        });\n        this.setValue(this.dataValue);\n        return superAttach;\n    }\n    /* eslint-enable max-statements */\n    detach() {\n        if (this.observer) {\n            this.observer.disconnect();\n            this.observer = null;\n        }\n        if (this.signaturePad) {\n            this.signaturePad.off();\n        }\n        this.signaturePad = null;\n        this.currentWidth = 0;\n        super.detach();\n    }\n    getValueAsString(value) {\n        return value ? 'Yes' : 'No';\n    }\n    focus() {\n        this.refs.padBody.focus();\n    }\n    setDataToSigaturePad() {\n        this.signaturePad.fromDataURL(this.dataValue, {\n            ratio: 1,\n            width: this.refs.canvas.width,\n            height: this.refs.canvas.height,\n        });\n    }\n}\nexports[\"default\"] = SignatureComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/signature/Signature.js?");
 
 /***/ }),
 
@@ -10133,7 +10133,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Formio = void 0;\nconst core_1 = __webpack_require__(/*! @formio/core */ \"./node_modules/@formio/core/lib/index.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return core_1.Formio; } }));\nconst CDN_1 = __importDefault(__webpack_require__(/*! ./CDN */ \"./lib/cjs/CDN.js\"));\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\ncore_1.Formio.cdn = new CDN_1.default();\ncore_1.Formio.Providers = providers_1.default;\ncore_1.Formio.version = '5.0.0-rc.17';\nconst isNil = (val) => val === null || val === undefined;\ncore_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback) {\n    const requestArgs = {\n        provider: storage,\n        method: 'upload',\n        file: file,\n        fileName: fileName,\n        dir: dir\n    };\n    fileKey = fileKey || 'file';\n    const request = core_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return core_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    if (uploadStartCallback) {\n                        uploadStartCallback();\n                    }\n                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return core_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\ncore_1.Formio.prototype.downloadFile = function (file, options) {\n    const requestArgs = {\n        method: 'download',\n        file: file\n    };\n    const request = core_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return core_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.downloadFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return core_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\ncore_1.Formio.prototype.deleteFile = function (file, options) {\n    const requestArgs = {\n        method: 'delete',\n        file: file\n    };\n    const request = core_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return core_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.deleteFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return core_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\n// For reverse compatability.\ncore_1.Formio.Promise = Promise;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Formio = void 0;\nconst core_1 = __webpack_require__(/*! @formio/core */ \"./node_modules/@formio/core/lib/index.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return core_1.Formio; } }));\nconst CDN_1 = __importDefault(__webpack_require__(/*! ./CDN */ \"./lib/cjs/CDN.js\"));\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\ncore_1.Formio.cdn = new CDN_1.default();\ncore_1.Formio.Providers = providers_1.default;\ncore_1.Formio.version = '5.0.0-rc.18';\nconst isNil = (val) => val === null || val === undefined;\ncore_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback) {\n    const requestArgs = {\n        provider: storage,\n        method: 'upload',\n        file: file,\n        fileName: fileName,\n        dir: dir\n    };\n    fileKey = fileKey || 'file';\n    const request = core_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return core_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    if (uploadStartCallback) {\n                        uploadStartCallback();\n                    }\n                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return core_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\ncore_1.Formio.prototype.downloadFile = function (file, options) {\n    const requestArgs = {\n        method: 'download',\n        file: file\n    };\n    const request = core_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return core_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.downloadFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return core_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\ncore_1.Formio.prototype.deleteFile = function (file, options) {\n    const requestArgs = {\n        method: 'delete',\n        file: file\n    };\n    const request = core_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return core_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.deleteFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return core_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\n// For reverse compatability.\ncore_1.Formio.Promise = Promise;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?");
 
 /***/ }),