@formio/js 5.0.0-dev.5740.c7c00bc → 5.0.0-dev.5743.988e4e6

package/Changelog.md

@@ -42,7 +42,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - FIO-8570: fixed thousandSeparator problem and decimal symbol problem
  - FIO-8710: fixed incorrect Components import that causes errors when interacting with form components
  - FIO-8801: fixed submission metadata nullish
- - FIO-8809: fixed runtime error in setForm when passing string argument to Formio.builder 
+ - FIO-8809: fixed runtime error in setForm when passing string argument to Formio.builder
+ - FIO-8684: Fixes cannot attach more than one component to the PDF form
+ - FIO-8719: fixed validation for Data Grid component inside nested wizard
 
 ### New Features
 

package/dist/formio.form.js

@@ -4697,7 +4697,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (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 Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass PDF extends Webform_1.default {\n    constructor(element, options) {\n        options.display = 'pdf';\n        super(element, options);\n        this.components = [];\n    }\n    init() {\n        super.init();\n        // Handle an iframe submission.\n        this.on('iframe-submission', (submission) => this.setValue(submission, {\n            fromIframe: true\n        }), true);\n        this.on('iframe-change', (submission) => this.setValue(submission, {\n            fromIframe: true\n        }), true);\n        this.on('iframe-getIframePositions', (query) => {\n            const iframe = document.getElementById(`iframe-${query.formId}`);\n            if (iframe) {\n                const iframeBoundingClientRect = iframe.getBoundingClientRect();\n                this.postMessage({\n                    name: 'iframePositions',\n                    data: {\n                        formId: query.formId,\n                        iframe: {\n                            top: iframeBoundingClientRect.top\n                        },\n                        scrollY: window.scrollY || window.pageYOffset\n                    }\n                });\n            }\n        });\n        // Trigger when this form is ready.\n        this.on('iframe-ready', () => this.iframeReadyResolve(), true);\n    }\n    render() {\n        this.submitButton = this.addComponent({\n            disabled: this.form.disableWizardSubmit,\n            input: true,\n            type: 'button',\n            action: 'submit',\n            internal: true,\n            label: 'Submit',\n            key: 'submit',\n            ref: 'button',\n            hidden: this.isSubmitButtonHidden()\n        });\n        return this.renderTemplate('pdf', {\n            submitButton: this.submitButton.render(),\n            classes: 'formio-form-pdf',\n            children: this.renderComponents()\n        });\n    }\n    redraw() {\n        this.postMessage({ name: 'redraw' });\n        return this.builderMode ? Promise.resolve() : super.redraw();\n    }\n    destroy(all = false) {\n        if (this.iframeElement) {\n            delete this.iframeElement.formioComponent;\n            this.iframeElement.formioComponent = null;\n        }\n        super.destroy(all);\n    }\n    rebuild() {\n        if (this.attached && this.builderMode && this.component.components) {\n            this.destroyComponents();\n            this.addComponents();\n            return Promise.resolve();\n        }\n        this.postMessage({ name: 'redraw' });\n        return super.rebuild();\n    }\n    // Do not attach nested components for pdf.\n    attachComponents(element, components, container) {\n        components = components || this.components;\n        container = container || this.component.components;\n        element = this.hook('attachComponents', element, components, container, this);\n        return Promise.resolve();\n    }\n    attach(element) {\n        return super.attach(element).then(() => {\n            this.loadRefs(element, {\n                button: 'single',\n                buttonMessageContainer: 'single',\n                buttonMessage: 'single',\n                zoomIn: 'single',\n                zoomOut: 'single',\n                iframeContainer: 'single'\n            });\n            this.submitButton.refs = Object.assign({}, this.refs);\n            this.submitButton.attachButton();\n            // Reset the iframeReady promise.\n            this.iframeReady = new Promise((resolve, reject) => {\n                this.iframeReadyResolve = resolve;\n                this.iframeReadyReject = reject;\n            });\n            // iframes cannot be in the template so manually create it\n            this.iframeElement = this.ce('iframe', {\n                src: this.getSrc(),\n                id: `iframe-${this.id}`,\n                seamless: true,\n                class: 'formio-iframe'\n            });\n            this.iframeElement.formioContainer = this.component.components;\n            this.iframeElement.formioComponent = this;\n            // Append the iframe to the iframeContainer in the template\n            this.empty(this.refs.iframeContainer);\n            this.appendChild(this.refs.iframeContainer, this.iframeElement);\n            // Post the form to the iframe\n            this.form.base = Formio_1.Formio.getBaseUrl();\n            this.form.projectUrl = Formio_1.Formio.getProjectUrl();\n            this.postMessage({ name: 'form', data: this.form });\n            // Hide the submit button if the associated component is hidden\n            const submitButton = this.components.find(c => c.element === this.refs.button);\n            if (submitButton) {\n                this.refs.button.classList.toggle('hidden', !submitButton.visible);\n            }\n            this.addEventListener(this.refs.zoomIn, 'click', (event) => {\n                event.preventDefault();\n                this.postMessage({ name: 'zoomIn' });\n            });\n            this.addEventListener(this.refs.zoomOut, 'click', (event) => {\n                event.preventDefault();\n                this.postMessage({ name: 'zoomOut' });\n            });\n            const form = (0, utils_1.fastCloneDeep)(this.form);\n            if (this.formio) {\n                form.projectUrl = this.formio.projectUrl;\n                form.url = this.formio.formUrl;\n                form.base = this.formio.base;\n                this.postMessage({ name: 'token', data: this.formio.getToken() });\n            }\n            this.emit('attach');\n        });\n    }\n    /**\n     * Get the submission from the iframe.\n     * @returns {Promise<any>} - The submission from the iframe.\n     */\n    getSubmission() {\n        return new Promise((resolve) => {\n            this.once('iframe-submission', resolve);\n            this.postMessage({ name: 'getSubmission' });\n        });\n    }\n    /**\n     * Ensure we have the submission from the iframe before we submit the form.\n     * @param {any} options - The options for submission.\n     * @returns {Promise<any>} - Resolves when the form is submitted.\n     */\n    submitForm(options = {}) {\n        this.postMessage({ name: 'getErrors' });\n        return this.getSubmission().then(() => super.submitForm(options));\n    }\n    getSrc() {\n        if (!this._form || !this._form.settings || !this._form.settings.pdf) {\n            return '';\n        }\n        let iframeSrc = `${this._form.settings.pdf.src}.html`;\n        const params = [`id=${this.id}`];\n        if (this.options.showCheckboxBackground || this._form.settings.showCheckboxBackground) {\n            params.push('checkboxbackground=1');\n        }\n        if (this.options.readOnly) {\n            params.push('readonly=1');\n        }\n        if (this.options.zoom) {\n            params.push(`zoom=${this.options.zoom}`);\n        }\n        if (this.builderMode) {\n            params.push('builder=1');\n        }\n        if (params.length) {\n            iframeSrc += `?${params.join('&')}`;\n        }\n        return iframeSrc;\n    }\n    setForm(form, flags = {}) {\n        return super.setForm(form, flags).then(() => {\n            if (this.formio) {\n                form.projectUrl = this.formio.projectUrl;\n                form.url = this.formio.formUrl;\n                form.base = this.formio.base;\n                this.postMessage({ name: 'token', data: this.formio.getToken() });\n            }\n            this.postMessage({ name: 'form', data: this.form });\n        });\n    }\n    /**\n     * Set's the value of this form component.\n     * @param {import('@formio/core').Submission} submission - The submission JSON to set the value of this form.\n     * @param {any} flags - The flags to use when setting the submission.\n     * @returns {boolean} - If the value changed or not.\n     */\n    setValue(submission, flags = {}) {\n        const changed = super.setValue(submission, flags);\n        if (!flags || !flags.fromIframe) {\n            this.once('iframe-ready', () => {\n                if (changed) {\n                    this.postMessage({ name: 'submission', data: submission });\n                }\n            });\n        }\n        return changed;\n    }\n    postMessage(message) {\n        // If we get here before the iframeReady promise is set up, it's via the superclass constructor\n        if (!this.iframeReady) {\n            return;\n        }\n        if (!message.type) {\n            message.type = 'iframe-data';\n        }\n        this.iframeReady.then(() => {\n            if (this.iframeElement && this.iframeElement.contentWindow && !(message.name === 'form' && this.iframeFormSetUp)) {\n                this.iframeElement.contentWindow.postMessage(JSON.stringify(message), '*');\n                this.iframeFormSetUp = message.name === 'form';\n            }\n        });\n    }\n    focusOnComponent(key) {\n        this.postMessage({\n            name: 'focusErroredField',\n            data: key,\n        });\n    }\n    // Do not clear the iframe.\n    clear() { }\n    showErrors(error, triggerEvent) {\n        var _a;\n        const helpBlock = document.getElementById('submit-error');\n        const submitError = this.t('submitError');\n        const isSubmitErrorShown = ((_a = this.refs.buttonMessage) === null || _a === void 0 ? void 0 : _a.textContent.trim()) === submitError;\n        if (!helpBlock && error.length && !isSubmitErrorShown) {\n            const p = this.ce('p', { class: 'help-block' });\n            this.setContent(p, submitError);\n            p.addEventListener('click', () => {\n                window.scrollTo(0, 0);\n            });\n            const div = this.ce('div', { id: 'submit-error', class: 'has-error' });\n            this.appendTo(p, div);\n            this.appendTo(div, this.element);\n        }\n        if (!error.length && helpBlock) {\n            helpBlock.remove();\n        }\n        super.showErrors(error, triggerEvent);\n    }\n    isSubmitButtonHidden() {\n        let hidden = false;\n        (0, utils_1.eachComponent)(this.component.components, (component) => {\n            if ((component.type === 'button') &&\n                ((component.action === 'submit') || !component.action)) {\n                hidden = component.hidden || false;\n            }\n        });\n        return hidden;\n    }\n}\nexports[\"default\"] = PDF;\n/**\n * Listen for window messages.\n */\nif (typeof window !== 'undefined') {\n    window.addEventListener('message', (event) => {\n        let eventData = null;\n        try {\n            eventData = JSON.parse(event.data);\n        }\n        catch (err) {\n            eventData = null;\n        }\n        // If this form exists, then emit the event within this form.\n        if (eventData &&\n            eventData.name &&\n            eventData.formId &&\n            Formio_1.Formio.forms.hasOwnProperty(eventData.formId)) {\n            Formio_1.Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);\n        }\n    });\n}\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/PDF.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 Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass PDF extends Webform_1.default {\n    constructor(element, options) {\n        options.display = 'pdf';\n        super(element, options);\n        this.components = [];\n    }\n    init() {\n        super.init();\n        // Handle an iframe submission.\n        this.on('iframe-submission', (submission) => this.setValue(submission, {\n            fromIframe: true\n        }), true);\n        this.on('iframe-change', (submission) => this.setValue(submission, {\n            fromIframe: true\n        }), true);\n        this.on('iframe-getIframePositions', (query) => {\n            const iframe = document.getElementById(`iframe-${query.formId}`);\n            if (iframe) {\n                const iframeBoundingClientRect = iframe.getBoundingClientRect();\n                this.postMessage({\n                    name: 'iframePositions',\n                    data: {\n                        formId: query.formId,\n                        iframe: {\n                            top: iframeBoundingClientRect.top\n                        },\n                        scrollY: window.scrollY || window.pageYOffset\n                    }\n                });\n            }\n        });\n        // Trigger when this form is ready.\n        this.on('iframe-ready', () => this.iframeReadyResolve(), true);\n    }\n    render() {\n        this.submitButton = this.addComponent({\n            disabled: this.form.disableWizardSubmit,\n            input: true,\n            type: 'button',\n            action: 'submit',\n            internal: true,\n            label: 'Submit',\n            key: 'submit',\n            ref: 'button',\n            hidden: this.isSubmitButtonHidden()\n        });\n        return this.renderTemplate('pdf', {\n            submitButton: this.submitButton.render(),\n            classes: 'formio-form-pdf',\n            children: this.renderComponents()\n        });\n    }\n    redraw() {\n        this.postMessage({ name: 'redraw' });\n        return this.builderMode ? Promise.resolve() : super.redraw();\n    }\n    destroy(all = false) {\n        if (this.iframeElement) {\n            delete this.iframeElement.formioComponent;\n            this.iframeElement.formioComponent = null;\n        }\n        super.destroy(all);\n    }\n    rebuild() {\n        if (this.builderMode && this.component.components) {\n            this.destroyComponents();\n            this.addComponents();\n            return Promise.resolve();\n        }\n        this.postMessage({ name: 'redraw' });\n        return super.rebuild();\n    }\n    // Do not attach nested components for pdf.\n    attachComponents(element, components, container) {\n        components = components || this.components;\n        container = container || this.component.components;\n        element = this.hook('attachComponents', element, components, container, this);\n        return Promise.resolve();\n    }\n    attach(element) {\n        return super.attach(element).then(() => {\n            this.loadRefs(element, {\n                button: 'single',\n                buttonMessageContainer: 'single',\n                buttonMessage: 'single',\n                zoomIn: 'single',\n                zoomOut: 'single',\n                iframeContainer: 'single'\n            });\n            this.submitButton.refs = Object.assign({}, this.refs);\n            this.submitButton.attachButton();\n            // Reset the iframeReady promise.\n            this.iframeReady = new Promise((resolve, reject) => {\n                this.iframeReadyResolve = resolve;\n                this.iframeReadyReject = reject;\n            });\n            // iframes cannot be in the template so manually create it\n            this.iframeElement = this.ce('iframe', {\n                src: this.getSrc(),\n                id: `iframe-${this.id}`,\n                seamless: true,\n                class: 'formio-iframe'\n            });\n            this.iframeElement.formioContainer = this.component.components;\n            this.iframeElement.formioComponent = this;\n            // Append the iframe to the iframeContainer in the template\n            this.empty(this.refs.iframeContainer);\n            this.appendChild(this.refs.iframeContainer, this.iframeElement);\n            // Post the form to the iframe\n            this.form.base = Formio_1.Formio.getBaseUrl();\n            this.form.projectUrl = Formio_1.Formio.getProjectUrl();\n            this.postMessage({ name: 'form', data: this.form });\n            // Hide the submit button if the associated component is hidden\n            const submitButton = this.components.find(c => c.element === this.refs.button);\n            if (submitButton) {\n                this.refs.button.classList.toggle('hidden', !submitButton.visible);\n            }\n            this.addEventListener(this.refs.zoomIn, 'click', (event) => {\n                event.preventDefault();\n                this.postMessage({ name: 'zoomIn' });\n            });\n            this.addEventListener(this.refs.zoomOut, 'click', (event) => {\n                event.preventDefault();\n                this.postMessage({ name: 'zoomOut' });\n            });\n            const form = (0, utils_1.fastCloneDeep)(this.form);\n            if (this.formio) {\n                form.projectUrl = this.formio.projectUrl;\n                form.url = this.formio.formUrl;\n                form.base = this.formio.base;\n                this.postMessage({ name: 'token', data: this.formio.getToken() });\n            }\n            this.emit('attach');\n        });\n    }\n    /**\n     * Get the submission from the iframe.\n     * @returns {Promise<any>} - The submission from the iframe.\n     */\n    getSubmission() {\n        return new Promise((resolve) => {\n            this.once('iframe-submission', resolve);\n            this.postMessage({ name: 'getSubmission' });\n        });\n    }\n    /**\n     * Ensure we have the submission from the iframe before we submit the form.\n     * @param {any} options - The options for submission.\n     * @returns {Promise<any>} - Resolves when the form is submitted.\n     */\n    submitForm(options = {}) {\n        this.postMessage({ name: 'getErrors' });\n        return this.getSubmission().then(() => super.submitForm(options));\n    }\n    getSrc() {\n        if (!this._form || !this._form.settings || !this._form.settings.pdf) {\n            return '';\n        }\n        let iframeSrc = `${this._form.settings.pdf.src}.html`;\n        const params = [`id=${this.id}`];\n        if (this.options.showCheckboxBackground || this._form.settings.showCheckboxBackground) {\n            params.push('checkboxbackground=1');\n        }\n        if (this.options.readOnly) {\n            params.push('readonly=1');\n        }\n        if (this.options.zoom) {\n            params.push(`zoom=${this.options.zoom}`);\n        }\n        if (this.builderMode) {\n            params.push('builder=1');\n        }\n        if (params.length) {\n            iframeSrc += `?${params.join('&')}`;\n        }\n        return iframeSrc;\n    }\n    setForm(form, flags = {}) {\n        return super.setForm(form, flags).then(() => {\n            if (this.formio) {\n                form.projectUrl = this.formio.projectUrl;\n                form.url = this.formio.formUrl;\n                form.base = this.formio.base;\n                this.postMessage({ name: 'token', data: this.formio.getToken() });\n            }\n            this.postMessage({ name: 'form', data: this.form });\n        });\n    }\n    /**\n     * Set's the value of this form component.\n     * @param {import('@formio/core').Submission} submission - The submission JSON to set the value of this form.\n     * @param {any} flags - The flags to use when setting the submission.\n     * @returns {boolean} - If the value changed or not.\n     */\n    setValue(submission, flags = {}) {\n        const changed = super.setValue(submission, flags);\n        if (!flags || !flags.fromIframe) {\n            this.once('iframe-ready', () => {\n                if (changed) {\n                    this.postMessage({ name: 'submission', data: submission });\n                }\n            });\n        }\n        return changed;\n    }\n    postMessage(message) {\n        // If we get here before the iframeReady promise is set up, it's via the superclass constructor\n        if (!this.iframeReady) {\n            return;\n        }\n        if (!message.type) {\n            message.type = 'iframe-data';\n        }\n        this.iframeReady.then(() => {\n            if (this.iframeElement && this.iframeElement.contentWindow && !(message.name === 'form' && this.iframeFormSetUp)) {\n                this.iframeElement.contentWindow.postMessage(JSON.stringify(message), '*');\n                this.iframeFormSetUp = message.name === 'form';\n            }\n        });\n    }\n    focusOnComponent(key) {\n        this.postMessage({\n            name: 'focusErroredField',\n            data: key,\n        });\n    }\n    // Do not clear the iframe.\n    clear() { }\n    showErrors(error, triggerEvent) {\n        var _a;\n        const helpBlock = document.getElementById('submit-error');\n        const submitError = this.t('submitError');\n        const isSubmitErrorShown = ((_a = this.refs.buttonMessage) === null || _a === void 0 ? void 0 : _a.textContent.trim()) === submitError;\n        if (!helpBlock && error.length && !isSubmitErrorShown) {\n            const p = this.ce('p', { class: 'help-block' });\n            this.setContent(p, submitError);\n            p.addEventListener('click', () => {\n                window.scrollTo(0, 0);\n            });\n            const div = this.ce('div', { id: 'submit-error', class: 'has-error' });\n            this.appendTo(p, div);\n            this.appendTo(div, this.element);\n        }\n        if (!error.length && helpBlock) {\n            helpBlock.remove();\n        }\n        super.showErrors(error, triggerEvent);\n    }\n    isSubmitButtonHidden() {\n        let hidden = false;\n        (0, utils_1.eachComponent)(this.component.components, (component) => {\n            if ((component.type === 'button') &&\n                ((component.action === 'submit') || !component.action)) {\n                hidden = component.hidden || false;\n            }\n        });\n        return hidden;\n    }\n}\nexports[\"default\"] = PDF;\n/**\n * Listen for window messages.\n */\nif (typeof window !== 'undefined') {\n    window.addEventListener('message', (event) => {\n        let eventData = null;\n        try {\n            eventData = JSON.parse(event.data);\n        }\n        catch (err) {\n            eventData = null;\n        }\n        // If this form exists, then emit the event within this form.\n        if (eventData &&\n            eventData.name &&\n            eventData.formId &&\n            Formio_1.Formio.forms.hasOwnProperty(eventData.formId)) {\n            Formio_1.Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);\n        }\n    });\n}\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/PDF.js?");
 
 /***/ }),