@formio/js 5.0.0-dev.5739.0b95c46 → 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?");
 
 /***/ }),
 
@@ -4950,7 +4950,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 Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\n/**\n * NestedComponent class.\n * @augments Field\n */\nclass NestedComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            tree: false,\n            lazyLoad: false,\n        }, ...extend);\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'components';\n        /**\n         * The collapsed state of this NestedComponent.\n         * @type {boolean}\n         * @default false\n         * @private\n         */\n        this._collapsed = !!this.component.collapsed;\n    }\n    get defaultSchema() {\n        return NestedComponent.schema();\n    }\n    /**\n     * Get the schema for the NestedComponent.\n     * @returns {object} The schema for the NestedComponent.\n     * @override\n     */\n    get schema() {\n        const schema = super.schema;\n        const components = lodash_1.default.uniqBy(this.getComponents(), 'component.key');\n        schema.components = lodash_1.default.map(components, 'schema');\n        return schema;\n    }\n    /**\n     * Get collapsed state.\n     * @returns {boolean} The collapsed state.\n     */\n    get collapsed() {\n        return this._collapsed;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    collapse(value) {\n        const promise = this.redraw();\n        if (!value) {\n            this.checkValidity(this.data, !this.pristine);\n        }\n        return promise;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    set collapsed(value) {\n        this._collapsed = value;\n        this.collapse(value);\n    }\n    /**\n     * Set visible state of parent and each child component.\n     * @param {boolean} value - The visible state.\n     * @returns {void}\n     */\n    set visible(value) {\n        // DO NOT CALL super here.  There is an issue where clearOnHide was getting triggered with\n        // subcomponents because the \"parentVisible\" flag was set to false when it should really be\n        // set to true.\n        const visibilityChanged = this._visible !== value;\n        this._visible = value;\n        const isVisible = this.visible;\n        const forceShow = this.shouldForceShow();\n        const forceHide = this.shouldForceHide();\n        this.components.forEach(component => {\n            // Set the parent visibility first since we may have nested components within nested components\n            // and they need to be able to determine their visibility based on the parent visibility.\n            component.parentVisible = isVisible;\n            const conditionallyVisible = component.conditionallyVisible();\n            if (forceShow || conditionallyVisible) {\n                component.visible = true;\n            }\n            else if (forceHide || !isVisible || !conditionallyVisible) {\n                component.visible = false;\n            }\n            // If hiding a nested component, clear all errors below.\n            if (!component.visible) {\n                component.error = '';\n            }\n        });\n        if (visibilityChanged) {\n            this.clearOnHide();\n            this.redraw();\n        }\n    }\n    /**\n     * Get visible state.\n     * @returns {boolean} The visible state.\n     */\n    get visible() {\n        return super.visible;\n    }\n    /**\n     * Set parent visibility.\n     * @param {boolean} value - The parent visibility.\n     * @returns {void}\n     */\n    set parentVisible(value) {\n        super.parentVisible = value;\n        this.components.forEach(component => component.parentVisible = this.visible);\n    }\n    /**\n     * Get parent visibility.\n     * @returns {boolean} The parent visibility.\n     */\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    /**\n     * Get the disabled state.\n     * @returns {boolean} - The disabled state.\n     */\n    get disabled() {\n        return super.disabled;\n    }\n    /**\n     * Set the disabled state.\n     * @param {boolean} disabled - The disabled state.\n     */\n    set disabled(disabled) {\n        super.disabled = disabled;\n        this.components.forEach((component) => component.parentDisabled = disabled);\n    }\n    /**\n     * Set parent disabled state.\n     * @param {boolean} value - The parent disabled state.\n     * @returns {void}\n     */\n    set parentDisabled(value) {\n        super.parentDisabled = value;\n        this.components.forEach(component => {\n            component.parentDisabled = this.disabled;\n        });\n    }\n    /**\n     * Get parent disabled state.\n     * @returns {boolean} The parent disabled state.\n     */\n    get parentDisabled() {\n        return super.parentDisabled;\n    }\n    /**\n     * Get ready state from all components.\n     * @returns {Promise<Array>} - The promise that resolves when all components are ready.\n     */\n    get ready() {\n        return Promise.all(this.getComponents().map(component => component.ready));\n    }\n    /**\n     * Get currentForm object.\n     * @returns {object} - The current form object.\n     */\n    get currentForm() {\n        return super.currentForm;\n    }\n    /**\n     * Set currentForm object.\n     * @param {object} instance - The current form object.\n     * @returns {void}\n     */\n    set currentForm(instance) {\n        super.currentForm = instance;\n        this.getComponents().forEach(component => {\n            component.currentForm = instance;\n        });\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        this._rowIndex = value;\n        this.eachComponent((component) => {\n            component.rowIndex = value;\n        });\n    }\n    /**\n     * Get Contextual data of the component.\n     * @returns {object} - The contextual data of the component.\n     * @override\n     */\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Get the data of the component.\n     * @returns {object} - The data of the component.\n     * @override\n     */\n    get data() {\n        return this._data;\n    }\n    /**\n     * Set the data of the component.\n     * @param {object} value - The data of the component.\n     * @returns {void}\n     */\n    set data(value) {\n        this._data = value;\n        this.eachComponent((component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    /**\n     * Get components array.\n     * @returns {Array} - The components array.\n     */\n    getComponents() {\n        return this.components || [];\n    }\n    /**\n     * Perform a deep iteration over every component, including those\n     * within other container based components.\n     * @param {Function} fn - Called for every component.\n     * @param {any} options - The options to include with this everyComponent call.\n     */\n    everyComponent(fn, options = {}) {\n        const components = this.getComponents();\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    /**\n     * Check if the component has a component.\n     * @param {import('@formio/core').Component} component - The component to check.\n     * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.\n     */\n    hasComponent(component) {\n        let result = false;\n        this.everyComponent((comp) => {\n            if (comp === component) {\n                result = true;\n                return false;\n            }\n        });\n        return result;\n    }\n    /**\n     * Get the flattened components of this NestedComponent.\n     * @returns {object} - The flattened components of this NestedComponent.\n     */\n    flattenComponents() {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        });\n        return result;\n    }\n    /**\n     * Perform an iteration over each component within this container component.\n     * @param {Function} fn - Called for each component\n     */\n    eachComponent(fn) {\n        lodash_1.default.each(this.getComponents(), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    /**\n     * Returns a component provided a key. This performs a deep search within the\n     * component tree.\n     * @param {string} path - The path to the component.\n     * @param {Function} [fn] - Called with the component once found.\n     * @param {string} [originalPath] - The original path to the component.\n     * @returns {any} - The component that is located.\n     */\n    getComponent(path, fn, originalPath) {\n        originalPath = originalPath || (0, utils_1.getStringFromComponentPath)(path);\n        if (this.componentsMap.hasOwnProperty(originalPath)) {\n            if (fn) {\n                return fn(this.componentsMap[originalPath]);\n            }\n            else {\n                return this.componentsMap[originalPath];\n            }\n        }\n        path = (0, utils_1.getArrayFromComponentPath)(path);\n        const pathStr = originalPath;\n        const newPath = lodash_1.default.clone(path);\n        let key = newPath.shift();\n        const remainingPath = newPath;\n        let comp = null;\n        let possibleComp = null;\n        if (lodash_1.default.isNumber(key)) {\n            key = remainingPath.shift();\n        }\n        if (!lodash_1.default.isString(key)) {\n            return comp;\n        }\n        this.everyComponent((component, components) => {\n            const matchPath = component.hasInput && component.path ? pathStr.includes(component.path) : true;\n            if (component.component.key === key) {\n                possibleComp = component;\n                if (matchPath) {\n                    comp = component;\n                    if (remainingPath.length > 0 && 'getComponent' in component) {\n                        comp = component.getComponent(remainingPath, fn, originalPath);\n                    }\n                    else if (fn) {\n                        fn(component, components);\n                    }\n                    return false;\n                }\n            }\n        });\n        if (!comp) {\n            comp = possibleComp;\n        }\n        return comp;\n    }\n    /**\n     * Return a component provided the Id of the component.\n     * @param {string} id - The Id of the component.\n     * @param {Function} fn - Called with the component once it is retrieved.\n     * @returns {object} - The component retrieved.\n     */\n    getComponentById(id, fn = null) {\n        let comp = null;\n        this.everyComponent((component, components) => {\n            if (component.id === id) {\n                comp = component;\n                if (fn) {\n                    fn(component, components);\n                }\n                return false;\n            }\n        });\n        return comp;\n    }\n    /**\n     * Create a new component and add it to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to create.\n     * @param {object} options - The options to create the component with.\n     * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.\n     * @param {import('@formio/core').Component} [before] - The component before which to add this component.\n     * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.\n     * @returns {any} - The created component instance.\n     */\n    createComponent(component, options, data, before, replacedComp) {\n        if (!component) {\n            return;\n        }\n        options = options || this.options;\n        data = data || this.data;\n        options.parent = this;\n        options.parentVisible = this.visible;\n        options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;\n        options.localRoot = this.localRoot;\n        options.skipInit = true;\n        if (!(options.display === 'pdf' && this.builderMode)) {\n            component.id = (0, utils_1.getRandomComponentId)();\n        }\n        const comp = Components_1.default.create(component, options, data, true);\n        comp.init();\n        if (component.internal) {\n            return comp;\n        }\n        if (before) {\n            const index = lodash_1.default.findIndex(this.components, { id: before.id });\n            if (index !== -1) {\n                this.components.splice(index, 0, comp);\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else if (replacedComp) {\n            const index = lodash_1.default.findIndex(this.components, { id: replacedComp.id });\n            if (index !== -1) {\n                this.components[index] = comp;\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else {\n            this.components.push(comp);\n        }\n        return comp;\n    }\n    getContainer() {\n        return this.element;\n    }\n    get componentComponents() {\n        return this.component.components || [];\n    }\n    get nestedKey() {\n        return `nested-${this.key}`;\n    }\n    get templateName() {\n        return 'container';\n    }\n    init() {\n        this.components = this.components || [];\n        this.addComponents();\n        return super.init();\n    }\n    /**\n     * Add a new component instance to the components array.\n     * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.\n     * @param {object} [options] - The options for this component.\n     */\n    addComponents(data, options) {\n        data = data || this.data;\n        this.components = this.components || [];\n        options = options || this.options;\n        if (options.components) {\n            this.components = options.components;\n        }\n        else {\n            const components = this.hook('addComponents', this.componentComponents, this) || [];\n            components.forEach((component) => this.addComponent(component, data));\n        }\n    }\n    /**\n     * Add a new component to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to add.\n     * @param {object} data - The submission data object to house the data for this component.\n     * @param {HTMLElement} before - A DOM element to insert this element before.\n     * @param {boolean} [noAdd] - A possibly extraneous boolean flag.\n     * @returns {any} - The created component instance.\n     */\n    addComponent(component, data = null, before = null, noAdd = false) {\n        data = data || this.data;\n        this.components = this.components || [];\n        component = this.hook('addComponent', component, data, before, noAdd);\n        const comp = this.createComponent(component, this.options, data, before ? before : null);\n        if (noAdd) {\n            return comp;\n        }\n        return comp;\n    }\n    beforeFocus() {\n        if (this.parent && 'beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n    }\n    render(children) {\n        // If already rendering, don't re-render.\n        return super.render(children || this.renderTemplate(this.templateName, {\n            children: !this.visible ? '' : this.renderComponents(),\n            nestedKey: this.nestedKey,\n            collapsed: this.options.pdf ? false : this.collapsed,\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        return this.renderTemplate('components', {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        const superPromise = super.attach(element);\n        this.loadRefs(element, {\n            header: 'single',\n            collapsed: this.collapsed,\n            [this.nestedKey]: 'single',\n            messageContainer: 'single-scope',\n        });\n        let childPromise = Promise.resolve();\n        if (this.refs[this.nestedKey]) {\n            childPromise = this.attachComponents(this.refs[this.nestedKey]);\n        }\n        if (!this.visible) {\n            this.attachComponentsLogic();\n        }\n        if (this.component.collapsible && this.refs.header) {\n            this.addEventListener(this.refs.header, 'click', () => {\n                this.collapsed = !this.collapsed;\n            });\n            this.addEventListener(this.refs.header, 'keydown', (e) => {\n                if (e.keyCode === 13 || e.keyCode === 32) {\n                    e.preventDefault();\n                    this.collapsed = !this.collapsed;\n                }\n            });\n        }\n        return Promise.all([\n            superPromise,\n            childPromise,\n        ]);\n    }\n    /**\n     * Attach the logic to the components.\n     * @param {import('@formio/core').Component[]} components - The components to attach logic to.\n     */\n    attachComponentsLogic(components) {\n        components = components || this.components;\n        lodash_1.default.each(components, (comp) => {\n            comp.attachLogic();\n            if (lodash_1.default.isFunction(comp.attachComponentsLogic)) {\n                comp.attachComponentsLogic();\n            }\n        });\n    }\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        if (!element) {\n            // Return a non-resolving promise.\n            return (new Promise(() => { }));\n        }\n        let index = 0;\n        const promises = [];\n        Array.prototype.slice.call(element.children).forEach(child => {\n            if (!child.getAttribute('data-noattach') && components[index]) {\n                promises.push(components[index].attach(child));\n                index++;\n            }\n        });\n        return Promise.all(promises);\n    }\n    /**\n     * Remove a component from the components array and from the children object\n     * @param {import('@formio/core').Component} component - The component to remove from the components.\n     * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.\n     * @param {boolean} [all] - If set to TRUE will cascade remove all components.\n     */\n    removeComponent(component, components, all = false) {\n        components = components || this.components;\n        component.destroy(all);\n        lodash_1.default.remove(components, { id: component.id });\n        if (this.componentsMap[component.path]) {\n            delete this.componentsMap[component.path];\n        }\n    }\n    /**\n     * Removes a component provided the API key of that component.\n     * @param {string} key - The API key of the component to remove.\n     * @param {Function} fn - Called once the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentByKey(key, fn = null) {\n        const comp = this.getComponent(key, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    /**\n     * Removes a component provided the Id of the component.\n     * @param {string} id - The Id of the component to remove.\n     * @param {Function} fn - Called when the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentById(id, fn = null) {\n        const comp = this.getComponentById(id, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    updateValue(value, flags = {}) {\n        return this.components.reduce((changed, comp) => {\n            return comp.updateValue(null, flags) || changed;\n        }, super.updateValue(value, flags));\n    }\n    shouldSkipValidation(data, row, flags) {\n        // Nested components with no input should not be validated.\n        if (!this.component.input) {\n            return true;\n        }\n        else {\n            return super.shouldSkipValidation(data, row, flags);\n        }\n    }\n    checkData(data, flags, row, components) {\n        if (this.builderMode) {\n            return true;\n        }\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        components = components && lodash_1.default.isArray(components) ? components : this.getComponents();\n        super.checkData(data, Object.assign({}, flags), row);\n        components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));\n    }\n    checkConditions(data, flags, row) {\n        // check conditions of parent component first, because it may influence on visibility of it's children\n        const check = super.checkConditions(data, flags, row);\n        //row data of parent component not always corresponds to row of nested components, use comp.data as row data for children instead\n        this.getComponents().forEach(comp => comp.checkConditions(data, flags, comp.data));\n        return check;\n    }\n    clearOnHide(show) {\n        super.clearOnHide(show);\n        if (this.component.clearOnHide) {\n            if (this.allowData && !this.hasValue() && !(this.options.server && !this.visible)) {\n                this.dataValue = this.defaultValue;\n            }\n            if (this.hasValue()) {\n                this.restoreComponentsContext();\n            }\n        }\n        this.getComponents().forEach(component => component.clearOnHide(show));\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => component.data = this.dataValue);\n    }\n    /**\n     * Allow components to hook into the next page trigger to perform their own logic.\n     * @param {Function} next - The callback to continue to the next page.\n     * @returns {Promise} - A promise when the page has been processed.\n     */\n    beforePage(next) {\n        return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));\n    }\n    /**\n     * Allow components to hook into the submission to provide their own async data.\n     * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.\n     */\n    beforeSubmit() {\n        return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));\n    }\n    calculateValue(data, flags, row) {\n        // Do not iterate into children and calculateValues if this nested component is conditionally hidden.\n        if (!this.conditionallyVisible()) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));\n    }\n    isLastPage() {\n        return this.pages.length - 1 === this.page;\n    }\n    isValid(data, dirty) {\n        return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));\n    }\n    validationProcessor({ scope, data, row, instance, component }, flags) {\n        const { dirty } = flags;\n        if (this.root.hasExtraPages && this.page !== this.root.page) {\n            instance = this.getComponentById(component.id);\n        }\n        if (!instance) {\n            return;\n        }\n        instance.checkComponentValidity(data, dirty, row, flags, scope.errors);\n        if (instance.processOwnValidation) {\n            scope.noRecurse = true;\n        }\n    }\n    /**\n     * Perform a validation on all child components of this nested component.\n     * @param {import('@formio/core').Component[]} components - The components to validate.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Promise<Array>|Array} - The errors if any exist.\n     */\n    validateComponents(components = null, data = null, flags = {}) {\n        components = components || this.component.components;\n        data = data || this.rootValue;\n        const { async, dirty, process } = flags;\n        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);\n        const checkModalProcessorProcess = ({ instance, component, components }) => {\n            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.\n            if (instance &&\n                instance.parent &&\n                (component === components[components.length - 1]) &&\n                instance.parent.componentModal) {\n                instance.parent.checkModal(instance.parent.childErrors, dirty);\n            }\n        };\n        const processorContext = {\n            process: process || 'unknown',\n            components,\n            instances: this.componentsMap,\n            data: data,\n            scope: { errors: [] },\n            processors: [\n                {\n                    process: validationProcessorProcess,\n                    processSync: validationProcessorProcess\n                },\n                {\n                    process: checkModalProcessorProcess,\n                    processSync: checkModalProcessorProcess\n                }\n            ]\n        };\n        return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;\n    }\n    /**\n     * Validate a nested component with data, or its own internal data.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Array} - The errors if any exist.\n     */\n    validate(data = null, flags = {}) {\n        data = data || this.rootValue;\n        return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);\n    }\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        this.childErrors = [];\n        return super.checkComponentValidity(data, dirty, row, flags, allErrors);\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {\n        childErrors.push(...this.validate(data, { dirty, silentCheck }));\n        return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {\n        return this.ready.then(() => {\n            return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {\n                return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {\n                    return valid && childErrors.length === 0;\n                });\n            });\n        });\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        this.getComponents().forEach((comp) => comp.setPristine(pristine));\n    }\n    get isPristine() {\n        return this.pristine && this.getComponents().every((c) => c.isPristine);\n    }\n    get isDirty() {\n        return this.dirty && this.getComponents().every((c) => c.isDirty);\n    }\n    detach() {\n        this.components.forEach(component => {\n            component.detach();\n        });\n        super.detach();\n    }\n    clear() {\n        this.components.forEach(component => {\n            component.clear();\n        });\n        super.clear();\n    }\n    destroy(all = false) {\n        this.destroyComponents(all);\n        super.destroy(all);\n    }\n    destroyComponents(all = false) {\n        const components = this.getComponents().slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n        this.components = [];\n    }\n    get visibleErrors() {\n        return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);\n    }\n    get errors() {\n        const thisErrors = super.errors;\n        return this.getComponents()\n            .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)\n            .filter(err => err.level !== 'hidden');\n    }\n    getValue() {\n        return this.data;\n    }\n    resetValue() {\n        super.resetValue();\n        this.getComponents().forEach((comp) => comp.resetValue());\n        this.setPristine(true);\n    }\n    get dataReady() {\n        return Promise.all(this.getComponents().map((component) => component.dataReady));\n    }\n    setNestedValue(component, value, flags = {}) {\n        component._data = this.componentContext(component);\n        if (component.type === 'button') {\n            return false;\n        }\n        if (component.type === 'components') {\n            if (component.tree && component.hasValue(value)) {\n                return component.setValue(lodash_1.default.get(value, component.key), flags);\n            }\n            return component.setValue(value, flags);\n        }\n        else if (value && component.hasValue(value)) {\n            return component.setValue(lodash_1.default.get(value, component.key), flags);\n        }\n        else if ((!this.rootPristine || component.visible) && component.shouldAddDefaultValue) {\n            flags.noValidate = !flags.dirty;\n            flags.resetValue = true;\n            return component.setValue(component.defaultValue, flags);\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, component) => {\n            return this.setNestedValue(component, value, flags, changed) || changed;\n        }, false);\n    }\n    get lazyLoad() {\n        var _a;\n        return (_a = this.component.lazyLoad) !== null && _a !== void 0 ? _a : false;\n    }\n}\nexports[\"default\"] = NestedComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.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 Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\n/**\n * NestedComponent class.\n * @augments Field\n */\nclass NestedComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            tree: false,\n            lazyLoad: false,\n        }, ...extend);\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'components';\n        /**\n         * The collapsed state of this NestedComponent.\n         * @type {boolean}\n         * @default false\n         * @private\n         */\n        this._collapsed = !!this.component.collapsed;\n    }\n    get defaultSchema() {\n        return NestedComponent.schema();\n    }\n    /**\n     * Get the schema for the NestedComponent.\n     * @returns {object} The schema for the NestedComponent.\n     * @override\n     */\n    get schema() {\n        const schema = super.schema;\n        const components = lodash_1.default.uniqBy(this.getComponents(), 'component.key');\n        schema.components = lodash_1.default.map(components, 'schema');\n        return schema;\n    }\n    /**\n     * Get collapsed state.\n     * @returns {boolean} The collapsed state.\n     */\n    get collapsed() {\n        return this._collapsed;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    collapse(value) {\n        const promise = this.redraw();\n        if (!value) {\n            this.checkValidity(this.data, !this.pristine);\n        }\n        return promise;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    set collapsed(value) {\n        this._collapsed = value;\n        this.collapse(value);\n    }\n    /**\n     * Set visible state of parent and each child component.\n     * @param {boolean} value - The visible state.\n     * @returns {void}\n     */\n    set visible(value) {\n        // DO NOT CALL super here.  There is an issue where clearOnHide was getting triggered with\n        // subcomponents because the \"parentVisible\" flag was set to false when it should really be\n        // set to true.\n        const visibilityChanged = this._visible !== value;\n        this._visible = value;\n        const isVisible = this.visible;\n        const forceShow = this.shouldForceShow();\n        const forceHide = this.shouldForceHide();\n        this.components.forEach(component => {\n            // Set the parent visibility first since we may have nested components within nested components\n            // and they need to be able to determine their visibility based on the parent visibility.\n            component.parentVisible = isVisible;\n            const conditionallyVisible = component.conditionallyVisible();\n            if (forceShow || conditionallyVisible) {\n                component.visible = true;\n            }\n            else if (forceHide || !isVisible || !conditionallyVisible) {\n                component.visible = false;\n            }\n            // If hiding a nested component, clear all errors below.\n            if (!component.visible) {\n                component.error = '';\n            }\n        });\n        if (visibilityChanged) {\n            this.clearOnHide();\n            this.redraw();\n        }\n    }\n    /**\n     * Get visible state.\n     * @returns {boolean} The visible state.\n     */\n    get visible() {\n        return super.visible;\n    }\n    /**\n     * Set parent visibility.\n     * @param {boolean} value - The parent visibility.\n     * @returns {void}\n     */\n    set parentVisible(value) {\n        super.parentVisible = value;\n        this.components.forEach(component => component.parentVisible = this.visible);\n    }\n    /**\n     * Get parent visibility.\n     * @returns {boolean} The parent visibility.\n     */\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    /**\n     * Get the disabled state.\n     * @returns {boolean} - The disabled state.\n     */\n    get disabled() {\n        return super.disabled;\n    }\n    /**\n     * Set the disabled state.\n     * @param {boolean} disabled - The disabled state.\n     */\n    set disabled(disabled) {\n        super.disabled = disabled;\n        this.components.forEach((component) => component.parentDisabled = disabled);\n    }\n    /**\n     * Set parent disabled state.\n     * @param {boolean} value - The parent disabled state.\n     * @returns {void}\n     */\n    set parentDisabled(value) {\n        super.parentDisabled = value;\n        this.components.forEach(component => {\n            component.parentDisabled = this.disabled;\n        });\n    }\n    /**\n     * Get parent disabled state.\n     * @returns {boolean} The parent disabled state.\n     */\n    get parentDisabled() {\n        return super.parentDisabled;\n    }\n    /**\n     * Get ready state from all components.\n     * @returns {Promise<Array>} - The promise that resolves when all components are ready.\n     */\n    get ready() {\n        return Promise.all(this.getComponents().map(component => component.ready));\n    }\n    /**\n     * Get currentForm object.\n     * @returns {object} - The current form object.\n     */\n    get currentForm() {\n        return super.currentForm;\n    }\n    /**\n     * Set currentForm object.\n     * @param {object} instance - The current form object.\n     * @returns {void}\n     */\n    set currentForm(instance) {\n        super.currentForm = instance;\n        this.getComponents().forEach(component => {\n            component.currentForm = instance;\n        });\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        this._rowIndex = value;\n        this.eachComponent((component) => {\n            component.rowIndex = value;\n        });\n    }\n    /**\n     * Get Contextual data of the component.\n     * @returns {object} - The contextual data of the component.\n     * @override\n     */\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Get the data of the component.\n     * @returns {object} - The data of the component.\n     * @override\n     */\n    get data() {\n        return this._data;\n    }\n    /**\n     * Set the data of the component.\n     * @param {object} value - The data of the component.\n     * @returns {void}\n     */\n    set data(value) {\n        this._data = value;\n        this.eachComponent((component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    /**\n     * Get components array.\n     * @returns {Array} - The components array.\n     */\n    getComponents() {\n        return this.components || [];\n    }\n    /**\n     * Perform a deep iteration over every component, including those\n     * within other container based components.\n     * @param {Function} fn - Called for every component.\n     * @param {any} options - The options to include with this everyComponent call.\n     */\n    everyComponent(fn, options = {}) {\n        const components = this.getComponents();\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    /**\n     * Check if the component has a component.\n     * @param {import('@formio/core').Component} component - The component to check.\n     * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.\n     */\n    hasComponent(component) {\n        let result = false;\n        this.everyComponent((comp) => {\n            if (comp === component) {\n                result = true;\n                return false;\n            }\n        });\n        return result;\n    }\n    /**\n     * Get the flattened components of this NestedComponent.\n     * @returns {object} - The flattened components of this NestedComponent.\n     */\n    flattenComponents() {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        });\n        return result;\n    }\n    /**\n     * Perform an iteration over each component within this container component.\n     * @param {Function} fn - Called for each component\n     */\n    eachComponent(fn) {\n        lodash_1.default.each(this.getComponents(), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    /**\n     * Returns a component provided a key. This performs a deep search within the\n     * component tree.\n     * @param {string} path - The path to the component.\n     * @param {Function} [fn] - Called with the component once found.\n     * @param {string} [originalPath] - The original path to the component.\n     * @returns {any} - The component that is located.\n     */\n    getComponent(path, fn, originalPath) {\n        originalPath = originalPath || (0, utils_1.getStringFromComponentPath)(path);\n        if (this.componentsMap.hasOwnProperty(originalPath)) {\n            if (fn) {\n                return fn(this.componentsMap[originalPath]);\n            }\n            else {\n                return this.componentsMap[originalPath];\n            }\n        }\n        path = (0, utils_1.getArrayFromComponentPath)(path);\n        const pathStr = originalPath;\n        const newPath = lodash_1.default.clone(path);\n        let key = newPath.shift();\n        const remainingPath = newPath;\n        let comp = null;\n        let possibleComp = null;\n        if (lodash_1.default.isNumber(key)) {\n            key = remainingPath.shift();\n        }\n        if (!lodash_1.default.isString(key)) {\n            return comp;\n        }\n        this.everyComponent((component, components) => {\n            const matchPath = component.hasInput && component.path ? pathStr.includes(component.path) : true;\n            if (component.component.key === key) {\n                possibleComp = component;\n                if (matchPath) {\n                    comp = component;\n                    if (remainingPath.length > 0 && 'getComponent' in component) {\n                        comp = component.getComponent(remainingPath, fn, originalPath);\n                    }\n                    else if (fn) {\n                        fn(component, components);\n                    }\n                    return false;\n                }\n            }\n        });\n        if (!comp) {\n            comp = possibleComp;\n        }\n        return comp;\n    }\n    /**\n     * Return a component provided the Id of the component.\n     * @param {string} id - The Id of the component.\n     * @param {Function} fn - Called with the component once it is retrieved.\n     * @returns {object} - The component retrieved.\n     */\n    getComponentById(id, fn = null) {\n        let comp = null;\n        this.everyComponent((component, components) => {\n            if (component.id === id) {\n                comp = component;\n                if (fn) {\n                    fn(component, components);\n                }\n                return false;\n            }\n        });\n        return comp;\n    }\n    /**\n     * Create a new component and add it to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to create.\n     * @param {object} options - The options to create the component with.\n     * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.\n     * @param {import('@formio/core').Component} [before] - The component before which to add this component.\n     * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.\n     * @returns {any} - The created component instance.\n     */\n    createComponent(component, options, data, before, replacedComp) {\n        if (!component) {\n            return;\n        }\n        options = options || this.options;\n        data = data || this.data;\n        options.parent = this;\n        options.parentVisible = this.visible;\n        options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;\n        options.localRoot = this.localRoot;\n        options.skipInit = true;\n        if (!(options.display === 'pdf' && this.builderMode)) {\n            component.id = (0, utils_1.getRandomComponentId)();\n        }\n        const comp = Components_1.default.create(component, options, data, true);\n        comp.init();\n        if (component.internal) {\n            return comp;\n        }\n        if (before) {\n            const index = lodash_1.default.findIndex(this.components, { id: before.id });\n            if (index !== -1) {\n                this.components.splice(index, 0, comp);\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else if (replacedComp) {\n            const index = lodash_1.default.findIndex(this.components, { id: replacedComp.id });\n            if (index !== -1) {\n                this.components[index] = comp;\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else {\n            this.components.push(comp);\n        }\n        return comp;\n    }\n    getContainer() {\n        return this.element;\n    }\n    get componentComponents() {\n        return this.component.components || [];\n    }\n    get nestedKey() {\n        return `nested-${this.key}`;\n    }\n    get templateName() {\n        return 'container';\n    }\n    init() {\n        this.components = this.components || [];\n        this.addComponents();\n        return super.init();\n    }\n    /**\n     * Add a new component instance to the components array.\n     * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.\n     * @param {object} [options] - The options for this component.\n     */\n    addComponents(data, options) {\n        data = data || this.data;\n        this.components = this.components || [];\n        options = options || this.options;\n        if (options.components) {\n            this.components = options.components;\n        }\n        else {\n            const components = this.hook('addComponents', this.componentComponents, this) || [];\n            components.forEach((component) => this.addComponent(component, data));\n        }\n    }\n    /**\n     * Add a new component to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to add.\n     * @param {object} data - The submission data object to house the data for this component.\n     * @param {HTMLElement} before - A DOM element to insert this element before.\n     * @param {boolean} [noAdd] - A possibly extraneous boolean flag.\n     * @returns {any} - The created component instance.\n     */\n    addComponent(component, data = null, before = null, noAdd = false) {\n        data = data || this.data;\n        this.components = this.components || [];\n        component = this.hook('addComponent', component, data, before, noAdd);\n        const comp = this.createComponent(component, this.options, data, before ? before : null);\n        if (noAdd) {\n            return comp;\n        }\n        return comp;\n    }\n    beforeFocus() {\n        if (this.parent && 'beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n    }\n    render(children) {\n        // If already rendering, don't re-render.\n        return super.render(children || this.renderTemplate(this.templateName, {\n            children: !this.visible ? '' : this.renderComponents(),\n            nestedKey: this.nestedKey,\n            collapsed: this.options.pdf ? false : this.collapsed,\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        return this.renderTemplate('components', {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        const superPromise = super.attach(element);\n        this.loadRefs(element, {\n            header: 'single',\n            collapsed: this.collapsed,\n            [this.nestedKey]: 'single',\n            messageContainer: 'single-scope',\n        });\n        let childPromise = Promise.resolve();\n        if (this.refs[this.nestedKey]) {\n            childPromise = this.attachComponents(this.refs[this.nestedKey]);\n        }\n        if (!this.visible) {\n            this.attachComponentsLogic();\n        }\n        if (this.component.collapsible && this.refs.header) {\n            this.addEventListener(this.refs.header, 'click', () => {\n                this.collapsed = !this.collapsed;\n            });\n            this.addEventListener(this.refs.header, 'keydown', (e) => {\n                if (e.keyCode === 13 || e.keyCode === 32) {\n                    e.preventDefault();\n                    this.collapsed = !this.collapsed;\n                }\n            });\n        }\n        return Promise.all([\n            superPromise,\n            childPromise,\n        ]);\n    }\n    /**\n     * Attach the logic to the components.\n     * @param {import('@formio/core').Component[]} components - The components to attach logic to.\n     */\n    attachComponentsLogic(components) {\n        components = components || this.components;\n        lodash_1.default.each(components, (comp) => {\n            comp.attachLogic();\n            if (lodash_1.default.isFunction(comp.attachComponentsLogic)) {\n                comp.attachComponentsLogic();\n            }\n        });\n    }\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        if (!element) {\n            // Return a non-resolving promise.\n            return (new Promise(() => { }));\n        }\n        let index = 0;\n        const promises = [];\n        Array.prototype.slice.call(element.children).forEach(child => {\n            if (!child.getAttribute('data-noattach') && components[index]) {\n                promises.push(components[index].attach(child));\n                index++;\n            }\n        });\n        return Promise.all(promises);\n    }\n    /**\n     * Remove a component from the components array and from the children object\n     * @param {import('@formio/core').Component} component - The component to remove from the components.\n     * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.\n     * @param {boolean} [all] - If set to TRUE will cascade remove all components.\n     */\n    removeComponent(component, components, all = false) {\n        components = components || this.components;\n        component.destroy(all);\n        lodash_1.default.remove(components, { id: component.id });\n        if (this.componentsMap[component.path]) {\n            delete this.componentsMap[component.path];\n        }\n    }\n    /**\n     * Removes a component provided the API key of that component.\n     * @param {string} key - The API key of the component to remove.\n     * @param {Function} fn - Called once the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentByKey(key, fn = null) {\n        const comp = this.getComponent(key, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    /**\n     * Removes a component provided the Id of the component.\n     * @param {string} id - The Id of the component to remove.\n     * @param {Function} fn - Called when the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentById(id, fn = null) {\n        const comp = this.getComponentById(id, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    updateValue(value, flags = {}) {\n        return this.components.reduce((changed, comp) => {\n            return comp.updateValue(null, flags) || changed;\n        }, super.updateValue(value, flags));\n    }\n    shouldSkipValidation(data, row, flags) {\n        // Nested components with no input should not be validated.\n        if (!this.component.input) {\n            return true;\n        }\n        else {\n            return super.shouldSkipValidation(data, row, flags);\n        }\n    }\n    checkData(data, flags, row, components) {\n        if (this.builderMode) {\n            return true;\n        }\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        components = components && lodash_1.default.isArray(components) ? components : this.getComponents();\n        super.checkData(data, Object.assign({}, flags), row);\n        components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));\n    }\n    checkConditions(data, flags, row) {\n        // check conditions of parent component first, because it may influence on visibility of it's children\n        const check = super.checkConditions(data, flags, row);\n        //row data of parent component not always corresponds to row of nested components, use comp.data as row data for children instead\n        this.getComponents().forEach(comp => comp.checkConditions(data, flags, comp.data));\n        return check;\n    }\n    clearOnHide(show) {\n        super.clearOnHide(show);\n        if (this.component.clearOnHide) {\n            if (this.allowData && !this.hasValue() && !(this.options.server && !this.visible)) {\n                this.dataValue = this.defaultValue;\n            }\n            if (this.hasValue()) {\n                this.restoreComponentsContext();\n            }\n        }\n        this.getComponents().forEach(component => component.clearOnHide(show));\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => component.data = this.dataValue);\n    }\n    /**\n     * Allow components to hook into the next page trigger to perform their own logic.\n     * @param {Function} next - The callback to continue to the next page.\n     * @returns {Promise} - A promise when the page has been processed.\n     */\n    beforePage(next) {\n        return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));\n    }\n    /**\n     * Allow components to hook into the submission to provide their own async data.\n     * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.\n     */\n    beforeSubmit() {\n        return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));\n    }\n    calculateValue(data, flags, row) {\n        // Do not iterate into children and calculateValues if this nested component is conditionally hidden.\n        if (!this.conditionallyVisible()) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));\n    }\n    isLastPage() {\n        return this.pages.length - 1 === this.page;\n    }\n    isValid(data, dirty) {\n        return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));\n    }\n    validationProcessor({ scope, data, row, instance, component }, flags) {\n        const { dirty } = flags;\n        if (this.root.hasExtraPages && this.page !== this.root.page) {\n            instance = this.getComponent(component.path);\n        }\n        if (!instance) {\n            return;\n        }\n        instance.checkComponentValidity(data, dirty, row, flags, scope.errors);\n        if (instance.processOwnValidation) {\n            scope.noRecurse = true;\n        }\n    }\n    /**\n     * Perform a validation on all child components of this nested component.\n     * @param {import('@formio/core').Component[]} components - The components to validate.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Promise<Array>|Array} - The errors if any exist.\n     */\n    validateComponents(components = null, data = null, flags = {}) {\n        components = components || this.component.components;\n        data = data || this.rootValue;\n        const { async, dirty, process } = flags;\n        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);\n        const checkModalProcessorProcess = ({ instance, component, components }) => {\n            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.\n            if (instance &&\n                instance.parent &&\n                (component === components[components.length - 1]) &&\n                instance.parent.componentModal) {\n                instance.parent.checkModal(instance.parent.childErrors, dirty);\n            }\n        };\n        const processorContext = {\n            process: process || 'unknown',\n            components,\n            instances: this.componentsMap,\n            data: data,\n            scope: { errors: [] },\n            processors: [\n                {\n                    process: validationProcessorProcess,\n                    processSync: validationProcessorProcess\n                },\n                {\n                    process: checkModalProcessorProcess,\n                    processSync: checkModalProcessorProcess\n                }\n            ]\n        };\n        return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;\n    }\n    /**\n     * Validate a nested component with data, or its own internal data.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Array} - The errors if any exist.\n     */\n    validate(data = null, flags = {}) {\n        data = data || this.rootValue;\n        return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);\n    }\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        this.childErrors = [];\n        return super.checkComponentValidity(data, dirty, row, flags, allErrors);\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {\n        childErrors.push(...this.validate(data, { dirty, silentCheck }));\n        return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {\n        return this.ready.then(() => {\n            return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {\n                return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {\n                    return valid && childErrors.length === 0;\n                });\n            });\n        });\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        this.getComponents().forEach((comp) => comp.setPristine(pristine));\n    }\n    get isPristine() {\n        return this.pristine && this.getComponents().every((c) => c.isPristine);\n    }\n    get isDirty() {\n        return this.dirty && this.getComponents().every((c) => c.isDirty);\n    }\n    detach() {\n        this.components.forEach(component => {\n            component.detach();\n        });\n        super.detach();\n    }\n    clear() {\n        this.components.forEach(component => {\n            component.clear();\n        });\n        super.clear();\n    }\n    destroy(all = false) {\n        this.destroyComponents(all);\n        super.destroy(all);\n    }\n    destroyComponents(all = false) {\n        const components = this.getComponents().slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n        this.components = [];\n    }\n    get visibleErrors() {\n        return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);\n    }\n    get errors() {\n        const thisErrors = super.errors;\n        return this.getComponents()\n            .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)\n            .filter(err => err.level !== 'hidden');\n    }\n    getValue() {\n        return this.data;\n    }\n    resetValue() {\n        super.resetValue();\n        this.getComponents().forEach((comp) => comp.resetValue());\n        this.setPristine(true);\n    }\n    get dataReady() {\n        return Promise.all(this.getComponents().map((component) => component.dataReady));\n    }\n    setNestedValue(component, value, flags = {}) {\n        component._data = this.componentContext(component);\n        if (component.type === 'button') {\n            return false;\n        }\n        if (component.type === 'components') {\n            if (component.tree && component.hasValue(value)) {\n                return component.setValue(lodash_1.default.get(value, component.key), flags);\n            }\n            return component.setValue(value, flags);\n        }\n        else if (value && component.hasValue(value)) {\n            return component.setValue(lodash_1.default.get(value, component.key), flags);\n        }\n        else if ((!this.rootPristine || component.visible) && component.shouldAddDefaultValue) {\n            flags.noValidate = !flags.dirty;\n            flags.resetValue = true;\n            return component.setValue(component.defaultValue, flags);\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, component) => {\n            return this.setNestedValue(component, value, flags, changed) || changed;\n        }, false);\n    }\n    get lazyLoad() {\n        var _a;\n        return (_a = this.component.lazyLoad) !== null && _a !== void 0 ? _a : false;\n    }\n}\nexports[\"default\"] = NestedComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.js?");
 
 /***/ }),
 
@@ -6039,7 +6039,7 @@ eval("\n/* global jQuery */\nvar __createBinding = (this && this.__createBinding
 /***/ (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 InputWidget_1 = __importDefault(__webpack_require__(/*! ./InputWidget */ \"./lib/cjs/widgets/InputWidget.js\"));\nconst utils_1 = __webpack_require__(/*! ../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst DEFAULT_FORMAT = 'yyyy-MM-dd hh:mm a';\nconst ISO_8601_FORMAT = 'yyyy-MM-ddTHH:mm:ssZ';\nconst isIEBrowser = (0, utils_1.getBrowserInfo)().ie;\nclass CalendarWidget extends InputWidget_1.default {\n    /* eslint-disable camelcase */\n    static get defaultSettings() {\n        return {\n            type: 'calendar',\n            altInput: true,\n            allowInput: true,\n            clickOpens: true,\n            enableDate: true,\n            enableTime: true,\n            mode: 'single',\n            noCalendar: false,\n            format: DEFAULT_FORMAT,\n            dateFormat: ISO_8601_FORMAT,\n            useLocaleSettings: false,\n            language: 'us-en',\n            hourIncrement: 1,\n            minuteIncrement: 5,\n            time_24hr: false,\n            saveAs: 'date',\n            displayInTimezone: '',\n            timezone: '',\n            disable: [],\n            minDate: '',\n            maxDate: ''\n        };\n    }\n    /* eslint-enable camelcase */\n    constructor(settings, component, instance, index) {\n        super(settings, component, instance, index);\n        // Change the format to map to the settings.\n        if (this.settings.noCalendar) {\n            this.settings.format = this.settings.format.replace(/yyyy-MM-dd /g, '');\n        }\n        if (!this.settings.enableTime) {\n            this.settings.format = this.settings.format.replace(/ hh:mm a$/g, '');\n        }\n        else if (this.settings.time_24hr) {\n            this.settings.format = this.settings.format.replace(/hh:mm a$/g, 'HH:mm');\n        }\n        this.zoneLoading = false;\n        this.timezonesUrl = `${Formio_1.Formio.cdn['moment-timezone']}/data/packed/latest.json`;\n    }\n    /**\n     * Load the timezones.\n     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.\n     */\n    loadZones() {\n        const timezone = this.timezone;\n        if (this.zoneLoading) {\n            return true;\n        }\n        if (!(0, utils_1.zonesLoaded)() && (0, utils_1.shouldLoadZones)(timezone)) {\n            this.zoneLoading = true;\n            (0, utils_1.loadZones)(this.timezonesUrl, timezone).then(() => {\n                this.zoneLoading = false;\n                this.emit('redraw');\n            });\n            // Return zones are loading.\n            return true;\n        }\n        // Zones are already loaded.\n        return false;\n    }\n    attach(input) {\n        var _a;\n        const superAttach = super.attach(input);\n        const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.settings.language);\n        this.defaultFormat = {\n            date: dateFormatInfo.dayFirst ? 'd/m/Y ' : 'm/d/Y ',\n            time: 'G:i K'\n        };\n        this.closedOn = 0;\n        this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;\n        this.valueMomentFormat = (0, utils_1.convertFormatToMoment)(this.valueFormat);\n        const isReadOnly = this.settings.readOnly;\n        this.settings.minDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.minDate);\n        this.settings.maxDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.maxDate);\n        this.settings.disable = this.disabledDates;\n        this.settings.disableWeekends ? this.settings.disable.push(this.disableWeekends) : '';\n        this.settings.disableWeekdays ? this.settings.disable.push(this.disableWeekdays) : '';\n        this.settings.disableFunction ? this.settings.disable.push(this.disableFunction) : '';\n        this.settings.wasDefaultValueChanged = false;\n        this.settings.defaultValue = '';\n        this.settings.manualInputValue = '';\n        this.settings.isManuallyOverriddenValue = false;\n        this.settings.currentValue = '';\n        this.settings.altFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.format);\n        this.settings.dateFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.dateFormat);\n        this.settings.position = 'auto center';\n        // This is called when a date is picked in Flatpickrs calendar\n        this.settings.onChange = () => {\n            // Because a date was picked using flatpickrs calendar we can be sure that we don't have a manually overridden value\n            this.settings.isManuallyOverriddenValue = false;\n            this.emit('update');\n        };\n        this.settings.onOpen = () => this.hook('onCalendarOpen');\n        this.settings.onClose = () => {\n            this.hook('onCalendarClose');\n            this.closedOn = Date.now();\n            if (this.settings.allowInput && this.settings.enableTime) {\n                // We need to make sure that this block of code runs after Flatpickr sets the inputs value so that we can\n                // override the value Flatpickr sets with a manual value if we are in the state of manually overridden value\n                setTimeout(() => {\n                    this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;\n                    this._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;\n                    this.emit('update');\n                });\n            }\n            if (this.settings.wasDefaultValueChanged) {\n                this.calendar._input.value = this.settings.defaultValue;\n                this.settings.wasDefaultValueChanged = false;\n            }\n            if (this.calendar) {\n                this.emit('blur');\n            }\n        };\n        Formio_1.Formio.requireLibrary('flatpickr-css', 'flatpickr', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.css` }\n        ], true);\n        if (this.component.shortcutButtons) {\n            this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);\n        }\n        if ((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) {\n            Formio_1.Formio.requireLibrary('shortcut-buttons-flatpickr-css', 'ShortcutButtonsPlugin', [\n                { type: 'styles', src: `${Formio_1.Formio.cdn['shortcut-buttons-flatpickr']}/themes/light.min.css` }\n            ], true);\n        }\n        return superAttach\n            .then(() => {\n            var _a;\n            if ((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) {\n                return Formio_1.Formio.requireLibrary('shortcut-buttons-flatpickr', 'ShortcutButtonsPlugin', `${Formio_1.Formio.cdn['shortcut-buttons-flatpickr']}/shortcut-buttons-flatpickr.min.js`, true);\n            }\n        })\n            .then((ShortcutButtonsPlugin) => {\n            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.js`, true)\n                .then((Flatpickr) => {\n                var _a;\n                if (((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) && ShortcutButtonsPlugin) {\n                    this.initShortcutButtonsPlugin(ShortcutButtonsPlugin);\n                }\n                this.settings.formatDate = this.getFlatpickrFormatDate(Flatpickr);\n                if (this._input) {\n                    const { locale } = this.settings;\n                    if (locale && locale.length >= 2 && locale !== 'en') {\n                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr-${locale}`, `${Formio_1.Formio.cdn['flatpickr-formio']}/l10n/flatpickr-${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));\n                    }\n                    else {\n                        this.initFlatpickr(Flatpickr);\n                    }\n                }\n            });\n        })\n            .catch((err) => {\n            console.warn(err);\n        });\n    }\n    get disableWeekends() {\n        return function (date) {\n            return (date.getDay() === 0 || date.getDay() === 6);\n        };\n    }\n    get disableWeekdays() {\n        return (date) => !this.disableWeekends(date);\n    }\n    get disableFunction() {\n        return (date) => this.evaluate(`return ${this.settings.disableFunction}`, {\n            date\n        });\n    }\n    get timezone() {\n        return this.componentInstance.getTimezone(this.settings);\n    }\n    get defaultSettings() {\n        return CalendarWidget.defaultSettings;\n    }\n    addSuffix(suffix) {\n        this.addEventListener(suffix, 'click', () => {\n            setTimeout(() => {\n                if (this.calendar) {\n                    if (!this.calendar.isOpen && ((Date.now() - this.closedOn) > 200)) {\n                        this.calendar.open();\n                    }\n                    else if (this.calendar.isOpen) {\n                        this.calendar.close();\n                    }\n                }\n            }, 0);\n        });\n        return suffix;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (this.calendar) {\n            if (disabled) {\n                this.calendar._input.setAttribute('disabled', 'disabled');\n            }\n            else {\n                this.calendar._input.removeAttribute('disabled');\n            }\n            this.calendar.close();\n            this.calendar.redraw();\n        }\n    }\n    get input() {\n        return this.calendar ? this.calendar.altInput : null;\n    }\n    get disabledDates() {\n        if (this.settings.disabledDates) {\n            const disabledDates = this.settings.disabledDates.split(',');\n            return disabledDates.map((item) => {\n                const dateMask = /\\d{4}-\\d{2}-\\d{2}/g;\n                const dates = item.match(dateMask);\n                if (dates && dates.length) {\n                    return dates.length === 1 ? item.match(dateMask)[0] : {\n                        from: item.match(dateMask)[0],\n                        to: item.match(dateMask)[1],\n                    };\n                }\n            });\n        }\n        return [];\n    }\n    get localeFormat() {\n        let format = '';\n        if (this.settings.enableDate) {\n            format += this.defaultFormat.date;\n        }\n        if (this.settings.enableTime) {\n            format += this.defaultFormat.time;\n        }\n        return format;\n    }\n    get dateTimeFormat() {\n        return this.settings.useLocaleSettings ? this.localeFormat : (0, utils_1.convertFormatToFlatpickr)(this.dateFormat);\n    }\n    get dateFormat() {\n        return lodash_1.default.get(this.settings, 'format', DEFAULT_FORMAT);\n    }\n    /**\n     * Return the date value as a string.\n     * @param {string|Date} date - The date object or a date string that is momentjs compatible.\n     * @param {string} format - The DateParser code format.\n     * @param {boolean} [useTimezone] - If the timezone should be used.\n     * @returns {string} - Returns the formatted date string.\n     */\n    getDateValue(date, format, useTimezone) {\n        if (useTimezone) {\n            return (0, utils_1.momentDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToMoment)(format));\n        }\n        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToMoment)(format));\n    }\n    /**\n     * Return the value of the selected date.\n     * @returns {*} - The value of the selected date.\n     */\n    getValue() {\n        // Standard output format.\n        if (!this.calendar || this.settings.isManuallyOverriddenValue) {\n            return super.getValue();\n        }\n        // Get the selected dates from the calendar widget.\n        const dates = this.calendar.selectedDates;\n        if (!dates || !dates.length) {\n            return super.getValue();\n        }\n        if (!(dates[0] instanceof Date)) {\n            return 'Invalid Date';\n        }\n        return this.getDateValue(dates[0], this.valueFormat, (this.settings.saveAs === 'date'));\n    }\n    isValueISO8601(value) {\n        return value && (typeof value === 'string') && value.match(/-[0-9]{2}T[0-9]{2}:/);\n    }\n    /**\n     * Set the selected date value.\n     * @param {*} value - The value to set.\n     * @returns {void}\n     */\n    setValue(value) {\n        const saveAsText = (this.settings.saveAs === 'text');\n        if (!this.calendar) {\n            value = value ? (0, utils_1.formatDate)(this.timezonesUrl, value, (0, utils_1.convertFormatToMoment)(this.settings.format), this.timezone, (0, utils_1.convertFormatToMoment)(this.valueMomentFormat)) : value;\n            return super.setValue(value);\n        }\n        const zonesLoading = this.loadZones();\n        if (value) {\n            if (!saveAsText && this.settings.readOnly && !zonesLoading) {\n                this.calendar.setDate((0, utils_1.momentDate)(value, this.valueFormat, this.timezone).format(), false);\n            }\n            else if (this.isValueISO8601(value)) {\n                this.calendar.setDate(value, false);\n            }\n            else {\n                this.calendar.setDate((0, moment_1.default)(value, this.valueMomentFormat).toDate(), false);\n            }\n        }\n        else {\n            this.calendar.clear(false);\n        }\n    }\n    getValueAsString(value, format) {\n        const inputFormat = format || this.dateFormat;\n        const valueFormat = this.calendar ? this.valueFormat : this.settings.dateFormat;\n        if (this.settings.saveAs === 'text' && this.componentInstance.parent && !this.settings.readOnly) {\n            return (0, moment_1.default)(value, (0, utils_1.convertFormatToMoment)(valueFormat)).format((0, utils_1.convertFormatToMoment)(valueFormat));\n        }\n        return (0, utils_1.formatDate)(this.timezonesUrl, value, inputFormat, this.timezone, (0, utils_1.convertFormatToMoment)(valueFormat));\n    }\n    setErrorClasses(hasErrors) {\n        if (!this.input) {\n            return;\n        }\n        if (hasErrors) {\n            this.addClass(this.input, 'is-invalid');\n            this.input.setAttribute('aria-invalid', 'true');\n        }\n        else {\n            this.removeClass(this.input, 'is-invalid');\n            this.input.setAttribute('aria-invalid', 'false');\n        }\n    }\n    get validationValue() {\n        const value = this.dataValue;\n        if (typeof value === 'string') {\n            return new Date(value);\n        }\n        return value.map(val => new Date(val));\n    }\n    isCalendarElement(element) {\n        var _a, _b, _c, _d, _e;\n        if (!element) {\n            return true;\n        }\n        if ((_c = (_b = (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.appendTo) === null || _c === void 0 ? void 0 : _c.contains(element)) {\n            return true;\n        }\n        return (_e = (_d = this.calendar) === null || _d === void 0 ? void 0 : _d.calendarContainer) === null || _e === void 0 ? void 0 : _e.contains(element);\n    }\n    initFlatpickr(Flatpickr) {\n        // Create a new flatpickr.\n        this.calendar = new Flatpickr(this._input, Object.assign(Object.assign({}, this.settings), { disableMobile: true }));\n        this.addEventListener(this.calendar.altInput, 'input', (event) => {\n            // Need to give time for the input mask to update so that the manualInputValue can be properly set\n            setTimeout(() => {\n                if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {\n                    this.settings.manualInputValue = event.target.value;\n                    this._input.value = this.settings.manualInputValue;\n                    this.settings.isManuallyOverriddenValue = true;\n                    this.settings.currentValue = event.target.value;\n                    this.emit('update');\n                }\n                if (event.target.value === '' && this.calendar.selectedDates.length > 0) {\n                    this.settings.wasDefaultValueChanged = true;\n                    this.settings.defaultValue = event.target.value;\n                    this.calendar.clear();\n                }\n                else {\n                    this.settings.wasDefaultValueChanged = false;\n                }\n            });\n        });\n        const excludedFromMaskFormats = ['MMMM'];\n        if (!this.settings.readOnly && !lodash_1.default.some(excludedFromMaskFormats, format => lodash_1.default.includes(this.settings.format, format))) {\n            // Enforce the input mask of the format.\n            this.setInputMask(this.calendar._input, (0, utils_1.convertFormatToMask)(this.settings.format));\n        }\n        // Fixes an issue with IE11 where value is set only after the second click\n        // TODO: Remove when the issue is solved in the flatpickr library\n        if (isIEBrowser) {\n            // Remove the original blur listener, because value will be set to empty since relatedTarget is null in IE11\n            const originalBlurListener = this.calendar._handlers.find(({ event, element }) => event === 'blur' && element === this.calendar._input);\n            this.calendar._input.removeEventListener('blur', originalBlurListener.handler);\n            // Add the same event listener as in the original library, but with workaround for IE11 issue\n            this.addEventListener(this.calendar._input, 'blur', (event) => {\n                const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;\n                const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;\n                const isInput = event.target === this.calendar._input;\n                if (isInput && !this.isCalendarElement(relatedTarget)) {\n                    this.calendar.setDate(this.calendar._input.value, true, event.target === this.calendar.altInput\n                        ? this.calendar.config.altFormat\n                        : this.calendar.config.dateFormat);\n                }\n            });\n        }\n        // Make sure we commit the value after a blur event occurs.\n        this.addEventListener(this.calendar._input, 'blur', (event) => {\n            var _a, _b, _c, _d;\n            // If we have manually overridden the value then we shouldn't call setDate because this will fill the input mask\n            if (this.settings.isManuallyOverriddenValue) {\n                return;\n            }\n            const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;\n            const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;\n            if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {\n                const inputValue = this.calendar.input.value;\n                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToMoment)(this.valueFormat)).toDate() : inputValue;\n                this.calendar.setDate(dateValue, true, this.settings.altFormat);\n            }\n            else if (!this.calendar.input.value && this.calendar.config.noCalendar) {\n                const value = (0, moment_1.default)({ hour: (_b = (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.defaultHour, minute: (_d = (_c = this.calendar) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.defaultMinute }).toDate();\n                this.calendar.setDate(value, true, this.settings.format);\n            }\n        });\n        // FJS-1103: When hit the enter button, the field not saving the year correctly\n        this.addEventListener(this.calendar.altInput, 'keydown', (event) => {\n            if (event.keyCode === 13) {\n                if (this.calendar.isOpen) {\n                    this.calendar.close();\n                    event.stopPropagation();\n                }\n            }\n        });\n        // If other fields are used to calculate disabled dates, we need to redraw calendar to refresh disabled dates\n        if (this.settings.disableFunction && this.componentInstance && this.componentInstance.root) {\n            this.componentInstance.root.on('change', (e) => {\n                if (e.changed && this.calendar) {\n                    this.calendar.redraw();\n                }\n            });\n        }\n        // Restore the calendar value from the component value.\n        this.setValue(this.componentValue);\n    }\n    initShortcutButtonsPlugin(ShortcutButtonsPlugin) {\n        this.settings.plugins = [\n            // eslint-disable-next-line new-cap\n            ShortcutButtonsPlugin({\n                button: this.component.shortcutButtons.map((btn) => ({ label: btn.label, attributes: btn.attribute })),\n                onClick: (index) => {\n                    const getValue = this.component.shortcutButtons[index].onClick;\n                    const date = this.evaluate(getValue, { date: new Date() }, 'date');\n                    this.calendar.setDate(date, true);\n                }\n            })\n        ];\n    }\n    get componentValue() {\n        let compValue = this.componentInstance.dataValue;\n        if (Array.isArray(compValue)) {\n            compValue = compValue[this.valueIndex];\n        }\n        return compValue;\n    }\n    getFlatpickrFormatDate(Flatpickr) {\n        return (date, format) => {\n            // Only format this if this is the altFormat and the form is readOnly.\n            if (this.settings.readOnly && (format === this.settings.altFormat)) {\n                if (!this.settings.enableTime || this.loadZones()) {\n                    return Flatpickr.formatDate(date, format);\n                }\n                const currentValue = new Date(this.getValue());\n                if (currentValue.toString() === date.toString()) {\n                    return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);\n                }\n                return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);\n            }\n            return Flatpickr.formatDate(date, format);\n        };\n    }\n    destroy(all = false) {\n        if (this.calendar) {\n            this.calendar.destroy();\n        }\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = CalendarWidget;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/widgets/CalendarWidget.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 InputWidget_1 = __importDefault(__webpack_require__(/*! ./InputWidget */ \"./lib/cjs/widgets/InputWidget.js\"));\nconst utils_1 = __webpack_require__(/*! ../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst DEFAULT_FORMAT = 'yyyy-MM-dd hh:mm a';\nconst ISO_8601_FORMAT = 'yyyy-MM-ddTHH:mm:ssZ';\nconst isIEBrowser = (0, utils_1.getBrowserInfo)().ie;\nclass CalendarWidget extends InputWidget_1.default {\n    /* eslint-disable camelcase */\n    static get defaultSettings() {\n        return {\n            type: 'calendar',\n            altInput: true,\n            allowInput: true,\n            clickOpens: true,\n            enableDate: true,\n            enableTime: true,\n            mode: 'single',\n            noCalendar: false,\n            format: DEFAULT_FORMAT,\n            dateFormat: ISO_8601_FORMAT,\n            useLocaleSettings: false,\n            language: 'us-en',\n            hourIncrement: 1,\n            minuteIncrement: 5,\n            time_24hr: false,\n            saveAs: 'date',\n            displayInTimezone: '',\n            timezone: '',\n            disable: [],\n            minDate: '',\n            maxDate: ''\n        };\n    }\n    /* eslint-enable camelcase */\n    constructor(settings, component, instance, index) {\n        super(settings, component, instance, index);\n        // Change the format to map to the settings.\n        if (this.settings.noCalendar) {\n            this.settings.format = this.settings.format.replace(/yyyy-MM-dd /g, '');\n        }\n        if (!this.settings.enableTime) {\n            this.settings.format = this.settings.format.replace(/ hh:mm a$/g, '');\n        }\n        else if (this.settings.time_24hr) {\n            this.settings.format = this.settings.format.replace(/hh:mm a$/g, 'HH:mm');\n        }\n        this.zoneLoading = false;\n        this.timezonesUrl = `${Formio_1.Formio.cdn['moment-timezone']}/data/packed/latest.json`;\n    }\n    /**\n     * Load the timezones.\n     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.\n     */\n    loadZones() {\n        const timezone = this.timezone;\n        if (this.zoneLoading) {\n            return true;\n        }\n        if (!(0, utils_1.zonesLoaded)() && (0, utils_1.shouldLoadZones)(timezone)) {\n            this.zoneLoading = true;\n            (0, utils_1.loadZones)(this.timezonesUrl, timezone).then(() => {\n                this.zoneLoading = false;\n                this.emit('redraw');\n            });\n            // Return zones are loading.\n            return true;\n        }\n        // Zones are already loaded.\n        return false;\n    }\n    attach(input) {\n        var _a;\n        const superAttach = super.attach(input);\n        const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.settings.language);\n        this.defaultFormat = {\n            date: dateFormatInfo.dayFirst ? 'd/m/Y ' : 'm/d/Y ',\n            time: 'G:i K'\n        };\n        this.closedOn = 0;\n        this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;\n        this.valueMomentFormat = (0, utils_1.convertFormatToMoment)(this.valueFormat);\n        const isReadOnly = this.settings.readOnly;\n        this.settings.minDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.minDate);\n        this.settings.maxDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.maxDate);\n        this.settings.disable = this.disabledDates;\n        this.settings.disableWeekends ? this.settings.disable.push(this.disableWeekends) : '';\n        this.settings.disableWeekdays ? this.settings.disable.push(this.disableWeekdays) : '';\n        this.settings.disableFunction ? this.settings.disable.push(this.disableFunction) : '';\n        this.settings.wasDefaultValueChanged = false;\n        this.settings.defaultValue = '';\n        this.settings.manualInputValue = '';\n        this.settings.isManuallyOverriddenValue = false;\n        this.settings.currentValue = '';\n        this.settings.altFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.format);\n        this.settings.dateFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.dateFormat);\n        this.settings.position = 'auto center';\n        this.settings.onChange = () => {\n            if (this.settings.allowInput) {\n                if (this.settings.isManuallyOverriddenValue && this.settings.enableTime) {\n                    this.calendar._input.value = this.settings.manualInputValue;\n                }\n                else {\n                    this.settings.manualInputValue = '';\n                }\n                this.settings.isManuallyOverriddenValue = false;\n            }\n            this.emit('update');\n        };\n        this.settings.onOpen = () => this.hook('onCalendarOpen');\n        this.settings.onClose = () => {\n            this.hook('onCalendarClose');\n            this.closedOn = Date.now();\n            if (this.settings.allowInput && this.settings.enableTime) {\n                this.calendar._input.value = this.settings.manualInputValue || this.calendar._input.value;\n                this.settings.isManuallyOverriddenValue = false;\n                this.emit('update');\n            }\n            if (this.settings.wasDefaultValueChanged) {\n                this.calendar._input.value = this.settings.defaultValue;\n                this.settings.wasDefaultValueChanged = false;\n            }\n            if (this.calendar) {\n                this.emit('blur');\n            }\n        };\n        Formio_1.Formio.requireLibrary('flatpickr-css', 'flatpickr', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.css` }\n        ], true);\n        if (this.component.shortcutButtons) {\n            this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);\n        }\n        if ((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) {\n            Formio_1.Formio.requireLibrary('shortcut-buttons-flatpickr-css', 'ShortcutButtonsPlugin', [\n                { type: 'styles', src: `${Formio_1.Formio.cdn['shortcut-buttons-flatpickr']}/themes/light.min.css` }\n            ], true);\n        }\n        return superAttach\n            .then(() => {\n            var _a;\n            if ((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) {\n                return Formio_1.Formio.requireLibrary('shortcut-buttons-flatpickr', 'ShortcutButtonsPlugin', `${Formio_1.Formio.cdn['shortcut-buttons-flatpickr']}/shortcut-buttons-flatpickr.min.js`, true);\n            }\n        })\n            .then((ShortcutButtonsPlugin) => {\n            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.js`, true)\n                .then((Flatpickr) => {\n                var _a;\n                if (((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) && ShortcutButtonsPlugin) {\n                    this.initShortcutButtonsPlugin(ShortcutButtonsPlugin);\n                }\n                this.settings.formatDate = this.getFlatpickrFormatDate(Flatpickr);\n                if (this._input) {\n                    const { locale } = this.settings;\n                    if (locale && locale.length >= 2 && locale !== 'en') {\n                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr-${locale}`, `${Formio_1.Formio.cdn['flatpickr-formio']}/l10n/flatpickr-${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));\n                    }\n                    else {\n                        this.initFlatpickr(Flatpickr);\n                    }\n                }\n            });\n        })\n            .catch((err) => {\n            console.warn(err);\n        });\n    }\n    get disableWeekends() {\n        return function (date) {\n            return (date.getDay() === 0 || date.getDay() === 6);\n        };\n    }\n    get disableWeekdays() {\n        return (date) => !this.disableWeekends(date);\n    }\n    get disableFunction() {\n        return (date) => this.evaluate(`return ${this.settings.disableFunction}`, {\n            date\n        });\n    }\n    get timezone() {\n        return this.componentInstance.getTimezone(this.settings);\n    }\n    get defaultSettings() {\n        return CalendarWidget.defaultSettings;\n    }\n    addSuffix(suffix) {\n        this.addEventListener(suffix, 'click', () => {\n            setTimeout(() => {\n                if (this.calendar) {\n                    if (!this.calendar.isOpen && ((Date.now() - this.closedOn) > 200)) {\n                        this.calendar.open();\n                    }\n                    else if (this.calendar.isOpen) {\n                        this.calendar.close();\n                    }\n                }\n            }, 0);\n        });\n        return suffix;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (this.calendar) {\n            if (disabled) {\n                this.calendar._input.setAttribute('disabled', 'disabled');\n            }\n            else {\n                this.calendar._input.removeAttribute('disabled');\n            }\n            this.calendar.close();\n            this.calendar.redraw();\n        }\n    }\n    get input() {\n        return this.calendar ? this.calendar.altInput : null;\n    }\n    get disabledDates() {\n        if (this.settings.disabledDates) {\n            const disabledDates = this.settings.disabledDates.split(',');\n            return disabledDates.map((item) => {\n                const dateMask = /\\d{4}-\\d{2}-\\d{2}/g;\n                const dates = item.match(dateMask);\n                if (dates && dates.length) {\n                    return dates.length === 1 ? item.match(dateMask)[0] : {\n                        from: item.match(dateMask)[0],\n                        to: item.match(dateMask)[1],\n                    };\n                }\n            });\n        }\n        return [];\n    }\n    get localeFormat() {\n        let format = '';\n        if (this.settings.enableDate) {\n            format += this.defaultFormat.date;\n        }\n        if (this.settings.enableTime) {\n            format += this.defaultFormat.time;\n        }\n        return format;\n    }\n    get dateTimeFormat() {\n        return this.settings.useLocaleSettings ? this.localeFormat : (0, utils_1.convertFormatToFlatpickr)(this.dateFormat);\n    }\n    get dateFormat() {\n        return lodash_1.default.get(this.settings, 'format', DEFAULT_FORMAT);\n    }\n    /**\n     * Return the date value as a string.\n     * @param {string|Date} date - The date object or a date string that is momentjs compatible.\n     * @param {string} format - The DateParser code format.\n     * @param {boolean} [useTimezone] - If the timezone should be used.\n     * @returns {string} - Returns the formatted date string.\n     */\n    getDateValue(date, format, useTimezone) {\n        if (useTimezone) {\n            return (0, utils_1.momentDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToMoment)(format));\n        }\n        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToMoment)(format));\n    }\n    /**\n     * Return the value of the selected date.\n     * @returns {*} - The value of the selected date.\n     */\n    getValue() {\n        // Standard output format.\n        if (!this.calendar) {\n            return super.getValue();\n        }\n        // Get the selected dates from the calendar widget.\n        const dates = this.calendar.selectedDates;\n        if (!dates || !dates.length) {\n            return super.getValue();\n        }\n        if (!(dates[0] instanceof Date)) {\n            return 'Invalid Date';\n        }\n        return this.getDateValue(dates[0], this.valueFormat, (this.settings.saveAs === 'date'));\n    }\n    isValueISO8601(value) {\n        return value && (typeof value === 'string') && value.match(/-[0-9]{2}T[0-9]{2}:/);\n    }\n    /**\n     * Set the selected date value.\n     * @param {*} value - The value to set.\n     * @returns {void}\n     */\n    setValue(value) {\n        const saveAsText = (this.settings.saveAs === 'text');\n        if (!this.calendar) {\n            value = value ? (0, utils_1.formatDate)(this.timezonesUrl, value, (0, utils_1.convertFormatToMoment)(this.settings.format), this.timezone, (0, utils_1.convertFormatToMoment)(this.valueMomentFormat)) : value;\n            return super.setValue(value);\n        }\n        const zonesLoading = this.loadZones();\n        if (value) {\n            if (!saveAsText && this.settings.readOnly && !zonesLoading) {\n                this.calendar.setDate((0, utils_1.momentDate)(value, this.valueFormat, this.timezone).format(), false);\n            }\n            else if (this.isValueISO8601(value)) {\n                this.calendar.setDate(value, false);\n            }\n            else {\n                this.calendar.setDate((0, moment_1.default)(value, this.valueMomentFormat).toDate(), false);\n            }\n        }\n        else {\n            this.calendar.clear(false);\n        }\n    }\n    getValueAsString(value, format) {\n        const inputFormat = format || this.dateFormat;\n        const valueFormat = this.calendar ? this.valueFormat : this.settings.dateFormat;\n        if (this.settings.saveAs === 'text' && this.componentInstance.parent && !this.settings.readOnly) {\n            return (0, moment_1.default)(value, (0, utils_1.convertFormatToMoment)(valueFormat)).format((0, utils_1.convertFormatToMoment)(valueFormat));\n        }\n        return (0, utils_1.formatDate)(this.timezonesUrl, value, inputFormat, this.timezone, (0, utils_1.convertFormatToMoment)(valueFormat));\n    }\n    setErrorClasses(hasErrors) {\n        if (!this.input) {\n            return;\n        }\n        if (hasErrors) {\n            this.addClass(this.input, 'is-invalid');\n            this.input.setAttribute('aria-invalid', 'true');\n        }\n        else {\n            this.removeClass(this.input, 'is-invalid');\n            this.input.setAttribute('aria-invalid', 'false');\n        }\n    }\n    get validationValue() {\n        const value = this.dataValue;\n        if (typeof value === 'string') {\n            return new Date(value);\n        }\n        return value.map(val => new Date(val));\n    }\n    isCalendarElement(element) {\n        var _a, _b, _c, _d, _e;\n        if (!element) {\n            return true;\n        }\n        if ((_c = (_b = (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.appendTo) === null || _c === void 0 ? void 0 : _c.contains(element)) {\n            return true;\n        }\n        return (_e = (_d = this.calendar) === null || _d === void 0 ? void 0 : _d.calendarContainer) === null || _e === void 0 ? void 0 : _e.contains(element);\n    }\n    initFlatpickr(Flatpickr) {\n        // Create a new flatpickr.\n        this.calendar = new Flatpickr(this._input, Object.assign(Object.assign({}, this.settings), { disableMobile: true }));\n        this.addEventListener(this.calendar.altInput, 'input', (event) => {\n            if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {\n                this.settings.manualInputValue = event.target.value;\n                this.settings.isManuallyOverriddenValue = true;\n                this.settings.currentValue = event.target.value;\n            }\n            if (event.target.value === '' && this.calendar.selectedDates.length > 0) {\n                this.settings.wasDefaultValueChanged = true;\n                this.settings.defaultValue = event.target.value;\n                this.calendar.clear();\n            }\n            else {\n                this.settings.wasDefaultValueChanged = false;\n            }\n        });\n        const excludedFromMaskFormats = ['MMMM'];\n        if (!this.settings.readOnly && !lodash_1.default.some(excludedFromMaskFormats, format => lodash_1.default.includes(this.settings.format, format))) {\n            // Enforce the input mask of the format.\n            this.setInputMask(this.calendar._input, (0, utils_1.convertFormatToMask)(this.settings.format));\n        }\n        // Fixes an issue with IE11 where value is set only after the second click\n        // TODO: Remove when the issue is solved in the flatpickr library\n        if (isIEBrowser) {\n            // Remove the original blur listener, because value will be set to empty since relatedTarget is null in IE11\n            const originalBlurListener = this.calendar._handlers.find(({ event, element }) => event === 'blur' && element === this.calendar._input);\n            this.calendar._input.removeEventListener('blur', originalBlurListener.handler);\n            // Add the same event listener as in the original library, but with workaround for IE11 issue\n            this.addEventListener(this.calendar._input, 'blur', (event) => {\n                const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;\n                const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;\n                const isInput = event.target === this.calendar._input;\n                if (isInput && !this.isCalendarElement(relatedTarget)) {\n                    this.calendar.setDate(this.calendar._input.value, true, event.target === this.calendar.altInput\n                        ? this.calendar.config.altFormat\n                        : this.calendar.config.dateFormat);\n                }\n            });\n        }\n        // Make sure we commit the value after a blur event occurs.\n        this.addEventListener(this.calendar._input, 'blur', (event) => {\n            var _a, _b, _c, _d;\n            const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;\n            const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;\n            if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {\n                const inputValue = this.calendar.input.value;\n                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToMoment)(this.valueFormat)).toDate() : inputValue;\n                this.calendar.setDate(dateValue, true, this.settings.altFormat);\n            }\n            else if (!this.calendar.input.value && this.calendar.config.noCalendar) {\n                const value = (0, moment_1.default)({ hour: (_b = (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.defaultHour, minute: (_d = (_c = this.calendar) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.defaultMinute }).toDate();\n                this.calendar.setDate(value, true, this.settings.format);\n            }\n        });\n        // FJS-1103: When hit the enter button, the field not saving the year correctly\n        this.addEventListener(this.calendar.altInput, 'keydown', (event) => {\n            if (event.keyCode === 13) {\n                if (this.calendar.isOpen) {\n                    this.calendar.close();\n                    event.stopPropagation();\n                }\n            }\n        });\n        // If other fields are used to calculate disabled dates, we need to redraw calendar to refresh disabled dates\n        if (this.settings.disableFunction && this.componentInstance && this.componentInstance.root) {\n            this.componentInstance.root.on('change', (e) => {\n                if (e.changed && this.calendar) {\n                    this.calendar.redraw();\n                }\n            });\n        }\n        // Restore the calendar value from the component value.\n        this.setValue(this.componentValue);\n    }\n    initShortcutButtonsPlugin(ShortcutButtonsPlugin) {\n        this.settings.plugins = [\n            // eslint-disable-next-line new-cap\n            ShortcutButtonsPlugin({\n                button: this.component.shortcutButtons.map((btn) => ({ label: btn.label, attributes: btn.attribute })),\n                onClick: (index) => {\n                    const getValue = this.component.shortcutButtons[index].onClick;\n                    const date = this.evaluate(getValue, { date: new Date() }, 'date');\n                    this.calendar.setDate(date, true);\n                }\n            })\n        ];\n    }\n    get componentValue() {\n        let compValue = this.componentInstance.dataValue;\n        if (Array.isArray(compValue)) {\n            compValue = compValue[this.valueIndex];\n        }\n        return compValue;\n    }\n    getFlatpickrFormatDate(Flatpickr) {\n        return (date, format) => {\n            // Only format this if this is the altFormat and the form is readOnly.\n            if (this.settings.readOnly && (format === this.settings.altFormat)) {\n                if (!this.settings.enableTime || this.loadZones()) {\n                    return Flatpickr.formatDate(date, format);\n                }\n                const currentValue = new Date(this.getValue());\n                if (currentValue.toString() === date.toString()) {\n                    return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);\n                }\n                return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);\n            }\n            return Flatpickr.formatDate(date, format);\n        };\n    }\n    destroy(all = false) {\n        if (this.calendar) {\n            this.calendar.destroy();\n        }\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = CalendarWidget;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/widgets/CalendarWidget.js?");
 
 /***/ }),