@formio/js 5.0.0-dev.5719.d2d4a61 → 5.0.0-dev.5720.4409b3f

package/dist/formio.full.js

@@ -5290,7 +5290,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Element_1 = __importDefault(__webpack_require__(/*! ./Element */ \"./lib/cjs/Element.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst displays_1 = __importDefault(__webpack_require__(/*! ./displays */ \"./lib/cjs/displays/index.js\"));\nconst templates_1 = __importDefault(__webpack_require__(/*! ./templates */ \"./lib/cjs/templates/index.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\"));\nclass Form extends Element_1.default {\n    constructor(elementOrForm, formOrOptions, options = {}) {\n        let element, form, formOptions;\n        if (elementOrForm instanceof HTMLElement) {\n            element = elementOrForm;\n            form = formOrOptions;\n            formOptions = options;\n        }\n        else {\n            element = null;\n            form = elementOrForm;\n            formOptions = formOrOptions || {};\n        }\n        if (Formio_1.Formio.options && Formio_1.Formio.options.form) {\n            formOptions = Object.assign(formOptions, Formio_1.Formio.options.form);\n        }\n        super(formOptions);\n        if (this.options.useSessionToken) {\n            Formio_1.Formio.useSessionToken(this.options);\n        }\n        this.ready = new Promise((resolve, reject) => {\n            this.readyResolve = resolve;\n            this.readyReject = reject;\n        });\n        this.instance = null;\n        if (element) {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = element;\n        }\n        else {\n            this.element = null;\n        }\n        if (form) {\n            this.setForm(form)\n                .then(() => this.readyResolve(this.instance))\n                .catch(this.readyReject);\n        }\n        this.options = formOptions;\n        this.options.events = this.events;\n        this.display = '';\n    }\n    createElement(tag, attrs, children) {\n        const element = document.createElement(tag);\n        for (const attr in attrs) {\n            if (attrs.hasOwnProperty(attr)) {\n                element.setAttribute(attr, attrs[attr]);\n            }\n        }\n        (children || []).forEach(child => {\n            element.appendChild(this.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    set loading(load) {\n        if (!this.element || this.options.noLoader) {\n            return;\n        }\n        if (load) {\n            if (this.loader) {\n                return;\n            }\n            this.loader = this.createElement('div', {\n                'class': 'formio-loader'\n            }, [{\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper'\n                    },\n                    children: [{\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center'\n                            }\n                        }]\n                }]);\n            this.element.appendChild(this.loader);\n        }\n        else if (this.loader) {\n            if (this.element.contains(this.loader)) {\n                this.element.removeChild(this.loader);\n            }\n            this.loader = null;\n        }\n    }\n    /**\n     * Create a new form instance provided the display of the form.\n     * @param {string} display - The display of the form, either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Webform|Wizard|PDF} - The new form instance for the display.\n     */\n    create(display) {\n        if (this.options && (this.options.flatten || this.options.renderMode === 'flat')) {\n            display = 'form';\n        }\n        this.display = display;\n        if (displays_1.default.displays[display]) {\n            return new displays_1.default.displays[display](this.element, this.options);\n        }\n        else {\n            // eslint-disable-next-line new-cap\n            return new displays_1.default.displays['webform'](this.element, this.options);\n        }\n    }\n    /**\n     * Sets the form. Either as JSON or a URL to a form JSON schema.\n     * @param {string|object} formParam - Either the form JSON or the URL of the form json.\n     * @returns {void}\n     */\n    set form(formParam) {\n        this.setForm(formParam);\n    }\n    errorForm(err) {\n        return {\n            components: [\n                {\n                    'label': 'HTML',\n                    'tag': 'div',\n                    'className': 'error error-message alert alert-danger ui red message',\n                    'attrs': [\n                        {\n                            'attr': 'role',\n                            'value': 'alert'\n                        }\n                    ],\n                    'key': 'errorMessage',\n                    'type': 'htmlelement',\n                    'input': false,\n                    'content': typeof err === 'string' ? err : err.message,\n                }\n            ]\n        };\n    }\n    /**\n     * Check Subdirectories path and provide correct options\n     * @param {string} url - The the URL of the form json.\n     * @param {import('@formio/core').Form} form - The form json.\n     * @returns {object} The initial options with base and project.\n     */\n    getFormInitOptions(url, form) {\n        const options = {};\n        const index = url.indexOf(form === null || form === void 0 ? void 0 : form.path);\n        // form url doesn't include form path\n        if (index === -1) {\n            return options;\n        }\n        const projectUrl = url.substring(0, index - 1);\n        const urlParts = Formio_1.Formio.getUrlParts(projectUrl);\n        // project url doesn't include subdirectories path\n        if (!urlParts || urlParts.filter(part => !!part).length < 4) {\n            return options;\n        }\n        const baseUrl = `${urlParts[1]}${urlParts[2]}`;\n        // Skip if baseUrl has already been set\n        if (baseUrl !== Formio_1.Formio.baseUrl) {\n            return {\n                base: baseUrl,\n                project: projectUrl,\n            };\n        }\n        return {};\n    }\n    /**\n     * Sets the form to the JSON schema of a form.\n     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.\n     * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.\n     */\n    setForm(formParam) {\n        let result;\n        formParam = formParam || this.form;\n        if (typeof formParam === 'string') {\n            const formio = new Formio_1.Formio(formParam);\n            let error;\n            this.loading = true;\n            result = this.getSubmission(formio, this.options)\n                .catch((err) => {\n                error = err;\n            })\n                .then((submission) => {\n                return formio.loadForm()\n                    // If the form returned an error, show it instead of the form.\n                    .catch(err => {\n                    error = err;\n                })\n                    .then((form) => {\n                    // If the submission returned an error, show it instead of the form.\n                    if (error) {\n                        form = this.errorForm(error);\n                    }\n                    this.loading = false;\n                    this.instance = this.instance || this.create(form.display);\n                    const options = this.getFormInitOptions(formParam, form);\n                    this.instance.setUrl(formParam, options);\n                    this.instance.nosubmit = false;\n                    this._form = this.instance.form = form;\n                    if (submission) {\n                        this.instance.submission = submission;\n                    }\n                    if (error) {\n                        throw error;\n                    }\n                    return this.instance;\n                });\n            });\n        }\n        else {\n            this.instance = this.instance || this.create(formParam.display);\n            this._form = this.instance.form = formParam;\n            result = this.instance.ready;\n        }\n        // A redraw has occurred so save off the new element in case of a setDisplay causing a rebuild.\n        return result.then(() => {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = this.instance.element;\n            return this.instance;\n        });\n    }\n    getSubmission(formio, opts) {\n        if (formio.submissionId) {\n            return formio.loadSubmission(null, opts);\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Returns the loaded forms JSON.\n     * @returns {object} - The loaded form's JSON\n     */\n    get form() {\n        return this._form;\n    }\n    /**\n     * Changes the display of the form.\n     * @param {string} display - The display to set this form. Either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created after changing the display.\n     */\n    setDisplay(display) {\n        if ((this.display === display) && this.instance) {\n            return Promise.resolve(this.instance);\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.instance = this.create(display);\n        return this.setForm(this.form);\n    }\n    empty() {\n        if (this.element) {\n            while (this.element.firstChild) {\n                this.element.removeChild(this.element.firstChild);\n            }\n        }\n    }\n    static embed(embed) {\n        return new Promise((resolve) => {\n            if (!embed || !embed.src) {\n                resolve();\n            }\n            const id = this.id || `formio-${Math.random().toString(36).substring(7)}`;\n            const className = embed.class || 'formio-form-wrapper';\n            let code = embed.styles ? `<link rel=\"stylesheet\" href=\"${embed.styles}\">` : '';\n            code += `<div id=\"${id}\" class=\"${className}\"></div>`;\n            document.write(code);\n            let attempts = 0;\n            const wait = setInterval(() => {\n                attempts++;\n                const formElement = document.getElementById(id);\n                if (formElement || attempts > 10) {\n                    resolve(new Form(formElement, embed.src).ready);\n                    clearInterval(wait);\n                }\n            }, 10);\n        });\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If the string should be force sanitized.\n     * @returns {string} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize) {\n        // If Sanitize is turned off\n        if (this.options.sanitize === false && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, this.options);\n    }\n    setContent(element, content, forceSanitize) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Build a new form.\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n     */\n    build() {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        if (!this.element) {\n            return Promise.reject('No DOM element for form.');\n        }\n        // Add temporary loader.\n        const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';\n        const loader = templates_1.default[template].loader || templates_1.default.bootstrap.loader;\n        this.setContent(this.element, loader.form);\n        return this.render().then(html => {\n            this.setContent(this.element, html);\n            return this.attach(this.element).then(() => this.instance);\n        })\n            .then((param) => {\n            this.emit('build', param);\n            return param;\n        });\n    }\n    render() {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        return Promise.resolve(this.instance.render())\n            .then((param) => {\n            this.emit('render', param);\n            return param;\n        });\n    }\n    attach(element) {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        if (this.element) {\n            delete this.element.component;\n        }\n        this.element = element;\n        return this.instance.attach(this.element)\n            .then((param) => {\n            this.emit('attach', param);\n            return param;\n        });\n    }\n    teardown() {\n        super.teardown();\n        delete this.instance;\n        delete this.ready;\n    }\n}\nexports[\"default\"] = Form;\n// Allow simple embedding.\nFormio_1.Formio.embedForm = (embed) => Form.embed(embed);\n/**\n * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.\n * @param {object} elementOrForm - The DOM element you wish to render this form within, or the form definition.\n * @param {object | string | FormOptions} formOrOptions - A Form JSON schema, the URL of a hosted form, or the form options.\n * @param {FormOptions} [options] - The options to create a new form instance.\n * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n * @example\n * import { Formio } from '@formio/js';\n * Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');\n */\nFormio_1.Formio.createForm = (elementOrForm, formOrOptions, options) => {\n    return (new Form(elementOrForm, formOrOptions, options)).ready;\n};\nFormio_1.Formio.Form = Form;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Form.js?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Element_1 = __importDefault(__webpack_require__(/*! ./Element */ \"./lib/cjs/Element.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst displays_1 = __importDefault(__webpack_require__(/*! ./displays */ \"./lib/cjs/displays/index.js\"));\nconst templates_1 = __importDefault(__webpack_require__(/*! ./templates */ \"./lib/cjs/templates/index.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\"));\nclass Form extends Element_1.default {\n    constructor(elementOrForm, formOrOptions, options = {}) {\n        let element, form, formOptions;\n        if (elementOrForm instanceof HTMLElement) {\n            element = elementOrForm;\n            form = formOrOptions;\n            formOptions = options;\n        }\n        else {\n            element = null;\n            form = elementOrForm;\n            formOptions = formOrOptions || {};\n        }\n        if (Formio_1.Formio.options && Formio_1.Formio.options.form) {\n            formOptions = Object.assign(formOptions, Formio_1.Formio.options.form);\n        }\n        super(formOptions);\n        if (this.options.useSessionToken) {\n            Formio_1.Formio.useSessionToken(this.options);\n        }\n        this.ready = new Promise((resolve, reject) => {\n            this.readyResolve = resolve;\n            this.readyReject = reject;\n        });\n        this.instance = null;\n        if (element) {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = element;\n        }\n        else {\n            this.element = null;\n        }\n        if (form) {\n            this.setForm(form)\n                .then(() => this.readyResolve(this.instance))\n                .catch(this.readyReject);\n        }\n        this.options = formOptions;\n        this.options.events = this.events;\n        this.display = '';\n    }\n    createElement(tag, attrs, children) {\n        const element = document.createElement(tag);\n        for (const attr in attrs) {\n            if (attrs.hasOwnProperty(attr)) {\n                element.setAttribute(attr, attrs[attr]);\n            }\n        }\n        (children || []).forEach(child => {\n            element.appendChild(this.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    set loading(load) {\n        if (!this.element || this.options.noLoader) {\n            return;\n        }\n        if (load) {\n            if (this.loader) {\n                return;\n            }\n            this.loader = this.createElement('div', {\n                'class': 'formio-loader'\n            }, [{\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper'\n                    },\n                    children: [{\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center'\n                            }\n                        }]\n                }]);\n            this.element.appendChild(this.loader);\n        }\n        else if (this.loader) {\n            if (this.element.contains(this.loader)) {\n                this.element.removeChild(this.loader);\n            }\n            this.loader = null;\n        }\n    }\n    /**\n     * Create a new form instance provided the display of the form.\n     * @param {string} display - The display of the form, either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Webform|Wizard|PDF} - The new form instance for the display.\n     */\n    create(display) {\n        if (this.options && (this.options.flatten || this.options.renderMode === 'flat')) {\n            display = 'form';\n        }\n        this.display = display;\n        if (displays_1.default.displays[display]) {\n            return new displays_1.default.displays[display](this.element, this.options);\n        }\n        else {\n            // eslint-disable-next-line new-cap\n            return new displays_1.default.displays['webform'](this.element, this.options);\n        }\n    }\n    /**\n     * Sets the form. Either as JSON or a URL to a form JSON schema.\n     * @param {string|object} formParam - Either the form JSON or the URL of the form json.\n     * @returns {void}\n     */\n    set form(formParam) {\n        this.setForm(formParam);\n    }\n    errorForm(err) {\n        return {\n            components: [\n                {\n                    'label': 'HTML',\n                    'tag': 'div',\n                    'className': 'error error-message alert alert-danger ui red message',\n                    'attrs': [\n                        {\n                            'attr': 'role',\n                            'value': 'alert'\n                        }\n                    ],\n                    'key': 'errorMessage',\n                    'type': 'htmlelement',\n                    'input': false,\n                    'content': typeof err === 'string' ? err : err.message,\n                }\n            ]\n        };\n    }\n    /**\n     * Check Subdirectories path and provide correct options\n     * @param {string} url - The the URL of the form json.\n     * @param {import('@formio/core').Form} form - The form json.\n     * @returns {object} The initial options with base and project.\n     */\n    getFormInitOptions(url, form) {\n        const options = {};\n        const index = url.indexOf(form === null || form === void 0 ? void 0 : form.path);\n        // form url doesn't include form path\n        if (index === -1) {\n            return options;\n        }\n        const projectUrl = url.substring(0, index - 1);\n        const urlParts = Formio_1.Formio.getUrlParts(projectUrl);\n        // project url doesn't include subdirectories path\n        if (!urlParts || urlParts.filter(part => !!part).length < 4) {\n            return options;\n        }\n        const baseUrl = `${urlParts[1]}${urlParts[2]}`;\n        // Skip if baseUrl has already been set\n        if (baseUrl !== Formio_1.Formio.baseUrl) {\n            return {\n                base: baseUrl,\n                project: projectUrl,\n            };\n        }\n        return {};\n    }\n    /**\n     * Sets the form to the JSON schema of a form.\n     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.\n     * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.\n     */\n    setForm(formParam) {\n        let result;\n        formParam = formParam || this.form;\n        if (typeof formParam === 'string') {\n            const formio = new Formio_1.Formio(formParam);\n            let error;\n            this.loading = true;\n            result = this.getSubmission(formio, this.options)\n                .catch((err) => {\n                error = err;\n            })\n                .then((submission) => {\n                return formio.loadForm()\n                    // If the form returned an error, show it instead of the form.\n                    .catch(err => {\n                    error = err;\n                })\n                    .then((form) => {\n                    // If the submission returned an error, show it instead of the form.\n                    if (error) {\n                        form = this.errorForm(error);\n                    }\n                    this.loading = false;\n                    this.instance = this.instance || this.create(form.display);\n                    // If we're in builder mode, instance.setUrl is not a function, so just manually set the URL.\n                    if (this.instance.setUrl) {\n                        const options = this.getFormInitOptions(formParam, form);\n                        this.instance.setUrl(formParam, options);\n                    }\n                    else {\n                        this.instance.url = formParam;\n                    }\n                    this.instance.nosubmit = false;\n                    this._form = this.instance.form = form;\n                    if (submission) {\n                        this.instance.submission = submission;\n                    }\n                    if (error) {\n                        throw error;\n                    }\n                    return this.instance;\n                });\n            });\n        }\n        else {\n            this.instance = this.instance || this.create(formParam.display);\n            this._form = this.instance.form = formParam;\n            result = this.instance.ready;\n        }\n        // A redraw has occurred so save off the new element in case of a setDisplay causing a rebuild.\n        return result.then(() => {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = this.instance.element;\n            return this.instance;\n        });\n    }\n    getSubmission(formio, opts) {\n        if (formio.submissionId) {\n            return formio.loadSubmission(null, opts);\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Returns the loaded forms JSON.\n     * @returns {object} - The loaded form's JSON\n     */\n    get form() {\n        return this._form;\n    }\n    /**\n     * Changes the display of the form.\n     * @param {string} display - The display to set this form. Either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created after changing the display.\n     */\n    setDisplay(display) {\n        if ((this.display === display) && this.instance) {\n            return Promise.resolve(this.instance);\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.instance = this.create(display);\n        return this.setForm(this.form);\n    }\n    empty() {\n        if (this.element) {\n            while (this.element.firstChild) {\n                this.element.removeChild(this.element.firstChild);\n            }\n        }\n    }\n    static embed(embed) {\n        return new Promise((resolve) => {\n            if (!embed || !embed.src) {\n                resolve();\n            }\n            const id = this.id || `formio-${Math.random().toString(36).substring(7)}`;\n            const className = embed.class || 'formio-form-wrapper';\n            let code = embed.styles ? `<link rel=\"stylesheet\" href=\"${embed.styles}\">` : '';\n            code += `<div id=\"${id}\" class=\"${className}\"></div>`;\n            document.write(code);\n            let attempts = 0;\n            const wait = setInterval(() => {\n                attempts++;\n                const formElement = document.getElementById(id);\n                if (formElement || attempts > 10) {\n                    resolve(new Form(formElement, embed.src).ready);\n                    clearInterval(wait);\n                }\n            }, 10);\n        });\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If the string should be force sanitized.\n     * @returns {string} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize) {\n        // If Sanitize is turned off\n        if (this.options.sanitize === false && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, this.options);\n    }\n    setContent(element, content, forceSanitize) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Build a new form.\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n     */\n    build() {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        if (!this.element) {\n            return Promise.reject('No DOM element for form.');\n        }\n        // Add temporary loader.\n        const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';\n        const loader = templates_1.default[template].loader || templates_1.default.bootstrap.loader;\n        this.setContent(this.element, loader.form);\n        return this.render().then(html => {\n            this.setContent(this.element, html);\n            return this.attach(this.element).then(() => this.instance);\n        })\n            .then((param) => {\n            this.emit('build', param);\n            return param;\n        });\n    }\n    render() {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        return Promise.resolve(this.instance.render())\n            .then((param) => {\n            this.emit('render', param);\n            return param;\n        });\n    }\n    attach(element) {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        if (this.element) {\n            delete this.element.component;\n        }\n        this.element = element;\n        return this.instance.attach(this.element)\n            .then((param) => {\n            this.emit('attach', param);\n            return param;\n        });\n    }\n    teardown() {\n        super.teardown();\n        delete this.instance;\n        delete this.ready;\n    }\n}\nexports[\"default\"] = Form;\n// Allow simple embedding.\nFormio_1.Formio.embedForm = (embed) => Form.embed(embed);\n/**\n * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.\n * @param {object} elementOrForm - The DOM element you wish to render this form within, or the form definition.\n * @param {object | string | FormOptions} formOrOptions - A Form JSON schema, the URL of a hosted form, or the form options.\n * @param {FormOptions} [options] - The options to create a new form instance.\n * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n * @example\n * import { Formio } from '@formio/js';\n * Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');\n */\nFormio_1.Formio.createForm = (elementOrForm, formOrOptions, options) => {\n    return (new Form(elementOrForm, formOrOptions, options)).ready;\n};\nFormio_1.Formio.Form = Form;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Form.js?");
 
 /***/ }),
 
@@ -5334,7 +5334,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 moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst compare_versions_1 = __webpack_require__(/*! compare-versions */ \"./node_modules/compare-versions/lib/esm/index.js\");\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst i18n_1 = __importDefault(__webpack_require__(/*! ./i18n */ \"./lib/cjs/i18n.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ./components/_classes/nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\n// Initialize the available forms.\nFormio_1.Formio.forms = {};\n// Allow people to register components.\nFormio_1.Formio.registerComponent = Components_1.default.setComponent;\n/**\n *\n * @param {any} icons  - The icons to use.\n * @returns {any} - The icon set.\n */\nfunction getIconSet(icons) {\n    if (icons === \"fontawesome\") {\n        return \"fa\";\n    }\n    return icons || \"\";\n}\n/**\n *\n * @param {any} options - The options to get.\n * @returns {any} - The options.\n */\nfunction getOptions(options) {\n    options = lodash_1.default.defaults(options, {\n        submitOnEnter: false,\n        iconset: getIconSet(options && options.icons ? options.icons : Formio_1.Formio.icons),\n        i18next: null,\n        saveDraft: false,\n        alwaysDirty: false,\n        saveDraftThrottle: 5000,\n        display: \"form\",\n        cdnUrl: Formio_1.Formio.cdn.baseUrl,\n    });\n    if (!options.events) {\n        options.events = new EventEmitter_1.default();\n    }\n    return options;\n}\n/**\n * Represents a JSON value.\n * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON\n */\n/**\n * Represents a JSON array.\n * @typedef {Array<JSON>} JSONArray\n */\n/**\n * Represents a JSON object.\n * @typedef {{[key: string]: JSON}} JSONObject\n */\n/**\n * @typedef {object} FormioHooks\n * @property {Function} [beforeSubmit] - A function that is called before the form is submitted.\n * @property {Function} [beforeCancel] - A function that is called before the form is canceled.\n * @property {Function} [beforeNext] - A function that is called before moving to the next page in a multi-page form.\n * @property {Function} [beforePrev] - A function that is called before moving to the previous page in a multi-page form.\n * @property {Function} [attachComponent] - A function that is called when a component is attached to the form.\n * @property {Function} [setDataValue] - A function that is called when setting the value of a data component.\n * @property {Function} [addComponents] - A function that is called when adding multiple components to the form.\n * @property {Function} [addComponent] - A function that is called when adding a single component to the form.\n * @property {Function} [customValidation] - A function that is called for custom validation of the form.\n * @property {Function} [attachWebform] - A function that is called when attaching a webform to the form.\n */\n/**\n * @typedef {object} SanitizeConfig\n * @property {string[]} [addAttr] - The attributes to add.\n * @property {string[]} [addTags] - The tags to add.\n * @property {string[]} [allowedAttrs] - The allowed attributes.\n * @property {string[]} [allowedTags] - The allowed tags.\n * @property {string[]} [allowedUriRegex] - The allowed URI regex.\n * @property {string[]} [addUriSafeAttr] - The URI safe attributes.\n */\n/**\n * @typedef {object} ButtonSettings\n * @property {boolean} [showPrevious] - Show the \"Previous\" button.\n * @property {boolean} [showNext] - Show the \"Next\" button.\n * @property {boolean} [showCancel] - Show the \"Cancel\" button.\n * @property {boolean} [showSubmit] - Show the \"Submit\" button.\n */\n/**\n * @typedef {object} FormOptions\n * @property {boolean} [saveDraft] - Enable the save draft feature.\n * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.\n * @property {boolean} [readOnly] - Set this form to readOnly.\n * @property {boolean} [noAlerts] - Disable the alerts dialog.\n * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.\n * @property {string} [template] - Custom logic for creation of elements.\n * @property {boolean} [noDefaults] - Exclude default values from the settings.\n * @property {any} [fileService] - The file service for this form.\n * @property {EventEmitter} [events] - The EventEmitter for this form.\n * @property {string} [language] - The language to render this form in.\n * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.\n * @property {boolean} [viewAsHtml] - View the form as raw HTML.\n * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.\n * @property {boolean} [highlightErrors] - Highlight any errors on the form.\n * @property {string} [componentErrorClass] - The error class for components.\n * @property {any} [templates] - The templates for this form.\n * @property {string} [iconset] - The iconset for this form.\n * @property {import('@formio/core').Component[]} [components] - The components for this form.\n * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.\n * @property {boolean} [showHiddenFields] - Show hidden fields.\n * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.\n * @property {{[key: string]: boolean}} [show] - Components to show for this form.\n * @property {Formio} [formio] - The Formio instance for this form.\n * @property {string} [decimalSeparator] - The decimal separator for this form.\n * @property {string} [thousandsSeparator] - The thousands separator for this form.\n * @property {FormioHooks} [hooks] - The hooks for this form.\n * @property {boolean} [alwaysDirty] - Always be dirty.\n * @property {boolean} [skipDraftRestore] - Skip restoring a draft.\n * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.\n * @property {string} [cdnUrl] - The CDN url for this form.\n * @property {boolean} [flatten] - Flatten the form.\n * @property {boolean} [sanitize] - Sanitize the form.\n * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.\n * @property {ButtonSettings} [buttonSettings] - The button settings for this form.\n * @property {object} [breadcrumbSettings] - The breadcrumb settings for this form.\n * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).\n * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).\n * @property {boolean} [showCheckboxBackground] - Show the checkbox background.\n * @property {boolean} [inputsOnly] - Only show inputs in the form and no labels.\n * @property {boolean} [building] - If we are in the process of building the form.\n * @property {number} [zoom] - The zoom for PDF forms.\n */\nclass Webform extends NestedDataComponent_1.default {\n    /**\n     * Creates a new Form instance.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [options] - The options to create a new form instance.\n     */\n    constructor(elementOrOptions, options = undefined) {\n        let element, formOptions;\n        if (elementOrOptions instanceof HTMLElement || options) {\n            element = elementOrOptions;\n            formOptions = options || {};\n        }\n        else {\n            formOptions = elementOrOptions || {};\n        }\n        super(null, getOptions(formOptions));\n        this.executeShortcuts = (event) => {\n            const { target } = event;\n            if (!this.keyboardCatchableElement(target)) {\n                return;\n            }\n            const ctrl = event.ctrlKey || event.metaKey;\n            const keyCode = event.keyCode;\n            let char = \"\";\n            if (65 <= keyCode && keyCode <= 90) {\n                char = String.fromCharCode(keyCode);\n            }\n            else if (keyCode === 13) {\n                char = \"Enter\";\n            }\n            else if (keyCode === 27) {\n                char = \"Esc\";\n            }\n            lodash_1.default.each(this.shortcuts, (shortcut) => {\n                if (shortcut.ctrl && !ctrl) {\n                    return;\n                }\n                if (shortcut.shortcut === char) {\n                    shortcut.element.click();\n                    event.preventDefault();\n                }\n            });\n        };\n        this.setElement(element);\n        // Keep track of all available forms globally.\n        Formio_1.Formio.forms[this.id] = this;\n        // Set the base url.\n        if (this.options.baseUrl) {\n            Formio_1.Formio.setBaseUrl(this.options.baseUrl);\n        }\n        /**\n         * The type of this element.\n         * @type {string}\n         */\n        this.type = \"form\";\n        this._src = \"\";\n        this._loading = false;\n        this._form = {};\n        this.draftEnabled = false;\n        this.savingDraft = false;\n        if (this.options.saveDraftThrottle) {\n            this.triggerSaveDraft = lodash_1.default.throttle(this.saveDraft.bind(this), this.options.saveDraftThrottle);\n        }\n        else {\n            this.triggerSaveDraft = this.saveDraft.bind(this);\n        }\n        /**\n         * Determines if this form should submit the API on submit.\n         * @type {boolean}\n         */\n        this.nosubmit = false;\n        /**\n         * Determines if the form has tried to be submitted, error or not.\n         * @type {boolean}\n         */\n        this.submitted = false;\n        /**\n         * Determines if the form is being submitted at the moment.\n         * @type {boolean}\n         */\n        this.submitting = false;\n        /**\n         * The Formio instance for this form.\n         * @type {Formio}\n         */\n        this.formio = null;\n        /**\n         * The loader HTML element.\n         * @type {HTMLElement}\n         */\n        this.loader = null;\n        /**\n         * The alert HTML element\n         * @type {HTMLElement}\n         */\n        this.alert = null;\n        /**\n         * Promise that is triggered when the submission is done loading.\n         * @type {Promise}\n         */\n        this.onSubmission = null;\n        /**\n         * Determines if this submission is explicitly set.\n         * @type {boolean}\n         */\n        this.submissionSet = false;\n        /**\n         * Promise that executes when the form is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.formReady.then(() => {\n         *   console.log('The form is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example';\n         */\n        this.formReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.formReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.formReadyReject = reject;\n        });\n        /**\n         * Promise that executes when the submission is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.submissionReady.then(() => {\n         *   console.log('The submission is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example/submission/234234234234234243';\n         */\n        this.submissionReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.submissionReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.submissionReadyReject = reject;\n        });\n        this.shortcuts = [];\n        // Set language after everything is established.\n        this.language = this.i18next.language;\n        // See if we need to restore the draft from a user.\n        if (this.options.saveDraft) {\n            if (this.options.skipDraftRestore) {\n                this.draftEnabled = true;\n                this.savingDraft = false;\n            }\n            else {\n                this.formReady.then(() => {\n                    const user = Formio_1.Formio.getUser();\n                    // Only restore a draft if the submission isn't explicitly set.\n                    if (user && !this.submissionSet) {\n                        this.restoreDraft(user._id);\n                    }\n                });\n            }\n        }\n        this.component.clearOnHide = false;\n        // Ensure the root is set to this component.\n        this.root = this;\n        this.localRoot = this;\n    }\n    /* eslint-enable max-statements */\n    get language() {\n        return this.options.language;\n    }\n    get emptyValue() {\n        return null;\n    }\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Sets the language for this form.\n     * @param {string} lang - The language to use (e.g. 'en', 'sp', etc.)\n     */\n    set language(lang) {\n        if (!this.i18next) {\n            return;\n        }\n        this.options.language = lang;\n        if (this.i18next.language === lang) {\n            return;\n        }\n        this.i18next.changeLanguage(lang, (err) => {\n            if (err) {\n                return;\n            }\n            this.rebuild();\n            this.emit(\"languageChanged\");\n        });\n    }\n    get componentComponents() {\n        return this.form.components;\n    }\n    get shadowRoot() {\n        return this.options.shadowRoot;\n    }\n    /**\n     * Add a language for translations\n     * @param {string} code - The language code for the language being added.\n     * @param {object} lang - The language translations.\n     * @param {boolean} [active] - If this language should be set as the active language.\n     */\n    addLanguage(code, lang, active = false) {\n        if (this.i18next) {\n            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);\n            this.i18next.addResourceBundle(code, \"translation\", translations, true, true);\n            if (active) {\n                this.language = code;\n            }\n        }\n    }\n    keyboardCatchableElement(element) {\n        if (element.nodeName === \"TEXTAREA\") {\n            return false;\n        }\n        if (element.nodeName === \"INPUT\") {\n            return [\"text\", \"email\", \"password\"].indexOf(element.type) === -1;\n        }\n        return true;\n    }\n    addShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        shortcut = lodash_1.default.capitalize(shortcut);\n        if (shortcut === \"Enter\" || shortcut === \"Esc\") {\n            // Restrict Enter and Esc only for buttons\n            if (element.tagName !== \"BUTTON\") {\n                return;\n            }\n            this.shortcuts.push({\n                shortcut,\n                element,\n            });\n        }\n        else {\n            this.shortcuts.push({\n                ctrl: true,\n                shortcut,\n                element,\n            });\n        }\n    }\n    removeShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        lodash_1.default.remove(this.shortcuts, {\n            shortcut,\n            element,\n        });\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - The source of the form.\n     */\n    get src() {\n        return this._src;\n    }\n    /**\n     * Loads the submission if applicable.\n     * @returns {Promise} - The promise that is triggered when the submission is loaded.\n     */\n    loadSubmission() {\n        this.loadingSubmission = true;\n        if (this.formio.submissionId) {\n            this.onSubmission = this.formio\n                .loadSubmission()\n                .then((submission) => this.setSubmission(submission), (err) => this.submissionReadyReject(err))\n                .catch((err) => this.submissionReadyReject(err));\n        }\n        else {\n            this.submissionReadyResolve();\n        }\n        return this.submissionReady;\n    }\n    /**\n     * Set the src of the form renderer.\n     * @param {string} value - The source value to set.\n     * @param {any} options - The options to set.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setSrc(value, options) {\n        if (this.setUrl(value, options)) {\n            this.nosubmit = false;\n            return this.formio\n                .loadForm({ params: { live: 1 } })\n                .then((form) => {\n                const setForm = this.setForm(form);\n                this.loadSubmission();\n                return setForm;\n            })\n                .catch((err) => {\n                console.warn(err);\n                this.formReadyReject(err);\n            });\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Set the Form source, which is typically the Form.io embed URL.\n     * @param {string} value - The value of the form embed url.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.formReady.then(() => {\n     *   console.log('The form is formReady!');\n     * });\n     * form.src = 'https://examples.form.io/example';\n     */\n    set src(value) {\n        this.setSrc(value);\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - returns the source of the form.\n     */\n    get url() {\n        return this._src;\n    }\n    /**\n     * Sets the url of the form renderer.\n     * @param {string} value - The value to set the url to.\n     * @param {any} options - The options to set.\n     * @returns {boolean} - TRUE means the url was set, FALSE otherwise.\n     */\n    setUrl(value, options) {\n        if (!value || typeof value !== \"string\" || value === this._src) {\n            return false;\n        }\n        this._src = value;\n        this.nosubmit = true;\n        this.formio = this.options.formio = new Formio_1.Formio(value, options);\n        if (this.type === \"form\") {\n            // Set the options source so this can be passed to other components.\n            this.options.src = value;\n        }\n        return true;\n    }\n    /**\n     * Set the form source but don't initialize the form and submission from the url.\n     * @param {string} value - The value of the form embed url.\n     */\n    set url(value) {\n        this.setUrl(value);\n    }\n    /**\n     * Called when both the form and submission have been loaded.\n     * @returns {Promise} - The promise to trigger when both form and submission have loaded.\n     */\n    get ready() {\n        return this.formReady.then(() => {\n            return super.ready.then(() => {\n                return this.loadingSubmission ? this.submissionReady : true;\n            });\n        });\n    }\n    /**\n     * Returns if this form is loading.\n     * @returns {boolean} - TRUE means the form is loading, FALSE otherwise.\n     */\n    get loading() {\n        return this._loading;\n    }\n    /**\n     * Set the loading state for this form, and also show the loader spinner.\n     * @param {boolean} loading - If this form should be \"loading\" or not.\n     */\n    set loading(loading) {\n        if (this._loading !== loading) {\n            this._loading = loading;\n            if (!this.loader && loading) {\n                this.loader = this.ce(\"div\", {\n                    class: \"loader-wrapper\",\n                });\n                const spinner = this.ce(\"div\", {\n                    class: \"loader text-center\",\n                });\n                this.loader.appendChild(spinner);\n            }\n            /* eslint-disable max-depth */\n            if (this.loader) {\n                try {\n                    if (loading) {\n                        this.prependTo(this.loader, this.wrapper);\n                    }\n                    else {\n                        this.removeChildFrom(this.loader, this.wrapper);\n                    }\n                }\n                catch (err) {\n                    // ingore\n                }\n            }\n            /* eslint-enable max-depth */\n        }\n    }\n    /**\n     * Sets the JSON schema for the form to be rendered.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.setForm({\n     *   components: [\n     *     {\n     *       type: 'textfield',\n     *       key: 'firstName',\n     *       label: 'First Name',\n     *       placeholder: 'Enter your first name.',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'textfield',\n     *       key: 'lastName',\n     *       label: 'Last Name',\n     *       placeholder: 'Enter your last name',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'button',\n     *       action: 'submit',\n     *       label: 'Submit',\n     *       theme: 'primary'\n     *     }\n     *   ]\n     * });\n     * @param {object} form - The JSON schema of the form @see https://examples.form.io/example for an example JSON schema.\n     * @param {any} flags - Any flags to apply when setting the form.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setForm(form, flags = {}) {\n        var _a, _b, _c;\n        const isFormAlreadySet = this._form && ((_a = this._form.components) === null || _a === void 0 ? void 0 : _a.length);\n        try {\n            // Do not set the form again if it has been already set\n            if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {\n                return Promise.resolve();\n            }\n            // Create the form.\n            this._form = (flags === null || flags === void 0 ? void 0 : flags.keepAsReference) ? form : lodash_1.default.cloneDeep(form);\n            if (this.onSetForm) {\n                this.onSetForm(lodash_1.default.cloneDeep(this._form), form);\n            }\n            if ((_c = (_b = this.parent) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.modalEdit) {\n                return Promise.resolve();\n            }\n        }\n        catch (err) {\n            console.warn(err);\n            // If provided form is not a valid JSON object, do not set it too\n            return Promise.resolve();\n        }\n        // Allow the form to provide component overrides.\n        if (form && form.settings && form.settings.components) {\n            this.options.components = form.settings.components;\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        // Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options\n        if (!this.options.sanitizeConfig && !this.builderMode) {\n            this.options.sanitizeConfig =\n                lodash_1.default.get(form, \"settings.sanitizeConfig\") ||\n                    lodash_1.default.get(form, \"globalSettings.sanitizeConfig\");\n        }\n        if (\"schema\" in form && (0, compare_versions_1.compareVersions)(form.schema, \"1.x\") > 0) {\n            this.ready.then(() => {\n                this.setAlert(\"alert alert-danger\", \"Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.\");\n            });\n        }\n        // See if they pass a module, and evaluate it if so.\n        if (form && form.module) {\n            let formModule = null;\n            if (typeof form.module === \"string\") {\n                try {\n                    formModule = this.evaluate(`return ${form.module}`);\n                }\n                catch (err) {\n                    console.warn(err);\n                }\n            }\n            else {\n                formModule = form.module;\n            }\n            if (formModule) {\n                Formio_1.Formio.use(formModule);\n                // Since we got here after instantiation, we need to manually apply form options.\n                if (formModule.options && formModule.options.form) {\n                    this.options = Object.assign(this.options, formModule.options.form);\n                }\n            }\n        }\n        this.initialized = false;\n        const rebuild = this.rebuild() || Promise.resolve();\n        return rebuild.then(() => {\n            this.emit(\"formLoad\", form);\n            this.triggerCaptcha();\n            // Make sure to trigger onChange after a render event occurs to speed up form rendering.\n            setTimeout(() => {\n                this.onChange(flags);\n                this.formReadyResolve();\n            }, 0);\n            return this.formReady;\n        });\n    }\n    /**\n     * Gets the form object.\n     * @returns {object} - The form JSON schema.\n     */\n    get form() {\n        if (!this._form) {\n            this._form = {\n                components: [],\n            };\n        }\n        return this._form;\n    }\n    /**\n     * Sets the form value.\n     * @alias setForm\n     * @param {object} form - The form schema object.\n     */\n    set form(form) {\n        this.setForm(form);\n    }\n    /**\n     * Returns the submission object that was set within this form.\n     * @returns {object} - The submission object.\n     */\n    get submission() {\n        return this.getValue();\n    }\n    /**\n     * Sets the submission of a form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * @param {object} submission - The Form.io submission object.\n     */\n    set submission(submission) {\n        this.setSubmission(submission);\n    }\n    /**\n     * Sets the submission value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubmission(submission, flags = {}) {\n        this.submissionSet = true;\n        this.triggerChange(flags);\n        this.emit('beforeSetSubmission', submission);\n        this.setValue(submission, flags);\n    }\n    /**\n     * Sets a submission and returns the promise when it is ready.\n     * @param {any} submission - The submission to set.\n     * @param {any} flags - Any flags to apply when setting the submission.\n     * @returns {Promise} - The promise that is triggered when the submission is set.\n     */\n    setSubmission(submission, flags = {}) {\n        flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, \"fromSubmission\") ? flags.fromSubmission : true });\n        return (this.onSubmission = this.formReady\n            .then((resolveFlags) => {\n            if (resolveFlags) {\n                flags = Object.assign(Object.assign({}, flags), resolveFlags);\n            }\n            this.onSetSubmission(submission, flags);\n            return this.submissionReadyResolve(submission);\n        }, (err) => this.submissionReadyReject(err))\n            .catch((err) => this.submissionReadyReject(err)));\n    }\n    handleDraftError(errName, errDetails, restoreDraft) {\n        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || \"\"}`);\n        console.warn(errorMessage);\n        this.emit(restoreDraft ? \"restoreDraftError\" : \"saveDraftError\", errDetails || errorMessage);\n    }\n    saveDraft() {\n        if (!this.draftEnabled) {\n            return;\n        }\n        if (!this.formio) {\n            this.handleDraftError(\"saveDraftInstanceError\");\n            return;\n        }\n        if (!Formio_1.Formio.getUser()) {\n            this.handleDraftError(\"saveDraftAuthError\");\n            return;\n        }\n        const draft = (0, utils_1.fastCloneDeep)(this.submission);\n        draft.state = \"draft\";\n        if (!this.savingDraft && !this.submitting) {\n            this.emit(\"saveDraftBegin\");\n            this.savingDraft = true;\n            this.formio\n                .saveSubmission(draft)\n                .then((sub) => {\n                // Set id to submission to avoid creating new draft submission\n                this.submission._id = sub._id;\n                this.savingDraft = false;\n                this.emit(\"saveDraft\", sub);\n            })\n                .catch((err) => {\n                this.savingDraft = false;\n                this.handleDraftError(\"saveDraftError\", err);\n            });\n        }\n    }\n    /**\n     * Restores a draft submission based on the user who is authenticated.\n     * @param {string} userId - The user id where we need to restore the draft from.\n     */\n    restoreDraft(userId) {\n        const formio = this.formio || this.options.formio;\n        if (!formio) {\n            this.handleDraftError(\"restoreDraftInstanceError\", null, true);\n            return;\n        }\n        this.savingDraft = true;\n        formio\n            .loadSubmissions({\n            params: {\n                state: 'draft',\n                owner: userId,\n                sort: '-created'\n            },\n        })\n            .then((submissions) => {\n            if (submissions.length > 0 && !this.options.skipDraftRestore) {\n                const draft = (0, utils_1.fastCloneDeep)(submissions[0]);\n                return this.setSubmission(draft).then(() => {\n                    this.draftEnabled = true;\n                    this.savingDraft = false;\n                    this.emit(\"restoreDraft\", draft);\n                });\n            }\n            // Enable drafts so that we can keep track of changes.\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.emit(\"restoreDraft\", null);\n        })\n            .catch((err) => {\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.handleDraftError(\"restoreDraftError\", err, true);\n        });\n    }\n    get schema() {\n        const schema = (0, utils_1.fastCloneDeep)(lodash_1.default.omit(this._form, [\"components\"]));\n        schema.components = [];\n        this.eachComponent((component) => schema.components.push(component.schema));\n        return schema;\n    }\n    mergeData(_this, _that) {\n        lodash_1.default.mergeWith(_this, _that, (thisValue, thatValue) => {\n            if (Array.isArray(thisValue) &&\n                Array.isArray(thatValue) &&\n                thisValue.length !== thatValue.length) {\n                return thatValue;\n            }\n        });\n    }\n    setValue(submission, flags = {}) {\n        if (!submission || !submission.data) {\n            submission = {\n                data: {},\n                metadata: submission.metadata,\n            };\n        }\n        // Metadata needs to be available before setValue\n        this._submission.metadata = submission.metadata ? lodash_1.default.cloneDeep(submission.metadata) : {};\n        this.editing = !!submission._id;\n        // Set the timezone in the options if available.\n        if (!this.options.submissionTimezone &&\n            submission.metadata &&\n            submission.metadata.timezone) {\n            this.options.submissionTimezone = submission.metadata.timezone;\n        }\n        const changed = super.setValue(submission.data, flags);\n        if (!flags.sanitize) {\n            this.mergeData(this.data, submission.data);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        return changed;\n    }\n    getValue() {\n        if (!this._submission.data) {\n            this._submission.data = {};\n        }\n        if (this.viewOnly) {\n            return this._submission;\n        }\n        const submission = this._submission;\n        submission.data = this.data;\n        return this._submission;\n    }\n    /**\n     * Build the form.\n     * @returns {Promise} - The promise that is triggered when the form is built.\n     */\n    init() {\n        if (this.options.submission) {\n            const submission = lodash_1.default.extend({}, this.options.submission);\n            this._submission = submission;\n            this._data = submission.data;\n        }\n        else {\n            this._submission = this._submission || { data: {} };\n        }\n        // Remove any existing components.\n        if (this.components && this.components.length) {\n            this.destroyComponents();\n            this.components = [];\n        }\n        if (this.component) {\n            this.component.components = this.form ? this.form.components : [];\n        }\n        else {\n            this.component = this.form;\n        }\n        this.component.type = \"form\";\n        this.component.input = false;\n        this.addComponents();\n        this.on(\"submitButton\", (options) => {\n            this.submit(false, options).catch((e) => {\n                if (options === null || options === void 0 ? void 0 : options.instance) {\n                    options.instance.loading = false;\n                }\n                return e !== false && e !== undefined && console.log(e);\n            });\n        }, true);\n        this.on(\"checkValidity\", (data) => this.validate(data, { dirty: true, process: \"change\" }), true);\n        this.on(\"requestUrl\", (args) => this.submitUrl(args.url, args.headers), true);\n        this.on(\"resetForm\", () => this.resetValue(), true);\n        this.on(\"deleteSubmission\", () => this.deleteSubmission(), true);\n        this.on(\"refreshData\", () => this.updateValue(), true);\n        this.executeFormController();\n        return this.formReady;\n    }\n    executeFormController() {\n        // If no controller value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        if (!this.form ||\n            !this.form.controller ||\n            ((!this.visible || this.component.hidden) &&\n                this.component.clearOnHide &&\n                !this.rootPristine)) {\n            return false;\n        }\n        this.formReady.then(() => {\n            this.evaluate(this.form.controller, {\n                components: this.components,\n                instance: this,\n            });\n        });\n    }\n    /**\n     *\n     */\n    teardown() {\n        this.emit(\"formDelete\", this.id);\n        delete Formio_1.Formio.forms[this.id];\n        delete this.executeShortcuts;\n        delete this.triggerSaveDraft;\n        super.teardown();\n    }\n    destroy(all = false) {\n        this.off(\"submitButton\");\n        this.off(\"checkValidity\");\n        this.off(\"requestUrl\");\n        this.off(\"resetForm\");\n        this.off(\"deleteSubmission\");\n        this.off(\"refreshData\");\n        return super.destroy(all);\n    }\n    build(element) {\n        if (element || this.element) {\n            return this.ready.then(() => {\n                element = element || this.element;\n                super.build(element);\n            });\n        }\n        return this.ready;\n    }\n    getClassName() {\n        let classes = \"formio-form\";\n        if (this.options.readOnly) {\n            classes += \" formio-read-only\";\n        }\n        return classes;\n    }\n    render() {\n        return super.render(this.renderTemplate(\"webform\", {\n            classes: this.getClassName(),\n            children: this.renderComponents(),\n        }), this.builderMode ? \"builder\" : \"form\", true);\n    }\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element) {\n            return Promise.resolve();\n        }\n        this.clear();\n        this.setContent(this.element, this.render());\n        return this.attach(this.element);\n    }\n    attach(element) {\n        this.setElement(element);\n        this.loadRefs(element, { webform: \"single\" });\n        const childPromise = this.attachComponents(this.refs.webform);\n        this.addEventListener(document, \"keydown\", this.executeShortcuts);\n        this.currentForm = this;\n        this.hook(\"attachWebform\", element, this);\n        return childPromise.then(() => {\n            this.emit(\"render\", this.element);\n            return this.setValue(this._submission, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    hasRequiredFields() {\n        let result = false;\n        (0, formUtils_1.eachComponent)(this.form.components, (component) => {\n            if (component.validate.required) {\n                result = true;\n                return true;\n            }\n        }, true);\n        return result;\n    }\n    resetValue() {\n        lodash_1.default.each(this.getComponents(), (comp) => comp.resetValue());\n        this.setPristine(true);\n        this.onChange({ resetValue: true });\n    }\n    /**\n     * Sets a new alert to display in the error dialog of the form.\n     * @param {string} type - The type of alert to display. \"danger\", \"success\", \"warning\", etc.\n     * @param {string} message - The message to show in the alert.\n     * @param {object} options - The options for the alert.\n     */\n    setAlert(type, message, options) {\n        if (!type && this.submitted) {\n            if (this.alert) {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            return;\n        }\n        if (this.options.noAlerts) {\n            if (!message) {\n                this.emit(\"error\", false);\n            }\n            return;\n        }\n        if (this.alert) {\n            try {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            catch (err) {\n                // ignore\n            }\n        }\n        if (message) {\n            const attrs = {\n                class: (options && options.classes) || `alert alert-${type}`,\n                id: `error-list-${this.id}`,\n            };\n            const templateOptions = {\n                message: message instanceof HTMLElement ? message.outerHTML : message,\n                attrs: attrs,\n                type,\n            };\n            this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate(\"alert\", templateOptions), `#${attrs.id}`);\n        }\n        if (!this.alert) {\n            return;\n        }\n        this.loadRefs(this.alert, { errorRef: \"multiple\" });\n        if (this.refs.errorRef && this.refs.errorRef.length) {\n            this.refs.errorRef.forEach((el) => {\n                this.addEventListener(el, \"click\", (e) => {\n                    const key = e.currentTarget.dataset.componentKey;\n                    this.focusOnComponent(key);\n                });\n                this.addEventListener(el, \"keydown\", (e) => {\n                    if (e.keyCode === 13) {\n                        e.preventDefault();\n                        const key = e.currentTarget.dataset.componentKey;\n                        this.focusOnComponent(key);\n                    }\n                });\n            });\n        }\n        this.prepend(this.alert);\n    }\n    /**\n     * Focus on selected component.\n     * @param {string} key - The key of selected component.\n     */\n    focusOnComponent(key) {\n        if (key) {\n            const component = this.getComponent(key);\n            if (component) {\n                component.focus();\n            }\n        }\n    }\n    /**\n     * Show the errors of this form within the alert dialog.\n     * @param {object} error - An optional additional error to display along with the component errors.\n     * @returns {*}\n     */\n    /* eslint-disable no-unused-vars */\n    /**\n     *\n     * @param {Array} errors - An array of errors to display.\n     * @param {boolean} triggerEvent - Whether or not to trigger the error event.\n     * @returns {void|Array} - The errors that were set.\n     */\n    showErrors(errors, triggerEvent) {\n        this.loading = false;\n        if (!Array.isArray(errors)) {\n            errors = [errors];\n        }\n        errors = errors.concat(this.customErrors).filter((err) => !!err);\n        if (!errors.length) {\n            this.setAlert(false);\n            return;\n        }\n        // Mark any components as invalid if in a custom message.\n        errors.forEach((err) => {\n            const { components = [] } = err;\n            if (err.component) {\n                components.push(err.component);\n            }\n            if (err.path) {\n                components.push(err.path);\n            }\n            components.forEach((path) => {\n                const originalPath = (0, utils_1.getStringFromComponentPath)(path);\n                const component = this.getComponent(path, lodash_1.default.identity, originalPath);\n                if (err.fromServer) {\n                    if (component.serverErrors) {\n                        component.serverErrors.push(err);\n                    }\n                    else {\n                        component.serverErrors = [err];\n                    }\n                }\n                const components = lodash_1.default.compact(Array.isArray(component) ? component : [component]);\n                components.forEach((component) => component.setCustomValidity(err.message, true));\n            });\n        });\n        const displayedErrors = [];\n        if (errors.length) {\n            errors = lodash_1.default.uniqBy(errors, (error) => error.message);\n            const createListItem = (message, index) => {\n                var _a, _b, _c;\n                const err = errors[index];\n                const messageFromIndex = !lodash_1.default.isUndefined(index) && errors && errors[index];\n                const keyOrPath = (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.formattedKeyOrPath) ||\n                    (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.path) ||\n                    ((_a = messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.context) === null || _a === void 0 ? void 0 : _a.path) ||\n                    (((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) ||\n                    (err.component && err.component.key) ||\n                    (err.fromServer && err.path);\n                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : \"\";\n                if (typeof err !== \"string\" && !err.formattedKeyOrPath) {\n                    err.formattedKeyOrPath = formattedKeyOrPath;\n                }\n                return {\n                    message: (0, utils_1.unescapeHTML)(message),\n                    keyOrPath: formattedKeyOrPath,\n                };\n            };\n            errors.forEach(({ message, context, fromServer, component }, index) => {\n                const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer\n                    ? this.t(\"alertMessage\", { message: this.t(message) })\n                    : this.t(\"alertMessageWithLabel\", {\n                        label: this.t(component === null || component === void 0 ? void 0 : component.label),\n                        message: this.t(message),\n                    });\n                displayedErrors.push(createListItem(text, index));\n            });\n        }\n        const errorsList = this.renderTemplate(\"errorsList\", { errors: displayedErrors });\n        this.root.setAlert(\"danger\", errorsList);\n        if (triggerEvent) {\n            this.emit(\"error\", errors);\n        }\n        return errors;\n    }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Called when the submission has completed, or if the submission needs to be sent to an external library.\n     * @param {object} submission - The submission object.\n     * @param {boolean} saved - Whether or not this submission was saved to the server.\n     * @returns {object} - The submission object.\n     */\n    onSubmit(submission, saved) {\n        var _a;\n        this.loading = false;\n        this.submitting = false;\n        this.setPristine(true);\n        // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.\n        this.setValue((0, utils_1.fastCloneDeep)(submission), {\n            noValidate: true,\n            noCheck: true,\n        });\n        this.setAlert(\"success\", `<p>${this.t(\"complete\")}</p>`);\n        // Cancel triggered saveDraft to prevent overriding the submitted state\n        if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {\n            this.triggerSaveDraft.cancel();\n        }\n        this.emit(\"submit\", submission, saved);\n        if (saved) {\n            this.emit(\"submitDone\", submission);\n        }\n        return submission;\n    }\n    normalizeError(error) {\n        if (error) {\n            if (typeof error === \"object\" && \"details\" in error) {\n                error = error.details;\n            }\n            if (typeof error === \"string\") {\n                error = { message: error };\n            }\n        }\n        return error;\n    }\n    /**\n     * Called when an error occurs during the submission.\n     * @param {object} error - The error that occured.\n     * @returns {Array} errors - All errors.\n     */\n    onSubmissionError(error) {\n        error = this.normalizeError(error);\n        this.submitting = false;\n        this.setPristine(false);\n        this.emit(\"submitError\", error || this.errors);\n        // Allow for silent cancellations (no error message, no submit button error state)\n        if (error && error.silent) {\n            this.emit(\"change\", { isValid: true }, { silent: true });\n            return false;\n        }\n        const errors = this.showErrors(error, true);\n        if (this.root && this.root.alert) {\n            this.scrollIntoView(this.root.alert);\n        }\n        return errors;\n    }\n    /**\n     * Trigger the change event for this form.\n     * @param {any} flags - The flags to set on this change event.\n     * @param {any} changed - The changed object which reflects the changes in the form.\n     * @param {boolean} modified - Whether or not the form has been modified.\n     * @param {any} changes - The changes that have occured in the form.\n     */\n    onChange(flags, changed, modified, changes) {\n        flags = flags || {};\n        let isChangeEventEmitted = false;\n        super.onChange(flags, true);\n        const value = lodash_1.default.clone(this.submission);\n        flags.changed = value.changed = changed;\n        flags.changes = changes;\n        if (modified && this.pristine) {\n            this.pristine = false;\n        }\n        this.checkData(value.data, flags);\n        const shouldValidate = !flags.noValidate ||\n            flags.fromIFrame ||\n            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);\n        const errors = shouldValidate\n            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { process: \"change\" }))\n            : [];\n        value.isValid = errors.length === 0;\n        this.loading = false;\n        if (this.submitted) {\n            // show server errors while they are not cleaned/fixed\n            const nonComponentServerErrors = lodash_1.default.filter(this.serverErrors || [], (err) => !err.component && !err.path);\n            this.showErrors(nonComponentServerErrors.length ? nonComponentServerErrors : errors);\n        }\n        // See if we need to save the draft of the form.\n        if (modified && this.options.saveDraft) {\n            this.triggerSaveDraft();\n        }\n        if (!flags || !flags.noEmit) {\n            this.emit(\"change\", value, flags, modified);\n            isChangeEventEmitted = true;\n        }\n        // The form is initialized after the first change event occurs.\n        if (isChangeEventEmitted && !this.initialized) {\n            this.emit(\"initialized\");\n            this.initialized = true;\n        }\n    }\n    /**\n     * Send a delete request to the server.\n     * @returns {Promise} - The promise that is triggered when the delete is complete.\n     */\n    deleteSubmission() {\n        return this.formio.deleteSubmission().then(() => {\n            this.emit(\"submissionDeleted\", this.submission);\n            this.resetValue();\n        });\n    }\n    /**\n     * Cancels the submission.\n     * @param {boolean} noconfirm - Whether or not to confirm the cancellation.\n     * @alias reset\n     * @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.\n     */\n    cancel(noconfirm) {\n        const shouldReset = this.hook(\"beforeCancel\", true);\n        if (shouldReset && (noconfirm || confirm(this.t(\"confirmCancel\")))) {\n            this.resetValue();\n            return true;\n        }\n        else {\n            this.emit(\"cancelSubmit\");\n            return false;\n        }\n    }\n    setMetadata(submission) {\n        // Add in metadata about client submitting the form\n        submission.metadata = submission.metadata || {};\n        lodash_1.default.defaults(submission.metadata, {\n            timezone: lodash_1.default.get(this, \"_submission.metadata.timezone\", (0, utils_1.currentTimezone)()),\n            offset: parseInt(lodash_1.default.get(this, \"_submission.metadata.offset\", (0, moment_1.default)().utcOffset()), 10),\n            origin: document.location.origin,\n            referrer: document.referrer,\n            browserName: navigator.appName,\n            userAgent: navigator.userAgent,\n            pathName: window.location.pathname,\n            onLine: navigator.onLine,\n        });\n    }\n    submitForm(options = {}) {\n        this.clearServerErrors();\n        return new Promise((resolve, reject) => {\n            // Read-only forms should never submit.\n            if (this.options.readOnly) {\n                return resolve({\n                    submission: this.submission,\n                    saved: false,\n                });\n            }\n            const submission = (0, utils_1.fastCloneDeep)(this.submission || {});\n            this.setMetadata(submission);\n            submission.state = options.state || submission.state || \"submitted\";\n            const isDraft = submission.state === \"draft\";\n            this.hook(\"beforeSubmit\", Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {\n                var _a;\n                if (err) {\n                    return reject(err);\n                }\n                submission._vnote = data && data._vnote ? data._vnote : \"\";\n                try {\n                    if (!isDraft && !options.noValidate) {\n                        if (!submission.data) {\n                            return reject(\"Invalid Submission\");\n                        }\n                        const errors = this.validate(submission.data, {\n                            dirty: true,\n                            silentCheck: false,\n                            process: \"submit\",\n                        });\n                        if (errors.length ||\n                            ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === \"rejected\"))) {\n                            return reject(errors);\n                        }\n                    }\n                }\n                catch (err) {\n                    console.error(err);\n                }\n                this.everyComponent((comp) => {\n                    if (submission._vnote && comp.type === \"form\" && comp.component.reference) {\n                        lodash_1.default.get(submission.data, comp.path, {})._vnote = submission._vnote;\n                    }\n                    const { persistent } = comp.component;\n                    if (persistent === \"client-only\") {\n                        lodash_1.default.unset(submission.data, comp.path);\n                    }\n                });\n                this.hook(\"customValidation\", Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {\n                    if (err) {\n                        // If string is returned, cast to object.\n                        if (typeof err === \"string\") {\n                            err = {\n                                message: err,\n                            };\n                        }\n                        // Ensure err is an array.\n                        err = Array.isArray(err) ? err : [err];\n                        return reject(err);\n                    }\n                    this.loading = true;\n                    // Use the form action to submit the form if available.\n                    if (this._form && this._form.action) {\n                        const method = submission.data._id &&\n                            this._form.action.includes(submission.data._id)\n                            ? \"PUT\"\n                            : \"POST\";\n                        return Formio_1.Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})\n                            .then((result) => resolve({\n                            submission: result,\n                            saved: true,\n                        }))\n                            .catch((error) => {\n                            this.setServerErrors(error);\n                            return reject(error);\n                        });\n                    }\n                    const submitFormio = this.formio;\n                    if (this.nosubmit || !submitFormio) {\n                        return resolve({\n                            submission,\n                            saved: false,\n                        });\n                    }\n                    // If this is an actionUrl, then make sure to save the action and not the submission.\n                    const submitMethod = submitFormio.actionUrl\n                        ? \"saveAction\"\n                        : \"saveSubmission\";\n                    submitFormio[submitMethod](submission)\n                        .then((result) => resolve({\n                        submission: result,\n                        saved: true,\n                    }))\n                        .catch((error) => {\n                        this.setServerErrors(error);\n                        return reject(error);\n                    });\n                });\n            });\n        });\n    }\n    setServerErrors(error) {\n        if (error.details) {\n            this.serverErrors = error.details\n                .filter((err) => (err.level ? err.level === \"error\" : err))\n                .map((err) => {\n                err.fromServer = true;\n                return err;\n            });\n        }\n        else if (typeof error === \"string\") {\n            this.serverErrors = [{ fromServer: true, level: \"error\", message: error }];\n        }\n    }\n    executeSubmit(options) {\n        this.submitted = true;\n        this.submitting = true;\n        return this.submitForm(options)\n            .then(({ submission, saved }) => this.onSubmit(submission, saved))\n            .then((results) => {\n            this.submissionInProcess = false;\n            return results;\n        })\n            .catch((err) => {\n            this.submissionInProcess = false;\n            return Promise.reject(this.onSubmissionError(err));\n        });\n    }\n    clearServerErrors() {\n        var _a;\n        (_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.forEach((error) => {\n            if (error.path) {\n                const pathArray = (0, utils_1.getArrayFromComponentPath)(error.path);\n                const component = this.getComponent(pathArray, lodash_1.default.identity, error.formattedKeyOrPath);\n                if (component) {\n                    component.serverErrors = [];\n                }\n            }\n        });\n        this.serverErrors = [];\n    }\n    /**\n     * Submits the form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * form.submit().then((submission) => {\n     *   console.log(submission);\n     * });\n     * @param {boolean} before - If this submission occured from the before handlers.\n     * @param {any} options - The options to use when submitting this form.\n     * @returns {Promise} - A promise when the form is done submitting.\n     */\n    submit(before = false, options = {}) {\n        this.submissionInProcess = true;\n        if (!before) {\n            return this.beforeSubmit(options).then(() => this.executeSubmit(options));\n        }\n        else {\n            return this.executeSubmit(options);\n        }\n    }\n    submitUrl(URL, headers) {\n        if (!URL) {\n            return console.warn(\"Missing URL argument\");\n        }\n        const submission = this.submission || {};\n        const API_URL = URL;\n        const settings = {\n            method: \"POST\",\n            headers: {},\n        };\n        if (headers && headers.length > 0) {\n            headers.map((e) => {\n                if (e.header !== \"\" && e.value !== \"\") {\n                    settings.headers[e.header] = this.interpolate(e.value, submission);\n                }\n            });\n        }\n        if (API_URL && settings) {\n            Formio_1.Formio.makeStaticRequest(API_URL, settings.method, submission, {\n                headers: settings.headers,\n            })\n                .then(() => {\n                this.emit(\"requestDone\");\n                this.setAlert(\"success\", \"<p> Success </p>\");\n            })\n                .catch((e) => {\n                const message = `${e.statusText ? e.statusText : \"\"} ${e.status ? e.status : e}`;\n                this.emit(\"error\", message);\n                console.error(message);\n                this.setAlert(\"danger\", `<p> ${message} </p>`);\n                return Promise.reject(this.onSubmissionError(e));\n            });\n        }\n        else {\n            this.emit(\"error\", \"You should add a URL to this button.\");\n            this.setAlert(\"warning\", \"You should add a URL to this button.\");\n            return console.warn(\"You should add a URL to this button.\");\n        }\n    }\n    triggerCaptcha() {\n        if (!this || !this.components) {\n            return;\n        }\n        const captchaComponent = [];\n        (0, formUtils_1.eachComponent)(this.components, (component) => {\n            if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {\n                captchaComponent.push(component);\n            }\n        });\n        if (captchaComponent.length > 0) {\n            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);\n        }\n    }\n    set nosubmit(value) {\n        this._nosubmit = !!value;\n        this.emit(\"nosubmit\", this._nosubmit);\n    }\n    get nosubmit() {\n        return this._nosubmit || false;\n    }\n    get conditions() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.conditions) !== null && _b !== void 0 ? _b : [];\n    }\n    get variables() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.variables) !== null && _b !== void 0 ? _b : [];\n    }\n}\nexports[\"default\"] = Webform;\nWebform.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWebform.setApiUrl = Formio_1.Formio.setApiUrl;\nWebform.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Webform.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 moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst compare_versions_1 = __webpack_require__(/*! compare-versions */ \"./node_modules/compare-versions/lib/esm/index.js\");\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst i18n_1 = __importDefault(__webpack_require__(/*! ./i18n */ \"./lib/cjs/i18n.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ./components/_classes/nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\n// Initialize the available forms.\nFormio_1.Formio.forms = {};\n// Allow people to register components.\nFormio_1.Formio.registerComponent = Components_1.default.setComponent;\n/**\n *\n * @param {any} icons  - The icons to use.\n * @returns {any} - The icon set.\n */\nfunction getIconSet(icons) {\n    if (icons === \"fontawesome\") {\n        return \"fa\";\n    }\n    return icons || \"\";\n}\n/**\n *\n * @param {any} options - The options to get.\n * @returns {any} - The options.\n */\nfunction getOptions(options) {\n    options = lodash_1.default.defaults(options, {\n        submitOnEnter: false,\n        iconset: getIconSet(options && options.icons ? options.icons : Formio_1.Formio.icons),\n        i18next: null,\n        saveDraft: false,\n        alwaysDirty: false,\n        saveDraftThrottle: 5000,\n        display: \"form\",\n        cdnUrl: Formio_1.Formio.cdn.baseUrl,\n    });\n    if (!options.events) {\n        options.events = new EventEmitter_1.default();\n    }\n    return options;\n}\n/**\n * Represents a JSON value.\n * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON\n */\n/**\n * Represents a JSON array.\n * @typedef {Array<JSON>} JSONArray\n */\n/**\n * Represents a JSON object.\n * @typedef {{[key: string]: JSON}} JSONObject\n */\n/**\n * @typedef {object} FormioHooks\n * @property {Function} [beforeSubmit] - A function that is called before the form is submitted.\n * @property {Function} [beforeCancel] - A function that is called before the form is canceled.\n * @property {Function} [beforeNext] - A function that is called before moving to the next page in a multi-page form.\n * @property {Function} [beforePrev] - A function that is called before moving to the previous page in a multi-page form.\n * @property {Function} [attachComponent] - A function that is called when a component is attached to the form.\n * @property {Function} [setDataValue] - A function that is called when setting the value of a data component.\n * @property {Function} [addComponents] - A function that is called when adding multiple components to the form.\n * @property {Function} [addComponent] - A function that is called when adding a single component to the form.\n * @property {Function} [customValidation] - A function that is called for custom validation of the form.\n * @property {Function} [attachWebform] - A function that is called when attaching a webform to the form.\n */\n/**\n * @typedef {object} SanitizeConfig\n * @property {string[]} [addAttr] - The attributes to add.\n * @property {string[]} [addTags] - The tags to add.\n * @property {string[]} [allowedAttrs] - The allowed attributes.\n * @property {string[]} [allowedTags] - The allowed tags.\n * @property {string[]} [allowedUriRegex] - The allowed URI regex.\n * @property {string[]} [addUriSafeAttr] - The URI safe attributes.\n */\n/**\n * @typedef {object} ButtonSettings\n * @property {boolean} [showPrevious] - Show the \"Previous\" button.\n * @property {boolean} [showNext] - Show the \"Next\" button.\n * @property {boolean} [showCancel] - Show the \"Cancel\" button.\n * @property {boolean} [showSubmit] - Show the \"Submit\" button.\n */\n/**\n * @typedef {object} FormOptions\n * @property {boolean} [saveDraft] - Enable the save draft feature.\n * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.\n * @property {boolean} [readOnly] - Set this form to readOnly.\n * @property {boolean} [noAlerts] - Disable the alerts dialog.\n * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.\n * @property {string} [template] - Custom logic for creation of elements.\n * @property {boolean} [noDefaults] - Exclude default values from the settings.\n * @property {any} [fileService] - The file service for this form.\n * @property {EventEmitter} [events] - The EventEmitter for this form.\n * @property {string} [language] - The language to render this form in.\n * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.\n * @property {boolean} [viewAsHtml] - View the form as raw HTML.\n * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.\n * @property {boolean} [highlightErrors] - Highlight any errors on the form.\n * @property {string} [componentErrorClass] - The error class for components.\n * @property {any} [templates] - The templates for this form.\n * @property {string} [iconset] - The iconset for this form.\n * @property {import('@formio/core').Component[]} [components] - The components for this form.\n * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.\n * @property {boolean} [showHiddenFields] - Show hidden fields.\n * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.\n * @property {{[key: string]: boolean}} [show] - Components to show for this form.\n * @property {Formio} [formio] - The Formio instance for this form.\n * @property {string} [decimalSeparator] - The decimal separator for this form.\n * @property {string} [thousandsSeparator] - The thousands separator for this form.\n * @property {FormioHooks} [hooks] - The hooks for this form.\n * @property {boolean} [alwaysDirty] - Always be dirty.\n * @property {boolean} [skipDraftRestore] - Skip restoring a draft.\n * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.\n * @property {string} [cdnUrl] - The CDN url for this form.\n * @property {boolean} [flatten] - Flatten the form.\n * @property {boolean} [sanitize] - Sanitize the form.\n * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.\n * @property {ButtonSettings} [buttonSettings] - The button settings for this form.\n * @property {object} [breadcrumbSettings] - The breadcrumb settings for this form.\n * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).\n * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).\n * @property {boolean} [showCheckboxBackground] - Show the checkbox background.\n * @property {boolean} [inputsOnly] - Only show inputs in the form and no labels.\n * @property {boolean} [building] - If we are in the process of building the form.\n * @property {number} [zoom] - The zoom for PDF forms.\n */\nclass Webform extends NestedDataComponent_1.default {\n    /**\n     * Creates a new Form instance.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [options] - The options to create a new form instance.\n     */\n    constructor(elementOrOptions, options = undefined) {\n        let element, formOptions;\n        if (elementOrOptions instanceof HTMLElement || options) {\n            element = elementOrOptions;\n            formOptions = options || {};\n        }\n        else {\n            formOptions = elementOrOptions || {};\n        }\n        super(null, getOptions(formOptions));\n        this.executeShortcuts = (event) => {\n            const { target } = event;\n            if (!this.keyboardCatchableElement(target)) {\n                return;\n            }\n            const ctrl = event.ctrlKey || event.metaKey;\n            const keyCode = event.keyCode;\n            let char = \"\";\n            if (65 <= keyCode && keyCode <= 90) {\n                char = String.fromCharCode(keyCode);\n            }\n            else if (keyCode === 13) {\n                char = \"Enter\";\n            }\n            else if (keyCode === 27) {\n                char = \"Esc\";\n            }\n            lodash_1.default.each(this.shortcuts, (shortcut) => {\n                if (shortcut.ctrl && !ctrl) {\n                    return;\n                }\n                if (shortcut.shortcut === char) {\n                    shortcut.element.click();\n                    event.preventDefault();\n                }\n            });\n        };\n        this.setElement(element);\n        // Keep track of all available forms globally.\n        Formio_1.Formio.forms[this.id] = this;\n        // Set the base url.\n        if (this.options.baseUrl) {\n            Formio_1.Formio.setBaseUrl(this.options.baseUrl);\n        }\n        /**\n         * The type of this element.\n         * @type {string}\n         */\n        this.type = \"form\";\n        this._src = \"\";\n        this._loading = false;\n        this._form = {};\n        this.draftEnabled = false;\n        this.savingDraft = false;\n        if (this.options.saveDraftThrottle) {\n            this.triggerSaveDraft = lodash_1.default.throttle(this.saveDraft.bind(this), this.options.saveDraftThrottle);\n        }\n        else {\n            this.triggerSaveDraft = this.saveDraft.bind(this);\n        }\n        /**\n         * Determines if this form should submit the API on submit.\n         * @type {boolean}\n         */\n        this.nosubmit = false;\n        /**\n         * Determines if the form has tried to be submitted, error or not.\n         * @type {boolean}\n         */\n        this.submitted = false;\n        /**\n         * Determines if the form is being submitted at the moment.\n         * @type {boolean}\n         */\n        this.submitting = false;\n        /**\n         * The Formio instance for this form.\n         * @type {Formio}\n         */\n        this.formio = null;\n        /**\n         * The loader HTML element.\n         * @type {HTMLElement}\n         */\n        this.loader = null;\n        /**\n         * The alert HTML element\n         * @type {HTMLElement}\n         */\n        this.alert = null;\n        /**\n         * Promise that is triggered when the submission is done loading.\n         * @type {Promise}\n         */\n        this.onSubmission = null;\n        /**\n         * Determines if this submission is explicitly set.\n         * @type {boolean}\n         */\n        this.submissionSet = false;\n        /**\n         * Promise that executes when the form is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.formReady.then(() => {\n         *   console.log('The form is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example';\n         */\n        this.formReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.formReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.formReadyReject = reject;\n        });\n        /**\n         * Promise that executes when the submission is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.submissionReady.then(() => {\n         *   console.log('The submission is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example/submission/234234234234234243';\n         */\n        this.submissionReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.submissionReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.submissionReadyReject = reject;\n        });\n        this.shortcuts = [];\n        // Set language after everything is established.\n        this.language = this.i18next.language;\n        // See if we need to restore the draft from a user.\n        if (this.options.saveDraft) {\n            if (this.options.skipDraftRestore) {\n                this.draftEnabled = true;\n                this.savingDraft = false;\n            }\n            else {\n                this.formReady.then(() => {\n                    const user = Formio_1.Formio.getUser();\n                    // Only restore a draft if the submission isn't explicitly set.\n                    if (user && !this.submissionSet) {\n                        this.restoreDraft(user._id);\n                    }\n                });\n            }\n        }\n        this.component.clearOnHide = false;\n        // Ensure the root is set to this component.\n        this.root = this;\n        this.localRoot = this;\n    }\n    /* eslint-enable max-statements */\n    get language() {\n        return this.options.language;\n    }\n    get emptyValue() {\n        return null;\n    }\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Sets the language for this form.\n     * @param {string} lang - The language to use (e.g. 'en', 'sp', etc.)\n     */\n    set language(lang) {\n        if (!this.i18next) {\n            return;\n        }\n        this.options.language = lang;\n        if (this.i18next.language === lang) {\n            return;\n        }\n        this.i18next.changeLanguage(lang, (err) => {\n            if (err) {\n                return;\n            }\n            this.rebuild();\n            this.emit(\"languageChanged\");\n        });\n    }\n    get componentComponents() {\n        return this.form.components;\n    }\n    get shadowRoot() {\n        return this.options.shadowRoot;\n    }\n    /**\n     * Add a language for translations\n     * @param {string} code - The language code for the language being added.\n     * @param {object} lang - The language translations.\n     * @param {boolean} [active] - If this language should be set as the active language.\n     */\n    addLanguage(code, lang, active = false) {\n        if (this.i18next) {\n            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);\n            this.i18next.addResourceBundle(code, \"translation\", translations, true, true);\n            if (active) {\n                this.language = code;\n            }\n        }\n    }\n    keyboardCatchableElement(element) {\n        if (element.nodeName === \"TEXTAREA\") {\n            return false;\n        }\n        if (element.nodeName === \"INPUT\") {\n            return [\"text\", \"email\", \"password\"].indexOf(element.type) === -1;\n        }\n        return true;\n    }\n    addShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        shortcut = lodash_1.default.capitalize(shortcut);\n        if (shortcut === \"Enter\" || shortcut === \"Esc\") {\n            // Restrict Enter and Esc only for buttons\n            if (element.tagName !== \"BUTTON\") {\n                return;\n            }\n            this.shortcuts.push({\n                shortcut,\n                element,\n            });\n        }\n        else {\n            this.shortcuts.push({\n                ctrl: true,\n                shortcut,\n                element,\n            });\n        }\n    }\n    removeShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        lodash_1.default.remove(this.shortcuts, {\n            shortcut,\n            element,\n        });\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - The source of the form.\n     */\n    get src() {\n        return this._src;\n    }\n    /**\n     * Loads the submission if applicable.\n     * @returns {Promise} - The promise that is triggered when the submission is loaded.\n     */\n    loadSubmission() {\n        this.loadingSubmission = true;\n        if (this.formio.submissionId) {\n            this.onSubmission = this.formio\n                .loadSubmission()\n                .then((submission) => this.setSubmission(submission), (err) => this.submissionReadyReject(err))\n                .catch((err) => this.submissionReadyReject(err));\n        }\n        else {\n            this.submissionReadyResolve();\n        }\n        return this.submissionReady;\n    }\n    /**\n     * Set the src of the form renderer.\n     * @param {string} value - The source value to set.\n     * @param {any} options - The options to set.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setSrc(value, options) {\n        if (this.setUrl(value, options)) {\n            this.nosubmit = false;\n            return this.formio\n                .loadForm({ params: { live: 1 } })\n                .then((form) => {\n                const setForm = this.setForm(form);\n                this.loadSubmission();\n                return setForm;\n            })\n                .catch((err) => {\n                console.warn(err);\n                this.formReadyReject(err);\n            });\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Set the Form source, which is typically the Form.io embed URL.\n     * @param {string} value - The value of the form embed url.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.formReady.then(() => {\n     *   console.log('The form is formReady!');\n     * });\n     * form.src = 'https://examples.form.io/example';\n     */\n    set src(value) {\n        this.setSrc(value);\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - returns the source of the form.\n     */\n    get url() {\n        return this._src;\n    }\n    /**\n     * Sets the url of the form renderer.\n     * @param {string} value - The value to set the url to.\n     * @param {any} options - The options to set.\n     * @returns {boolean} - TRUE means the url was set, FALSE otherwise.\n     */\n    setUrl(value, options) {\n        if (!value || typeof value !== \"string\" || value === this._src) {\n            return false;\n        }\n        this._src = value;\n        this.nosubmit = true;\n        this.formio = this.options.formio = new Formio_1.Formio(value, options);\n        if (this.type === \"form\") {\n            // Set the options source so this can be passed to other components.\n            this.options.src = value;\n        }\n        return true;\n    }\n    /**\n     * Set the form source but don't initialize the form and submission from the url.\n     * @param {string} value - The value of the form embed url.\n     */\n    set url(value) {\n        this.setUrl(value);\n    }\n    /**\n     * Called when both the form and submission have been loaded.\n     * @returns {Promise} - The promise to trigger when both form and submission have loaded.\n     */\n    get ready() {\n        return this.formReady.then(() => {\n            return super.ready.then(() => {\n                return this.loadingSubmission ? this.submissionReady : true;\n            });\n        });\n    }\n    /**\n     * Returns if this form is loading.\n     * @returns {boolean} - TRUE means the form is loading, FALSE otherwise.\n     */\n    get loading() {\n        return this._loading;\n    }\n    /**\n     * Set the loading state for this form, and also show the loader spinner.\n     * @param {boolean} loading - If this form should be \"loading\" or not.\n     */\n    set loading(loading) {\n        if (this._loading !== loading) {\n            this._loading = loading;\n            if (!this.loader && loading) {\n                this.loader = this.ce(\"div\", {\n                    class: \"loader-wrapper\",\n                });\n                const spinner = this.ce(\"div\", {\n                    class: \"loader text-center\",\n                });\n                this.loader.appendChild(spinner);\n            }\n            /* eslint-disable max-depth */\n            if (this.loader) {\n                try {\n                    if (loading) {\n                        this.prependTo(this.loader, this.wrapper);\n                    }\n                    else {\n                        this.removeChildFrom(this.loader, this.wrapper);\n                    }\n                }\n                catch (err) {\n                    // ingore\n                }\n            }\n            /* eslint-enable max-depth */\n        }\n    }\n    /**\n     * Sets the JSON schema for the form to be rendered.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.setForm({\n     *   components: [\n     *     {\n     *       type: 'textfield',\n     *       key: 'firstName',\n     *       label: 'First Name',\n     *       placeholder: 'Enter your first name.',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'textfield',\n     *       key: 'lastName',\n     *       label: 'Last Name',\n     *       placeholder: 'Enter your last name',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'button',\n     *       action: 'submit',\n     *       label: 'Submit',\n     *       theme: 'primary'\n     *     }\n     *   ]\n     * });\n     * @param {object} form - The JSON schema of the form @see https://examples.form.io/example for an example JSON schema.\n     * @param {any} flags - Any flags to apply when setting the form.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setForm(form, flags = {}) {\n        var _a, _b, _c;\n        const isFormAlreadySet = this._form && ((_a = this._form.components) === null || _a === void 0 ? void 0 : _a.length);\n        try {\n            // Do not set the form again if it has been already set\n            if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {\n                return Promise.resolve();\n            }\n            // Create the form.\n            this._form = (flags === null || flags === void 0 ? void 0 : flags.keepAsReference) ? form : lodash_1.default.cloneDeep(form);\n            if (this.onSetForm) {\n                this.onSetForm(lodash_1.default.cloneDeep(this._form), form);\n            }\n            if ((_c = (_b = this.parent) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.modalEdit) {\n                return Promise.resolve();\n            }\n        }\n        catch (err) {\n            console.warn(err);\n            // If provided form is not a valid JSON object, do not set it too\n            return Promise.resolve();\n        }\n        // Allow the form to provide component overrides.\n        if (form && form.settings && form.settings.components) {\n            this.options.components = form.settings.components;\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        // Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options\n        if (!this.options.sanitizeConfig && !this.builderMode) {\n            this.options.sanitizeConfig =\n                lodash_1.default.get(form, \"settings.sanitizeConfig\") ||\n                    lodash_1.default.get(form, \"globalSettings.sanitizeConfig\");\n        }\n        if (\"schema\" in form && (0, compare_versions_1.compareVersions)(form.schema, \"1.x\") > 0) {\n            this.ready.then(() => {\n                this.setAlert(\"alert alert-danger\", \"Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.\");\n            });\n        }\n        // See if they pass a module, and evaluate it if so.\n        if (form && form.module) {\n            let formModule = null;\n            if (typeof form.module === \"string\") {\n                try {\n                    formModule = this.evaluate(`return ${form.module}`);\n                }\n                catch (err) {\n                    console.warn(err);\n                }\n            }\n            else {\n                formModule = form.module;\n            }\n            if (formModule) {\n                Formio_1.Formio.use(formModule);\n                // Since we got here after instantiation, we need to manually apply form options.\n                if (formModule.options && formModule.options.form) {\n                    this.options = Object.assign(this.options, formModule.options.form);\n                }\n            }\n        }\n        this.initialized = false;\n        const rebuild = this.rebuild() || Promise.resolve();\n        return rebuild.then(() => {\n            this.emit(\"formLoad\", form);\n            this.triggerCaptcha();\n            // Make sure to trigger onChange after a render event occurs to speed up form rendering.\n            setTimeout(() => {\n                this.onChange(flags);\n                this.formReadyResolve();\n            }, 0);\n            return this.formReady;\n        });\n    }\n    /**\n     * Gets the form object.\n     * @returns {object} - The form JSON schema.\n     */\n    get form() {\n        if (!this._form) {\n            this._form = {\n                components: [],\n            };\n        }\n        return this._form;\n    }\n    /**\n     * Sets the form value.\n     * @alias setForm\n     * @param {object} form - The form schema object.\n     */\n    set form(form) {\n        this.setForm(form);\n    }\n    /**\n     * Returns the submission object that was set within this form.\n     * @returns {object} - The submission object.\n     */\n    get submission() {\n        return this.getValue();\n    }\n    /**\n     * Sets the submission of a form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * @param {object} submission - The Form.io submission object.\n     */\n    set submission(submission) {\n        this.setSubmission(submission);\n    }\n    /**\n     * Sets the submission value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubmission(submission, flags = {}) {\n        this.submissionSet = true;\n        this.triggerChange(flags);\n        this.emit('beforeSetSubmission', submission);\n        this.setValue(submission, flags);\n    }\n    /**\n     * Sets a submission and returns the promise when it is ready.\n     * @param {any} submission - The submission to set.\n     * @param {any} flags - Any flags to apply when setting the submission.\n     * @returns {Promise} - The promise that is triggered when the submission is set.\n     */\n    setSubmission(submission, flags = {}) {\n        flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, \"fromSubmission\") ? flags.fromSubmission : true });\n        return (this.onSubmission = this.formReady\n            .then((resolveFlags) => {\n            if (resolveFlags) {\n                flags = Object.assign(Object.assign({}, flags), resolveFlags);\n            }\n            this.onSetSubmission(submission, flags);\n            return this.submissionReadyResolve(submission);\n        }, (err) => this.submissionReadyReject(err))\n            .catch((err) => this.submissionReadyReject(err)));\n    }\n    handleDraftError(errName, errDetails, restoreDraft) {\n        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || \"\"}`);\n        console.warn(errorMessage);\n        this.emit(restoreDraft ? \"restoreDraftError\" : \"saveDraftError\", errDetails || errorMessage);\n    }\n    saveDraft() {\n        if (!this.draftEnabled) {\n            return;\n        }\n        if (!this.formio) {\n            this.handleDraftError(\"saveDraftInstanceError\");\n            return;\n        }\n        if (!Formio_1.Formio.getUser()) {\n            this.handleDraftError(\"saveDraftAuthError\");\n            return;\n        }\n        const draft = (0, utils_1.fastCloneDeep)(this.submission);\n        draft.state = \"draft\";\n        if (!this.savingDraft && !this.submitting) {\n            this.emit(\"saveDraftBegin\");\n            this.savingDraft = true;\n            this.formio\n                .saveSubmission(draft)\n                .then((sub) => {\n                // Set id to submission to avoid creating new draft submission\n                this.submission._id = sub._id;\n                this.savingDraft = false;\n                this.emit(\"saveDraft\", sub);\n            })\n                .catch((err) => {\n                this.savingDraft = false;\n                this.handleDraftError(\"saveDraftError\", err);\n            });\n        }\n    }\n    /**\n     * Restores a draft submission based on the user who is authenticated.\n     * @param {string} userId - The user id where we need to restore the draft from.\n     */\n    restoreDraft(userId) {\n        const formio = this.formio || this.options.formio;\n        if (!formio) {\n            this.handleDraftError(\"restoreDraftInstanceError\", null, true);\n            return;\n        }\n        this.savingDraft = true;\n        formio\n            .loadSubmissions({\n            params: {\n                state: 'draft',\n                owner: userId,\n                sort: '-created'\n            },\n        })\n            .then((submissions) => {\n            if (submissions.length > 0 && !this.options.skipDraftRestore) {\n                const draft = (0, utils_1.fastCloneDeep)(submissions[0]);\n                return this.setSubmission(draft).then(() => {\n                    this.draftEnabled = true;\n                    this.savingDraft = false;\n                    this.emit(\"restoreDraft\", draft);\n                });\n            }\n            // Enable drafts so that we can keep track of changes.\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.emit(\"restoreDraft\", null);\n        })\n            .catch((err) => {\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.handleDraftError(\"restoreDraftError\", err, true);\n        });\n    }\n    get schema() {\n        const schema = (0, utils_1.fastCloneDeep)(lodash_1.default.omit(this._form, [\"components\"]));\n        schema.components = [];\n        this.eachComponent((component) => schema.components.push(component.schema));\n        return schema;\n    }\n    mergeData(_this, _that) {\n        lodash_1.default.mergeWith(_this, _that, (thisValue, thatValue) => {\n            if (Array.isArray(thisValue) &&\n                Array.isArray(thatValue) &&\n                thisValue.length !== thatValue.length) {\n                return thatValue;\n            }\n        });\n    }\n    setValue(submission, flags = {}) {\n        if (!submission || !submission.data) {\n            submission = {\n                data: {},\n            };\n        }\n        // Metadata needs to be available before setValue\n        this._submission.metadata = submission.metadata ? lodash_1.default.cloneDeep(submission.metadata) : {};\n        this.editing = !!submission._id;\n        // Set the timezone in the options if available.\n        if (!this.options.submissionTimezone &&\n            submission.metadata &&\n            submission.metadata.timezone) {\n            this.options.submissionTimezone = submission.metadata.timezone;\n        }\n        const changed = super.setValue(submission.data, flags);\n        if (!flags.sanitize) {\n            this.mergeData(this.data, submission.data);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        return changed;\n    }\n    getValue() {\n        if (!this._submission.data) {\n            this._submission.data = {};\n        }\n        if (this.viewOnly) {\n            return this._submission;\n        }\n        const submission = this._submission;\n        submission.data = this.data;\n        return this._submission;\n    }\n    /**\n     * Build the form.\n     * @returns {Promise} - The promise that is triggered when the form is built.\n     */\n    init() {\n        if (this.options.submission) {\n            const submission = lodash_1.default.extend({}, this.options.submission);\n            this._submission = submission;\n            this._data = submission.data;\n        }\n        else {\n            this._submission = this._submission || { data: {} };\n        }\n        // Remove any existing components.\n        if (this.components && this.components.length) {\n            this.destroyComponents();\n            this.components = [];\n        }\n        if (this.component) {\n            this.component.components = this.form ? this.form.components : [];\n        }\n        else {\n            this.component = this.form;\n        }\n        this.component.type = \"form\";\n        this.component.input = false;\n        this.addComponents();\n        this.on(\"submitButton\", (options) => {\n            this.submit(false, options).catch((e) => {\n                if (options === null || options === void 0 ? void 0 : options.instance) {\n                    options.instance.loading = false;\n                }\n                return e !== false && e !== undefined && console.log(e);\n            });\n        }, true);\n        this.on(\"checkValidity\", (data) => this.validate(data, { dirty: true, process: \"change\" }), true);\n        this.on(\"requestUrl\", (args) => this.submitUrl(args.url, args.headers), true);\n        this.on(\"resetForm\", () => this.resetValue(), true);\n        this.on(\"deleteSubmission\", () => this.deleteSubmission(), true);\n        this.on(\"refreshData\", () => this.updateValue(), true);\n        this.executeFormController();\n        return this.formReady;\n    }\n    executeFormController() {\n        // If no controller value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        if (!this.form ||\n            !this.form.controller ||\n            ((!this.visible || this.component.hidden) &&\n                this.component.clearOnHide &&\n                !this.rootPristine)) {\n            return false;\n        }\n        this.formReady.then(() => {\n            this.evaluate(this.form.controller, {\n                components: this.components,\n                instance: this,\n            });\n        });\n    }\n    /**\n     *\n     */\n    teardown() {\n        this.emit(\"formDelete\", this.id);\n        delete Formio_1.Formio.forms[this.id];\n        delete this.executeShortcuts;\n        delete this.triggerSaveDraft;\n        super.teardown();\n    }\n    destroy(all = false) {\n        this.off(\"submitButton\");\n        this.off(\"checkValidity\");\n        this.off(\"requestUrl\");\n        this.off(\"resetForm\");\n        this.off(\"deleteSubmission\");\n        this.off(\"refreshData\");\n        return super.destroy(all);\n    }\n    build(element) {\n        if (element || this.element) {\n            return this.ready.then(() => {\n                element = element || this.element;\n                super.build(element);\n            });\n        }\n        return this.ready;\n    }\n    getClassName() {\n        let classes = \"formio-form\";\n        if (this.options.readOnly) {\n            classes += \" formio-read-only\";\n        }\n        return classes;\n    }\n    render() {\n        return super.render(this.renderTemplate(\"webform\", {\n            classes: this.getClassName(),\n            children: this.renderComponents(),\n        }), this.builderMode ? \"builder\" : \"form\", true);\n    }\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element) {\n            return Promise.resolve();\n        }\n        this.clear();\n        this.setContent(this.element, this.render());\n        return this.attach(this.element);\n    }\n    attach(element) {\n        this.setElement(element);\n        this.loadRefs(element, { webform: \"single\" });\n        const childPromise = this.attachComponents(this.refs.webform);\n        this.addEventListener(document, \"keydown\", this.executeShortcuts);\n        this.currentForm = this;\n        this.hook(\"attachWebform\", element, this);\n        return childPromise.then(() => {\n            this.emit(\"render\", this.element);\n            return this.setValue(this._submission, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    hasRequiredFields() {\n        let result = false;\n        (0, formUtils_1.eachComponent)(this.form.components, (component) => {\n            if (component.validate.required) {\n                result = true;\n                return true;\n            }\n        }, true);\n        return result;\n    }\n    resetValue() {\n        lodash_1.default.each(this.getComponents(), (comp) => comp.resetValue());\n        this.setPristine(true);\n        this.onChange({ resetValue: true });\n    }\n    /**\n     * Sets a new alert to display in the error dialog of the form.\n     * @param {string} type - The type of alert to display. \"danger\", \"success\", \"warning\", etc.\n     * @param {string} message - The message to show in the alert.\n     * @param {object} options - The options for the alert.\n     */\n    setAlert(type, message, options) {\n        if (!type && this.submitted) {\n            if (this.alert) {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            return;\n        }\n        if (this.options.noAlerts) {\n            if (!message) {\n                this.emit(\"error\", false);\n            }\n            return;\n        }\n        if (this.alert) {\n            try {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            catch (err) {\n                // ignore\n            }\n        }\n        if (message) {\n            const attrs = {\n                class: (options && options.classes) || `alert alert-${type}`,\n                id: `error-list-${this.id}`,\n            };\n            const templateOptions = {\n                message: message instanceof HTMLElement ? message.outerHTML : message,\n                attrs: attrs,\n                type,\n            };\n            this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate(\"alert\", templateOptions), `#${attrs.id}`);\n        }\n        if (!this.alert) {\n            return;\n        }\n        this.loadRefs(this.alert, { errorRef: \"multiple\" });\n        if (this.refs.errorRef && this.refs.errorRef.length) {\n            this.refs.errorRef.forEach((el) => {\n                this.addEventListener(el, \"click\", (e) => {\n                    const key = e.currentTarget.dataset.componentKey;\n                    this.focusOnComponent(key);\n                });\n                this.addEventListener(el, \"keydown\", (e) => {\n                    if (e.keyCode === 13) {\n                        e.preventDefault();\n                        const key = e.currentTarget.dataset.componentKey;\n                        this.focusOnComponent(key);\n                    }\n                });\n            });\n        }\n        this.prepend(this.alert);\n    }\n    /**\n     * Focus on selected component.\n     * @param {string} key - The key of selected component.\n     */\n    focusOnComponent(key) {\n        if (key) {\n            const component = this.getComponent(key);\n            if (component) {\n                component.focus();\n            }\n        }\n    }\n    /**\n     * Show the errors of this form within the alert dialog.\n     * @param {object} error - An optional additional error to display along with the component errors.\n     * @returns {*}\n     */\n    /* eslint-disable no-unused-vars */\n    /**\n     *\n     * @param {Array} errors - An array of errors to display.\n     * @param {boolean} triggerEvent - Whether or not to trigger the error event.\n     * @returns {void|Array} - The errors that were set.\n     */\n    showErrors(errors, triggerEvent) {\n        this.loading = false;\n        if (!Array.isArray(errors)) {\n            errors = [errors];\n        }\n        errors = errors.concat(this.customErrors).filter((err) => !!err);\n        if (!errors.length) {\n            this.setAlert(false);\n            return;\n        }\n        // Mark any components as invalid if in a custom message.\n        errors.forEach((err) => {\n            const { components = [] } = err;\n            if (err.component) {\n                components.push(err.component);\n            }\n            if (err.path) {\n                components.push(err.path);\n            }\n            components.forEach((path) => {\n                const originalPath = (0, utils_1.getStringFromComponentPath)(path);\n                const component = this.getComponent(path, lodash_1.default.identity, originalPath);\n                if (err.fromServer) {\n                    if (component.serverErrors) {\n                        component.serverErrors.push(err);\n                    }\n                    else {\n                        component.serverErrors = [err];\n                    }\n                }\n                const components = lodash_1.default.compact(Array.isArray(component) ? component : [component]);\n                components.forEach((component) => component.setCustomValidity(err.message, true));\n            });\n        });\n        const displayedErrors = [];\n        if (errors.length) {\n            errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });\n            const createListItem = (message, index) => {\n                var _a, _b, _c;\n                const err = errors[index];\n                const messageFromIndex = !lodash_1.default.isUndefined(index) && errors && errors[index];\n                const keyOrPath = (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.formattedKeyOrPath) ||\n                    (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.path) ||\n                    ((_a = messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.context) === null || _a === void 0 ? void 0 : _a.path) ||\n                    (((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) ||\n                    (err.component && err.component.key) ||\n                    (err.fromServer && err.path);\n                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : \"\";\n                if (typeof err !== \"string\" && !err.formattedKeyOrPath) {\n                    err.formattedKeyOrPath = formattedKeyOrPath;\n                }\n                return {\n                    message: (0, utils_1.unescapeHTML)(message),\n                    keyOrPath: formattedKeyOrPath,\n                };\n            };\n            errors.forEach(({ message, context, fromServer, component }, index) => {\n                const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer\n                    ? this.t(\"alertMessage\", { message: this.t(message) })\n                    : this.t(\"alertMessageWithLabel\", {\n                        label: this.t(component === null || component === void 0 ? void 0 : component.label),\n                        message: this.t(message),\n                    });\n                displayedErrors.push(createListItem(text, index));\n            });\n        }\n        const errorsList = this.renderTemplate(\"errorsList\", { errors: displayedErrors });\n        this.root.setAlert(\"danger\", errorsList);\n        if (triggerEvent) {\n            this.emit(\"error\", errors);\n        }\n        return errors;\n    }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Called when the submission has completed, or if the submission needs to be sent to an external library.\n     * @param {object} submission - The submission object.\n     * @param {boolean} saved - Whether or not this submission was saved to the server.\n     * @returns {object} - The submission object.\n     */\n    onSubmit(submission, saved) {\n        var _a;\n        this.loading = false;\n        this.submitting = false;\n        this.setPristine(true);\n        // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.\n        this.setValue((0, utils_1.fastCloneDeep)(submission), {\n            noValidate: true,\n            noCheck: true,\n        });\n        this.setAlert(\"success\", `<p>${this.t(\"complete\")}</p>`);\n        // Cancel triggered saveDraft to prevent overriding the submitted state\n        if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {\n            this.triggerSaveDraft.cancel();\n        }\n        this.emit(\"submit\", submission, saved);\n        if (saved) {\n            this.emit(\"submitDone\", submission);\n        }\n        return submission;\n    }\n    normalizeError(error) {\n        if (error) {\n            if (typeof error === \"object\" && \"details\" in error) {\n                error = error.details;\n            }\n            if (typeof error === \"string\") {\n                error = { message: error };\n            }\n        }\n        return error;\n    }\n    /**\n     * Called when an error occurs during the submission.\n     * @param {object} error - The error that occured.\n     * @returns {Array} errors - All errors.\n     */\n    onSubmissionError(error) {\n        error = this.normalizeError(error);\n        this.submitting = false;\n        this.setPristine(false);\n        this.emit(\"submitError\", error || this.errors);\n        // Allow for silent cancellations (no error message, no submit button error state)\n        if (error && error.silent) {\n            this.emit(\"change\", { isValid: true }, { silent: true });\n            return false;\n        }\n        const errors = this.showErrors(error, true);\n        if (this.root && this.root.alert) {\n            this.scrollIntoView(this.root.alert);\n        }\n        return errors;\n    }\n    /**\n     * Trigger the change event for this form.\n     * @param {any} flags - The flags to set on this change event.\n     * @param {any} changed - The changed object which reflects the changes in the form.\n     * @param {boolean} modified - Whether or not the form has been modified.\n     * @param {any} changes - The changes that have occured in the form.\n     */\n    onChange(flags, changed, modified, changes) {\n        flags = flags || {};\n        let isChangeEventEmitted = false;\n        super.onChange(flags, true);\n        const value = lodash_1.default.clone(this.submission);\n        flags.changed = value.changed = changed;\n        flags.changes = changes;\n        if (modified && this.pristine) {\n            this.pristine = false;\n        }\n        this.checkData(value.data, flags);\n        const shouldValidate = !flags.noValidate ||\n            flags.fromIFrame ||\n            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);\n        const errors = shouldValidate\n            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { process: \"change\" }))\n            : [];\n        value.isValid = errors.length === 0;\n        this.loading = false;\n        if (this.submitted) {\n            // show server errors while they are not cleaned/fixed\n            const nonComponentServerErrors = lodash_1.default.filter(this.serverErrors || [], (err) => !err.component && !err.path);\n            this.showErrors(nonComponentServerErrors.length ? nonComponentServerErrors : errors);\n        }\n        // See if we need to save the draft of the form.\n        if (modified && this.options.saveDraft) {\n            this.triggerSaveDraft();\n        }\n        if (!flags || !flags.noEmit) {\n            this.emit(\"change\", value, flags, modified);\n            isChangeEventEmitted = true;\n        }\n        // The form is initialized after the first change event occurs.\n        if (isChangeEventEmitted && !this.initialized) {\n            this.emit(\"initialized\");\n            this.initialized = true;\n        }\n    }\n    /**\n     * Send a delete request to the server.\n     * @returns {Promise} - The promise that is triggered when the delete is complete.\n     */\n    deleteSubmission() {\n        return this.formio.deleteSubmission().then(() => {\n            this.emit(\"submissionDeleted\", this.submission);\n            this.resetValue();\n        });\n    }\n    /**\n     * Cancels the submission.\n     * @param {boolean} noconfirm - Whether or not to confirm the cancellation.\n     * @alias reset\n     * @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.\n     */\n    cancel(noconfirm) {\n        const shouldReset = this.hook(\"beforeCancel\", true);\n        if (shouldReset && (noconfirm || confirm(this.t(\"confirmCancel\")))) {\n            this.resetValue();\n            return true;\n        }\n        else {\n            this.emit(\"cancelSubmit\");\n            return false;\n        }\n    }\n    setMetadata(submission) {\n        // Add in metadata about client submitting the form\n        submission.metadata = submission.metadata || {};\n        lodash_1.default.defaults(submission.metadata, {\n            timezone: lodash_1.default.get(this, \"_submission.metadata.timezone\", (0, utils_1.currentTimezone)()),\n            offset: parseInt(lodash_1.default.get(this, \"_submission.metadata.offset\", (0, moment_1.default)().utcOffset()), 10),\n            origin: document.location.origin,\n            referrer: document.referrer,\n            browserName: navigator.appName,\n            userAgent: navigator.userAgent,\n            pathName: window.location.pathname,\n            onLine: navigator.onLine,\n        });\n    }\n    submitForm(options = {}) {\n        this.clearServerErrors();\n        return new Promise((resolve, reject) => {\n            // Read-only forms should never submit.\n            if (this.options.readOnly) {\n                return resolve({\n                    submission: this.submission,\n                    saved: false,\n                });\n            }\n            const submission = (0, utils_1.fastCloneDeep)(this.submission || {});\n            this.setMetadata(submission);\n            submission.state = options.state || submission.state || \"submitted\";\n            const isDraft = submission.state === \"draft\";\n            this.hook(\"beforeSubmit\", Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {\n                var _a;\n                if (err) {\n                    return reject(err);\n                }\n                submission._vnote = data && data._vnote ? data._vnote : \"\";\n                try {\n                    if (!isDraft && !options.noValidate) {\n                        if (!submission.data) {\n                            return reject(\"Invalid Submission\");\n                        }\n                        const errors = this.validate(submission.data, {\n                            dirty: true,\n                            silentCheck: false,\n                            process: \"submit\",\n                        });\n                        if (errors.length ||\n                            ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === \"rejected\"))) {\n                            return reject(errors);\n                        }\n                    }\n                }\n                catch (err) {\n                    console.error(err);\n                }\n                this.everyComponent((comp) => {\n                    if (submission._vnote && comp.type === \"form\" && comp.component.reference) {\n                        lodash_1.default.get(submission.data, comp.path, {})._vnote = submission._vnote;\n                    }\n                    const { persistent } = comp.component;\n                    if (persistent === \"client-only\") {\n                        lodash_1.default.unset(submission.data, comp.path);\n                    }\n                });\n                this.hook(\"customValidation\", Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {\n                    if (err) {\n                        // If string is returned, cast to object.\n                        if (typeof err === \"string\") {\n                            err = {\n                                message: err,\n                            };\n                        }\n                        // Ensure err is an array.\n                        err = Array.isArray(err) ? err : [err];\n                        return reject(err);\n                    }\n                    this.loading = true;\n                    // Use the form action to submit the form if available.\n                    if (this._form && this._form.action) {\n                        const method = submission.data._id &&\n                            this._form.action.includes(submission.data._id)\n                            ? \"PUT\"\n                            : \"POST\";\n                        return Formio_1.Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})\n                            .then((result) => resolve({\n                            submission: result,\n                            saved: true,\n                        }))\n                            .catch((error) => {\n                            this.setServerErrors(error);\n                            return reject(error);\n                        });\n                    }\n                    const submitFormio = this.formio;\n                    if (this.nosubmit || !submitFormio) {\n                        return resolve({\n                            submission,\n                            saved: false,\n                        });\n                    }\n                    // If this is an actionUrl, then make sure to save the action and not the submission.\n                    const submitMethod = submitFormio.actionUrl\n                        ? \"saveAction\"\n                        : \"saveSubmission\";\n                    submitFormio[submitMethod](submission)\n                        .then((result) => resolve({\n                        submission: result,\n                        saved: true,\n                    }))\n                        .catch((error) => {\n                        this.setServerErrors(error);\n                        return reject(error);\n                    });\n                });\n            });\n        });\n    }\n    setServerErrors(error) {\n        if (error.details) {\n            this.serverErrors = error.details\n                .filter((err) => (err.level ? err.level === \"error\" : err))\n                .map((err) => {\n                err.fromServer = true;\n                return err;\n            });\n        }\n        else if (typeof error === \"string\") {\n            this.serverErrors = [{ fromServer: true, level: \"error\", message: error }];\n        }\n    }\n    executeSubmit(options) {\n        this.submitted = true;\n        this.submitting = true;\n        return this.submitForm(options)\n            .then(({ submission, saved }) => this.onSubmit(submission, saved))\n            .then((results) => {\n            this.submissionInProcess = false;\n            return results;\n        })\n            .catch((err) => {\n            this.submissionInProcess = false;\n            return Promise.reject(this.onSubmissionError(err));\n        });\n    }\n    clearServerErrors() {\n        var _a;\n        (_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.forEach((error) => {\n            if (error.path) {\n                const pathArray = (0, utils_1.getArrayFromComponentPath)(error.path);\n                const component = this.getComponent(pathArray, lodash_1.default.identity, error.formattedKeyOrPath);\n                if (component) {\n                    component.serverErrors = [];\n                }\n            }\n        });\n        this.serverErrors = [];\n    }\n    /**\n     * Submits the form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * form.submit().then((submission) => {\n     *   console.log(submission);\n     * });\n     * @param {boolean} before - If this submission occured from the before handlers.\n     * @param {any} options - The options to use when submitting this form.\n     * @returns {Promise} - A promise when the form is done submitting.\n     */\n    submit(before = false, options = {}) {\n        this.submissionInProcess = true;\n        if (!before) {\n            return this.beforeSubmit(options).then(() => this.executeSubmit(options));\n        }\n        else {\n            return this.executeSubmit(options);\n        }\n    }\n    submitUrl(URL, headers) {\n        if (!URL) {\n            return console.warn(\"Missing URL argument\");\n        }\n        const submission = this.submission || {};\n        const API_URL = URL;\n        const settings = {\n            method: \"POST\",\n            headers: {},\n        };\n        if (headers && headers.length > 0) {\n            headers.map((e) => {\n                if (e.header !== \"\" && e.value !== \"\") {\n                    settings.headers[e.header] = this.interpolate(e.value, submission);\n                }\n            });\n        }\n        if (API_URL && settings) {\n            Formio_1.Formio.makeStaticRequest(API_URL, settings.method, submission, {\n                headers: settings.headers,\n            })\n                .then(() => {\n                this.emit(\"requestDone\");\n                this.setAlert(\"success\", \"<p> Success </p>\");\n            })\n                .catch((e) => {\n                const message = `${e.statusText ? e.statusText : \"\"} ${e.status ? e.status : e}`;\n                this.emit(\"error\", message);\n                console.error(message);\n                this.setAlert(\"danger\", `<p> ${message} </p>`);\n                return Promise.reject(this.onSubmissionError(e));\n            });\n        }\n        else {\n            this.emit(\"error\", \"You should add a URL to this button.\");\n            this.setAlert(\"warning\", \"You should add a URL to this button.\");\n            return console.warn(\"You should add a URL to this button.\");\n        }\n    }\n    triggerCaptcha() {\n        if (!this || !this.components) {\n            return;\n        }\n        const captchaComponent = [];\n        (0, formUtils_1.eachComponent)(this.components, (component) => {\n            if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {\n                captchaComponent.push(component);\n            }\n        });\n        if (captchaComponent.length > 0) {\n            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);\n        }\n    }\n    set nosubmit(value) {\n        this._nosubmit = !!value;\n        this.emit(\"nosubmit\", this._nosubmit);\n    }\n    get nosubmit() {\n        return this._nosubmit || false;\n    }\n    get conditions() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.conditions) !== null && _b !== void 0 ? _b : [];\n    }\n    get variables() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.variables) !== null && _b !== void 0 ? _b : [];\n    }\n}\nexports[\"default\"] = Webform;\nWebform.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWebform.setApiUrl = Formio_1.Formio.setApiUrl;\nWebform.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Webform.js?");
 
 /***/ }),
 
@@ -5345,7 +5345,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 Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ./components/_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst builder_1 = __importDefault(__webpack_require__(/*! ./utils/builder */ \"./lib/cjs/utils/builder.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst dom_autoscroller_1 = __importDefault(__webpack_require__(/*! dom-autoscroller */ \"./node_modules/dom-autoscroller/dist/bundle.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ./templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\n__webpack_require__(/*! ./components/builder */ \"./lib/cjs/components/builder.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\nclass WebformBuilder extends Component_1.default {\n    // eslint-disable-next-line max-statements\n    constructor() {\n        let element, options;\n        if (arguments[0] instanceof HTMLElement || arguments[1]) {\n            element = arguments[0];\n            options = arguments[1];\n        }\n        else {\n            options = arguments[0];\n        }\n        // Reset skipInit in case PDFBuilder has set it.\n        options.skipInit = false;\n        options.display = options.display || 'form';\n        super(null, options);\n        this.moveHandler = (e) => {\n            if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {\n                e.stopPropagation();\n                e.preventDefault();\n            }\n            if (e.keyCode === 38) {\n                this.updateComponentPlacement(true);\n            }\n            if (e.keyCode === 40) {\n                this.updateComponentPlacement(false);\n            }\n            if (e.keyCode === 13) {\n                this.stopMoving(this.selectedComponent);\n            }\n        };\n        this.setElement(element);\n        this.dragulaLib = dragula_1.default;\n        this.builderHeight = 0;\n        this.schemas = {};\n        this.repeatablePaths = [];\n        this.sideBarScroll = lodash_1.default.get(this.options, 'sideBarScroll', true);\n        this.sideBarScrollOffset = lodash_1.default.get(this.options, 'sideBarScrollOffset', 0);\n        this.dragDropEnabled = true;\n        // Setup the builder options.\n        this.builder = lodash_1.default.defaultsDeep({}, this.options.builder, this.defaultGroups);\n        // Turn off if explicitely said to do so...\n        lodash_1.default.each(this.defaultGroups, (config, key) => {\n            if (config === false) {\n                this.builder[key] = false;\n            }\n        });\n        // Add the groups.////\n        this.groups = {};\n        this.groupOrder = [];\n        for (const group in this.builder) {\n            if (this.builder[group]) {\n                this.builder[group].key = group;\n                this.groups[group] = this.builder[group];\n                this.groups[group].components = this.groups[group].components || {};\n                this.groups[group].componentOrder = this.groups[group].componentOrder || [];\n                this.groups[group].subgroups = Object.keys(this.groups[group].groups || {}).map((groupKey) => {\n                    this.groups[group].groups[groupKey].componentOrder = Object.keys(this.groups[group].groups[groupKey].components).map((key) => key);\n                    return this.groups[group].groups[groupKey];\n                });\n                this.groupOrder.push(this.groups[group]);\n            }\n        }\n        this.groupOrder = this.groupOrder\n            .filter(group => group && !group.ignore)\n            .sort((a, b) => a.weight - b.weight)\n            .map(group => group.key);\n        for (const type in Components_1.default.components) {\n            const component = Components_1.default.components[type];\n            if (component.builderInfo && component.builderInfo.schema) {\n                this.schemas[type] = component.builderInfo.schema;\n                component.type = type;\n                const builderInfo = component.builderInfo;\n                builderInfo.key = component.type;\n                this.addBuilderComponentInfo(builderInfo);\n            }\n        }\n        // Filter out any extra components.\n        // Add the components in each group.\n        for (const group in this.groups) {\n            const info = this.groups[group];\n            for (const key in info.components) {\n                const compKey = group === 'resource' ? `component-${key}` : key;\n                let comp = info.components[compKey];\n                if (comp === true &&\n                    Components_1.default.components[key] &&\n                    Components_1.default.components[key].builderInfo) {\n                    comp = Components_1.default.components[key].builderInfo;\n                }\n                if (comp && comp.schema) {\n                    this.schemas[key] = comp.schema;\n                    info.components[compKey] = comp;\n                    info.components[compKey].key = key;\n                }\n                else {\n                    // Do not include this component in the components array.\n                    delete info.components[compKey];\n                }\n            }\n            // Order the components.\n            this.orderComponents(info);\n        }\n        this.options.hooks = this.options.hooks || {};\n        this.options.hooks.renderComponent = (html, { component, self }) => {\n            var _a, _b;\n            if (self.type === 'form' && !self.key) {\n                const template = this.hook('renderComponentFormTemplate', html.replace('formio-component-form', ''));\n                // The main webform shouldn't have this class as it adds extra styles.\n                return template;\n            }\n            if (this.options.disabled && this.options.disabled.includes(self.key) || self.parent.noDragDrop) {\n                return html;\n            }\n            return this.renderTemplate('builderComponent', {\n                html,\n                disableBuilderActions: (_a = self === null || self === void 0 ? void 0 : self.component) === null || _a === void 0 ? void 0 : _a.disableBuilderActions,\n                childComponent: component,\n                design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design\n            });\n        };\n        this.options.hooks.renderComponents = (html, { components, self }) => {\n            // if Datagrid and already has a component, don't make it droppable.\n            if (self.type === 'datagrid' && components.length > 0 || self.noDragDrop) {\n                return html;\n            }\n            if (!components ||\n                (!components.length && !components.nodrop) ||\n                (self.type === 'form' && components.length <= 1 && (components.length === 0 || components[0].type === 'button'))) {\n                html = this.renderTemplate('builderPlaceholder', {\n                    position: 0\n                }) + html;\n            }\n            return this.renderTemplate('builderComponents', {\n                key: self.key,\n                type: self.type,\n                html,\n            });\n        };\n        this.options.hooks.renderInput = (html, { self }) => {\n            if (self.type === 'hidden') {\n                return html + self.name;\n            }\n            return html;\n        };\n        this.options.hooks.renderLoading = (html, { self }) => {\n            if (self.type === 'form' && self.key) {\n                return self.name;\n            }\n            return html;\n        };\n        this.options.hooks.attachComponents = (element, components, container, component) => {\n            // Don't attach if no element was found or component doesn't participate in drag'n'drop.\n            if (!element) {\n                return;\n            }\n            if (component.noDragDrop) {\n                return element;\n            }\n            // Attach container and component to element for later reference.\n            const containerElement = element.querySelector(`[${this._referenceAttributeName}=\"${component.component.key}-container\"]`) || element;\n            containerElement.formioContainer = container;\n            containerElement.formioComponent = component;\n            // Add container to draggable list.\n            if (this.dragula && this.allowDrop(element)) {\n                this.dragula.containers.push(containerElement);\n            }\n            // If this is an existing datagrid element, don't make it draggable.\n            if ((component.type === 'datagrid' || component.type === 'datamap') && components.length > 0) {\n                return element;\n            }\n            // Since we added a wrapper, need to return the original element so that we can find the components inside it.\n            return element.children[0];\n        };\n        this.options.hooks.attachDatagrid = (element, component) => {\n            component.loadRefs(element, {\n                [`${component.key}-container`]: 'single',\n            });\n            const dataGridContainer = component.refs[`${component.key}-container`];\n            if (dataGridContainer) {\n                component.attachComponents(dataGridContainer.parentNode, [], component.component.components);\n            }\n            // Need to set up horizontal rearrangement of fields.\n        };\n        this.options.hooks.attachComponent = this.attachComponent.bind(this);\n        // Load resources tagged as 'builder'\n        const query = {\n            params: {\n                type: 'resource',\n                limit: 1000000,\n                select: '_id,title,name,components'\n            }\n        };\n        if (this.options && this.options.resourceTag) {\n            query.params.tags = [this.options.resourceTag];\n        }\n        else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {\n            query.params.tags = ['builder'];\n        }\n        const formio = new Formio_1.Formio(Formio_1.Formio.projectUrl);\n        const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;\n        formio.loadProject().then((project) => {\n            if (project && (lodash_1.default.get(project, 'settings.addConfigToForms', false) || lodash_1.default.get(project, 'addConfigToForms', false))) {\n                const config = project.config || {};\n                this.options.formConfig = config;\n                const pathToFormConfig = 'webform._form.config';\n                const webformConfig = lodash_1.default.get(this, pathToFormConfig);\n                if (this.webform && !webformConfig) {\n                    lodash_1.default.set(this, pathToFormConfig, config);\n                }\n            }\n        }).catch((err) => {\n            console.warn(`Could not load project settings: ${err.message || err}`);\n        });\n        if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {\n            const resourceOptions = this.options.builder && this.options.builder.resource;\n            formio.loadForms(query)\n                .then((resources) => {\n                if (resources.length) {\n                    this.builder.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    this.groups.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    if (!this.groupOrder.includes('resource')) {\n                        this.groupOrder.push('resource');\n                    }\n                    this.addExistingResourceFields(resources);\n                }\n            });\n        }\n        // Notify components if they need to modify their render.\n        this.options.attachMode = 'builder';\n        this.webform = this.webform || this.createForm(this.options);\n        this.pathComponentsMapping = {};\n        this.arrayDataComponentPaths = [];\n        this.nestedDataComponents = [];\n        this.arrayDataComponents = [];\n    }\n    allowDrop() {\n        return true;\n    }\n    addExistingResourceFields(resources) {\n        lodash_1.default.each(resources, (resource, index) => {\n            const resourceKey = `resource-${resource.name}`;\n            const subgroup = {\n                key: resourceKey,\n                title: resource.title,\n                components: [],\n                componentOrder: [],\n                default: index === 0,\n            };\n            (0, formUtils_1.eachComponent)(resource.components, (component) => {\n                if (component.type === 'button')\n                    return;\n                if (this.options &&\n                    this.options.resourceFilter &&\n                    (!component.tags || component.tags.indexOf(this.options.resourceFilter) === -1))\n                    return;\n                let componentName = component.label;\n                if (!componentName && component.key) {\n                    componentName = lodash_1.default.upperFirst(component.key);\n                }\n                subgroup.componentOrder.push(`component-${component.key}`);\n                subgroup.components[`component-${component.key}`] = lodash_1.default.merge((0, utils_1.fastCloneDeep)(Components_1.default.components[component.type]\n                    ? Components_1.default.components[component.type].builderInfo\n                    : Components_1.default.components['unknown'].builderInfo), {\n                    key: component.key,\n                    title: componentName,\n                    group: 'resource',\n                    subgroup: resourceKey,\n                }, {\n                    schema: Object.assign(Object.assign({}, component), { label: component.label, key: component.key, lockKey: true, source: (!this.options.noSource ? resource._id : undefined), isNew: true })\n                });\n            }, true);\n            this.groups.resource.subgroups.push(subgroup);\n        });\n        this.triggerRedraw();\n    }\n    attachTooltip(component, title) {\n        return (0, tippy_js_1.default)(component, {\n            allowHTML: true,\n            trigger: 'mouseenter focus',\n            placement: 'top',\n            delay: [200, 0],\n            zIndex: 10000,\n            content: title\n        });\n    }\n    attachComponent(element, component) {\n        if (component instanceof WebformBuilder) {\n            return;\n        }\n        // Add component to element for later reference.\n        element.formioComponent = component;\n        component.loadRefs(element, {\n            removeComponent: 'single',\n            editComponent: 'single',\n            moveComponent: 'single',\n            copyComponent: 'single',\n            pasteComponent: 'single',\n            editJson: 'single'\n        });\n        if (component.refs.copyComponent) {\n            this.attachTooltip(component.refs.copyComponent, this.t('Copy'));\n            component.addEventListener(component.refs.copyComponent, 'click', () => this.copyComponent(component));\n        }\n        if (component.refs.pasteComponent) {\n            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('Paste below'));\n            component.addEventListener(component.refs.pasteComponent, 'click', () => {\n                pasteToolTip.hide();\n                this.pasteComponent(component);\n            });\n        }\n        if (component.refs.moveComponent) {\n            this.attachTooltip(component.refs.moveComponent, this.t('Move'));\n            if (this.keyboardActionsEnabled) {\n                component.addEventListener(component.refs.moveComponent, 'click', () => {\n                    this.moveComponent(component);\n                });\n            }\n        }\n        const parent = this.getParentElement(element);\n        if (component.refs.editComponent) {\n            this.attachTooltip(component.refs.editComponent, this.t('Edit'));\n            component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, { inDataGrid: component.isInDataGrid }));\n        }\n        if (component.refs.editJson) {\n            this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));\n            component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component));\n        }\n        if (component.refs.removeComponent) {\n            this.attachTooltip(component.refs.removeComponent, this.t('Remove'));\n            component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component, component));\n        }\n        return element;\n    }\n    createForm(options) {\n        this.webform = new Webform_1.default(this.element, options);\n        if (this.element) {\n            this.loadRefs(this.element, {\n                form: 'single'\n            });\n            if (this.refs.form) {\n                this.webform.element = this.refs.form;\n            }\n        }\n        return this.webform;\n    }\n    /**\n     * Called when everything is ready.\n     * @returns {Promise} - Wait for webform to be ready.\n     */\n    get ready() {\n        return this.webform.ready;\n    }\n    get defaultGroups() {\n        return {\n            basic: {\n                title: 'Basic',\n                weight: 0,\n                default: true,\n            },\n            advanced: {\n                title: 'Advanced',\n                weight: 10\n            },\n            layout: {\n                title: 'Layout',\n                weight: 20\n            },\n            data: {\n                title: 'Data',\n                weight: 30\n            },\n            premium: {\n                title: 'Premium',\n                weight: 40\n            }\n        };\n    }\n    redraw() {\n        return Webform_1.default.prototype.redraw.call(this);\n    }\n    get form() {\n        return this.webform.form;\n    }\n    get schema() {\n        return this.webform.schema;\n    }\n    set form(value) {\n        this.setForm(value);\n    }\n    get container() {\n        return this.webform.form.components;\n    }\n    /**\n     * When a component sets its api key, we need to check if it is unique within its namespace. Find the namespace root\n     * so we can calculate this correctly.\n     * @param {import('@formio/core').Component} component - The component to find the namespace root for.\n     * @returns {import('@formio/core').Component[]} - The components root for this namespace.\n     */\n    findNamespaceRoot(component) {\n        const path = (0, utils_1.getArrayFromComponentPath)(component.path);\n        // First get the component with nested parents.\n        let comp = this.webform.getComponent(path);\n        comp = Array.isArray(comp) ? comp[0] : comp;\n        const namespaceKey = this.recurseNamespace(comp);\n        // If there is no key, it is the root form.\n        if (!namespaceKey || this.form.key === namespaceKey) {\n            return this.form.components;\n        }\n        const componentSchema = component.component;\n        // If the current component is the namespace, we don't need to find it again.\n        if (namespaceKey === component.key) {\n            return [...componentSchema.components, componentSchema];\n        }\n        // Get the namespace component so we have the original object.\n        const namespaceComponent = (0, formUtils_1.getComponent)(this.form.components, namespaceKey, true);\n        return namespaceComponent ? namespaceComponent.components : comp.components;\n    }\n    recurseNamespace(component) {\n        // If there is no parent, we are at the root level.\n        if (!component) {\n            return null;\n        }\n        // Some components are their own namespace.\n        if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(component.type) || component.tree || component.arrayTree) {\n            return component.key;\n        }\n        // Anything else, keep going up.\n        return this.recurseNamespace(component.parent);\n    }\n    render() {\n        return this.renderTemplate('builder', {\n            sidebar: this.renderTemplate('builderSidebar', {\n                scrollEnabled: this.sideBarScroll,\n                groupOrder: this.groupOrder,\n                groupId: `builder-sidebar-${this.id}`,\n                groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n                    group: this.groups[groupKey],\n                    groupKey,\n                    groupId: `builder-sidebar-${this.id}`,\n                    subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n                        group,\n                        groupKey: group.key,\n                        groupId: `group-container-${groupKey}`,\n                        subgroups: []\n                    })),\n                    keyboardActionsEnabled: this.keyboardActionsEnabled,\n                })),\n            }),\n            form: this.webform.render(),\n        });\n    }\n    attach(element) {\n        this.on('change', (form) => {\n            this.populateCaptchaSettings(form);\n            this.webform.setAlert(false);\n        });\n        return super.attach(element).then(() => {\n            this.loadRefs(element, {\n                form: 'single',\n                sidebar: 'single',\n                'sidebar-search': 'single',\n                'sidebar-groups': 'single',\n                'container': 'multiple',\n                'sidebar-anchor': 'multiple',\n                'sidebar-group': 'multiple',\n                'sidebar-container': 'multiple',\n                'sidebar-component': 'multiple',\n            });\n            if (this.sideBarScroll && Templates_1.default.current.handleBuilderSidebarScroll) {\n                Templates_1.default.current.handleBuilderSidebarScroll.call(this, this);\n            }\n            // Add the paste status in form\n            if (typeof window !== 'undefined' && window.sessionStorage) {\n                const data = window.sessionStorage.getItem('formio.clipboard');\n                if (data) {\n                    this.addClass(this.refs.form, 'builder-paste-mode');\n                }\n            }\n            if (!(0, utils_1.bootstrapVersion)(this.options)) {\n                const getAttribute = (anchor, attribute) => {\n                    let elem = anchor.getAttribute(`data-${attribute}`);\n                    if (!elem) {\n                        elem = anchor.getAttribute(`data-bs-${attribute}`);\n                    }\n                    return elem;\n                };\n                const hideShow = (group, show) => {\n                    if (show) {\n                        group.classList.add(['show']);\n                        group.style.display = 'inherit';\n                    }\n                    else {\n                        group.classList.remove(['show']);\n                        group.style.display = 'none';\n                    }\n                };\n                // Initialize\n                this.refs['sidebar-group'].forEach((group) => {\n                    hideShow(group, getAttribute(group, 'default') === 'true');\n                });\n                // Click event\n                this.refs['sidebar-anchor'].forEach((anchor, index) => {\n                    this.addEventListener(anchor, 'click', () => {\n                        const clickedParentId = getAttribute(anchor, 'parent').slice('#builder-sidebar-'.length);\n                        const clickedId = getAttribute(anchor, 'target').slice('#group-'.length);\n                        this.refs['sidebar-group'].forEach((group, groupIndex) => {\n                            const openByDefault = getAttribute(group, 'default') === 'true';\n                            const groupId = group.getAttribute('id').slice('group-'.length);\n                            const groupParent = getAttribute(group, 'parent').slice('#builder-sidebar-'.length);\n                            hideShow(group, ((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index));\n                        });\n                    }, true);\n                });\n            }\n            if (this.keyboardActionsEnabled) {\n                this.refs['sidebar-component'].forEach((component) => {\n                    this.addEventListener(component, 'keydown', (event) => {\n                        if (event.keyCode === 13) {\n                            this.addNewComponent(component);\n                        }\n                    });\n                });\n            }\n            this.addEventListener(this.refs['sidebar-search'], 'input', lodash_1.default.debounce((e) => {\n                const searchString = e.target.value;\n                this.searchFields(searchString);\n            }, 300));\n            if (this.dragDropEnabled) {\n                this.initDragula();\n            }\n            const drake = this.dragula;\n            if (this.refs.form) {\n                (0, dom_autoscroller_1.default)([window], {\n                    margin: 20,\n                    maxSpeed: 6,\n                    scrollWhenOutside: true,\n                    autoScroll: function () {\n                        return this.down && (drake === null || drake === void 0 ? void 0 : drake.dragging);\n                    }\n                });\n                return this.webform.attach(this.refs.form);\n            }\n        });\n    }\n    searchFields(searchString = '') {\n        const searchValue = searchString.toLowerCase();\n        const sidebar = this.refs['sidebar'];\n        const sidebarGroups = this.refs['sidebar-groups'];\n        if (!sidebar || !sidebarGroups) {\n            return;\n        }\n        const filterGroupBy = (group, searchValue = '') => {\n            const result = lodash_1.default.toPlainObject(group);\n            const { subgroups = [], components } = result;\n            const filteredComponents = [];\n            for (const key in components) {\n                const isMatchedToTitle = this.t(components[key].title).toLowerCase().match(searchValue);\n                const isMatchedToKey = components[key].key.toLowerCase().match(searchValue);\n                if (isMatchedToTitle || isMatchedToKey) {\n                    filteredComponents.push(components[key]);\n                }\n            }\n            this.orderComponents(result, filteredComponents);\n            if (searchValue) {\n                result.default = true;\n            }\n            if (result.componentOrder.length || subgroups.length) {\n                return result;\n            }\n            return null;\n        };\n        const filterGroupOrder = (groupOrder, searchValue) => {\n            const result = lodash_1.default.cloneDeep(groupOrder);\n            return result.filter(key => filterGroupBy(this.groups[key], searchValue));\n        };\n        const filterSubgroups = (groups, searchValue) => {\n            const result = lodash_1.default.clone(groups);\n            return result\n                .map(subgroup => filterGroupBy(subgroup, searchValue))\n                .filter(subgroup => !lodash_1.default.isNull(subgroup));\n        };\n        const toTemplate = groupKey => {\n            return {\n                group: filterGroupBy(this.groups[groupKey], searchValue),\n                groupKey,\n                groupId: sidebar.id || sidebarGroups.id,\n                subgroups: filterSubgroups(this.groups[groupKey].subgroups, searchValue)\n                    .map((group) => this.renderTemplate('builderSidebarGroup', {\n                    group,\n                    groupKey: group.key,\n                    groupId: `group-container-${groupKey}`,\n                    subgroups: []\n                })),\n            };\n        };\n        sidebarGroups.innerHTML = filterGroupOrder(this.groupOrder, searchValue)\n            .map(groupKey => this.renderTemplate('builderSidebarGroup', toTemplate(groupKey)))\n            .join('');\n        this.loadRefs(this.element, {\n            'sidebar-groups': 'single',\n            'sidebar-anchor': 'multiple',\n            'sidebar-group': 'multiple',\n            'sidebar-container': 'multiple',\n        });\n        this.updateDragAndDrop();\n        if (searchValue === '') {\n            this.triggerRedraw();\n        }\n    }\n    orderComponents(groupInfo, foundComponents) {\n        const components = foundComponents || groupInfo.components;\n        const isResource = groupInfo.key.indexOf('resource-') === 0;\n        if (components) {\n            groupInfo.componentOrder = Object.keys(components)\n                .map(key => components[key])\n                .filter(component => component && !component.ignore && !component.ignoreForForm)\n                .sort((a, b) => a.weight - b.weight)\n                .map(component => isResource ? `component-${component.key}` : component.key);\n        }\n    }\n    updateDragAndDrop() {\n        if (this.dragDropEnabled) {\n            this.initDragula();\n        }\n        if (this.refs.form) {\n            return this.webform.attach(this.refs.form);\n        }\n    }\n    initDragula() {\n        const options = this.options;\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        const containersArray = Array.prototype.slice.call(this.refs['sidebar-container']).filter(item => {\n            return item.id !== 'group-container-resource';\n        });\n        if (!dragula_1.default) {\n            return;\n        }\n        this.dragula = (0, dragula_1.default)(containersArray, {\n            moves(el) {\n                let moves = true;\n                const list = Array.from(el.classList).filter(item => item.indexOf('formio-component-') === 0);\n                list.forEach(item => {\n                    const key = item.slice('formio-component-'.length);\n                    if (options.disabled && options.disabled.includes(key)) {\n                        moves = false;\n                    }\n                });\n                if (el.classList.contains('no-drag')) {\n                    moves = false;\n                }\n                return moves;\n            },\n            copy(el) {\n                return el.classList.contains('drag-copy');\n            },\n            accepts(el, target) {\n                return !el.contains(target) && !target.classList.contains('no-drop');\n            }\n        }).on('drop', (element, target, source, sibling) => this.onDrop(element, target, source, sibling));\n    }\n    detach() {\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        this.dragula = null;\n        if (this.sideBarScroll && Templates_1.default.current.clearBuilderSidebarScroll) {\n            Templates_1.default.current.clearBuilderSidebarScroll.call(this, this);\n        }\n        super.detach();\n    }\n    getComponentInfo(key, group) {\n        let info;\n        // Need to check in first order as resource component key can be the same as from webform default components\n        if (group && group.slice(0, group.indexOf('-')) === 'resource') {\n            // This is an existing resource field.\n            const resourceGroups = this.groups.resource.subgroups;\n            const resourceGroup = lodash_1.default.find(resourceGroups, { key: group });\n            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n            }\n        }\n        // This is a new component\n        else if (this.schemas.hasOwnProperty(key)) {\n            info = (0, utils_1.fastCloneDeep)(this.schemas[key]);\n        }\n        else if (this.groups.hasOwnProperty(group)) {\n            const groupComponents = this.groups[group].components;\n            if (groupComponents.hasOwnProperty(key)) {\n                info = (0, utils_1.fastCloneDeep)(groupComponents[key].schema);\n            }\n        }\n        else if (group === 'searchFields') { //Search components go into this group\n            const resourceGroups = this.groups.resource.subgroups;\n            for (let ix = 0; ix < resourceGroups.length; ix++) {\n                const resourceGroup = resourceGroups[ix];\n                if (resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                    info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n                    break;\n                }\n            }\n        }\n        if (info) {\n            //if this is a custom component that was already assigned a key, don't stomp on it\n            if (!Components_1.default.components.hasOwnProperty(info.type) && info.key) {\n                return info;\n            }\n            info.key = this.generateKey(info);\n        }\n        return info;\n    }\n    getComponentsPath(component, parent) {\n        // Get path to the component in the parent component.\n        let path = 'components';\n        let columnIndex = 0;\n        let tableRowIndex = 0;\n        let tableColumnIndex = 0;\n        let tabIndex = 0;\n        switch (parent.type) {\n            case 'table':\n                tableRowIndex = lodash_1.default.findIndex(parent.rows, row => row.some(column => column.components.some(comp => comp.key === component.key)));\n                tableColumnIndex = lodash_1.default.findIndex(parent.rows[tableRowIndex], (column => column.components.some(comp => comp.key === component.key)));\n                path = `rows[${tableRowIndex}][${tableColumnIndex}].components`;\n                break;\n            case 'columns':\n                columnIndex = lodash_1.default.findIndex(parent.columns, column => column.components.some(comp => comp.key === component.key));\n                path = `columns[${columnIndex}].components`;\n                break;\n            case 'tabs':\n                tabIndex = lodash_1.default.findIndex(parent.components, tab => tab.components.some(comp => comp.key === component.key));\n                path = `components[${tabIndex}].components`;\n                break;\n        }\n        return path;\n    }\n    /* eslint-disable max-statements */\n    onDrop(element, target, source, sibling) {\n        var _a;\n        if (!target) {\n            return;\n        }\n        // If you try to drop within itself.\n        if (element.contains(target)) {\n            return;\n        }\n        const key = element.getAttribute('data-key');\n        const type = element.getAttribute('data-type');\n        const group = element.getAttribute('data-group');\n        let info, isNew, path, index;\n        if (key && group) {\n            // This is a new component.\n            info = this.getComponentInfo(key, group);\n            if (!info && type) {\n                info = this.getComponentInfo(type, group);\n            }\n            isNew = true;\n        }\n        else if (source.formioContainer) {\n            index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n            if (index !== -1) {\n                // Grab and remove the component from the source container.\n                info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                // Since splice returns an array of one object, we need to destructure it.\n                info = info[0];\n            }\n        }\n        // If we haven't found the component, stop.\n        if (!info) {\n            return;\n        }\n        // Show an error if siblings are disabled for a component and such a component already exists.\n        const compKey = (group === 'resource') ? `component-${key}` : key;\n        const draggableComponent = ((_a = this.groups[group]) === null || _a === void 0 ? void 0 : _a.components[compKey]) || {};\n        if (draggableComponent.disableSiblings) {\n            let isCompAlreadyExists = false;\n            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.type === draggableComponent.schema.type) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`);\n                return;\n            }\n        }\n        if (draggableComponent.uniqueComponent) {\n            let isCompAlreadyExists = false;\n            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.key === draggableComponent.schema.key) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);\n                return;\n            }\n        }\n        if (target !== source) {\n            // Ensure the key remains unique in its new container.\n            builder_1.default.uniquify(this.findNamespaceRoot(target.formioComponent), info);\n        }\n        const parent = target.formioComponent;\n        // Insert in the new container.\n        if (target.formioContainer) {\n            if (sibling) {\n                if (!sibling.getAttribute('data-noattach')) {\n                    index = lodash_1.default.findIndex(target.formioContainer, { key: lodash_1.default.get(sibling, 'formioComponent.component.key') });\n                    index = (index === -1) ? 0 : index;\n                }\n                else {\n                    index = sibling.getAttribute('data-position');\n                }\n                if (index !== -1) {\n                    target.formioContainer.splice(index, 0, info);\n                }\n            }\n            else {\n                target.formioContainer.push(info);\n            }\n            path = this.getComponentsPath(info, parent.component);\n            index = lodash_1.default.findIndex(lodash_1.default.get(parent.schema, path), { key: info.key });\n            if (index === -1) {\n                index = 0;\n            }\n        }\n        if (parent && parent.addChildComponent) {\n            parent.addChildComponent(info, element, target, source, sibling);\n        }\n        const componentInDataGrid = parent.type === 'datagrid';\n        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {\n            this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });\n        }\n        // Only rebuild the parts needing to be rebuilt.\n        let rebuild;\n        if (target !== source) {\n            if (source.formioContainer && source.contains(target)) {\n                rebuild = source.formioComponent.rebuild();\n            }\n            else if (target.contains(source)) {\n                rebuild = target.formioComponent.rebuild();\n            }\n            else {\n                if (source.formioContainer) {\n                    rebuild = source.formioComponent.rebuild();\n                }\n                rebuild = target.formioComponent.rebuild();\n            }\n        }\n        else {\n            // If they are the same, only rebuild one.\n            rebuild = target.formioComponent.rebuild();\n        }\n        if (!rebuild) {\n            rebuild = Promise.resolve();\n        }\n        return rebuild.then(() => {\n            this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);\n            if (!isNew || this.options.noNewEdit || info.noNewEdit) {\n                this.emit('change', this.form);\n            }\n        });\n    }\n    setForm(form) {\n        var _a;\n        if (!form.components) {\n            form.components = [];\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        this.keyboardActionsEnabled = lodash_1.default.get(this.options, 'keyboardBuilder', false) || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.keyboardBuilder);\n        const isShowSubmitButton = !this.options.noDefaultSubmitButton\n            && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));\n        // Ensure there is at least a submit button.\n        if (isShowSubmitButton) {\n            form.components.push({\n                type: 'button',\n                label: 'Submit',\n                key: 'submit',\n                size: 'md',\n                block: false,\n                action: 'submit',\n                disableOnInvalid: true,\n                theme: 'primary'\n            });\n        }\n        if (this.webform) {\n            const shouldRebuild = !this.webform.form.components ||\n                (form.components.length !== this.webform.form.components.length);\n            return this.webform.setForm(form, { keepAsReference: true }).then(() => {\n                if (this.refs.form) {\n                    this.builderHeight = this.refs.form.offsetHeight;\n                }\n                if (!shouldRebuild) {\n                    return this.form;\n                }\n                return this.rebuild().then(() => this.form);\n            });\n        }\n        return Promise.resolve(form);\n    }\n    populateCaptchaSettings(form) {\n        //populate isEnabled for captcha form settings\n        let isCaptchaEnabled = false;\n        if (this.form.components) {\n            (0, formUtils_1.eachComponent)(form.components, component => {\n                if (isCaptchaEnabled) {\n                    return;\n                }\n                if (component.type === 'captcha') {\n                    isCaptchaEnabled = true;\n                    return false;\n                }\n            });\n            if (isCaptchaEnabled) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', true);\n            }\n            else if (lodash_1.default.get(form, 'settings.captcha.isEnabled')) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', false);\n            }\n        }\n    }\n    removeComponent(component, parent, original, componentInstance) {\n        if (!parent) {\n            return;\n        }\n        let remove = true;\n        const removingComponentsGroup = !component.skipRemoveConfirm &&\n            ((Array.isArray(component.components) && component.components.length) ||\n                (Array.isArray(component.rows) && component.rows.length) ||\n                (Array.isArray(component.columns) && component.columns.length));\n        if (this.options.alwaysConfirmComponentRemoval || removingComponentsGroup) {\n            const message = removingComponentsGroup ? 'Removing this component will also remove all of its children. Are you sure you want to do this?'\n                : 'Are you sure you want to remove this component?';\n            remove = window.confirm(this.t(message));\n        }\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parent.formioContainer ? parent.formioContainer.indexOf(original) : 0;\n        if (remove && index !== -1) {\n            const path = this.getComponentsPath(component, parent.formioComponent.component);\n            if (parent.formioContainer) {\n                parent.formioContainer.splice(index, 1);\n            }\n            else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {\n                parent.formioComponent.removeChildComponent(component);\n            }\n            if (component.input && componentInstance && parent.formioComponent) {\n                const parentDefaultValue = lodash_1.default.get(parent.formioComponent, 'component.defaultValue', null);\n                if (Array.isArray(parentDefaultValue)) {\n                    parentDefaultValue.forEach(v => lodash_1.default.unset(v, componentInstance.key));\n                }\n                else if (typeof parentDefaultValue === 'object') {\n                    lodash_1.default.unset(parentDefaultValue, componentInstance.key);\n                }\n            }\n            const rebuild = parent.formioComponent.rebuild() || Promise.resolve();\n            rebuild.then(() => {\n                this.emit('removeComponent', component, parent.formioComponent.schema, path, index);\n                this.emit('change', this.form);\n            });\n        }\n        return remove;\n    }\n    replaceDoubleQuotes(data, fieldsToRemoveDoubleQuotes = []) {\n        if (data) {\n            fieldsToRemoveDoubleQuotes.forEach((key) => {\n                if (data[key]) {\n                    data[key] = data[key].replace(/\"/g, \"'\");\n                }\n            });\n            return data;\n        }\n    }\n    updateComponent(component, changed) {\n        const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') || lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');\n        // Update the preview.\n        if (this.preview) {\n            this.preview.form = {\n                components: [lodash_1.default.omit(Object.assign({}, component), [\n                        'hidden',\n                        'conditional',\n                        'calculateValue',\n                        'logic',\n                        'autofocus',\n                        'customConditional',\n                    ])],\n                config: this.options.formConfig || {},\n                sanitizeConfig,\n            };\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));\n            const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"preview\"]`);\n            if (previewElement) {\n                this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);\n                this.preview.attach(previewElement);\n            }\n        }\n        // Change the \"default value\" field to be reflective of this component.\n        const defaultValueComponent = (0, formUtils_1.getComponent)(this.editForm.components, 'defaultValue', true);\n        if (defaultValueComponent && component.type !== 'hidden') {\n            const defaultChanged = changed && ((changed.component && changed.component.key === 'defaultValue')\n                || (changed.instance && defaultValueComponent.hasComponent && defaultValueComponent.hasComponent(changed.instance)));\n            if (!defaultChanged) {\n                lodash_1.default.assign(defaultValueComponent.component, lodash_1.default.omit(Object.assign({}, component), [\n                    'key',\n                    'label',\n                    'labelPosition',\n                    'labelMargin',\n                    'labelWidth',\n                    'placeholder',\n                    'tooltip',\n                    'hidden',\n                    'autofocus',\n                    'validate',\n                    'disabled',\n                    'defaultValue',\n                    'customDefaultValue',\n                    'calculateValue',\n                    'conditional',\n                    'customConditional',\n                    'id'\n                ]));\n                const parentComponent = defaultValueComponent.parent;\n                let tabIndex = -1;\n                let index = -1;\n                parentComponent.tabs.some((tab, tIndex) => {\n                    tab.some((comp, compIndex) => {\n                        if (comp.id === defaultValueComponent.id) {\n                            tabIndex = tIndex;\n                            index = compIndex;\n                            return true;\n                        }\n                        return false;\n                    });\n                });\n                if (tabIndex !== -1 && index !== -1 && changed && !lodash_1.default.isNil(changed.value)) {\n                    const sibling = parentComponent.tabs[tabIndex][index + 1];\n                    parentComponent.removeComponent(defaultValueComponent);\n                    const newComp = parentComponent.addComponent(defaultValueComponent.component, defaultValueComponent.data, sibling);\n                    lodash_1.default.pull(newComp.validators, 'required');\n                    parentComponent.tabs[tabIndex].splice(index, 1, newComp);\n                    newComp.checkValidity = () => true;\n                    newComp.build(defaultValueComponent.element);\n                }\n            }\n            else {\n                let dataPath = changed.instance._data.key;\n                const path = (0, utils_1.getArrayFromComponentPath)(changed.instance.path);\n                path.shift();\n                if (path.length) {\n                    path.unshift(component.key);\n                    dataPath = (0, utils_1.getStringFromComponentPath)(path);\n                }\n                lodash_1.default.set(this.preview._data, dataPath, changed.value);\n                lodash_1.default.set(this.webform._data, dataPath, changed.value);\n            }\n        }\n        // Called when we update a component.\n        this.emit('updateComponent', component);\n    }\n    findRepeatablePaths() {\n        const repeatablePaths = [];\n        const keys = new Map();\n        (0, formUtils_1.eachComponent)(this.form.components, (comp, path) => {\n            if (!comp.key) {\n                return;\n            }\n            if (keys.has(comp.key)) {\n                if (keys.get(comp.key).includes(path)) {\n                    repeatablePaths.push(path);\n                }\n                else {\n                    keys.set(comp.key, [...keys.get(comp.key), path]);\n                }\n            }\n            else {\n                keys.set(comp.key, [path]);\n            }\n        }, true);\n        return repeatablePaths;\n    }\n    highlightInvalidComponents() {\n        const repeatablePaths = this.findRepeatablePaths();\n        let hasInvalidComponents = false;\n        this.webform.everyComponent((comp) => {\n            const path = comp.path;\n            if (repeatablePaths.includes(path)) {\n                comp.setCustomValidity(this.t('apiKey', { key: comp.key }));\n                hasInvalidComponents = true;\n            }\n        });\n        this.emit('builderFormValidityChange', hasInvalidComponents);\n    }\n    /**\n     * Called when a new component is saved.\n     * @param {Component} component - The component instance to save.\n     * @param {Component} parent - The parent component.\n     * @param {boolean} isNew - If this is a new component.\n     * @param {Component} original - The original component.\n     * @returns {boolean} - If the component was saved.\n     */\n    saveComponent(component, parent, isNew, original) {\n        this.editForm.detach();\n        const parentContainer = parent ? parent.formioContainer : this.container;\n        const parentComponent = parent ? parent.formioComponent : this;\n        this.dialog.close();\n        const path = parentContainer ? this.getComponentsPath(component, parentComponent.component) : '';\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parentContainer ? parentContainer.indexOf(original) : 0;\n        if (index !== -1) {\n            let submissionData = this.editForm.submission.data;\n            submissionData = submissionData.componentJson || submissionData;\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);\n            this.hook('beforeSaveComponentSettings', submissionData);\n            let comp = null;\n            parentComponent.getComponents().forEach((component) => {\n                if (component.component.key === original.key) {\n                    comp = component;\n                }\n            });\n            const originalComp = comp === null || comp === void 0 ? void 0 : comp.component;\n            const originalComponentSchema = comp === null || comp === void 0 ? void 0 : comp.schema;\n            const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n            if (parentContainer && !isParentSaveChildMethod) {\n                parentContainer[index] = submissionData;\n                if (comp) {\n                    comp.component = submissionData;\n                }\n            }\n            else if (isParentSaveChildMethod) {\n                parent.formioComponent.saveChildComponent(submissionData);\n            }\n            const rebuild = parentComponent.rebuild() || Promise.resolve();\n            return rebuild.then(() => {\n                const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);\n                this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);\n                this.emit('change', this.form);\n                this.highlightInvalidComponents();\n                if (this.isComponentCreated) {\n                    const component = parent.formioComponent.components[0];\n                    this.moveComponent(component);\n                    this.isComponentCreated = false;\n                }\n            });\n        }\n        this.highlightInvalidComponents();\n        return Promise.resolve();\n    }\n    emitSaveComponentEvent(schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema) {\n        this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);\n    }\n    attachEditComponentControls(component, parent, isNew, original, ComponentClass) {\n        const cancelButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"cancelButton\"]`);\n        cancelButtons.forEach((cancelButton) => {\n            this.editForm.addEventListener(cancelButton, 'click', (event) => {\n                event.preventDefault();\n                this.editForm.detach();\n                this.emit('cancelComponent', component);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const removeButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"removeButton\"]`);\n        removeButtons.forEach((removeButton) => {\n            this.editForm.addEventListener(removeButton, 'click', (event) => {\n                event.preventDefault();\n                // Since we are already removing the component, don't trigger another remove.\n                this.saved = true;\n                this.editForm.detach();\n                this.removeComponent(component, parent, original);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const saveButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"saveButton\"]`);\n        saveButtons.forEach((saveButton) => {\n            this.editForm.addEventListener(saveButton, 'click', (event) => {\n                event.preventDefault();\n                const errors = this.editForm.validate(this.editForm.data, {\n                    dirty: true\n                });\n                if (errors.length) {\n                    this.editForm.setPristine(false);\n                    this.editForm.showErrors(errors);\n                    return false;\n                }\n                this.saved = true;\n                this.saveComponent(component, parent, isNew, original);\n            });\n        });\n        const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"previewButton\"]`);\n        previewButtons.forEach((previewButton) => {\n            this.editForm.addEventListener(previewButton, 'click', (event) => {\n                event.preventDefault();\n                this.showPreview = !this.showPreview;\n                this.editForm.detach();\n                this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n                    componentInfo: ComponentClass.builderInfo,\n                    editForm: this.editForm.render(),\n                    preview: this.preview ? this.preview.render() : false,\n                    showPreview: this.showPreview,\n                    helplinks: this.helplinks,\n                }));\n                this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n                this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n            });\n        });\n    }\n    editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {\n        var _a, _b;\n        if (!component.key) {\n            return;\n        }\n        this.saved = false;\n        const componentCopy = (0, utils_1.fastCloneDeep)(component);\n        let ComponentClass = Components_1.default.components[componentCopy.type];\n        const isCustom = ComponentClass === undefined;\n        isJsonEdit = isJsonEdit || isCustom;\n        ComponentClass = isCustom ? Components_1.default.components.unknown : ComponentClass;\n        // Make sure we only have one dialog open at a time.\n        if (this.dialog) {\n            this.dialog.close();\n            this.highlightInvalidComponents();\n        }\n        // This is the render step.\n        const editFormOptions = lodash_1.default.clone(lodash_1.default.get(this, 'options.editForm', {}));\n        if (this.editForm) {\n            this.editForm.destroy();\n        }\n        // Allow editForm overrides per component.\n        const overrides = lodash_1.default.get(this.options, `editForm.${componentCopy.type}`, {});\n        // Pass along the form being edited.\n        editFormOptions.editForm = this.form;\n        editFormOptions.editComponent = component;\n        editFormOptions.flags = flags;\n        this.hook('editComponentParentInstance', editFormOptions, parent);\n        this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit'])), { language: this.options.language }), editFormOptions), { evalContext: Object.assign(Object.assign({}, ((editFormOptions === null || editFormOptions === void 0 ? void 0 : editFormOptions.evalContext) || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.evalContext) || {})), { buildingForm: this.form }) }));\n        this.hook('editFormProperties', parent);\n        this.editForm.form = (isJsonEdit && !isCustom) ? {\n            components: [\n                {\n                    type: 'textarea',\n                    as: 'json',\n                    editor: 'ace',\n                    weight: 10,\n                    input: true,\n                    key: 'componentJson',\n                    label: 'Component JSON',\n                    tooltip: 'Edit the JSON for this component.'\n                },\n                {\n                    type: 'checkbox',\n                    key: 'showFullSchema',\n                    label: 'Full Schema'\n                }\n            ]\n        } : ComponentClass.editForm(lodash_1.default.cloneDeep(overrides));\n        const instanceOptions = {\n            inFormBuilder: true,\n        };\n        this.hook('instanceOptionsPreview', instanceOptions);\n        const instance = new ComponentClass(componentCopy, instanceOptions);\n        const schema = this.hook('builderComponentSchema', component, instance);\n        this.editForm.submission = isJsonEdit ? {\n            data: {\n                componentJson: schema,\n                showFullSchema: this.options.showFullJsonSchema\n            },\n        } : {\n            data: instance.component,\n        };\n        if (this.preview) {\n            this.preview.destroy();\n        }\n        if (!ComponentClass.builderInfo.hasOwnProperty('preview') || ComponentClass.builderInfo.preview) {\n            this.preview = new Webform_1.default(lodash_1.default.omit(Object.assign(Object.assign({}, this.options), { preview: true }), [\n                'hooks',\n                'builder',\n                'events',\n                'attachMode',\n                'calculateValue'\n            ]));\n            this.hook('previewFormSettitngs', schema, isJsonEdit);\n        }\n        this.showPreview = (_b = ComponentClass.builderInfo.showPreview) !== null && _b !== void 0 ? _b : true;\n        this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });\n        this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n            componentInfo: ComponentClass.builderInfo,\n            editForm: this.editForm.render(),\n            preview: this.preview ? this.preview.render() : false,\n            showPreview: this.showPreview,\n            helplinks: this.helplinks\n        }));\n        this.dialog = this.createModal(this.componentEdit, lodash_1.default.get(this.options, 'dialogAttr', {}));\n        // This is the attach step.\n        this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n        this.hook('editFormWrapper');\n        this.updateComponent(componentCopy);\n        this.editForm.on('change', (event) => {\n            if (event.changed) {\n                if (event.changed.component && event.changed.component.key === 'showFullSchema') {\n                    const { value } = event.changed;\n                    this.editForm.submission = {\n                        data: {\n                            componentJson: value ? instance.component : component,\n                            showFullSchema: value\n                        },\n                    };\n                    return;\n                }\n                // See if this is a manually modified key. Treat custom component keys as manually modified\n                if ((event.changed.component && (event.changed.component.key === 'key')) || isJsonEdit) {\n                    componentCopy.keyModified = true;\n                }\n                let isComponentLabelChanged = false;\n                if (event.changed.instance) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.instance.path);\n                }\n                else if (event.changed.component) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.component.key);\n                }\n                if (isComponentLabelChanged) {\n                    // Ensure this component has a key.\n                    if (isNew) {\n                        if (!event.data.keyModified) {\n                            this.editForm.everyComponent(component => {\n                                if (component.key === 'key' && component.parent.component.key === 'tabs') {\n                                    component.setValue(this.updateComponentKey(event.data));\n                                    return false;\n                                }\n                            });\n                        }\n                        if (this.form) {\n                            let formComponents = this.findNamespaceRoot(parent.formioComponent);\n                            // excluding component which key uniqueness is to be checked to prevent the comparing of the same keys\n                            formComponents = formComponents.filter(comp => editFormOptions.editComponent.id !== comp.id);\n                            // Set a unique key for this component.\n                            builder_1.default.uniquify(formComponents, event.data);\n                        }\n                    }\n                }\n                // If the edit form has any nested form inside, we get a partial data (nested form's data) in the\n                // event.data property\n                let editFormData;\n                if (event.changed.instance && event.changed.instance.root && event.changed.instance.root.id !== this.editForm.id) {\n                    editFormData = this.editForm.data;\n                }\n                // Update the component.\n                this.updateComponent(event.data.componentJson || editFormData || event.data, event.changed);\n            }\n        });\n        this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n        const dialogClose = () => {\n            this.editForm.destroy(true);\n            if (this.preview) {\n                this.preview.destroy(true);\n                this.preview = null;\n            }\n            if (isNew && !this.saved) {\n                this.removeComponent(component, parent, original);\n                this.highlightInvalidComponents();\n            }\n            // Clean up.\n            this.removeEventListener(this.dialog, 'close', dialogClose);\n            this.dialog = null;\n        };\n        this.addEventListener(this.dialog, 'close', dialogClose);\n        // Called when we edit a component.\n        this.emit('editComponent', component);\n    }\n    updateComponentKey(data) {\n        return lodash_1.default.camelCase(data.title ||\n            data.label ||\n            data.placeholder ||\n            data.type).replace(/^[0-9]*/, '');\n    }\n    moveComponent(component) {\n        var _a;\n        if (this.selectedComponent) {\n            const prevSelected = this.selectedComponent;\n            (_a = prevSelected.element) === null || _a === void 0 ? void 0 : _a.classList.remove('builder-component-selected');\n            this.removeEventListener(document, 'keydown');\n        }\n        component.element.focus();\n        component.element.classList.add('builder-component-selected');\n        this.selectedComponent = component;\n        this.addEventListener(document, 'keydown', this.moveHandler.bind(this));\n    }\n    updateComponentPlacement(direction) {\n        const component = this.selectedComponent;\n        let index, info;\n        const step = direction ? -1 : 1;\n        if (component) {\n            const element = component.element;\n            const sibling = direction ? element.previousElementSibling : element.nextElementSibling;\n            const source = element.parentNode;\n            const containerLength = source.formioContainer.length;\n            if (containerLength && containerLength <= 1) {\n                return;\n            }\n            if (source.formioContainer) {\n                index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n                if (index !== -1) {\n                    info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                    info = info[0];\n                    source.removeChild(element);\n                }\n            }\n            const len = source.formioComponent.components.length;\n            index = (index === -1) ? 0 : index + step;\n            if (index === -1) {\n                source.formioContainer.push(info);\n                source.appendChild(element);\n            }\n            else if (index === len) {\n                const key = source.formioContainer[0].key;\n                index = lodash_1.default.findIndex(source.formioComponent.components, { key: key });\n                const firstElement = source.formioComponent.components[index].element;\n                source.formioContainer.splice(0, 0, info);\n                source.insertBefore(element, firstElement);\n            }\n            else if (index !== -1) {\n                source.formioContainer.splice(index, 0, info);\n                direction\n                    ? source.insertBefore(element, sibling)\n                    : source.insertBefore(element, sibling.nextElementSibling);\n            }\n            element.focus();\n        }\n    }\n    stopMoving(comp) {\n        const parent = comp.element.parentNode;\n        this.removeEventListener(document, 'keydown');\n        parent.formioComponent.rebuild();\n        this.selectedComponent = null;\n    }\n    addNewComponent(element) {\n        var _a;\n        const source = document.querySelector('.formio-builder-form');\n        const key = element.getAttribute('data-key');\n        const group = element.getAttribute('data-group');\n        const isNew = true;\n        let info;\n        if (key && group) {\n            info = this.getComponentInfo(key, group);\n        }\n        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {\n            builder_1.default.uniquify(this.findNamespaceRoot(source.formioComponent), info);\n            this.editComponent(info, source, isNew, null, null);\n        }\n        const firstComponent = (_a = source.formioComponent.components[0]) === null || _a === void 0 ? void 0 : _a.element;\n        if (firstComponent) {\n            source.formioContainer.splice(0, 0, info);\n        }\n        else {\n            source.formioContainer.push(info);\n        }\n        source.formioComponent.rebuild().then(() => {\n            this.isComponentCreated = true;\n        });\n    }\n    /**\n     * Creates copy of component schema and stores it under sessionStorage.\n     * @param {Component} component - The component to copy.\n     * @returns {void}\n     */\n    copyComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.addClass(this.refs.form, 'builder-paste-mode');\n        window.sessionStorage.setItem('formio.clipboard', JSON.stringify(component.schema));\n    }\n    /**\n     * Paste copied component after the current component.\n     * @param {Component} component - The component to paste after.\n     * @returns {void}\n     */\n    pasteComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.removeClass(this.refs.form, 'builder-paste-mode');\n        if (window.sessionStorage) {\n            const data = window.sessionStorage.getItem('formio.clipboard');\n            if (data) {\n                const schema = JSON.parse(data);\n                const parent = this.getParentElement(component.element);\n                if (parent) {\n                    builder_1.default.uniquify(this.findNamespaceRoot(parent.formioComponent), schema);\n                    let path = '';\n                    let index = 0;\n                    const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n                    if (parent.formioContainer && !isParentSaveChildMethod) {\n                        index = parent.formioContainer.indexOf(component.component);\n                        path = this.getComponentsPath(schema, parent.formioComponent.component);\n                        parent.formioContainer.splice(index + 1, 0, schema);\n                    }\n                    else if (isParentSaveChildMethod) {\n                        parent.formioComponent.saveChildComponent(schema, false);\n                    }\n                    parent.formioComponent.rebuild();\n                    this.emitSaveComponentEvent(schema, schema, parent.formioComponent.component, path, (index + 1), true, schema);\n                }\n                this.emit('change', this.form);\n            }\n        }\n    }\n    isParentSaveChildMethod(parentComp) {\n        return !!(parentComp && parentComp.saveChildComponent);\n    }\n    getParentElement(element) {\n        let container = element;\n        do {\n            container = container.parentNode;\n        } while (container && !container.formioComponent);\n        return container;\n    }\n    addBuilderComponentInfo(component) {\n        if (!component || !component.group || !this.groups[component.group]) {\n            return;\n        }\n        component = lodash_1.default.clone(component);\n        const groupInfo = this.groups[component.group];\n        if (!groupInfo.components.hasOwnProperty(component.key)) {\n            groupInfo.components[component.key] = component;\n        }\n        return component;\n    }\n    init() {\n        if (this.webform) {\n            this.webform.init();\n        }\n        return super.init();\n    }\n    clear() {\n        if (this.webform.initialized) {\n            this.webform.clear();\n        }\n    }\n    destroy(all = false) {\n        if (this.webform.initialized) {\n            this.webform.destroy(all);\n        }\n        super.destroy(all);\n    }\n    addBuilderGroup(name, group) {\n        if (!this.groups[name]) {\n            this.groups[name] = group;\n            this.groupOrder.push(name);\n            this.triggerRedraw();\n        }\n        else {\n            this.updateBuilderGroup(name, group);\n        }\n    }\n    updateBuilderGroup(name, group) {\n        if (this.groups[name]) {\n            this.groups[name] = group;\n            this.triggerRedraw();\n        }\n    }\n    generateKey(info) {\n        return info.key || lodash_1.default.camelCase(info.title ||\n            info.label ||\n            info.placeholder ||\n            info.type);\n    }\n}\nexports[\"default\"] = WebformBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/WebformBuilder.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 Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ./components/_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst builder_1 = __importDefault(__webpack_require__(/*! ./utils/builder */ \"./lib/cjs/utils/builder.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst dom_autoscroller_1 = __importDefault(__webpack_require__(/*! dom-autoscroller */ \"./node_modules/dom-autoscroller/dist/bundle.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ./templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\n__webpack_require__(/*! ./components/builder */ \"./lib/cjs/components/builder.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\nclass WebformBuilder extends Component_1.default {\n    // eslint-disable-next-line max-statements\n    constructor() {\n        let element, options;\n        if (arguments[0] instanceof HTMLElement || arguments[1]) {\n            element = arguments[0];\n            options = arguments[1];\n        }\n        else {\n            options = arguments[0];\n        }\n        // Reset skipInit in case PDFBuilder has set it.\n        options.skipInit = false;\n        options.display = options.display || 'form';\n        super(null, options);\n        this.moveHandler = (e) => {\n            if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {\n                e.stopPropagation();\n                e.preventDefault();\n            }\n            if (e.keyCode === 38) {\n                this.updateComponentPlacement(true);\n            }\n            if (e.keyCode === 40) {\n                this.updateComponentPlacement(false);\n            }\n            if (e.keyCode === 13) {\n                this.stopMoving(this.selectedComponent);\n            }\n        };\n        this.setElement(element);\n        this.dragulaLib = dragula_1.default;\n        this.builderHeight = 0;\n        this.schemas = {};\n        this.repeatablePaths = [];\n        this.sideBarScroll = lodash_1.default.get(this.options, 'sideBarScroll', true);\n        this.sideBarScrollOffset = lodash_1.default.get(this.options, 'sideBarScrollOffset', 0);\n        this.dragDropEnabled = true;\n        // Setup the builder options.\n        this.builder = lodash_1.default.defaultsDeep({}, this.options.builder, this.defaultGroups);\n        // Turn off if explicitely said to do so...\n        lodash_1.default.each(this.defaultGroups, (config, key) => {\n            if (config === false) {\n                this.builder[key] = false;\n            }\n        });\n        // Add the groups.////\n        this.groups = {};\n        this.groupOrder = [];\n        for (const group in this.builder) {\n            if (this.builder[group]) {\n                this.builder[group].key = group;\n                this.groups[group] = this.builder[group];\n                this.groups[group].components = this.groups[group].components || {};\n                this.groups[group].componentOrder = this.groups[group].componentOrder || [];\n                this.groups[group].subgroups = Object.keys(this.groups[group].groups || {}).map((groupKey) => {\n                    this.groups[group].groups[groupKey].componentOrder = Object.keys(this.groups[group].groups[groupKey].components).map((key) => key);\n                    return this.groups[group].groups[groupKey];\n                });\n                this.groupOrder.push(this.groups[group]);\n            }\n        }\n        this.groupOrder = this.groupOrder\n            .filter(group => group && !group.ignore)\n            .sort((a, b) => a.weight - b.weight)\n            .map(group => group.key);\n        for (const type in Components_1.default.components) {\n            const component = Components_1.default.components[type];\n            if (component.builderInfo && component.builderInfo.schema) {\n                this.schemas[type] = component.builderInfo.schema;\n                component.type = type;\n                const builderInfo = component.builderInfo;\n                builderInfo.key = component.type;\n                this.addBuilderComponentInfo(builderInfo);\n            }\n        }\n        // Filter out any extra components.\n        // Add the components in each group.\n        for (const group in this.groups) {\n            const info = this.groups[group];\n            for (const key in info.components) {\n                const compKey = group === 'resource' ? `component-${key}` : key;\n                let comp = info.components[compKey];\n                if (comp === true &&\n                    Components_1.default.components[key] &&\n                    Components_1.default.components[key].builderInfo) {\n                    comp = Components_1.default.components[key].builderInfo;\n                }\n                if (comp && comp.schema) {\n                    this.schemas[key] = comp.schema;\n                    info.components[compKey] = comp;\n                    info.components[compKey].key = key;\n                }\n                else {\n                    // Do not include this component in the components array.\n                    delete info.components[compKey];\n                }\n            }\n            // Order the components.\n            this.orderComponents(info);\n        }\n        this.options.hooks = this.options.hooks || {};\n        this.options.hooks.renderComponent = (html, { component, self }) => {\n            var _a, _b;\n            if (self.type === 'form' && !self.key) {\n                const template = this.hook('renderComponentFormTemplate', html.replace('formio-component-form', ''));\n                // The main webform shouldn't have this class as it adds extra styles.\n                return template;\n            }\n            if (this.options.disabled && this.options.disabled.includes(self.key) || self.parent.noDragDrop) {\n                return html;\n            }\n            return this.renderTemplate('builderComponent', {\n                html,\n                disableBuilderActions: (_a = self === null || self === void 0 ? void 0 : self.component) === null || _a === void 0 ? void 0 : _a.disableBuilderActions,\n                childComponent: component,\n                design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design\n            });\n        };\n        this.options.hooks.renderComponents = (html, { components, self }) => {\n            // if Datagrid and already has a component, don't make it droppable.\n            if (self.type === 'datagrid' && components.length > 0 || self.noDragDrop) {\n                return html;\n            }\n            if (!components ||\n                (!components.length && !components.nodrop) ||\n                (self.type === 'form' && components.length <= 1 && (components.length === 0 || components[0].type === 'button'))) {\n                html = this.renderTemplate('builderPlaceholder', {\n                    position: 0\n                }) + html;\n            }\n            return this.renderTemplate('builderComponents', {\n                key: self.key,\n                type: self.type,\n                html,\n            });\n        };\n        this.options.hooks.renderInput = (html, { self }) => {\n            if (self.type === 'hidden') {\n                return html + self.name;\n            }\n            return html;\n        };\n        this.options.hooks.renderLoading = (html, { self }) => {\n            if (self.type === 'form' && self.key) {\n                return self.name;\n            }\n            return html;\n        };\n        this.options.hooks.attachComponents = (element, components, container, component) => {\n            // Don't attach if no element was found or component doesn't participate in drag'n'drop.\n            if (!element) {\n                return;\n            }\n            if (component.noDragDrop) {\n                return element;\n            }\n            // Attach container and component to element for later reference.\n            const containerElement = element.querySelector(`[${this._referenceAttributeName}=\"${component.component.key}-container\"]`) || element;\n            containerElement.formioContainer = container;\n            containerElement.formioComponent = component;\n            // Add container to draggable list.\n            if (this.dragula && this.allowDrop(element)) {\n                this.dragula.containers.push(containerElement);\n            }\n            // If this is an existing datagrid element, don't make it draggable.\n            if ((component.type === 'datagrid' || component.type === 'datamap') && components.length > 0) {\n                return element;\n            }\n            // Since we added a wrapper, need to return the original element so that we can find the components inside it.\n            return element.children[0];\n        };\n        this.options.hooks.attachDatagrid = (element, component) => {\n            component.loadRefs(element, {\n                [`${component.key}-container`]: 'single',\n            });\n            const dataGridContainer = component.refs[`${component.key}-container`];\n            if (dataGridContainer) {\n                component.attachComponents(dataGridContainer.parentNode, [], component.component.components);\n            }\n            // Need to set up horizontal rearrangement of fields.\n        };\n        this.options.hooks.attachComponent = this.attachComponent.bind(this);\n        // Load resources tagged as 'builder'\n        const query = {\n            params: {\n                type: 'resource',\n                limit: 1000000,\n                select: '_id,title,name,components'\n            }\n        };\n        if (this.options && this.options.resourceTag) {\n            query.params.tags = [this.options.resourceTag];\n        }\n        else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {\n            query.params.tags = ['builder'];\n        }\n        const formio = new Formio_1.Formio(Formio_1.Formio.projectUrl);\n        const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;\n        formio.loadProject().then((project) => {\n            if (project && (lodash_1.default.get(project, 'settings.addConfigToForms', false) || lodash_1.default.get(project, 'addConfigToForms', false))) {\n                const config = project.config || {};\n                this.options.formConfig = config;\n                const pathToFormConfig = 'webform._form.config';\n                const webformConfig = lodash_1.default.get(this, pathToFormConfig);\n                if (this.webform && !webformConfig) {\n                    lodash_1.default.set(this, pathToFormConfig, config);\n                }\n            }\n        }).catch((err) => {\n            console.warn(`Could not load project settings: ${err.message || err}`);\n        });\n        if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {\n            const resourceOptions = this.options.builder && this.options.builder.resource;\n            formio.loadForms(query)\n                .then((resources) => {\n                if (resources.length) {\n                    this.builder.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    this.groups.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    if (!this.groupOrder.includes('resource')) {\n                        this.groupOrder.push('resource');\n                    }\n                    this.addExistingResourceFields(resources);\n                }\n            });\n        }\n        // Notify components if they need to modify their render.\n        this.options.attachMode = 'builder';\n        this.webform = this.webform || this.createForm(this.options);\n        this.pathComponentsMapping = {};\n        this.arrayDataComponentPaths = [];\n        this.nestedDataComponents = [];\n        this.arrayDataComponents = [];\n    }\n    allowDrop() {\n        return true;\n    }\n    addExistingResourceFields(resources) {\n        lodash_1.default.each(resources, (resource, index) => {\n            const resourceKey = `resource-${resource.name}`;\n            const subgroup = {\n                key: resourceKey,\n                title: resource.title,\n                components: [],\n                componentOrder: [],\n                default: index === 0,\n            };\n            (0, formUtils_1.eachComponent)(resource.components, (component) => {\n                if (component.type === 'button')\n                    return;\n                if (this.options &&\n                    this.options.resourceFilter &&\n                    (!component.tags || component.tags.indexOf(this.options.resourceFilter) === -1))\n                    return;\n                let componentName = component.label;\n                if (!componentName && component.key) {\n                    componentName = lodash_1.default.upperFirst(component.key);\n                }\n                subgroup.componentOrder.push(`component-${component.key}`);\n                subgroup.components[`component-${component.key}`] = lodash_1.default.merge((0, utils_1.fastCloneDeep)(Components_1.default.components[component.type]\n                    ? Components_1.default.components[component.type].builderInfo\n                    : Components_1.default.components['unknown'].builderInfo), {\n                    key: component.key,\n                    title: componentName,\n                    group: 'resource',\n                    subgroup: resourceKey,\n                }, {\n                    schema: Object.assign(Object.assign({}, component), { label: component.label, key: component.key, lockKey: true, source: (!this.options.noSource ? resource._id : undefined), isNew: true })\n                });\n            }, true);\n            this.groups.resource.subgroups.push(subgroup);\n        });\n        this.triggerRedraw();\n    }\n    attachTooltip(component, title) {\n        return (0, tippy_js_1.default)(component, {\n            allowHTML: true,\n            trigger: 'mouseenter focus',\n            placement: 'top',\n            delay: [200, 0],\n            zIndex: 10000,\n            content: title\n        });\n    }\n    attachComponent(element, component) {\n        if (component instanceof WebformBuilder) {\n            return;\n        }\n        // Add component to element for later reference.\n        element.formioComponent = component;\n        component.loadRefs(element, {\n            removeComponent: 'single',\n            editComponent: 'single',\n            moveComponent: 'single',\n            copyComponent: 'single',\n            pasteComponent: 'single',\n            editJson: 'single'\n        });\n        if (component.refs.copyComponent) {\n            this.attachTooltip(component.refs.copyComponent, this.t('Copy'));\n            component.addEventListener(component.refs.copyComponent, 'click', () => this.copyComponent(component));\n        }\n        if (component.refs.pasteComponent) {\n            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('Paste below'));\n            component.addEventListener(component.refs.pasteComponent, 'click', () => {\n                pasteToolTip.hide();\n                this.pasteComponent(component);\n            });\n        }\n        if (component.refs.moveComponent) {\n            this.attachTooltip(component.refs.moveComponent, this.t('Move'));\n            if (this.keyboardActionsEnabled) {\n                component.addEventListener(component.refs.moveComponent, 'click', () => {\n                    this.moveComponent(component);\n                });\n            }\n        }\n        const parent = this.getParentElement(element);\n        if (component.refs.editComponent) {\n            this.attachTooltip(component.refs.editComponent, this.t('Edit'));\n            component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, { inDataGrid: component.isInDataGrid }));\n        }\n        if (component.refs.editJson) {\n            this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));\n            component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component));\n        }\n        if (component.refs.removeComponent) {\n            this.attachTooltip(component.refs.removeComponent, this.t('Remove'));\n            component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component, component));\n        }\n        return element;\n    }\n    createForm(options) {\n        this.webform = new Webform_1.default(this.element, options);\n        if (this.element) {\n            this.loadRefs(this.element, {\n                form: 'single'\n            });\n            if (this.refs.form) {\n                this.webform.element = this.refs.form;\n            }\n        }\n        return this.webform;\n    }\n    /**\n     * Called when everything is ready.\n     * @returns {Promise} - Wait for webform to be ready.\n     */\n    get ready() {\n        return this.webform.ready;\n    }\n    get defaultGroups() {\n        return {\n            basic: {\n                title: 'Basic',\n                weight: 0,\n                default: true,\n            },\n            advanced: {\n                title: 'Advanced',\n                weight: 10\n            },\n            layout: {\n                title: 'Layout',\n                weight: 20\n            },\n            data: {\n                title: 'Data',\n                weight: 30\n            },\n            premium: {\n                title: 'Premium',\n                weight: 40\n            }\n        };\n    }\n    redraw() {\n        return Webform_1.default.prototype.redraw.call(this);\n    }\n    get form() {\n        return this.webform.form;\n    }\n    get schema() {\n        return this.webform.schema;\n    }\n    set form(value) {\n        this.setForm(value);\n    }\n    get container() {\n        return this.webform.form.components;\n    }\n    /**\n     * When a component sets its api key, we need to check if it is unique within its namespace. Find the namespace root\n     * so we can calculate this correctly.\n     * @param {import('@formio/core').Component} component - The component to find the namespace root for.\n     * @returns {import('@formio/core').Component[]} - The components root for this namespace.\n     */\n    findNamespaceRoot(component) {\n        const path = (0, utils_1.getArrayFromComponentPath)(component.path);\n        // First get the component with nested parents.\n        let comp = this.webform.getComponent(path);\n        comp = Array.isArray(comp) ? comp[0] : comp;\n        const namespaceKey = this.recurseNamespace(comp);\n        // If there is no key, it is the root form.\n        if (!namespaceKey || this.form.key === namespaceKey) {\n            return this.form.components;\n        }\n        const componentSchema = component.component;\n        // If the current component is the namespace, we don't need to find it again.\n        if (namespaceKey === component.key) {\n            return [...componentSchema.components, componentSchema];\n        }\n        // Get the namespace component so we have the original object.\n        const namespaceComponent = (0, formUtils_1.getComponent)(this.form.components, namespaceKey, true);\n        return namespaceComponent ? namespaceComponent.components : comp.components;\n    }\n    recurseNamespace(component) {\n        // If there is no parent, we are at the root level.\n        if (!component) {\n            return null;\n        }\n        // Some components are their own namespace.\n        if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(component.type) || component.tree || component.arrayTree) {\n            return component.key;\n        }\n        // Anything else, keep going up.\n        return this.recurseNamespace(component.parent);\n    }\n    render() {\n        return this.renderTemplate('builder', {\n            sidebar: this.renderTemplate('builderSidebar', {\n                scrollEnabled: this.sideBarScroll,\n                groupOrder: this.groupOrder,\n                groupId: `builder-sidebar-${this.id}`,\n                groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n                    group: this.groups[groupKey],\n                    groupKey,\n                    groupId: `builder-sidebar-${this.id}`,\n                    subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n                        group,\n                        groupKey: group.key,\n                        groupId: `group-container-${groupKey}`,\n                        subgroups: []\n                    })),\n                    keyboardActionsEnabled: this.keyboardActionsEnabled,\n                })),\n            }),\n            form: this.webform.render(),\n        });\n    }\n    attach(element) {\n        this.on('change', (form) => {\n            this.populateCaptchaSettings(form);\n            this.webform.setAlert(false);\n        });\n        return super.attach(element).then(() => {\n            this.loadRefs(element, {\n                form: 'single',\n                sidebar: 'single',\n                'sidebar-search': 'single',\n                'sidebar-groups': 'single',\n                'container': 'multiple',\n                'sidebar-anchor': 'multiple',\n                'sidebar-group': 'multiple',\n                'sidebar-container': 'multiple',\n                'sidebar-component': 'multiple',\n            });\n            if (this.sideBarScroll && Templates_1.default.current.handleBuilderSidebarScroll) {\n                Templates_1.default.current.handleBuilderSidebarScroll.call(this, this);\n            }\n            // Add the paste status in form\n            if (typeof window !== 'undefined' && window.sessionStorage) {\n                const data = window.sessionStorage.getItem('formio.clipboard');\n                if (data) {\n                    this.addClass(this.refs.form, 'builder-paste-mode');\n                }\n            }\n            if (!(0, utils_1.bootstrapVersion)(this.options)) {\n                const getAttribute = (anchor, attribute) => {\n                    let elem = anchor.getAttribute(`data-${attribute}`);\n                    if (!elem) {\n                        elem = anchor.getAttribute(`data-bs-${attribute}`);\n                    }\n                    return elem;\n                };\n                const hideShow = (group, show) => {\n                    if (show) {\n                        group.classList.add(['show']);\n                        group.style.display = 'inherit';\n                    }\n                    else {\n                        group.classList.remove(['show']);\n                        group.style.display = 'none';\n                    }\n                };\n                // Initialize\n                this.refs['sidebar-group'].forEach((group) => {\n                    hideShow(group, getAttribute(group, 'default') === 'true');\n                });\n                // Click event\n                this.refs['sidebar-anchor'].forEach((anchor, index) => {\n                    this.addEventListener(anchor, 'click', () => {\n                        const clickedParentId = getAttribute(anchor, 'parent').slice('#builder-sidebar-'.length);\n                        const clickedId = getAttribute(anchor, 'target').slice('#group-'.length);\n                        this.refs['sidebar-group'].forEach((group, groupIndex) => {\n                            const openByDefault = getAttribute(group, 'default') === 'true';\n                            const groupId = group.getAttribute('id').slice('group-'.length);\n                            const groupParent = getAttribute(group, 'parent').slice('#builder-sidebar-'.length);\n                            hideShow(group, ((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index));\n                        });\n                    }, true);\n                });\n            }\n            if (this.keyboardActionsEnabled) {\n                this.refs['sidebar-component'].forEach((component) => {\n                    this.addEventListener(component, 'keydown', (event) => {\n                        if (event.keyCode === 13) {\n                            this.addNewComponent(component);\n                        }\n                    });\n                });\n            }\n            this.addEventListener(this.refs['sidebar-search'], 'input', lodash_1.default.debounce((e) => {\n                const searchString = e.target.value;\n                this.searchFields(searchString);\n            }, 300));\n            if (this.dragDropEnabled) {\n                this.initDragula();\n            }\n            const drake = this.dragula;\n            if (this.refs.form) {\n                (0, dom_autoscroller_1.default)([window], {\n                    margin: 20,\n                    maxSpeed: 6,\n                    scrollWhenOutside: true,\n                    autoScroll: function () {\n                        return this.down && (drake === null || drake === void 0 ? void 0 : drake.dragging);\n                    }\n                });\n                return this.webform.attach(this.refs.form);\n            }\n        });\n    }\n    searchFields(searchString = '') {\n        const searchValue = searchString.toLowerCase();\n        const sidebar = this.refs['sidebar'];\n        const sidebarGroups = this.refs['sidebar-groups'];\n        if (!sidebar || !sidebarGroups) {\n            return;\n        }\n        const filterGroupBy = (group, searchValue = '') => {\n            const result = lodash_1.default.toPlainObject(group);\n            const { subgroups = [], components } = result;\n            const filteredComponents = [];\n            for (const key in components) {\n                const isMatchedToTitle = this.t(components[key].title).toLowerCase().match(searchValue);\n                const isMatchedToKey = components[key].key.toLowerCase().match(searchValue);\n                if (isMatchedToTitle || isMatchedToKey) {\n                    filteredComponents.push(components[key]);\n                }\n            }\n            this.orderComponents(result, filteredComponents);\n            if (searchValue) {\n                result.default = true;\n            }\n            if (result.componentOrder.length || subgroups.length) {\n                return result;\n            }\n            return null;\n        };\n        const filterGroupOrder = (groupOrder, searchValue) => {\n            const result = lodash_1.default.cloneDeep(groupOrder);\n            return result.filter(key => filterGroupBy(this.groups[key], searchValue));\n        };\n        const filterSubgroups = (groups, searchValue) => {\n            const result = lodash_1.default.clone(groups);\n            return result\n                .map(subgroup => filterGroupBy(subgroup, searchValue))\n                .filter(subgroup => !lodash_1.default.isNull(subgroup));\n        };\n        const toTemplate = groupKey => {\n            return {\n                group: filterGroupBy(this.groups[groupKey], searchValue),\n                groupKey,\n                groupId: sidebar.id || sidebarGroups.id,\n                subgroups: filterSubgroups(this.groups[groupKey].subgroups, searchValue)\n                    .map((group) => this.renderTemplate('builderSidebarGroup', {\n                    group,\n                    groupKey: group.key,\n                    groupId: `group-container-${groupKey}`,\n                    subgroups: []\n                })),\n            };\n        };\n        sidebarGroups.innerHTML = filterGroupOrder(this.groupOrder, searchValue)\n            .map(groupKey => this.renderTemplate('builderSidebarGroup', toTemplate(groupKey)))\n            .join('');\n        this.loadRefs(this.element, {\n            'sidebar-groups': 'single',\n            'sidebar-anchor': 'multiple',\n            'sidebar-group': 'multiple',\n            'sidebar-container': 'multiple',\n        });\n        this.updateDragAndDrop();\n        if (searchValue === '') {\n            this.triggerRedraw();\n        }\n    }\n    orderComponents(groupInfo, foundComponents) {\n        const components = foundComponents || groupInfo.components;\n        const isResource = groupInfo.key.indexOf('resource-') === 0;\n        if (components) {\n            groupInfo.componentOrder = Object.keys(components)\n                .map(key => components[key])\n                .filter(component => component && !component.ignore && !component.ignoreForForm)\n                .sort((a, b) => a.weight - b.weight)\n                .map(component => isResource ? `component-${component.key}` : component.key);\n        }\n    }\n    updateDragAndDrop() {\n        if (this.dragDropEnabled) {\n            this.initDragula();\n        }\n        if (this.refs.form) {\n            return this.webform.attach(this.refs.form);\n        }\n    }\n    initDragula() {\n        const options = this.options;\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        const containersArray = Array.prototype.slice.call(this.refs['sidebar-container']).filter(item => {\n            return item.id !== 'group-container-resource';\n        });\n        if (!dragula_1.default) {\n            return;\n        }\n        this.dragula = (0, dragula_1.default)(containersArray, {\n            moves(el) {\n                let moves = true;\n                const list = Array.from(el.classList).filter(item => item.indexOf('formio-component-') === 0);\n                list.forEach(item => {\n                    const key = item.slice('formio-component-'.length);\n                    if (options.disabled && options.disabled.includes(key)) {\n                        moves = false;\n                    }\n                });\n                if (el.classList.contains('no-drag')) {\n                    moves = false;\n                }\n                return moves;\n            },\n            copy(el) {\n                return el.classList.contains('drag-copy');\n            },\n            accepts(el, target) {\n                return !el.contains(target) && !target.classList.contains('no-drop');\n            }\n        }).on('drop', (element, target, source, sibling) => this.onDrop(element, target, source, sibling));\n    }\n    detach() {\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        this.dragula = null;\n        if (this.sideBarScroll && Templates_1.default.current.clearBuilderSidebarScroll) {\n            Templates_1.default.current.clearBuilderSidebarScroll.call(this, this);\n        }\n        super.detach();\n    }\n    getComponentInfo(key, group) {\n        let info;\n        // Need to check in first order as resource component key can be the same as from webform default components\n        if (group && group.slice(0, group.indexOf('-')) === 'resource') {\n            // This is an existing resource field.\n            const resourceGroups = this.groups.resource.subgroups;\n            const resourceGroup = lodash_1.default.find(resourceGroups, { key: group });\n            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n            }\n        }\n        // This is a new component\n        else if (this.schemas.hasOwnProperty(key)) {\n            info = (0, utils_1.fastCloneDeep)(this.schemas[key]);\n        }\n        else if (this.groups.hasOwnProperty(group)) {\n            const groupComponents = this.groups[group].components;\n            if (groupComponents.hasOwnProperty(key)) {\n                info = (0, utils_1.fastCloneDeep)(groupComponents[key].schema);\n            }\n        }\n        else if (group === 'searchFields') { //Search components go into this group\n            const resourceGroups = this.groups.resource.subgroups;\n            for (let ix = 0; ix < resourceGroups.length; ix++) {\n                const resourceGroup = resourceGroups[ix];\n                if (resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                    info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n                    break;\n                }\n            }\n        }\n        if (info) {\n            //if this is a custom component that was already assigned a key, don't stomp on it\n            if (!Components_1.default.components.hasOwnProperty(info.type) && info.key) {\n                return info;\n            }\n            info.key = this.generateKey(info);\n        }\n        return info;\n    }\n    getComponentsPath(component, parent) {\n        // Get path to the component in the parent component.\n        let path = 'components';\n        let columnIndex = 0;\n        let tableRowIndex = 0;\n        let tableColumnIndex = 0;\n        let tabIndex = 0;\n        switch (parent.type) {\n            case 'table':\n                tableRowIndex = lodash_1.default.findIndex(parent.rows, row => row.some(column => column.components.some(comp => comp.key === component.key)));\n                tableColumnIndex = lodash_1.default.findIndex(parent.rows[tableRowIndex], (column => column.components.some(comp => comp.key === component.key)));\n                path = `rows[${tableRowIndex}][${tableColumnIndex}].components`;\n                break;\n            case 'columns':\n                columnIndex = lodash_1.default.findIndex(parent.columns, column => column.components.some(comp => comp.key === component.key));\n                path = `columns[${columnIndex}].components`;\n                break;\n            case 'tabs':\n                tabIndex = lodash_1.default.findIndex(parent.components, tab => tab.components.some(comp => comp.key === component.key));\n                path = `components[${tabIndex}].components`;\n                break;\n        }\n        return path;\n    }\n    /* eslint-disable max-statements */\n    onDrop(element, target, source, sibling) {\n        var _a;\n        if (!target) {\n            return;\n        }\n        // If you try to drop within itself.\n        if (element.contains(target)) {\n            return;\n        }\n        const key = element.getAttribute('data-key');\n        const type = element.getAttribute('data-type');\n        const group = element.getAttribute('data-group');\n        let info, isNew, path, index;\n        if (key && group) {\n            // This is a new component.\n            info = this.getComponentInfo(key, group);\n            if (!info && type) {\n                info = this.getComponentInfo(type, group);\n            }\n            isNew = true;\n        }\n        else if (source.formioContainer) {\n            index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n            if (index !== -1) {\n                // Grab and remove the component from the source container.\n                info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                // Since splice returns an array of one object, we need to destructure it.\n                info = info[0];\n            }\n        }\n        // If we haven't found the component, stop.\n        if (!info) {\n            return;\n        }\n        // Show an error if siblings are disabled for a component and such a component already exists.\n        const compKey = (group === 'resource') ? `component-${key}` : key;\n        const draggableComponent = ((_a = this.groups[group]) === null || _a === void 0 ? void 0 : _a.components[compKey]) || {};\n        if (draggableComponent.disableSiblings) {\n            let isCompAlreadyExists = false;\n            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.type === draggableComponent.schema.type) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`);\n                return;\n            }\n        }\n        if (draggableComponent.uniqueComponent) {\n            let isCompAlreadyExists = false;\n            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.key === draggableComponent.schema.key) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);\n                return;\n            }\n        }\n        if (target !== source) {\n            // Ensure the key remains unique in its new container.\n            builder_1.default.uniquify(this.findNamespaceRoot(target.formioComponent), info);\n        }\n        const parent = target.formioComponent;\n        // Insert in the new container.\n        if (target.formioContainer) {\n            if (sibling) {\n                if (!sibling.getAttribute('data-noattach')) {\n                    index = lodash_1.default.findIndex(target.formioContainer, { key: lodash_1.default.get(sibling, 'formioComponent.component.key') });\n                    index = (index === -1) ? 0 : index;\n                }\n                else {\n                    index = sibling.getAttribute('data-position');\n                }\n                if (index !== -1) {\n                    target.formioContainer.splice(index, 0, info);\n                }\n            }\n            else {\n                target.formioContainer.push(info);\n            }\n            path = this.getComponentsPath(info, parent.component);\n            index = lodash_1.default.findIndex(lodash_1.default.get(parent.schema, path), { key: info.key });\n            if (index === -1) {\n                index = 0;\n            }\n        }\n        if (parent && parent.addChildComponent) {\n            parent.addChildComponent(info, element, target, source, sibling);\n        }\n        const componentInDataGrid = parent.type === 'datagrid';\n        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {\n            this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });\n        }\n        // Only rebuild the parts needing to be rebuilt.\n        let rebuild;\n        if (target !== source) {\n            if (source.formioContainer && source.contains(target)) {\n                rebuild = source.formioComponent.rebuild();\n            }\n            else if (target.contains(source)) {\n                rebuild = target.formioComponent.rebuild();\n            }\n            else {\n                if (source.formioContainer) {\n                    rebuild = source.formioComponent.rebuild();\n                }\n                rebuild = target.formioComponent.rebuild();\n            }\n        }\n        else {\n            // If they are the same, only rebuild one.\n            rebuild = target.formioComponent.rebuild();\n        }\n        if (!rebuild) {\n            rebuild = Promise.resolve();\n        }\n        return rebuild.then(() => {\n            this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);\n            if (!isNew || this.options.noNewEdit || info.noNewEdit) {\n                this.emit('change', this.form);\n            }\n        });\n    }\n    setForm(form) {\n        var _a;\n        if (!form.components) {\n            form.components = [];\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        let keyboardActionsEnabled = lodash_1.default.get(this.options, 'keyboardBuilder', false) || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.keyboardBuilder);\n        if (typeof keyboardActionsEnabled === 'string') {\n            keyboardActionsEnabled = keyboardActionsEnabled === 'true';\n        }\n        this.keyboardActionsEnabled = keyboardActionsEnabled;\n        const isShowSubmitButton = !this.options.noDefaultSubmitButton\n            && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));\n        // Ensure there is at least a submit button.\n        if (isShowSubmitButton) {\n            form.components.push({\n                type: 'button',\n                label: 'Submit',\n                key: 'submit',\n                size: 'md',\n                block: false,\n                action: 'submit',\n                disableOnInvalid: true,\n                theme: 'primary'\n            });\n        }\n        if (this.webform) {\n            const shouldRebuild = !this.webform.form.components ||\n                (form.components.length !== this.webform.form.components.length);\n            return this.webform.setForm(form, { keepAsReference: true }).then(() => {\n                if (this.refs.form) {\n                    this.builderHeight = this.refs.form.offsetHeight;\n                }\n                if (!shouldRebuild) {\n                    return this.form;\n                }\n                return this.rebuild().then(() => this.form);\n            });\n        }\n        return Promise.resolve(form);\n    }\n    populateCaptchaSettings(form) {\n        //populate isEnabled for captcha form settings\n        let isCaptchaEnabled = false;\n        if (this.form.components) {\n            (0, formUtils_1.eachComponent)(form.components, component => {\n                if (isCaptchaEnabled) {\n                    return;\n                }\n                if (component.type === 'captcha') {\n                    isCaptchaEnabled = true;\n                    return false;\n                }\n            });\n            if (isCaptchaEnabled) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', true);\n            }\n            else if (lodash_1.default.get(form, 'settings.captcha.isEnabled')) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', false);\n            }\n        }\n    }\n    removeComponent(component, parent, original, componentInstance) {\n        if (!parent) {\n            return;\n        }\n        let remove = true;\n        const removingComponentsGroup = !component.skipRemoveConfirm &&\n            ((Array.isArray(component.components) && component.components.length) ||\n                (Array.isArray(component.rows) && component.rows.length) ||\n                (Array.isArray(component.columns) && component.columns.length));\n        if (this.options.alwaysConfirmComponentRemoval || removingComponentsGroup) {\n            const message = removingComponentsGroup ? 'Removing this component will also remove all of its children. Are you sure you want to do this?'\n                : 'Are you sure you want to remove this component?';\n            remove = window.confirm(this.t(message));\n        }\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parent.formioContainer ? parent.formioContainer.indexOf(original) : 0;\n        if (remove && index !== -1) {\n            const path = this.getComponentsPath(component, parent.formioComponent.component);\n            if (parent.formioContainer) {\n                parent.formioContainer.splice(index, 1);\n            }\n            else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {\n                parent.formioComponent.removeChildComponent(component);\n            }\n            if (component.input && componentInstance && parent.formioComponent) {\n                const parentDefaultValue = lodash_1.default.get(parent.formioComponent, 'component.defaultValue', null);\n                if (Array.isArray(parentDefaultValue)) {\n                    parentDefaultValue.forEach(v => lodash_1.default.unset(v, componentInstance.key));\n                }\n                else if (typeof parentDefaultValue === 'object') {\n                    lodash_1.default.unset(parentDefaultValue, componentInstance.key);\n                }\n            }\n            const rebuild = parent.formioComponent.rebuild() || Promise.resolve();\n            rebuild.then(() => {\n                this.emit('removeComponent', component, parent.formioComponent.schema, path, index);\n                this.emit('change', this.form);\n            });\n        }\n        return remove;\n    }\n    replaceDoubleQuotes(data, fieldsToRemoveDoubleQuotes = []) {\n        if (data) {\n            fieldsToRemoveDoubleQuotes.forEach((key) => {\n                if (data[key]) {\n                    data[key] = data[key].replace(/\"/g, \"'\");\n                }\n            });\n            return data;\n        }\n    }\n    updateComponent(component, changed) {\n        const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') || lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');\n        // Update the preview.\n        if (this.preview) {\n            this.preview.form = {\n                components: [lodash_1.default.omit(Object.assign({}, component), [\n                        'hidden',\n                        'conditional',\n                        'calculateValue',\n                        'logic',\n                        'autofocus',\n                        'customConditional',\n                    ])],\n                config: this.options.formConfig || {},\n                sanitizeConfig,\n            };\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));\n            const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"preview\"]`);\n            if (previewElement) {\n                this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);\n                this.preview.attach(previewElement);\n            }\n        }\n        // Change the \"default value\" field to be reflective of this component.\n        const defaultValueComponent = (0, formUtils_1.getComponent)(this.editForm.components, 'defaultValue', true);\n        if (defaultValueComponent && component.type !== 'hidden') {\n            const defaultChanged = changed && ((changed.component && changed.component.key === 'defaultValue')\n                || (changed.instance && defaultValueComponent.hasComponent && defaultValueComponent.hasComponent(changed.instance)));\n            if (!defaultChanged) {\n                lodash_1.default.assign(defaultValueComponent.component, lodash_1.default.omit(Object.assign({}, component), [\n                    'key',\n                    'label',\n                    'labelPosition',\n                    'labelMargin',\n                    'labelWidth',\n                    'placeholder',\n                    'tooltip',\n                    'hidden',\n                    'autofocus',\n                    'validate',\n                    'disabled',\n                    'defaultValue',\n                    'customDefaultValue',\n                    'calculateValue',\n                    'conditional',\n                    'customConditional',\n                    'id',\n                    'fields.day.required',\n                    'fields.month.required',\n                    'fields.year.required',\n                ]));\n                const parentComponent = defaultValueComponent.parent;\n                let tabIndex = -1;\n                let index = -1;\n                parentComponent.tabs.some((tab, tIndex) => {\n                    tab.some((comp, compIndex) => {\n                        if (comp.id === defaultValueComponent.id) {\n                            tabIndex = tIndex;\n                            index = compIndex;\n                            return true;\n                        }\n                        return false;\n                    });\n                });\n                if (tabIndex !== -1 && index !== -1 && changed && !lodash_1.default.isNil(changed.value)) {\n                    const sibling = parentComponent.tabs[tabIndex][index + 1];\n                    parentComponent.removeComponent(defaultValueComponent);\n                    const newComp = parentComponent.addComponent(defaultValueComponent.component, defaultValueComponent.data, sibling);\n                    lodash_1.default.pull(newComp.validators, 'required');\n                    parentComponent.tabs[tabIndex].splice(index, 1, newComp);\n                    newComp.checkValidity = () => true;\n                    newComp.build(defaultValueComponent.element);\n                }\n            }\n            else {\n                let dataPath = changed.instance._data.key;\n                const path = (0, utils_1.getArrayFromComponentPath)(changed.instance.path);\n                path.shift();\n                if (path.length) {\n                    path.unshift(component.key);\n                    dataPath = (0, utils_1.getStringFromComponentPath)(path);\n                }\n                lodash_1.default.set(this.preview._data, dataPath, changed.value);\n                lodash_1.default.set(this.webform._data, dataPath, changed.value);\n            }\n        }\n        // Called when we update a component.\n        this.emit('updateComponent', component);\n    }\n    findRepeatablePaths() {\n        const repeatablePaths = [];\n        const keys = new Map();\n        (0, formUtils_1.eachComponent)(this.form.components, (comp, path) => {\n            if (!comp.key) {\n                return;\n            }\n            if (keys.has(comp.key)) {\n                if (keys.get(comp.key).includes(path)) {\n                    repeatablePaths.push(path);\n                }\n                else {\n                    keys.set(comp.key, [...keys.get(comp.key), path]);\n                }\n            }\n            else {\n                keys.set(comp.key, [path]);\n            }\n        }, true);\n        return repeatablePaths;\n    }\n    highlightInvalidComponents() {\n        const repeatablePaths = this.findRepeatablePaths();\n        let hasInvalidComponents = false;\n        this.webform.everyComponent((comp) => {\n            const path = comp.path;\n            if (repeatablePaths.includes(path)) {\n                comp.setCustomValidity(this.t('apiKey', { key: comp.key }));\n                hasInvalidComponents = true;\n            }\n        });\n        this.emit('builderFormValidityChange', hasInvalidComponents);\n    }\n    /**\n     * Called when a new component is saved.\n     * @param {Component} component - The component instance to save.\n     * @param {Component} parent - The parent component.\n     * @param {boolean} isNew - If this is a new component.\n     * @param {Component} original - The original component.\n     * @returns {boolean} - If the component was saved.\n     */\n    saveComponent(component, parent, isNew, original) {\n        this.editForm.detach();\n        const parentContainer = parent ? parent.formioContainer : this.container;\n        const parentComponent = parent ? parent.formioComponent : this;\n        this.dialog.close();\n        const path = parentContainer ? this.getComponentsPath(component, parentComponent.component) : '';\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parentContainer ? parentContainer.indexOf(original) : 0;\n        if (index !== -1) {\n            let submissionData = this.editForm.submission.data;\n            submissionData = submissionData.componentJson || submissionData;\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);\n            this.hook('beforeSaveComponentSettings', submissionData);\n            let comp = null;\n            parentComponent.getComponents().forEach((component) => {\n                if (component.component.key === original.key) {\n                    comp = component;\n                }\n            });\n            const originalComp = comp === null || comp === void 0 ? void 0 : comp.component;\n            const originalComponentSchema = comp === null || comp === void 0 ? void 0 : comp.schema;\n            const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n            if (parentContainer && !isParentSaveChildMethod) {\n                parentContainer[index] = submissionData;\n                if (comp) {\n                    comp.component = submissionData;\n                }\n            }\n            else if (isParentSaveChildMethod) {\n                parent.formioComponent.saveChildComponent(submissionData);\n            }\n            const rebuild = parentComponent.rebuild() || Promise.resolve();\n            return rebuild.then(() => {\n                const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);\n                this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);\n                this.emit('change', this.form);\n                this.highlightInvalidComponents();\n                if (this.isComponentCreated) {\n                    const component = parent.formioComponent.components[0];\n                    this.moveComponent(component);\n                    this.isComponentCreated = false;\n                }\n            });\n        }\n        this.highlightInvalidComponents();\n        return Promise.resolve();\n    }\n    emitSaveComponentEvent(schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema) {\n        this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);\n    }\n    attachEditComponentControls(component, parent, isNew, original, ComponentClass) {\n        const cancelButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"cancelButton\"]`);\n        cancelButtons.forEach((cancelButton) => {\n            this.editForm.addEventListener(cancelButton, 'click', (event) => {\n                event.preventDefault();\n                this.editForm.detach();\n                this.emit('cancelComponent', component);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const removeButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"removeButton\"]`);\n        removeButtons.forEach((removeButton) => {\n            this.editForm.addEventListener(removeButton, 'click', (event) => {\n                event.preventDefault();\n                // Since we are already removing the component, don't trigger another remove.\n                this.saved = true;\n                this.editForm.detach();\n                this.removeComponent(component, parent, original);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const saveButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"saveButton\"]`);\n        saveButtons.forEach((saveButton) => {\n            this.editForm.addEventListener(saveButton, 'click', (event) => {\n                event.preventDefault();\n                const errors = this.editForm.validate(this.editForm.data, {\n                    dirty: true\n                });\n                if (errors.length) {\n                    this.editForm.setPristine(false);\n                    this.editForm.showErrors(errors);\n                    return false;\n                }\n                this.saved = true;\n                this.saveComponent(component, parent, isNew, original);\n            });\n        });\n        const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"previewButton\"]`);\n        previewButtons.forEach((previewButton) => {\n            this.editForm.addEventListener(previewButton, 'click', (event) => {\n                var _a;\n                event.preventDefault();\n                this.showPreview = !this.showPreview;\n                this.editForm.detach();\n                this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n                    componentInfo: ComponentClass.builderInfo,\n                    editForm: this.editForm.render(),\n                    preview: this.preview ? this.preview.render() : false,\n                    showPreview: this.showPreview,\n                    helplinks: this.helplinks,\n                }));\n                this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n                this.updateComponent((_a = this.editForm.submission.data) !== null && _a !== void 0 ? _a : component);\n                this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n            });\n        });\n    }\n    editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {\n        var _a, _b;\n        if (!component.key) {\n            return;\n        }\n        this.saved = false;\n        const componentCopy = (0, utils_1.fastCloneDeep)(component);\n        let ComponentClass = Components_1.default.components[componentCopy.type];\n        const isCustom = ComponentClass === undefined;\n        isJsonEdit = isJsonEdit || isCustom;\n        ComponentClass = isCustom ? Components_1.default.components.unknown : ComponentClass;\n        // Make sure we only have one dialog open at a time.\n        if (this.dialog) {\n            this.dialog.close();\n            this.highlightInvalidComponents();\n        }\n        // This is the render step.\n        const editFormOptions = lodash_1.default.clone(lodash_1.default.get(this, 'options.editForm', {}));\n        if (this.editForm) {\n            this.editForm.destroy();\n        }\n        // Allow editForm overrides per component.\n        const overrides = lodash_1.default.get(this.options, `editForm.${componentCopy.type}`, {});\n        // Pass along the form being edited.\n        editFormOptions.editForm = this.form;\n        editFormOptions.editComponent = component;\n        editFormOptions.flags = flags;\n        this.hook('editComponentParentInstance', editFormOptions, parent);\n        this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit'])), { language: this.options.language }), editFormOptions), { evalContext: Object.assign(Object.assign({}, ((editFormOptions === null || editFormOptions === void 0 ? void 0 : editFormOptions.evalContext) || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.evalContext) || {})), { buildingForm: this.form }) }));\n        this.hook('editFormProperties', parent);\n        this.editForm.form = (isJsonEdit && !isCustom) ? {\n            components: [\n                {\n                    type: 'textarea',\n                    as: 'json',\n                    editor: 'ace',\n                    weight: 10,\n                    input: true,\n                    key: 'componentJson',\n                    label: 'Component JSON',\n                    tooltip: 'Edit the JSON for this component.'\n                },\n                {\n                    type: 'checkbox',\n                    key: 'showFullSchema',\n                    label: 'Full Schema'\n                }\n            ]\n        } : ComponentClass.editForm(lodash_1.default.cloneDeep(overrides));\n        const instanceOptions = {\n            inFormBuilder: true,\n        };\n        this.hook('instanceOptionsPreview', instanceOptions);\n        const instance = new ComponentClass(componentCopy, instanceOptions);\n        const schema = this.hook('builderComponentSchema', component, instance);\n        this.editForm.submission = isJsonEdit ? {\n            data: {\n                componentJson: schema,\n                showFullSchema: this.options.showFullJsonSchema\n            },\n        } : {\n            data: instance.component,\n        };\n        if (this.preview) {\n            this.preview.destroy();\n        }\n        if (!ComponentClass.builderInfo.hasOwnProperty('preview') || ComponentClass.builderInfo.preview) {\n            this.preview = new Webform_1.default(lodash_1.default.omit(Object.assign(Object.assign({}, this.options), { preview: true }), [\n                'hooks',\n                'builder',\n                'events',\n                'attachMode',\n                'calculateValue'\n            ]));\n            this.hook('previewFormSettitngs', schema, isJsonEdit);\n        }\n        this.showPreview = (_b = ComponentClass.builderInfo.showPreview) !== null && _b !== void 0 ? _b : true;\n        this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });\n        this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n            componentInfo: ComponentClass.builderInfo,\n            editForm: this.editForm.render(),\n            preview: this.preview ? this.preview.render() : false,\n            showPreview: this.showPreview,\n            helplinks: this.helplinks\n        }));\n        this.dialog = this.createModal(this.componentEdit, lodash_1.default.get(this.options, 'dialogAttr', {}));\n        // This is the attach step.\n        this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n        this.hook('editFormWrapper');\n        this.updateComponent(componentCopy);\n        this.editForm.on('change', (event) => {\n            if (event.changed) {\n                if (event.changed.component && event.changed.component.key === 'showFullSchema') {\n                    const { value } = event.changed;\n                    this.editForm.submission = {\n                        data: {\n                            componentJson: value ? instance.component : component,\n                            showFullSchema: value\n                        },\n                    };\n                    return;\n                }\n                // See if this is a manually modified key. Treat custom component keys as manually modified\n                if ((event.changed.component && (event.changed.component.key === 'key')) || isJsonEdit) {\n                    componentCopy.keyModified = true;\n                }\n                let isComponentLabelChanged = false;\n                if (event.changed.instance) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.instance.path);\n                }\n                else if (event.changed.component) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.component.key);\n                }\n                if (isComponentLabelChanged) {\n                    // Ensure this component has a key.\n                    if (isNew) {\n                        if (!event.data.keyModified) {\n                            this.editForm.everyComponent(component => {\n                                if (component.key === 'key' && component.parent.component.key === 'tabs') {\n                                    component.setValue(this.updateComponentKey(event.data));\n                                    return false;\n                                }\n                            });\n                        }\n                        if (this.form) {\n                            let formComponents = this.findNamespaceRoot(parent.formioComponent);\n                            // excluding component which key uniqueness is to be checked to prevent the comparing of the same keys\n                            formComponents = formComponents.filter(comp => editFormOptions.editComponent.id !== comp.id);\n                            // Set a unique key for this component.\n                            builder_1.default.uniquify(formComponents, event.data);\n                        }\n                    }\n                }\n                // If the edit form has any nested form inside, we get a partial data (nested form's data) in the\n                // event.data property\n                let editFormData;\n                if (event.changed.instance && event.changed.instance.root && event.changed.instance.root.id !== this.editForm.id) {\n                    editFormData = this.editForm.data;\n                }\n                // Update the component.\n                this.updateComponent(event.data.componentJson || editFormData || event.data, event.changed);\n            }\n        });\n        this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n        const dialogClose = () => {\n            this.editForm.destroy(true);\n            if (this.preview) {\n                this.preview.destroy(true);\n                this.preview = null;\n            }\n            if (isNew && !this.saved) {\n                this.removeComponent(component, parent, original);\n                this.highlightInvalidComponents();\n            }\n            // Clean up.\n            this.removeEventListener(this.dialog, 'close', dialogClose);\n            this.dialog = null;\n        };\n        this.addEventListener(this.dialog, 'close', dialogClose);\n        // Called when we edit a component.\n        this.emit('editComponent', component);\n    }\n    updateComponentKey(data) {\n        return lodash_1.default.camelCase(data.title ||\n            data.label ||\n            data.placeholder ||\n            data.type).replace(/^[0-9]*/, '');\n    }\n    moveComponent(component) {\n        var _a;\n        if (this.selectedComponent) {\n            const prevSelected = this.selectedComponent;\n            (_a = prevSelected.element) === null || _a === void 0 ? void 0 : _a.classList.remove('builder-component-selected');\n            this.removeEventListener(document, 'keydown');\n        }\n        component.element.focus();\n        component.element.classList.add('builder-component-selected');\n        this.selectedComponent = component;\n        this.addEventListener(document, 'keydown', this.moveHandler.bind(this));\n    }\n    updateComponentPlacement(direction) {\n        const component = this.selectedComponent;\n        let index, info;\n        const step = direction ? -1 : 1;\n        if (component) {\n            const element = component.element;\n            const sibling = direction ? element.previousElementSibling : element.nextElementSibling;\n            const source = element.parentNode;\n            const containerLength = source.formioContainer.length;\n            if (containerLength && containerLength <= 1) {\n                return;\n            }\n            if (source.formioContainer) {\n                index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n                if (index !== -1) {\n                    info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                    info = info[0];\n                    source.removeChild(element);\n                }\n            }\n            const len = source.formioComponent.components.length;\n            index = (index === -1) ? 0 : index + step;\n            if (index === -1) {\n                source.formioContainer.push(info);\n                source.appendChild(element);\n            }\n            else if (index === len) {\n                const key = source.formioContainer[0].key;\n                index = lodash_1.default.findIndex(source.formioComponent.components, { key: key });\n                const firstElement = source.formioComponent.components[index].element;\n                source.formioContainer.splice(0, 0, info);\n                source.insertBefore(element, firstElement);\n            }\n            else if (index !== -1) {\n                source.formioContainer.splice(index, 0, info);\n                direction\n                    ? source.insertBefore(element, sibling)\n                    : source.insertBefore(element, sibling.nextElementSibling);\n            }\n            element.focus();\n        }\n    }\n    stopMoving(comp) {\n        const parent = comp.element.parentNode;\n        this.removeEventListener(document, 'keydown');\n        parent.formioComponent.rebuild();\n        this.selectedComponent = null;\n    }\n    addNewComponent(element) {\n        var _a;\n        const source = document.querySelector('.formio-builder-form');\n        const key = element.getAttribute('data-key');\n        const group = element.getAttribute('data-group');\n        const isNew = true;\n        let info;\n        if (key && group) {\n            info = this.getComponentInfo(key, group);\n        }\n        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {\n            builder_1.default.uniquify(this.findNamespaceRoot(source.formioComponent), info);\n            this.editComponent(info, source, isNew, null, null);\n        }\n        const firstComponent = (_a = source.formioComponent.components[0]) === null || _a === void 0 ? void 0 : _a.element;\n        if (firstComponent) {\n            source.formioContainer.splice(0, 0, info);\n        }\n        else {\n            source.formioContainer.push(info);\n        }\n        source.formioComponent.rebuild().then(() => {\n            this.isComponentCreated = true;\n        });\n    }\n    /**\n     * Creates copy of component schema and stores it under sessionStorage.\n     * @param {Component} component - The component to copy.\n     * @returns {void}\n     */\n    copyComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.addClass(this.refs.form, 'builder-paste-mode');\n        window.sessionStorage.setItem('formio.clipboard', JSON.stringify(component.schema));\n    }\n    /**\n     * Paste copied component after the current component.\n     * @param {Component} component - The component to paste after.\n     * @returns {void}\n     */\n    pasteComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.removeClass(this.refs.form, 'builder-paste-mode');\n        if (window.sessionStorage) {\n            const data = window.sessionStorage.getItem('formio.clipboard');\n            if (data) {\n                const schema = JSON.parse(data);\n                const parent = this.getParentElement(component.element);\n                if (parent) {\n                    builder_1.default.uniquify(this.findNamespaceRoot(parent.formioComponent), schema);\n                    let path = '';\n                    let index = 0;\n                    const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n                    if (parent.formioContainer && !isParentSaveChildMethod) {\n                        index = parent.formioContainer.indexOf(component.component);\n                        path = this.getComponentsPath(schema, parent.formioComponent.component);\n                        parent.formioContainer.splice(index + 1, 0, schema);\n                    }\n                    else if (isParentSaveChildMethod) {\n                        parent.formioComponent.saveChildComponent(schema, false);\n                    }\n                    parent.formioComponent.rebuild();\n                    this.emitSaveComponentEvent(schema, schema, parent.formioComponent.component, path, (index + 1), true, schema);\n                }\n                this.emit('change', this.form);\n            }\n        }\n    }\n    isParentSaveChildMethod(parentComp) {\n        return !!(parentComp && parentComp.saveChildComponent);\n    }\n    getParentElement(element) {\n        let container = element;\n        do {\n            container = container.parentNode;\n        } while (container && !container.formioComponent);\n        return container;\n    }\n    addBuilderComponentInfo(component) {\n        if (!component || !component.group || !this.groups[component.group]) {\n            return;\n        }\n        component = lodash_1.default.clone(component);\n        const groupInfo = this.groups[component.group];\n        if (!groupInfo.components.hasOwnProperty(component.key)) {\n            groupInfo.components[component.key] = component;\n        }\n        return component;\n    }\n    init() {\n        if (this.webform) {\n            this.webform.init();\n        }\n        return super.init();\n    }\n    clear() {\n        if (this.webform.initialized) {\n            this.webform.clear();\n        }\n    }\n    destroy(all = false) {\n        if (this.webform.initialized) {\n            this.webform.destroy(all);\n        }\n        super.destroy(all);\n    }\n    addBuilderGroup(name, group) {\n        if (!this.groups[name]) {\n            this.groups[name] = group;\n            this.groupOrder.push(name);\n            this.triggerRedraw();\n        }\n        else {\n            this.updateBuilderGroup(name, group);\n        }\n    }\n    updateBuilderGroup(name, group) {\n        if (this.groups[name]) {\n            this.groups[name] = group;\n            this.triggerRedraw();\n        }\n    }\n    generateKey(info) {\n        return info.key || lodash_1.default.camelCase(info.title ||\n            info.label ||\n            info.placeholder ||\n            info.type);\n    }\n}\nexports[\"default\"] = WebformBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/WebformBuilder.js?");
 
 /***/ }),
 
@@ -5653,7 +5653,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        });\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 }, flags) {\n        const { dirty } = flags;\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.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?");
 
 /***/ }),
 
@@ -6027,7 +6027,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 NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ../Components */ \"./lib/cjs/components/Components.js\"));\nclass DataGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            label: 'Data Grid',\n            key: 'dataGrid',\n            type: 'datagrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            components: []\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Data Grid',\n            icon: 'th',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#data-grid',\n            showPreview: false,\n            weight: 30,\n            schema: DataGridComponent.schema()\n        };\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'datagrid';\n        this.tabIndex = 0;\n    }\n    init() {\n        this.components = this.components || [];\n        // Add new values based on minLength.\n        this.rows = [];\n        this.columns = [...this.component.components];\n        if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {\n            this.createRows(true);\n        }\n        if (this.allowReorder) {\n            this.dragulaReady = this.getDragula();\n        }\n        this.visibleColumns = {};\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkColumns();\n    }\n    get dataValue() {\n        const dataValue = super.dataValue;\n        if (!dataValue || !Array.isArray(dataValue)) {\n            return this.emptyValue;\n        }\n        return dataValue;\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultSchema() {\n        return DataGridComponent.schema();\n    }\n    get initEmpty() {\n        return this.component.initEmpty || this.component.noFirstRow;\n    }\n    get initRows() {\n        return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;\n    }\n    get emptyValue() {\n        return this.initEmpty ? [] : [{}];\n    }\n    get addAnotherPosition() {\n        return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');\n    }\n    get minLength() {\n        if (this.hasRowGroups()) {\n            return lodash_1.default.sum(this.getGroupSizes());\n        }\n        else {\n            return lodash_1.default.get(this.component, 'validate.minLength', 0);\n        }\n    }\n    get defaultValue() {\n        const isBuilderMode = this.builderMode;\n        const isEmptyInit = this.initEmpty;\n        // Ensure we have one and only one row in builder mode.\n        if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {\n            return isEmptyInit && !isBuilderMode ? [] : [{}];\n        }\n        const value = super.defaultValue;\n        let defaultValue;\n        if (Array.isArray(value)) {\n            defaultValue = value;\n        }\n        else if (value && (typeof value === 'object')) {\n            defaultValue = [value];\n        }\n        else {\n            defaultValue = this.emptyValue;\n        }\n        for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {\n            defaultValue.push({});\n        }\n        return defaultValue;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        lodash_1.default.each(this.refs[`${this.datagridKey}-addRow`], (button) => {\n            button.disabled = disabled;\n        });\n        lodash_1.default.each(this.refs[`${this.datagridKey}-removeRow`], (button) => {\n            button.disabled = disabled;\n        });\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    get datagridKey() {\n        return `datagrid-${this.key}`;\n    }\n    get allowReorder() {\n        return !this.options.readOnly && lodash_1.default.get(this.component, 'reorder', false);\n    }\n    get iteratableRows() {\n        return this.rows.map((row, index) => ({\n            components: row,\n            data: this.dataValue[index],\n        }));\n    }\n    isEmpty(value = this.dataValue) {\n        var _a;\n        const isEmpty = super.isEmpty(value);\n        if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {\n            return this.components.reduce((isEmpty, component) => {\n                return isEmpty && component.isEmpty();\n            }, true);\n        }\n        return isEmpty;\n    }\n    /**\n     * Split rows into chunks.\n     * @param {number[]} groups - array of numbers where each item is size of group\n     * @param {Array<T>} rows - rows collection\n     * @returns {Array<T[]>} - The chunked rows\n     */\n    getRowChunks(groups, rows) {\n        const [, chunks] = groups.reduce(([startIndex, acc], size) => {\n            const endIndex = startIndex + size;\n            return [endIndex, [...acc, [startIndex, endIndex]]];\n        }, [0, []]);\n        return chunks.map(range => lodash_1.default.slice(rows, ...range));\n    }\n    /**\n     * Create groups object.\n     * Each key in object represents index of first row in group.\n     * @returns {object} - The groups object.\n     */\n    getGroups() {\n        const groups = lodash_1.default.get(this.component, 'rowGroups', []);\n        const sizes = lodash_1.default.map(groups, 'numberOfRows').slice(0, -1);\n        const indexes = sizes.reduce((groupIndexes, size) => {\n            const last = groupIndexes[groupIndexes.length - 1];\n            return groupIndexes.concat(last + size);\n        }, [0]);\n        return groups.reduce((gidxs, group, idx) => {\n            return Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });\n        }, {});\n    }\n    /**\n     * Get group sizes.\n     * @returns {number[]} - The array of group sizes.\n     */\n    getGroupSizes() {\n        return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');\n    }\n    hasRowGroups() {\n        return lodash_1.default.get(this, 'component.enableRowGroups', false) && !this.builderMode;\n    }\n    totalRowsNumber(groups) {\n        return lodash_1.default.sum(lodash_1.default.map(groups, 'numberOfRows'));\n    }\n    setStaticValue(n) {\n        this.dataValue = lodash_1.default.range(n).map(() => ({}));\n    }\n    hasExtraColumn() {\n        return (this.hasRemoveButtons() || this.canAddColumn);\n    }\n    hasRemoveButtons() {\n        return !this.builderMode && !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    hasTopSubmit() {\n        return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);\n    }\n    hasBottomSubmit() {\n        return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);\n    }\n    get canAddColumn() {\n        return this.builderMode && !this.options.design;\n    }\n    render() {\n        const columns = this.getColumns();\n        let columnExtra = 0;\n        const hasRemoveButtons = this.hasRemoveButtons();\n        if (this.component.reorder) {\n            columnExtra++;\n        }\n        if (hasRemoveButtons) {\n            columnExtra++;\n        }\n        if (this.canAddColumn) {\n            columnExtra++;\n        }\n        const colWidth = Math.floor(12 / (columns.length + columnExtra));\n        return super.render(this.renderTemplate('datagrid', {\n            rows: this.getRows(),\n            columns: columns,\n            groups: this.hasRowGroups() ? this.getGroups() : [],\n            visibleColumns: this.visibleColumns,\n            hasToggle: lodash_1.default.get(this, 'component.groupToggle', false),\n            hasHeader: this.hasHeader(),\n            hasExtraColumn: this.hasExtraColumn(),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons,\n            hasTopSubmit: this.hasTopSubmit(),\n            hasBottomSubmit: this.hasBottomSubmit(),\n            hasGroups: this.hasRowGroups(),\n            numColumns: columns.length + (this.hasExtraColumn() ? 1 : 0),\n            datagridKey: this.datagridKey,\n            allowReorder: this.allowReorder,\n            builder: this.builderMode,\n            canAddColumn: this.canAddColumn,\n            tabIndex: this.tabIndex,\n            placeholder: this.renderTemplate('builderPlaceholder', {\n                position: this.componentComponents.length,\n            }),\n            colWidth: colWidth.toString()\n        }));\n    }\n    getRows() {\n        return this.rows.map(row => {\n            const components = {};\n            lodash_1.default.each(row, (col, key) => {\n                components[key] = col.render();\n            });\n            return components;\n        });\n    }\n    getColumns() {\n        return this.columns.filter((comp) => {\n            return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);\n        });\n    }\n    hasHeader() {\n        return this.component.components.reduce((hasHeader, col) => {\n            // If any of the components has a title and it isn't hidden, display the header.\n            return hasHeader || ((col.label || col.title) && !col.hideLabel);\n        }, false);\n    }\n    loadRefs(element, refs) {\n        super.loadRefs(element, refs);\n        if (refs['messageContainer'] === 'single') {\n            const container = lodash_1.default.last(element.querySelectorAll(`[${this._referenceAttributeName}=messageContainer]`));\n            this.refs['messageContainer'] = container || this.refs['messageContainer'];\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            [`${this.datagridKey}-row`]: 'multiple',\n            [`${this.datagridKey}-tbody`]: 'single',\n            [`${this.datagridKey}-addRow`]: 'multiple',\n            [`${this.datagridKey}-removeRow`]: 'multiple',\n            [`${this.datagridKey}-group-header`]: 'multiple',\n            [this.datagridKey]: 'multiple',\n            'messageContainer': 'single'\n        });\n        if (this.allowReorder) {\n            this.refs[`${this.datagridKey}-row`].forEach((row, index) => {\n                row.dragInfo = { index };\n            });\n            this.dragulaReady.then((dragula) => {\n                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous\n                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).\n                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must\n                // be saved in this.dragula and have its container contents reset if it exists\n                if (this.dragula && this.dragula.containers) {\n                    this.dragula.containers = [];\n                }\n                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {\n                    moves: (_draggedElement, _oldParent, clickedElement) => {\n                        const clickedElementKey = clickedElement.getAttribute('data-key');\n                        const oldParentKey = _oldParent.getAttribute('data-key');\n                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container\n                        if (oldParentKey === clickedElementKey) {\n                            return clickedElement.classList.contains('formio-drag-button');\n                        }\n                    }\n                }).on('drop', this.onReorder.bind(this))\n                    .on('cloned', this.onCloned.bind(this));\n            });\n        }\n        this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {\n            this.addEventListener(addButton, 'click', this.addRow.bind(this));\n        });\n        this.refs[`${this.datagridKey}-removeRow`].forEach((removeButton, index) => {\n            this.addEventListener(removeButton, 'click', this.removeRow.bind(this, index));\n        });\n        if (this.hasRowGroups()) {\n            this.refs.chunks = this.getRowChunks(this.getGroupSizes(), this.refs[`${this.datagridKey}-row`]);\n            this.refs[`${this.datagridKey}-group-header`].forEach((header, index) => {\n                this.addEventListener(header, 'click', () => this.toggleGroup(header, index));\n            });\n        }\n        const columns = this.getColumns();\n        const rowLength = columns.length;\n        this.rows.forEach((row, rowIndex) => {\n            let columnIndex = 0;\n            columns.forEach((col) => {\n                this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());\n                columnIndex++;\n            });\n        });\n        return super.attach(element);\n    }\n    getComponentsContainer() {\n        return this.component.components;\n    }\n    /**\n     * Reorder values in array based on the old and new position\n     * @param {any} valuesArr - An array of values.\n     * @param {number} oldPosition - The index of the value in array before reordering.\n     * @param {number} newPosition - The index of the value in array after reordering.\n     * @param {boolean|any} movedBelow - Whether or not the value is moved below.\n     * @returns {void}\n     */\n    reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {\n        if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {\n            return;\n        }\n        const draggedRowData = valuesArr[oldPosition];\n        //insert element at new position\n        valuesArr.splice(newPosition, 0, draggedRowData);\n        //remove element from old position (if was moved above, after insertion it's at +1 index)\n        valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n    }\n    onReorder(element, _target, _source, sibling) {\n        if (!element.dragInfo || (sibling && !sibling.dragInfo)) {\n            console.warn('There is no Drag Info available for either dragged or sibling element');\n            return;\n        }\n        const oldPosition = element.dragInfo.index;\n        //should drop at next sibling position; no next sibling means drop to last position\n        const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;\n        const movedBelow = newPosition > oldPosition;\n        const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);\n        this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);\n        //reorder select data\n        this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);\n        // When components are reordered we need to set the dataGrid and form pristine properties to false\n        this.root.pristine = false;\n        this.pristine = false;\n        //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)\n        this.setValue(dataValue, { isReordered: true });\n        this.rebuild();\n    }\n    onCloned(el, original) {\n        if (el && el.children && original && original.children) {\n            lodash_1.default.each(original.children, (child, index) => {\n                const styles = getComputedStyle(child, null);\n                if (styles.cssText !== '') {\n                    el.children[index].style.cssText = styles.cssText;\n                }\n                else {\n                    const cssText = Object.values(styles).reduce((css, propertyName) => {\n                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;\n                    }, '');\n                    el.children[index].style.cssText = cssText;\n                }\n            });\n        }\n    }\n    focusOnNewRowElement(row) {\n        Object.keys(row).find((key) => {\n            const element = row[key].element;\n            if (element) {\n                const focusableElements = (0, utils_1.getFocusableElements)(element);\n                if (focusableElements && focusableElements[0]) {\n                    focusableElements[0].focus();\n                    return true;\n                }\n            }\n            return false;\n        });\n    }\n    addRow() {\n        const index = this.rows.length;\n        // Handle length mismatch between rows and dataValue\n        if (this.dataValue.length === index) {\n            this.dataValue.push({});\n        }\n        let row;\n        const dataValue = this.dataValue;\n        const defaultValue = this.defaultValue;\n        if (this.initEmpty && defaultValue[index]) {\n            row = defaultValue[index];\n            dataValue[index] = row;\n        }\n        else {\n            row = dataValue[index];\n        }\n        this.rows[index] = this.createRowComponents(row, index);\n        this.emit('dataGridAddRow', {\n            component: this.component,\n            row\n        });\n        this.checkConditions();\n        this.triggerChange();\n        this.redraw().then(() => {\n            this.focusOnNewRowElement(this.rows[index]);\n        });\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            var _a;\n            if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {\n                const newName = `[${this.key}][${rowIndex}]`;\n                component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);\n            }\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n            component.path = Components_1.default.getComponentPath(component);\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.rows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(Object.values(row), rowIndex + index);\n        });\n    }\n    removeRow(index) {\n        const makeEmpty = index === 0 && this.rows.length === 1;\n        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };\n        this.splice(index, flags);\n        this.emit('dataGridDeleteRow', { index });\n        const [row] = this.rows.splice(index, 1);\n        this.removeRowComponents(row);\n        this.updateRowsComponents(index);\n        this.setValue(this.dataValue, flags);\n        this.redraw();\n    }\n    removeRowComponents(row) {\n        lodash_1.default.each(row, (component) => this.removeComponent(component));\n    }\n    getRowValues() {\n        return this.dataValue;\n    }\n    setRowComponentsData(rowIndex, rowData) {\n        lodash_1.default.each(this.rows[rowIndex], (component) => {\n            component.data = rowData;\n        });\n    }\n    createRows(init, rebuild) {\n        let added = false;\n        const rowValues = this.getRowValues();\n        // Create any missing rows.\n        rowValues.forEach((row, index) => {\n            if (!rebuild && this.rows[index]) {\n                this.setRowComponentsData(index, row);\n            }\n            else {\n                if (this.rows[index]) {\n                    this.removeRowComponents(this.rows[index]);\n                }\n                this.rows[index] = this.createRowComponents(row, index);\n                added = true;\n            }\n        });\n        // Delete any extra rows.\n        const removedRows = this.rows.splice(rowValues.length);\n        const removed = !!removedRows.length;\n        // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)\n        if (removed) {\n            removedRows.forEach(row => this.removeRowComponents(row));\n        }\n        if (!init && (added || removed)) {\n            this.redraw();\n        }\n        return added;\n    }\n    createRowComponents(row, rowIndex) {\n        const components = {};\n        this.tabIndex = 0;\n        this.component.components.map((col, colIndex) => {\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            let columnComponent;\n            if (this.builderMode) {\n                col.id = col.id + rowIndex;\n                columnComponent = col;\n            }\n            else {\n                columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });\n            }\n            const component = this.createComponent(columnComponent, options, row);\n            component.parentDisabled = !!this.disabled;\n            component.rowIndex = rowIndex;\n            component.inDataGrid = true;\n            if (columnComponent.tabindex &&\n                parseInt(columnComponent.tabindex) > this.tabIndex) {\n                this.tabIndex = parseInt(columnComponent.tabindex);\n            }\n            components[col.key] = component;\n        });\n        return components;\n    }\n    checkColumns(data, flags = {}) {\n        data = data || this.rootValue;\n        let show = false;\n        if (!this.rows || !this.rows.length) {\n            return { rebuild: false, show: false };\n        }\n        if (this.builderMode) {\n            return { rebuild: false, show: true };\n        }\n        const visibility = {};\n        let logicRebuild = false;\n        const dataValue = this.dataValue;\n        this.rows.forEach((row, rowIndex) => {\n            lodash_1.default.each(row, (col, key) => {\n                if (col && (typeof col.checkConditions === 'function')) {\n                    const firstRowCheck = visibility[key] === undefined;\n                    visibility[key] = !!visibility[key] ||\n                        (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');\n                    if (col.component.logic && firstRowCheck) {\n                        const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);\n                        const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {\n                            // Don't compare columns by their auto-generated ids.\n                            if (key === 'id') {\n                                return true;\n                            }\n                        });\n                        if (!equalColumns) {\n                            logicRebuild = true;\n                            this.columns[compIndex] = col.component;\n                        }\n                    }\n                }\n            });\n        });\n        const rebuild = !lodash_1.default.isEqual(visibility, this.visibleColumns) || logicRebuild;\n        lodash_1.default.each(visibility, (col) => {\n            show |= col;\n        });\n        this.visibleColumns = visibility;\n        return { rebuild, show };\n    }\n    checkComponentConditions(data, flags, row) {\n        const isVisible = this.visible;\n        // If table isn't visible, don't bother calculating columns.\n        if (!super.checkComponentConditions(data, flags, row)) {\n            return false;\n        }\n        const { rebuild, show } = this.checkColumns(data, flags);\n        // Check if a rebuild is needed or the visibility changes.\n        if (rebuild || !isVisible) {\n            this.createRows(false, rebuild);\n        }\n        // Return if this table should show.\n        return show;\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            this.dataValue = this.defaultValue;\n            this.createRows();\n            return false;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                this.createRows();\n                value = [{}];\n            }\n        }\n        // Make sure we always have at least one row.\n        // NOTE: Removing this will break \"Public Configurations\" in portal. ;)\n        if (value && !value.length && !this.initEmpty) {\n            value.push({});\n        }\n        const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);\n        const changed = this.hasChanged(value, this.dataValue);\n        this.dataValue = value;\n        if (this.initRows || isSettingSubmission ||\n            (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {\n            if (!this.createRows() && changed) {\n                this.redraw();\n            }\n        }\n        if (this.componentModal && isSettingSubmission) {\n            this.componentModal.setValue(value);\n        }\n        this.rows.forEach((row, rowIndex) => {\n            if (value.length <= rowIndex) {\n                return;\n            }\n            lodash_1.default.each(row, (col) => {\n                col.rowIndex = rowIndex;\n                this.setNestedValue(col, value[rowIndex], flags);\n            });\n        });\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n    restoreComponentsContext() {\n        this.rows.forEach((row, index) => lodash_1.default.forIn(row, (component) => component.data = this.dataValue[index]));\n    }\n    getComponent(path, fn) {\n        path = Array.isArray(path) ? path : [path];\n        const [key, ...remainingPath] = path;\n        let result = [];\n        if (lodash_1.default.isNumber(key) && remainingPath.length) {\n            const compKey = remainingPath.pop();\n            result = this.rows[key][compKey];\n            // If the component is inside a Layout Component, try to find it among all the row's components\n            if (!result) {\n                Object.entries(this.rows[key]).forEach(([, comp]) => {\n                    if ('getComponent' in comp) {\n                        const possibleResult = comp.getComponent([compKey], fn);\n                        if (possibleResult) {\n                            result = possibleResult;\n                        }\n                    }\n                });\n            }\n            if (result && lodash_1.default.isFunction(fn)) {\n                fn(result, this.getComponents());\n            }\n            if (remainingPath.length && 'getComponent' in result) {\n                return result.getComponent(remainingPath, fn);\n            }\n            return result;\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                let comp = component;\n                if (remainingPath.length > 0 && 'getComponent' in component) {\n                    comp = component.getComponent(remainingPath, fn);\n                }\n                else if (fn) {\n                    fn(component, components);\n                }\n                result = result.concat(comp);\n            }\n        });\n        return result.length > 0 ? result : null;\n    }\n    toggleGroup(element, index) {\n        element.classList.toggle('collapsed');\n        lodash_1.default.each(this.refs.chunks[index], row => {\n            row.classList.toggle('hidden');\n        });\n    }\n}\nexports[\"default\"] = DataGridComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datagrid/DataGrid.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ../Components */ \"./lib/cjs/components/Components.js\"));\nclass DataGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            label: 'Data Grid',\n            key: 'dataGrid',\n            type: 'datagrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            components: []\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Data Grid',\n            icon: 'th',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#data-grid',\n            showPreview: false,\n            weight: 30,\n            schema: DataGridComponent.schema()\n        };\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'datagrid';\n        this.tabIndex = 0;\n    }\n    init() {\n        this.components = this.components || [];\n        // Add new values based on minLength.\n        this.rows = [];\n        this.columns = [...this.component.components];\n        if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {\n            this.createRows(true);\n        }\n        if (this.allowReorder) {\n            this.dragulaReady = this.getDragula();\n        }\n        this.visibleColumns = {};\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkColumns();\n    }\n    get dataValue() {\n        const dataValue = super.dataValue;\n        if (!dataValue || !Array.isArray(dataValue)) {\n            return this.emptyValue;\n        }\n        return dataValue;\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultSchema() {\n        return DataGridComponent.schema();\n    }\n    get initEmpty() {\n        return this.component.initEmpty || this.component.noFirstRow;\n    }\n    get initRows() {\n        return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;\n    }\n    get emptyValue() {\n        return this.initEmpty ? [] : [{}];\n    }\n    get addAnotherPosition() {\n        return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');\n    }\n    get minLength() {\n        if (this.hasRowGroups()) {\n            return lodash_1.default.sum(this.getGroupSizes());\n        }\n        else {\n            return lodash_1.default.get(this.component, 'validate.minLength', 0);\n        }\n    }\n    get defaultValue() {\n        const isBuilderMode = this.builderMode;\n        const isEmptyInit = this.initEmpty;\n        // Ensure we have one and only one row in builder mode.\n        if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {\n            return isEmptyInit && !isBuilderMode ? [] : [{}];\n        }\n        const value = super.defaultValue;\n        let defaultValue;\n        if (Array.isArray(value)) {\n            defaultValue = value;\n        }\n        else if (value && (typeof value === 'object')) {\n            defaultValue = [value];\n        }\n        else {\n            defaultValue = this.emptyValue;\n        }\n        for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {\n            defaultValue.push({});\n        }\n        return defaultValue;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        lodash_1.default.each(this.refs[`${this.datagridKey}-addRow`], (button) => {\n            button.disabled = disabled;\n        });\n        lodash_1.default.each(this.refs[`${this.datagridKey}-removeRow`], (button) => {\n            button.disabled = disabled;\n        });\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    get datagridKey() {\n        return `datagrid-${this.key}`;\n    }\n    get allowReorder() {\n        return !this.options.readOnly && lodash_1.default.get(this.component, 'reorder', false);\n    }\n    get iteratableRows() {\n        return this.rows.map((row, index) => ({\n            components: row,\n            data: this.dataValue[index],\n        }));\n    }\n    isEmpty(value = this.dataValue) {\n        var _a;\n        const isEmpty = super.isEmpty(value);\n        if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {\n            return this.components.reduce((isEmpty, component) => {\n                return isEmpty && component.isEmpty();\n            }, true);\n        }\n        return isEmpty;\n    }\n    /**\n     * Split rows into chunks.\n     * @param {number[]} groups - array of numbers where each item is size of group\n     * @param {Array<T>} rows - rows collection\n     * @returns {Array<T[]>} - The chunked rows\n     */\n    getRowChunks(groups, rows) {\n        const [, chunks] = groups.reduce(([startIndex, acc], size) => {\n            const endIndex = startIndex + size;\n            return [endIndex, [...acc, [startIndex, endIndex]]];\n        }, [0, []]);\n        return chunks.map(range => lodash_1.default.slice(rows, ...range));\n    }\n    /**\n     * Create groups object.\n     * Each key in object represents index of first row in group.\n     * @returns {object} - The groups object.\n     */\n    getGroups() {\n        const groups = lodash_1.default.get(this.component, 'rowGroups', []);\n        const sizes = lodash_1.default.map(groups, 'numberOfRows').slice(0, -1);\n        const indexes = sizes.reduce((groupIndexes, size) => {\n            const last = groupIndexes[groupIndexes.length - 1];\n            return groupIndexes.concat(last + size);\n        }, [0]);\n        return groups.reduce((gidxs, group, idx) => {\n            return Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });\n        }, {});\n    }\n    /**\n     * Get group sizes.\n     * @returns {number[]} - The array of group sizes.\n     */\n    getGroupSizes() {\n        return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');\n    }\n    hasRowGroups() {\n        return lodash_1.default.get(this, 'component.enableRowGroups', false) && !this.builderMode;\n    }\n    totalRowsNumber(groups) {\n        return lodash_1.default.sum(lodash_1.default.map(groups, 'numberOfRows'));\n    }\n    setStaticValue(n) {\n        this.dataValue = lodash_1.default.range(n).map(() => ({}));\n    }\n    hasExtraColumn() {\n        return (this.hasRemoveButtons() || this.canAddColumn);\n    }\n    hasRemoveButtons() {\n        return !this.builderMode && !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    hasTopSubmit() {\n        return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);\n    }\n    hasBottomSubmit() {\n        return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);\n    }\n    get canAddColumn() {\n        return this.builderMode && !this.options.design;\n    }\n    render() {\n        const columns = this.getColumns();\n        let columnExtra = 0;\n        const hasRemoveButtons = this.hasRemoveButtons();\n        if (this.component.reorder) {\n            columnExtra++;\n        }\n        if (hasRemoveButtons) {\n            columnExtra++;\n        }\n        if (this.canAddColumn) {\n            columnExtra++;\n        }\n        const colWidth = Math.floor(12 / (columns.length + columnExtra));\n        return super.render(this.renderTemplate('datagrid', {\n            rows: this.getRows(),\n            columns: columns,\n            groups: this.hasRowGroups() ? this.getGroups() : [],\n            visibleColumns: this.visibleColumns,\n            hasToggle: lodash_1.default.get(this, 'component.groupToggle', false),\n            hasHeader: this.hasHeader(),\n            hasExtraColumn: this.hasExtraColumn(),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons,\n            hasTopSubmit: this.hasTopSubmit(),\n            hasBottomSubmit: this.hasBottomSubmit(),\n            hasGroups: this.hasRowGroups(),\n            numColumns: columns.length + (this.hasExtraColumn() ? 1 : 0),\n            datagridKey: this.datagridKey,\n            allowReorder: this.allowReorder,\n            builder: this.builderMode,\n            canAddColumn: this.canAddColumn,\n            tabIndex: this.tabIndex,\n            placeholder: this.renderTemplate('builderPlaceholder', {\n                position: this.componentComponents.length,\n            }),\n            colWidth: colWidth.toString()\n        }));\n    }\n    getRows() {\n        return this.rows.map(row => {\n            const components = {};\n            lodash_1.default.each(row, (col, key) => {\n                components[key] = col.render();\n            });\n            return components;\n        });\n    }\n    getColumns() {\n        return this.columns.filter((comp) => {\n            return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);\n        });\n    }\n    hasHeader() {\n        return this.component.components.reduce((hasHeader, col) => {\n            // If any of the components has a title and it isn't hidden, display the header.\n            return hasHeader || ((col.label || col.title) && !col.hideLabel);\n        }, false);\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            [`${this.datagridKey}-row`]: 'multiple',\n            [`${this.datagridKey}-tbody`]: 'single',\n            [`${this.datagridKey}-addRow`]: 'multiple',\n            [`${this.datagridKey}-removeRow`]: 'multiple',\n            [`${this.datagridKey}-group-header`]: 'multiple',\n            [this.datagridKey]: 'multiple',\n        });\n        if (this.allowReorder) {\n            this.refs[`${this.datagridKey}-row`].forEach((row, index) => {\n                row.dragInfo = { index };\n            });\n            this.dragulaReady.then((dragula) => {\n                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous\n                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).\n                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must\n                // be saved in this.dragula and have its container contents reset if it exists\n                if (this.dragula && this.dragula.containers) {\n                    this.dragula.containers = [];\n                }\n                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {\n                    moves: (_draggedElement, _oldParent, clickedElement) => {\n                        const clickedElementKey = clickedElement.getAttribute('data-key');\n                        const oldParentKey = _oldParent.getAttribute('data-key');\n                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container\n                        if (oldParentKey === clickedElementKey) {\n                            return clickedElement.classList.contains('formio-drag-button');\n                        }\n                    }\n                }).on('drop', this.onReorder.bind(this))\n                    .on('cloned', this.onCloned.bind(this));\n            });\n        }\n        this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {\n            this.addEventListener(addButton, 'click', this.addRow.bind(this));\n        });\n        this.refs[`${this.datagridKey}-removeRow`].forEach((removeButton, index) => {\n            this.addEventListener(removeButton, 'click', this.removeRow.bind(this, index));\n        });\n        if (this.hasRowGroups()) {\n            this.refs.chunks = this.getRowChunks(this.getGroupSizes(), this.refs[`${this.datagridKey}-row`]);\n            this.refs[`${this.datagridKey}-group-header`].forEach((header, index) => {\n                this.addEventListener(header, 'click', () => this.toggleGroup(header, index));\n            });\n        }\n        const columns = this.getColumns();\n        const rowLength = columns.length;\n        this.rows.forEach((row, rowIndex) => {\n            let columnIndex = 0;\n            columns.forEach((col) => {\n                this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());\n                columnIndex++;\n            });\n        });\n        return super.attach(element);\n    }\n    getComponentsContainer() {\n        return this.component.components;\n    }\n    /**\n     * Reorder values in array based on the old and new position\n     * @param {any} valuesArr - An array of values.\n     * @param {number} oldPosition - The index of the value in array before reordering.\n     * @param {number} newPosition - The index of the value in array after reordering.\n     * @param {boolean|any} movedBelow - Whether or not the value is moved below.\n     * @returns {void}\n     */\n    reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {\n        if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {\n            return;\n        }\n        const draggedRowData = valuesArr[oldPosition];\n        //insert element at new position\n        valuesArr.splice(newPosition, 0, draggedRowData);\n        //remove element from old position (if was moved above, after insertion it's at +1 index)\n        valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n    }\n    onReorder(element, _target, _source, sibling) {\n        if (!element.dragInfo || (sibling && !sibling.dragInfo)) {\n            console.warn('There is no Drag Info available for either dragged or sibling element');\n            return;\n        }\n        const oldPosition = element.dragInfo.index;\n        //should drop at next sibling position; no next sibling means drop to last position\n        const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;\n        const movedBelow = newPosition > oldPosition;\n        const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);\n        this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);\n        //reorder select data\n        this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);\n        // When components are reordered we need to set the dataGrid and form pristine properties to false\n        this.root.pristine = false;\n        this.pristine = false;\n        //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)\n        this.setValue(dataValue, { isReordered: true });\n        this.rebuild();\n    }\n    onCloned(el, original) {\n        if (el && el.children && original && original.children) {\n            lodash_1.default.each(original.children, (child, index) => {\n                const styles = getComputedStyle(child, null);\n                if (styles.cssText !== '') {\n                    el.children[index].style.cssText = styles.cssText;\n                }\n                else {\n                    const cssText = Object.values(styles).reduce((css, propertyName) => {\n                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;\n                    }, '');\n                    el.children[index].style.cssText = cssText;\n                }\n            });\n        }\n    }\n    focusOnNewRowElement(row) {\n        Object.keys(row).find((key) => {\n            const element = row[key].element;\n            if (element) {\n                const focusableElements = (0, utils_1.getFocusableElements)(element);\n                if (focusableElements && focusableElements[0]) {\n                    focusableElements[0].focus();\n                    return true;\n                }\n            }\n            return false;\n        });\n    }\n    addRow() {\n        const index = this.rows.length;\n        // Handle length mismatch between rows and dataValue\n        if (this.dataValue.length === index) {\n            this.dataValue.push({});\n        }\n        let row;\n        const dataValue = this.dataValue;\n        const defaultValue = this.defaultValue;\n        if (this.initEmpty && defaultValue[index]) {\n            row = defaultValue[index];\n            dataValue[index] = row;\n        }\n        else {\n            row = dataValue[index];\n        }\n        this.rows[index] = this.createRowComponents(row, index);\n        this.emit('dataGridAddRow', {\n            component: this.component,\n            row\n        });\n        this.checkConditions();\n        this.triggerChange();\n        this.redraw().then(() => {\n            this.focusOnNewRowElement(this.rows[index]);\n        });\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            var _a;\n            if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {\n                const newName = `[${this.key}][${rowIndex}]`;\n                component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);\n            }\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n            component.path = Components_1.default.getComponentPath(component);\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.rows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(Object.values(row), rowIndex + index);\n        });\n    }\n    removeRow(index) {\n        const makeEmpty = index === 0 && this.rows.length === 1;\n        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };\n        this.splice(index, flags);\n        this.emit('dataGridDeleteRow', { index });\n        const [row] = this.rows.splice(index, 1);\n        this.removeRowComponents(row);\n        this.updateRowsComponents(index);\n        this.setValue(this.dataValue, flags);\n        this.redraw();\n    }\n    removeRowComponents(row) {\n        lodash_1.default.each(row, (component) => this.removeComponent(component));\n    }\n    getRowValues() {\n        return this.dataValue;\n    }\n    setRowComponentsData(rowIndex, rowData) {\n        lodash_1.default.each(this.rows[rowIndex], (component) => {\n            component.data = rowData;\n        });\n    }\n    createRows(init, rebuild) {\n        let added = false;\n        const rowValues = this.getRowValues();\n        // Create any missing rows.\n        rowValues.forEach((row, index) => {\n            if (!rebuild && this.rows[index]) {\n                this.setRowComponentsData(index, row);\n            }\n            else {\n                if (this.rows[index]) {\n                    this.removeRowComponents(this.rows[index]);\n                }\n                this.rows[index] = this.createRowComponents(row, index);\n                added = true;\n            }\n        });\n        // Delete any extra rows.\n        const removedRows = this.rows.splice(rowValues.length);\n        const removed = !!removedRows.length;\n        // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)\n        if (removed) {\n            removedRows.forEach(row => this.removeRowComponents(row));\n        }\n        if (!init && (added || removed)) {\n            this.redraw();\n        }\n        return added;\n    }\n    createRowComponents(row, rowIndex) {\n        const components = {};\n        this.tabIndex = 0;\n        this.component.components.map((col, colIndex) => {\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            let columnComponent;\n            if (this.builderMode) {\n                col.id = col.id + rowIndex;\n                columnComponent = col;\n            }\n            else {\n                columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });\n            }\n            const component = this.createComponent(columnComponent, options, row);\n            component.parentDisabled = !!this.disabled;\n            component.rowIndex = rowIndex;\n            component.inDataGrid = true;\n            if (columnComponent.tabindex &&\n                parseInt(columnComponent.tabindex) > this.tabIndex) {\n                this.tabIndex = parseInt(columnComponent.tabindex);\n            }\n            components[col.key] = component;\n        });\n        return components;\n    }\n    checkColumns(data, flags = {}) {\n        data = data || this.rootValue;\n        let show = false;\n        if (!this.rows || !this.rows.length) {\n            return { rebuild: false, show: false };\n        }\n        if (this.builderMode) {\n            return { rebuild: false, show: true };\n        }\n        const visibility = {};\n        let logicRebuild = false;\n        const dataValue = this.dataValue;\n        this.rows.forEach((row, rowIndex) => {\n            lodash_1.default.each(row, (col, key) => {\n                if (col && (typeof col.checkConditions === 'function')) {\n                    const firstRowCheck = visibility[key] === undefined;\n                    visibility[key] = !!visibility[key] ||\n                        (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');\n                    if (col.component.logic && firstRowCheck) {\n                        const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);\n                        const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {\n                            // Don't compare columns by their auto-generated ids.\n                            if (key === 'id') {\n                                return true;\n                            }\n                        });\n                        if (!equalColumns) {\n                            logicRebuild = true;\n                            this.columns[compIndex] = col.component;\n                        }\n                    }\n                }\n            });\n        });\n        const rebuild = !lodash_1.default.isEqual(visibility, this.visibleColumns) || logicRebuild;\n        lodash_1.default.each(visibility, (col) => {\n            show |= col;\n        });\n        this.visibleColumns = visibility;\n        return { rebuild, show };\n    }\n    checkComponentConditions(data, flags, row) {\n        const isVisible = this.visible;\n        // If table isn't visible, don't bother calculating columns.\n        if (!super.checkComponentConditions(data, flags, row)) {\n            return false;\n        }\n        const { rebuild, show } = this.checkColumns(data, flags);\n        // Check if a rebuild is needed or the visibility changes.\n        if (rebuild || !isVisible) {\n            this.createRows(false, rebuild);\n        }\n        // Return if this table should show.\n        return show;\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            this.dataValue = this.defaultValue;\n            this.createRows();\n            return false;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                this.createRows();\n                value = [{}];\n            }\n        }\n        // Make sure we always have at least one row.\n        // NOTE: Removing this will break \"Public Configurations\" in portal. ;)\n        if (value && !value.length && !this.initEmpty) {\n            value.push({});\n        }\n        const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);\n        const changed = this.hasChanged(value, this.dataValue);\n        this.dataValue = value;\n        if (this.initRows || isSettingSubmission ||\n            (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {\n            if (!this.createRows() && changed) {\n                this.redraw();\n            }\n        }\n        if (this.componentModal && isSettingSubmission) {\n            this.componentModal.setValue(value);\n        }\n        this.rows.forEach((row, rowIndex) => {\n            if (value.length <= rowIndex) {\n                return;\n            }\n            lodash_1.default.each(row, (col) => {\n                col.rowIndex = rowIndex;\n                this.setNestedValue(col, value[rowIndex], flags);\n            });\n        });\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n    restoreComponentsContext() {\n        this.rows.forEach((row, index) => lodash_1.default.forIn(row, (component) => component.data = this.dataValue[index]));\n    }\n    getComponent(path, fn) {\n        path = Array.isArray(path) ? path : [path];\n        const [key, ...remainingPath] = path;\n        let result = [];\n        if (lodash_1.default.isNumber(key) && remainingPath.length) {\n            const compKey = remainingPath.pop();\n            result = this.rows[key][compKey];\n            // If the component is inside a Layout Component, try to find it among all the row's components\n            if (!result) {\n                Object.entries(this.rows[key]).forEach(([, comp]) => {\n                    if ('getComponent' in comp) {\n                        const possibleResult = comp.getComponent([compKey], fn);\n                        if (possibleResult) {\n                            result = possibleResult;\n                        }\n                    }\n                });\n            }\n            if (result && lodash_1.default.isFunction(fn)) {\n                fn(result, this.getComponents());\n            }\n            if (remainingPath.length && 'getComponent' in result) {\n                return result.getComponent(remainingPath, fn);\n            }\n            return result;\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                let comp = component;\n                if (remainingPath.length > 0 && 'getComponent' in component) {\n                    comp = component.getComponent(remainingPath, fn);\n                }\n                else if (fn) {\n                    fn(component, components);\n                }\n                result = result.concat(comp);\n            }\n        });\n        return result.length > 0 ? result : null;\n    }\n    toggleGroup(element, index) {\n        element.classList.toggle('collapsed');\n        lodash_1.default.each(this.refs.chunks[index], row => {\n            row.classList.toggle('hidden');\n        });\n    }\n}\nexports[\"default\"] = DataGridComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datagrid/DataGrid.js?");
 
 /***/ }),
 
@@ -6082,7 +6082,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 Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst DataGrid_1 = __importDefault(__webpack_require__(/*! ../datagrid/DataGrid */ \"./lib/cjs/components/datagrid/DataGrid.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ../Components */ \"./lib/cjs/components/Components.js\"));\nclass DataMapComponent extends DataGrid_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Data Map',\n            key: 'dataMap',\n            type: 'datamap',\n            clearOnHide: true,\n            addAnother: 'Add Another',\n            disableAddingRemovingRows: false,\n            keyBeforeValue: true,\n            valueComponent: {\n                type: 'textfield',\n                key: 'value',\n                label: 'Value',\n                input: true\n            },\n            input: true,\n            validate: {\n                maxLength: 0,\n                minLength: 0\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Data Map',\n            icon: 'th-list',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#data-map',\n            showPreview: false,\n            weight: 20,\n            schema: DataMapComponent.schema()\n        };\n    }\n    get schema() {\n        const schema = super.schema;\n        if (this.components && (this.components.length > 0)) {\n            schema.valueComponent = this.components[this.components.length - 1].schema;\n        }\n        return lodash_1.default.omit(schema, 'components');\n    }\n    static savedValueTypes(schema) {\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'datamap';\n    }\n    init() {\n        this.components = [];\n        this.rows = [];\n        this.createRows();\n        this.visibleColumns = {\n            key: true,\n            [this.valueKey]: true\n        };\n        this.component.valueComponent.hideLabel = true;\n    }\n    get defaultSchema() {\n        return DataMapComponent.schema();\n    }\n    get emptyValue() {\n        return {};\n    }\n    get dataValue() {\n        if (!this.key ||\n            (!this.visible && this.component.clearOnHide)) {\n            return this.emptyValue;\n        }\n        if (!this.hasValue() && this.shouldAddDefaultValue) {\n            this.dataValue = this.emptyValue;\n        }\n        return lodash_1.default.get(this.data, this.key);\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        if (Array.isArray(value)) {\n            return value[0];\n        }\n        return this.emptyValue;\n    }\n    get keySchema() {\n        return {\n            type: 'textfield',\n            input: true,\n            hideLabel: true,\n            label: this.component.keyLabel || 'Key',\n            key: '__key',\n            disableBuilderActions: true,\n        };\n    }\n    get valueKey() {\n        return this.component.valueComponent.key;\n    }\n    getRowValues() {\n        const dataValue = this.dataValue;\n        if (this.builderMode) {\n            return [dataValue];\n        }\n        if (lodash_1.default.isEmpty(dataValue)) {\n            return [];\n        }\n        return Object.keys(dataValue).map(() => dataValue);\n    }\n    getComponentsContainer() {\n        if (this.builderMode) {\n            return this.getComponents().map(comp => comp.component);\n        }\n        return super.getComponentsContainer();\n    }\n    get iteratableRows() {\n        return this.rows.map((row) => {\n            return Object.keys(row).map(key => ({\n                components: row[key],\n                data: row[key].dataValue,\n            }));\n        });\n    }\n    componentContext(component) {\n        return this.iteratableRows[component.row].find(comp => comp.components.key === component.key).data;\n    }\n    hasHeader() {\n        return true;\n    }\n    hasRemoveButtons() {\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode;\n    }\n    getColumns() {\n        const keySchema = Object.assign({}, this.keySchema);\n        const valueSchema = Object.assign({}, this.component.valueComponent);\n        keySchema.hideLabel = false;\n        valueSchema.hideLabel = false;\n        return this.component.keyBeforeValue ?\n            [keySchema, valueSchema] :\n            [valueSchema, keySchema];\n    }\n    getRowKey(rowIndex) {\n        const keys = Object.keys(this.dataValue);\n        if (!keys[rowIndex]) {\n            keys[rowIndex] = (0, utils_1.uniqueKey)(this.dataValue, this.defaultRowKey);\n        }\n        return keys[rowIndex];\n    }\n    get defaultRowKey() {\n        return 'key';\n    }\n    setRowComponentsData(rowIndex, rowData) {\n        lodash_1.default.each(this.rows[rowIndex], (component) => {\n            if (component.key === '__key') {\n                component.data = {\n                    '__key': Object.keys(rowData)[rowIndex],\n                };\n            }\n            else {\n                component.data = rowData;\n            }\n        });\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.isObject(value)) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            result = Object.keys(value).reduce((result, key) => {\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${key}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${this.getView(value[key], options)}</td>\n          </tr>\n        `);\n                return result;\n            }, result);\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        if (options === null || options === void 0 ? void 0 : options.modalPreview) {\n            delete options.modalPreview;\n            return this.getDataValueAsTable(value, options);\n        }\n        return typeof value === 'object' ? '[Complex Data]' : value;\n    }\n    getDataValueAsTable(value, options) {\n        let result = (`\n      <table border=\"1\" style=\"width:100%\">\n        <tbody>\n    `);\n        if (this.visible && lodash_1.default.isObject(value)) {\n            Object.keys(value).forEach((key) => {\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${key}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${this.getView(value[key], options)}</td>\n          </tr>\n        `);\n            });\n        }\n        result += (`\n        </tbody>\n      </table>\n    `);\n        return result;\n    }\n    createRowComponents(row, rowIndex) {\n        // Use original value component API key in builder mode to be able to edit value component\n        let key = this.builderMode ? this.valueKey : this.getRowKey(rowIndex);\n        // Create a new event emitter since fields are isolated.\n        const options = lodash_1.default.clone(this.options);\n        options.events = new eventemitter3_1.default();\n        options.name += `[${rowIndex}]`;\n        options.row = `${rowIndex}`;\n        const components = {};\n        components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });\n        components['__key'].on('componentChange', (event) => {\n            const dataValue = this.dataValue;\n            const newKey = (0, utils_1.uniqueKey)(dataValue, event.value);\n            dataValue[newKey] = dataValue[key];\n            delete dataValue[key];\n            const comp = components[this.valueKey];\n            comp.component.key = newKey;\n            comp.path = Components_1.default.calculateComponentPath(comp);\n            key = newKey;\n        });\n        const valueComponent = lodash_1.default.clone(this.component.valueComponent);\n        valueComponent.key = key;\n        const componentOptions = this.options;\n        componentOptions.row = options.row;\n        components[this.valueKey] = this.createComponent(valueComponent, componentOptions, this.dataValue);\n        return components;\n    }\n    get canAddColumn() {\n        return false;\n    }\n    addChildComponent(component) {\n        this.component.valueComponent = component;\n    }\n    saveChildComponent(component) {\n        // Update the Value Component, the Key Component is not allowed to edit\n        if (component.key !== this.keySchema.key) {\n            this.component.valueComponent = component;\n        }\n    }\n    removeChildComponent() {\n        const defaultSchema = DataMapComponent.schema();\n        this.component.valueComponent = defaultSchema.valueComponent;\n    }\n    addRow() {\n        const index = this.rows.length;\n        this.rows[index] = this.createRowComponents(this.dataValue, index);\n        this.redraw();\n        this.triggerChange();\n    }\n    removeRow(index) {\n        const keys = Object.keys(this.dataValue);\n        if (keys[index]) {\n            delete this.dataValue[keys[index]];\n        }\n        this.rows.splice(index, 1);\n        this.redraw();\n        this.triggerChange();\n    }\n    setValue(value, flags = {}) {\n        const changed = this.hasChanged(value, this.dataValue);\n        this.dataValue = value;\n        this.createRows();\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n    checkColumns() {\n        if (this.builderMode || (!this.dataValue || !Object.keys(this.dataValue).length)) {\n            return { rebuild: false, show: true };\n        }\n        if (Object.keys(this.dataValue).length > (this.rows || []).length) {\n            return { rebuild: true, show: true };\n        }\n        return { rebuild: false, show: true };\n    }\n}\nexports[\"default\"] = DataMapComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datamap/DataMap.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 Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst DataGrid_1 = __importDefault(__webpack_require__(/*! ../datagrid/DataGrid */ \"./lib/cjs/components/datagrid/DataGrid.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ../Components */ \"./lib/cjs/components/Components.js\"));\nclass DataMapComponent extends DataGrid_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Data Map',\n            key: 'dataMap',\n            type: 'datamap',\n            clearOnHide: true,\n            addAnother: 'Add Another',\n            disableAddingRemovingRows: false,\n            keyBeforeValue: true,\n            valueComponent: {\n                type: 'textfield',\n                key: 'value',\n                label: 'Value',\n                input: true\n            },\n            input: true,\n            validate: {\n                maxLength: 0,\n                minLength: 0\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Data Map',\n            icon: 'th-list',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#data-map',\n            showPreview: false,\n            weight: 20,\n            schema: DataMapComponent.schema()\n        };\n    }\n    get schema() {\n        const schema = super.schema;\n        if (this.components && (this.components.length > 0)) {\n            schema.valueComponent = this.components[this.components.length - 1].schema;\n        }\n        return lodash_1.default.omit(schema, 'components');\n    }\n    static savedValueTypes(schema) {\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'datamap';\n    }\n    init() {\n        this.components = [];\n        this.rows = [];\n        this.createRows();\n        this.visibleColumns = {\n            key: true,\n            [this.valueKey]: true\n        };\n        this.component.valueComponent.hideLabel = true;\n    }\n    get defaultSchema() {\n        return DataMapComponent.schema();\n    }\n    get emptyValue() {\n        return {};\n    }\n    get dataValue() {\n        if (!this.key ||\n            (!this.visible && this.component.clearOnHide)) {\n            return this.emptyValue;\n        }\n        if (!this.hasValue() && this.shouldAddDefaultValue) {\n            this.dataValue = this.emptyValue;\n        }\n        return lodash_1.default.get(this.data, this.key);\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        if (Array.isArray(value)) {\n            return value[0];\n        }\n        return this.emptyValue;\n    }\n    get keySchema() {\n        return {\n            type: 'textfield',\n            input: true,\n            hideLabel: true,\n            label: this.component.keyLabel || 'Key',\n            key: '__key',\n            disableBuilderActions: true,\n        };\n    }\n    get valueKey() {\n        return this.component.valueComponent.key;\n    }\n    getRowValues() {\n        const dataValue = this.dataValue;\n        if (this.builderMode) {\n            return [dataValue];\n        }\n        if (lodash_1.default.isEmpty(dataValue)) {\n            return [];\n        }\n        return Object.keys(dataValue).map(() => dataValue);\n    }\n    getComponentsContainer() {\n        if (this.builderMode) {\n            return this.getComponents().map(comp => comp.component);\n        }\n        return super.getComponentsContainer();\n    }\n    get iteratableRows() {\n        return this.rows.map((row) => {\n            return Object.keys(row).map(key => ({\n                components: row[key],\n                data: row[key].dataValue,\n            }));\n        });\n    }\n    componentContext(component) {\n        return this.iteratableRows[component.row].find(comp => comp.components.key === component.key).data;\n    }\n    hasHeader() {\n        return true;\n    }\n    hasRemoveButtons() {\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode;\n    }\n    getColumns() {\n        const keySchema = Object.assign({}, this.keySchema);\n        const valueSchema = Object.assign({}, this.component.valueComponent);\n        keySchema.hideLabel = false;\n        valueSchema.hideLabel = false;\n        return this.component.keyBeforeValue ?\n            [keySchema, valueSchema] :\n            [valueSchema, keySchema];\n    }\n    getRowKey(rowIndex) {\n        const keys = Object.keys(this.dataValue);\n        if (!keys[rowIndex]) {\n            keys[rowIndex] = (0, utils_1.uniqueKey)(this.dataValue, this.defaultRowKey);\n        }\n        return keys[rowIndex];\n    }\n    get defaultRowKey() {\n        return 'key';\n    }\n    setRowComponentsData(rowIndex, rowData) {\n        lodash_1.default.each(this.rows[rowIndex], (component) => {\n            if (component.key === '__key') {\n                component.data = {\n                    '__key': Object.keys(rowData)[rowIndex],\n                };\n            }\n            else {\n                component.data = rowData;\n            }\n        });\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.isObject(value)) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            result = Object.keys(value).reduce((result, key) => {\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${key}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${this.getView(value[key], options)}</td>\n          </tr>\n        `);\n                return result;\n            }, result);\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        if (options === null || options === void 0 ? void 0 : options.modalPreview) {\n            delete options.modalPreview;\n            return this.getDataValueAsTable(value, options);\n        }\n        return typeof value === 'object' ? '[Complex Data]' : value;\n    }\n    getDataValueAsTable(value, options) {\n        let result = (`\n      <table border=\"1\" style=\"width:100%\">\n        <tbody>\n    `);\n        if (this.visible && lodash_1.default.isObject(value)) {\n            Object.keys(value).forEach((key) => {\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${key}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${this.getView(value[key], options)}</td>\n          </tr>\n        `);\n            });\n        }\n        result += (`\n        </tbody>\n      </table>\n    `);\n        return result;\n    }\n    createRowComponents(row, rowIndex) {\n        // Use original value component API key in builder mode to be able to edit value component\n        let key = this.builderMode ? this.valueKey : this.getRowKey(rowIndex);\n        // Create a new event emitter since fields are isolated.\n        const options = lodash_1.default.clone(this.options);\n        options.events = new eventemitter3_1.default();\n        options.name += `[${rowIndex}]`;\n        options.row = `${rowIndex}`;\n        const components = {};\n        components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });\n        components['__key'].on('componentChange', (event) => {\n            const dataValue = this.dataValue;\n            const newKey = (0, utils_1.uniqueKey)(dataValue, event.value);\n            dataValue[newKey] = dataValue[key];\n            delete dataValue[key];\n            const comp = components[this.valueKey];\n            comp.component.key = newKey;\n            comp.path = Components_1.default.getComponentPath(comp);\n            key = newKey;\n        });\n        const valueComponent = lodash_1.default.clone(this.component.valueComponent);\n        valueComponent.key = key;\n        const componentOptions = this.options;\n        componentOptions.row = options.row;\n        components[this.valueKey] = this.createComponent(valueComponent, componentOptions, this.dataValue);\n        return components;\n    }\n    get canAddColumn() {\n        return false;\n    }\n    addChildComponent(component) {\n        this.component.valueComponent = component;\n    }\n    saveChildComponent(component) {\n        // Update the Value Component, the Key Component is not allowed to edit\n        if (component.key !== this.keySchema.key) {\n            this.component.valueComponent = component;\n        }\n    }\n    removeChildComponent() {\n        const defaultSchema = DataMapComponent.schema();\n        this.component.valueComponent = defaultSchema.valueComponent;\n    }\n    addRow() {\n        const index = this.rows.length;\n        this.rows[index] = this.createRowComponents(this.dataValue, index);\n        this.redraw();\n        this.triggerChange();\n    }\n    removeRow(index) {\n        const keys = Object.keys(this.dataValue);\n        if (keys[index]) {\n            delete this.dataValue[keys[index]];\n        }\n        this.rows.splice(index, 1);\n        this.redraw();\n        this.triggerChange();\n    }\n    setValue(value, flags = {}) {\n        const changed = this.hasChanged(value, this.dataValue);\n        this.dataValue = value;\n        this.createRows();\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n    checkColumns() {\n        if (this.builderMode || (!this.dataValue || !Object.keys(this.dataValue).length)) {\n            return { rebuild: false, show: true };\n        }\n        if (Object.keys(this.dataValue).length > (this.rows || []).length) {\n            return { rebuild: true, show: true };\n        }\n        return { rebuild: false, show: true };\n    }\n}\nexports[\"default\"] = DataMapComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datamap/DataMap.js?");
 
 /***/ }),
 
@@ -6291,7 +6291,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 process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst components_1 = __webpack_require__(/*! @formio/bootstrap/components */ \"./node_modules/@formio/bootstrap/lib/cjs/templates/components/index.js\");\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst Alert_1 = __importDefault(__webpack_require__(/*! ../alert/Alert */ \"./lib/cjs/components/alert/Alert.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst EditRowState = {\n    New: 'new',\n    Editing: 'editing',\n    Saved: 'saved',\n    Viewing: 'viewing',\n    Removed: 'removed',\n    Draft: 'draft',\n};\nclass EditGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            type: 'editgrid',\n            label: 'Edit Grid',\n            key: 'editGrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            removeRow: 'Cancel',\n            defaultOpen: false,\n            openWhenEmpty: false,\n            modal: false,\n            components: [],\n            inlineEdit: false,\n            templates: {\n                header: EditGridComponent.defaultHeaderTemplate,\n                row: EditGridComponent.defaultRowTemplate,\n                tableHeader: EditGridComponent.defaultTableHeaderTemplate,\n                tableRow: EditGridComponent.defaultTableRowTemplate,\n                footer: '',\n            },\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Edit Grid',\n            icon: 'tasks',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#edit-grid',\n            showPreview: false,\n            weight: 30,\n            schema: EditGridComponent.schema(),\n        };\n    }\n    static get defaultHeaderTemplate() {\n        return `<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (displayValue(component)) { %}\n          <div class=\"col-sm-2\">{{ t(component.label) }}</div>\n        {% } %}\n      {% }) %}\n    </div>`;\n    }\n    static get defaultTableHeaderTemplate() {\n        return `\n      <tr>\n        {% util.eachComponent(components, function(component) { %}\n          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n            <td class=\"editgrid-table-column\">{{ component.label }}</td>\n          {% } %}\n        {% }) %}\n        {% if (!instance.options.readOnly && !instance.disabled) { %}\n          <td class=\"editgrid-table-column\">Actions</td>\n        {% } %}\n      </tr>\n    `;\n    }\n    static get defaultRowTemplate() {\n        return `<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (displayValue(component)) { %}\n          <div class=\"col-sm-2\">\n            {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}\n          </div>\n        {% } %}\n      {% }) %}\n      {% if (!instance.options.readOnly && !instance.disabled) { %}\n        <div class=\"col-sm-2\">\n          <div class=\"btn-group pull-right\">\n            <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>`;\n    }\n    static get defaultTableRowTemplate() {\n        return `\n      {% util.eachComponent(components, function(component) { %}\n          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n            <td class=\"editgrid-table-column\">\n              {{ getView(component, row[component.key]) }}\n            </td>\n          {% } %}\n        {% }) %}\n        {% if (!instance.options.readOnly && !instance.disabled) { %}\n          <td class=\"editgrid-table-column\">\n            <div class=\"btn-group\">\n              <button class=\"btn btn-default btn-light btn-sm editRow\" aria-label=\"{{ t('Edit row') }}\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n              {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\" aria-label=\"{{ t('Remove row') }}\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n              {% } %}\n            </div>\n          </td>\n        {% } %}\n    `;\n    }\n    get defaultDialogTemplate() {\n        return `\n    <h3 ${this._referenceAttributeName}=\"dialogHeader\">${this.t('Do you want to clear data?')}</h3>\n    <div style=\"display:flex; justify-content: flex-end;\">\n      <button ${this._referenceAttributeName}=\"dialogCancelButton\" class=\"btn btn-secondary\" aria-label=\"${this.t('Cancel')}\">${this.t('Cancel')}</button>\n      <button ${this._referenceAttributeName}=\"dialogYesButton\" class=\"btn btn-danger\" aria-label=\"${this.t('Yes, delete it')}\">${this.t('Yes, delete it')}</button>\n    </div>\n  `;\n    }\n    get defaultRowTemplate() {\n        return this.displayAsTable\n            ? EditGridComponent.defaultTableRowTemplate\n            : EditGridComponent.defaultRowTemplate;\n    }\n    get defaultHeaderTemplate() {\n        return this.displayAsTable\n            ? EditGridComponent.defaultTableHeaderTemplate\n            : EditGridComponent.defaultHeaderTemplate;\n    }\n    get rowTemplate() {\n        let rowTemplate;\n        if (utils_1.Evaluator.noeval) {\n            rowTemplate = this.displayAsTable ?\n                components_1.editgrid.tableRow\n                : components_1.editgrid.row;\n        }\n        else {\n            rowTemplate = this.displayAsTable ?\n                lodash_1.default.get(this.component, 'templates.tableRow', this.defaultRowTemplate)\n                : lodash_1.default.get(this.component, 'templates.row', this.defaultRowTemplate);\n        }\n        return rowTemplate;\n    }\n    get headerTemplate() {\n        let headerTemplate;\n        if (utils_1.Evaluator.noeval) {\n            headerTemplate = this.displayAsTable ?\n                components_1.editgrid.tableHeader\n                : components_1.editgrid.header;\n        }\n        else {\n            headerTemplate = this.displayAsTable ?\n                lodash_1.default.get(this.component, 'templates.tableHeader', this.defaultHeaderTemplate)\n                : lodash_1.default.get(this.component, 'templates.header', this.defaultHeaderTemplate);\n        }\n        return headerTemplate;\n    }\n    /**\n     * @returns {boolean} - Returns true if the component has nested components which don't trigger changes on the root level\n     */\n    get hasScopedChildren() {\n        return !this.inlineEditMode;\n    }\n    get defaultSchema() {\n        return EditGridComponent.schema();\n    }\n    get emptyValue() {\n        return [];\n    }\n    get editgridKey() {\n        return `editgrid-${this.key}`;\n    }\n    get rowRef() {\n        return `${this.editgridKey}-row`;\n    }\n    get rowElements() {\n        return this.refs[this.rowRef];\n    }\n    get rowRefs() {\n        return this.refs[`editgrid-${this.component.key}-row`];\n    }\n    get addRowRef() {\n        return `${this.editgridKey}-addRow`;\n    }\n    get addRowElements() {\n        return this.refs[this.addRowRef];\n    }\n    get saveRowRef() {\n        return `${this.editgridKey}-saveRow`;\n    }\n    get saveRowElements() {\n        return this.refs[this.saveRowRef];\n    }\n    get cancelRowRef() {\n        return `${this.editgridKey}-cancelRow`;\n    }\n    get cancelRowElements() {\n        return this.refs[this.cancelRowRef];\n    }\n    get inlineEditMode() {\n        return this.component.inlineEdit;\n    }\n    get saveEditMode() {\n        return !this.inlineEditMode;\n    }\n    get minLength() {\n        return this.builderMode ? 0 : lodash_1.default.get(this.component, 'validate.minLength', 0);\n    }\n    get data() {\n        return this._data;\n    }\n    get dataValue() {\n        return super.dataValue || [];\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get displayAsTable() {\n        return this.component.displayAsTable;\n    }\n    set data(value) {\n        this._data = value;\n        const data = this.dataValue;\n        (this.editRows || []).forEach((row, index) => {\n            if (!data[index] && row.state !== EditRowState.New) {\n                data[index] = {};\n            }\n            const rowData = data[index] || {};\n            row.data = rowData;\n            row.components.forEach((component) => {\n                component.data = rowData;\n            });\n        });\n    }\n    get iteratableRows() {\n        return this.editRows;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        const defaultValue = Array.isArray(value) ? value : [];\n        lodash_1.default.times(this.minLength - defaultValue.length, () => defaultValue.push({}));\n        return defaultValue;\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'editgrid';\n    }\n    hasRemoveButtons() {\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    init() {\n        if (this.builderMode) {\n            this.editRows = [];\n            return super.init();\n        }\n        this.components = this.components || [];\n        const dataValue = this.dataValue;\n        const openWhenEmpty = !dataValue.length && this.component.openWhenEmpty;\n        if (openWhenEmpty) {\n            const dataObj = {};\n            this.editRows = [];\n            this.createRow(dataObj, 0);\n        }\n        else {\n            this.editRows = dataValue.map((row, rowIndex) => ({\n                components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                data: row,\n                state: EditRowState.Saved,\n                backup: null,\n                error: null,\n                rowIndex,\n            }));\n        }\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkData();\n        this.setVariableTypeComponents();\n        if (this.variableTypeComponentsIndexes.length) {\n            lodash_1.default.each(this.editRows || [], (editRow, rowIndex) => this.checkRowVariableTypeComponents(editRow, rowIndex));\n        }\n    }\n    checkRowVariableTypeComponents(editRow, rowIndex) {\n        const rowComponents = editRow.components;\n        if (lodash_1.default.some(this.variableTypeComponentsIndexes, (compIndex) => {\n            const variableTypeComp = rowComponents[compIndex];\n            return variableTypeComp.type !== variableTypeComp.component.type;\n        })) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex, true);\n        }\n    }\n    setVariableTypeComponents() {\n        //set components which type is changing within a row (e.g.,by mergeComponentSchema action)\n        this.variableTypeComponentsIndexes = [];\n        lodash_1.default.each(this.component.components, (comp, index) => {\n            if (comp.typeChangeEnabled) {\n                this.variableTypeComponentsIndexes.push(index);\n            }\n        });\n    }\n    isOpen(editRow) {\n        return [EditRowState.New, EditRowState.Editing, EditRowState.Viewing].includes(editRow.state);\n    }\n    isComponentVisibleInSomeRow(component) {\n        const rows = this.editRows;\n        const savedStates = [EditRowState.Saved, EditRowState.Editing, EditRowState.Draft];\n        const savedRows = rows.filter(row => lodash_1.default.includes(savedStates, row.state));\n        this.visibleInHeader = this.visibleInHeader || [];\n        const changeVisibleInHeader = (component, isVisible) => {\n            if (!isVisible) {\n                lodash_1.default.remove(this.visibleInHeader, (key) => key === component.key);\n            }\n            if (isVisible && !lodash_1.default.includes(this.visibleInHeader, component.key)) {\n                this.visibleInHeader.push(component.key);\n            }\n        };\n        if (lodash_1.default.isEmpty(rows)) {\n            const rowComponents = this.createRowComponents({}, 0);\n            let checkComponent;\n            (0, utils_1.eachComponent)(rowComponents, (comp) => {\n                if (comp.component.key === component.key) {\n                    checkComponent = comp;\n                }\n                comp.checkConditions();\n            });\n            const isVisible = checkComponent ? checkComponent.visible : true;\n            [...this.components].forEach((comp) => this.removeComponent(comp, this.components));\n            changeVisibleInHeader(component, isVisible);\n            return isVisible;\n        }\n        const isOpenRowWhenEmpty = lodash_1.default.get(this.component, 'openWhenEmpty') && rows.length === 1 && rows[0].state === EditRowState.New;\n        if (!lodash_1.default.isEmpty(rows) && lodash_1.default.isEmpty(savedRows) && !isOpenRowWhenEmpty) {\n            return lodash_1.default.includes(this.visibleInHeader, component.key);\n        }\n        return lodash_1.default.some(isOpenRowWhenEmpty ? rows : savedRows, (row, index) => {\n            const editingRow = row.state === EditRowState.Editing;\n            let isVisible;\n            if (!editingRow) {\n                const flattenedComponents = this.flattenComponents(index);\n                const instance = flattenedComponents[component.key];\n                isVisible = instance ? instance.visible : true;\n                changeVisibleInHeader(component, isVisible);\n            }\n            else {\n                isVisible = lodash_1.default.includes(this.visibleInHeader, component.key);\n            }\n            return isVisible;\n        });\n    }\n    render(children) {\n        if (this.builderMode) {\n            return super.render();\n        }\n        const dataValue = this.dataValue;\n        const headerTemplate = this.headerTemplate;\n        const t = this.t.bind(this);\n        const templateName = this.displayAsTable ? 'editgridTable' : 'editgrid';\n        return super.render(children || this.renderTemplate(templateName, {\n            ref: {\n                row: this.rowRef,\n                addRow: this.addRowRef,\n                saveRow: this.saveRowRef,\n                cancelRow: this.cancelRowRef,\n            },\n            header: this.renderString(headerTemplate, {\n                displayValue: (component) => this.displayComponentValue(component, true),\n                components: this.component.components,\n                value: dataValue,\n                t\n            }),\n            footer: this.renderString(lodash_1.default.get(this.component, 'templates.footer'), {\n                components: this.component.components,\n                value: dataValue,\n                t\n            }),\n            rows: this.editRows.map(this.renderRow.bind(this)),\n            openRows: this.editRows.map((row) => this.isOpen(row)),\n            errors: this.editRows.map((row) => row.error),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons: this.hasRemoveButtons(),\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        const templateName = this.displayAsTable && this.prevHasAddButton ? 'tableComponents' : 'components';\n        return this.renderTemplate(templateName, {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        this.loadRefs(element, {\n            [this.addRowRef]: 'multiple',\n            [this.saveRowRef]: 'multiple',\n            [this.cancelRowRef]: 'multiple',\n            [this.rowRef]: 'multiple',\n        });\n        this.addRowElements.forEach((addButton) => {\n            this.addEventListener(addButton, 'click', () => this.addRow());\n        });\n        let openRowCount = 0;\n        this.rowElements.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow === null || editRow === void 0 ? void 0 : editRow.isRowSelected) {\n                row.classList.add('selected');\n            }\n            if (this.isOpen(editRow)) {\n                this.attachComponents(row, editRow.components);\n                this.addEventListener(this.saveRowElements[openRowCount], 'click', () => this.saveRow(rowIndex, true));\n                this.addEventListener(this.cancelRowElements[openRowCount], 'click', () => this.cancelRow(rowIndex));\n                openRowCount++;\n            }\n            else {\n                // Attach edit and remove button events.\n                [\n                    {\n                        className: 'removeRow',\n                        event: 'click',\n                        action: () => this.removeRow(rowIndex, true),\n                    },\n                    {\n                        className: 'editRow',\n                        event: 'click',\n                        action: () => {\n                            this.editRow(rowIndex).then(() => {\n                                var _a;\n                                if (this.component.rowDrafts) {\n                                    const errors = this.validateRow(editRow, false);\n                                    const shouldShowRowErrorsAlert = this.component.modal && errors.length && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted);\n                                    if (shouldShowRowErrorsAlert) {\n                                        this.alert.showErrors(errors, false);\n                                        editRow.alerts = true;\n                                    }\n                                }\n                            });\n                        },\n                    },\n                    {\n                        className: 'row',\n                        event: 'click',\n                        action: () => {\n                            row.classList.toggle('selected');\n                            let eventName = 'editGridSelectRow';\n                            if (Array.from(row.classList).includes('selected')) {\n                                editRow.isRowSelected = true;\n                            }\n                            else {\n                                delete editRow.isRowSelected;\n                                eventName = 'editGridUnSelectRow';\n                            }\n                            this.emit(eventName, {\n                                component: this.component,\n                                data: this.dataValue[rowIndex]\n                            });\n                        },\n                    }\n                ].forEach(({ className, event, action, }) => {\n                    const elements = row.getElementsByClassName(className);\n                    Array.prototype.forEach.call(elements, (element) => {\n                        if (this.options.pdf && lodash_1.default.intersection(element.classList, ['editRow', 'removeRow']).length) {\n                            element.style.display = 'none';\n                        }\n                        else {\n                            this.addEventListener(element, event, action);\n                        }\n                    });\n                });\n            }\n        });\n        // Add open class to the element if any edit grid row is open\n        if (openRowCount) {\n            this.addClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n        }\n        else {\n            this.removeClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n        }\n        const superAttach = super.attach(element);\n        this.loadRefs(element, {\n            messageContainer: 'single-scope',\n        });\n        return superAttach;\n    }\n    flattenRowDataValue(dataValue) {\n        const flattened = {};\n        Object.keys(dataValue).forEach((key) => {\n            if (lodash_1.default.isObject(dataValue[key]) && !lodash_1.default.isNil(dataValue[key])) {\n                Object.assign(flattened, this.flattenRowDataValue(dataValue[key]));\n            }\n            else {\n                flattened[key] = dataValue[key];\n            }\n        });\n        return flattened;\n    }\n    isComponentVisibleInRow(component, flattenedComponents) {\n        const instance = flattenedComponents[component.key];\n        return instance ? instance.visible : true;\n    }\n    displayComponentValue(component, header) {\n        return !!((!component.hasOwnProperty('tableView') || component.tableView)\n            && header ? this.isComponentVisibleInSomeRow(component) : lodash_1.default.includes(this.visibleInHeader, component.key));\n    }\n    renderRow(row, rowIndex) {\n        const dataValue = this.dataValue;\n        if (this.isOpen(row)) {\n            return this.renderComponents(row.components);\n        }\n        else {\n            const flattenedComponents = this.flattenComponents(rowIndex);\n            const rowTemplate = this.rowTemplate;\n            return this.renderString(rowTemplate, {\n                row: dataValue[rowIndex] || {},\n                data: this.data,\n                rowIndex,\n                components: this.component.components,\n                flattenedComponents,\n                displayValue: (component) => this.displayComponentValue(component),\n                isVisibleInRow: (component) => this.isComponentVisibleInRow(component, flattenedComponents),\n                getView: (component, data) => {\n                    var _a, _b;\n                    const instance = flattenedComponents[component.key];\n                    const view = instance ? instance.getView(data || instance.dataValue) : '';\n                    // If there is an html tag in view, don't allow it to be injected in template\n                    const htmlTagRegExp = new RegExp('<(.*?)>');\n                    return typeof view === 'string' && view.length && !((_a = instance.component) === null || _a === void 0 ? void 0 : _a.template) && htmlTagRegExp.test(view) && ((_b = instance.component) === null || _b === void 0 ? void 0 : _b.inputFormat) !== 'html'\n                        ? `<input type=\"text\" value=\"${view.replace(/\"/g, '&quot;')}\" readonly/>`\n                        : view;\n                },\n                state: this.editRows[rowIndex].state,\n                t: this.t.bind(this)\n            });\n        }\n    }\n    eachComponent(fn, rowIndex) {\n        lodash_1.default.each(this.getComponents(rowIndex), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            var _a;\n            const rowData = this.dataValue[component.rowIndex];\n            const editRowData = (_a = this.editRows[component.rowIndex]) === null || _a === void 0 ? void 0 : _a.data;\n            component.data = rowData || editRowData;\n        });\n    }\n    flattenComponents(rowIndex) {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        }, rowIndex);\n        return result;\n    }\n    getComponents(rowIndex) {\n        var _a;\n        // Ensure editrows is set.\n        this.editRows = this.editRows || [];\n        return this.builderMode\n            ? super.getComponents()\n            : lodash_1.default.isNumber(rowIndex)\n                ? (((_a = this.editRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.components) || [])\n                : this.editRows.reduce((result, row) => result.concat(row.components || []), []);\n    }\n    destroy(all = false) {\n        this.calculatedValue = undefined;\n        super.destroy(all);\n    }\n    destroyComponents(all = false, rowIndex = 0) {\n        if (this.builderMode) {\n            return super.destroyComponents(all);\n        }\n        const components = this.getComponents(rowIndex).slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n    }\n    createRow(dataObj, rowIndex) {\n        const editRow = {\n            components: this.createRowComponents(dataObj, rowIndex),\n            data: dataObj,\n            state: EditRowState.New,\n            backup: null,\n            error: null,\n            rowIndex,\n        };\n        this.editRows.push(editRow);\n        if (this.inlineEditMode) {\n            this.dataValue.push(dataObj);\n        }\n        return editRow;\n    }\n    addRow() {\n        if (this.options.readOnly) {\n            return;\n        }\n        const dataObj = {};\n        const rowIndex = this.editRows.length;\n        const editRow = this.createRow(dataObj, rowIndex);\n        if (editRow.state === EditRowState.New) {\n            this.emptyRow = (0, utils_1.fastCloneDeep)(editRow.data);\n        }\n        if (this.inlineEditMode) {\n            this.triggerChange();\n        }\n        this.emit('editGridAddRow', {\n            component: this.component,\n            row: editRow,\n        });\n        this.processRow('checkData', null, {}, editRow.data, editRow.components);\n        if (this.component.modal) {\n            this.addRowModal(rowIndex);\n        }\n        else {\n            this.redraw();\n        }\n        return editRow;\n    }\n    addRowModal(rowIndex) {\n        const modalContent = this.ce('div');\n        const editRow = this.editRows[rowIndex];\n        editRow.willBeSaved = false;\n        const { components } = editRow;\n        modalContent.innerHTML = this.renderComponents(components);\n        const dialog = this.component.modal ? this.createModal(modalContent, {}, () => this.showDialog(rowIndex)) : undefined;\n        dialog.classList.add(`editgrid-row-modal-${this.id}`);\n        editRow.dialog = dialog;\n        if (this.alert) {\n            this.alert.clear();\n            this.alert = null;\n        }\n        this.alert = new Alert_1.default(dialog.refs.dialogContents, this);\n        this.addEventListener(dialog, 'close', () => {\n            if (!editRow.willBeSaved) {\n                if (this.editRows[rowIndex] && this.editRows[rowIndex].state !== EditRowState.New) {\n                    this.editRows[rowIndex].components.forEach((comp) => {\n                        comp.setPristine(true);\n                    });\n                }\n                this.cancelRow(rowIndex);\n            }\n            if (this.alert) {\n                this.alert.clear();\n                this.alert = null;\n            }\n            // Remove references to dialog elements to prevent possible in some cases memory leaks\n            delete editRow.confirmationDialog;\n            delete editRow.dialog;\n        });\n        dialog.refs.dialogContents.appendChild(this.ce('button', {\n            class: 'btn btn-primary',\n            onClick: () => {\n                // After an attempt to save, all the components inside the row should become not pristine\n                if (!this.component.rowDrafts) {\n                    editRow.components.forEach((comp) => comp.setPristine(false));\n                }\n                const errors = this.validateRow(editRow, true);\n                if (!errors.length || this.component.rowDrafts) {\n                    editRow.willBeSaved = true;\n                    dialog.close();\n                    this.saveRow(rowIndex, true);\n                }\n                else {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n            },\n        }, this.component.saveRow || 'Save'));\n        this.emit('editGridOpenModal', {\n            component: this.component,\n            row: editRow,\n            instance: this,\n        });\n        return this.attachComponents(modalContent, components);\n    }\n    showDialog(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow.state === EditRowState.New ? lodash_1.default.isEqual(this.emptyRow, editRow.data) : lodash_1.default.isEqual(editRow.backup, editRow.data)) {\n            return Promise.resolve();\n        }\n        const wrapper = this.ce('div', { ref: 'confirmationDialog' });\n        const dialogContent = this.component.dialogTemplate || this.defaultDialogTemplate;\n        wrapper.innerHTML = dialogContent;\n        wrapper.refs = {};\n        this.loadRefs.call(wrapper, wrapper, {\n            dialogHeader: 'single',\n            dialogCancelButton: 'single',\n            dialogYesButton: 'single',\n        });\n        const dialog = this.createModal(wrapper);\n        dialog.classList.add(`editgrid-row-modal-confirmation-${this.id}`);\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        let dialogResult;\n        const promise = new Promise((resolve, reject) => {\n            dialogResult = { resolve, reject };\n        });\n        this.addEventListener(wrapper.refs.dialogYesButton, 'click', (event) => {\n            close(event);\n            dialogResult.resolve();\n        });\n        this.addEventListener(wrapper.refs.dialogCancelButton, 'click', (event) => {\n            close(event);\n            dialogResult.reject();\n        });\n        editRow.confirmationDialog = dialog;\n        return promise;\n    }\n    editRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        const isAlreadyEditing = editRow.state === EditRowState.Editing || editRow.state === EditRowState.New;\n        if (!editRow || isAlreadyEditing) {\n            return Promise.resolve();\n        }\n        editRow.prevState = editRow.state;\n        editRow.state = this.options.readOnly ? EditRowState.Viewing : EditRowState.Editing;\n        if (this.lazyLoad && (editRow.components.length === 0)) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex);\n        }\n        const dataSnapshot = (0, utils_1.fastCloneDeep)(editRow.data);\n        if (this.inlineEditMode) {\n            editRow.backup = dataSnapshot;\n        }\n        else {\n            editRow.backup = (0, utils_1.fastCloneDeep)(editRow.data);\n            editRow.data = dataSnapshot;\n            this.restoreRowContext(editRow);\n        }\n        this.emit('editGridEditRow', {\n            component: this.component,\n            row: editRow,\n            instance: this,\n        });\n        if (this.component.modal) {\n            return this.addRowModal(rowIndex);\n        }\n        return this.redraw();\n    }\n    clearErrors(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow && Array.isArray(editRow.components)) {\n            editRow.components.forEach((comp) => {\n                comp.setPristine(true);\n                comp.setCustomValidity('');\n            });\n        }\n    }\n    cancelRow(rowIndex) {\n        if (this.options.readOnly) {\n            return;\n        }\n        const editRow = this.editRows[rowIndex];\n        switch (editRow.state) {\n            case EditRowState.New: {\n                editRow.state = EditRowState.Removed;\n                this.clearErrors(rowIndex);\n                this.destroyComponents(false, rowIndex);\n                if (this.inlineEditMode) {\n                    this.splice(rowIndex);\n                }\n                this.editRows.splice(rowIndex, 1);\n                this.openWhenEmpty();\n                break;\n            }\n            case EditRowState.Editing: {\n                editRow.state = editRow.prevState;\n                if (this.inlineEditMode) {\n                    this.dataValue[rowIndex] = editRow.backup;\n                }\n                editRow.data = editRow.backup;\n                editRow.backup = null;\n                this.restoreRowContext(editRow);\n                this.clearErrors(rowIndex);\n                break;\n            }\n        }\n        this.emit('editGridCancelRow', {\n            instance: this,\n            component: this.component,\n            editRow,\n        });\n        this.checkValidity(null, true);\n        this.redraw();\n        if (this.component.rowDrafts) {\n            this.checkValidity(this.data, false);\n        }\n    }\n    saveRow(rowIndex, modified) {\n        var _a, _b;\n        const editRow = this.editRows[rowIndex];\n        if (this.options.readOnly) {\n            return;\n        }\n        // After an attempt to save, all the components inside the row should become not pristine\n        if (!this.component.rowDrafts) {\n            editRow.components.forEach((comp) => comp.setPristine(false));\n        }\n        const errors = this.validateRow(editRow, true);\n        if (!this.component.rowDrafts) {\n            if (errors.length) {\n                return false;\n            }\n        }\n        if (this.saveEditMode) {\n            const dataValue = this.dataValue;\n            if ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.component.typeChangeEnabled) {\n                this.root.focusedComponent = null;\n            }\n            switch (editRow.state) {\n                case EditRowState.New: {\n                    const newIndex = dataValue.length;\n                    dataValue.push(editRow.data);\n                    editRow.components.forEach(component => component.rowIndex = newIndex);\n                    if (rowIndex !== newIndex) {\n                        this.editRows.splice(rowIndex, 1);\n                        this.editRows.splice(newIndex, 0, editRow);\n                    }\n                    break;\n                }\n                case EditRowState.Editing: {\n                    dataValue[rowIndex] = editRow.data;\n                    break;\n                }\n            }\n        }\n        editRow.state = this.component.rowDrafts && errors.length ? EditRowState.Draft : EditRowState.Saved;\n        editRow.backup = null;\n        this.updateValue();\n        this.emit('editGridSaveRow', {\n            component: this.component,\n            row: editRow.data,\n            instance: this\n        });\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        if (this.component.rowDrafts) {\n            editRow.components.forEach(comp => comp.setPristine(this.pristine));\n        }\n        this.checkValidity(null, true);\n        this.redraw();\n        if (editRow.alerts) {\n            editRow.alerts = false;\n        }\n        return true;\n    }\n    beforeFocus(component) {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        const relativePath = this.getRelativePath(component.path);\n        const arrayPath = (0, utils_1.getArrayFromComponentPath)(relativePath);\n        const rowIndex = arrayPath[0];\n        let rowToEditIndex = arrayPath[0];\n        this.editRows.forEach((row, indexInArray) => {\n            if (row.rowIndex === rowIndex) {\n                rowToEditIndex = indexInArray;\n            }\n        });\n        if (lodash_1.default.isNumber(rowToEditIndex)) {\n            this.editRow(rowToEditIndex);\n        }\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.editRows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(row.components, rowIndex + index);\n        });\n    }\n    baseRemoveRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        editRow.state = EditRowState.Removed;\n        this.destroyComponents(false, rowIndex);\n        return editRow;\n    }\n    removeRow(rowIndex, modified) {\n        if (this.options.readOnly) {\n            return;\n        }\n        this.clearErrors(rowIndex);\n        this.baseRemoveRow(rowIndex);\n        this.splice(rowIndex);\n        this.emit('editGridDeleteRow', {\n            index: rowIndex\n        });\n        this.editRows.splice(rowIndex, 1);\n        this.openWhenEmpty();\n        this.updateRowsComponents(rowIndex);\n        this.updateValue();\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        this.checkValidity(null, true);\n        this.checkData();\n        this.redraw();\n    }\n    createRowComponents(row, rowIndex, recreatePartially) {\n        // Iterate through existing components and destroy the ones with the same rowIndex.\n        if (this.components) {\n            for (let i = 0; i < this.components.length; i++) {\n                if (this.components[i].rowIndex === rowIndex) {\n                    this.components[i].destroy();\n                    this.components.splice(i, 1);\n                }\n            }\n        }\n        const currentRowComponents = lodash_1.default.get(this.editRows, `[${rowIndex}].components`, null);\n        return this.component.components.map((col, colIndex) => {\n            var _a;\n            if (recreatePartially && currentRowComponents && this.variableTypeComponentsIndexes.length) {\n                const currentComp = currentRowComponents[colIndex];\n                const shouldRecreate = lodash_1.default.includes(this.variableTypeComponentsIndexes, colIndex) && (currentComp === null || currentComp === void 0 ? void 0 : currentComp.type) !== ((_a = currentComp === null || currentComp === void 0 ? void 0 : currentComp.component) === null || _a === void 0 ? void 0 : _a.type);\n                if (!shouldRecreate) {\n                    return currentComp;\n                }\n                col = currentComp.component;\n            }\n            const column = lodash_1.default.clone(col);\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            options.onChange = (flags = {}, changed, modified) => {\n                var _a, _b;\n                if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {\n                    changed.instance.root.triggerChange(flags, changed, modified);\n                }\n                else if (!this.component.modal) {\n                    this.triggerRootChange(flags, changed, modified);\n                }\n                if (this.inlineEditMode) {\n                    return;\n                }\n                const editRow = this.editRows[rowIndex];\n                if (editRow) {\n                    this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);\n                    this.validateRow(editRow, false);\n                }\n                if (this.variableTypeComponentsIndexes.length) {\n                    this.checkRowVariableTypeComponents(editRow, rowIndex);\n                    this.redraw();\n                }\n            };\n            const comp = this.createComponent(lodash_1.default.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);\n            comp.rowIndex = rowIndex;\n            comp.inEditGrid = true;\n            return comp;\n        });\n    }\n    hasOpenRows() {\n        return this.editRows.some(row => this.isOpen(row));\n    }\n    getAttachedData(data = null) {\n        const ourData = (0, utils_1.fastCloneDeep)(data || this._data || this.rootValue);\n        lodash_1.default.set(ourData, this.key, this.editRows.map((row) => row.data));\n        return ourData;\n    }\n    shouldValidateDraft(editRow) {\n        var _a, _b;\n        // Draft rows should be validated only when there was an attempt to submit a form\n        return (editRow.state === EditRowState.Draft &&\n            !this.pristine &&\n            !((_a = this.root) === null || _a === void 0 ? void 0 : _a.pristine) &&\n            !this.hasOpenRows()) ||\n            ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted);\n    }\n    shouldValidateRow(editRow, dirty) {\n        return this.shouldValidateDraft(editRow) ||\n            editRow.state === EditRowState.New ||\n            editRow.state === EditRowState.Editing ||\n            editRow.alerts ||\n            dirty;\n    }\n    validateRow(editRow, dirty, forceSilentCheck) {\n        var _a;\n        editRow.errors = [];\n        if (this.shouldValidateRow(editRow, dirty)) {\n            const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;\n            const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);\n            const editGridValue = lodash_1.default.get(rootValue, this.path, []);\n            editGridValue[editRow.rowIndex] = editRow.data;\n            lodash_1.default.set(rootValue, this.path, editGridValue);\n            const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });\n            editRow.errors = (0, process_1.processSync)({\n                components: (0, utils_1.fastCloneDeep)(this.component.components).map((component) => {\n                    component.parentPath = `${this.path}[${editRow.rowIndex}]`;\n                    return component;\n                }),\n                data: rootValue,\n                row: editRow.data,\n                process: 'validateRow',\n                instances: this.componentsMap,\n                scope: { errors: [] },\n                processors: [\n                    {\n                        process: validationProcessorProcess,\n                        processSync: validationProcessorProcess\n                    }\n                ]\n            }).errors;\n        }\n        // TODO: this is essentially running its own custom validation and should be moved into a validation rule\n        if (this.component.validate && this.component.validate.row) {\n            const valid = this.evaluate(this.component.validate.row, {\n                valid: (editRow.length === 0),\n                row: editRow.data\n            }, 'valid', true);\n            if (valid.toString() !== 'true') {\n                editRow.errors.push({\n                    type: 'error',\n                    rowError: true,\n                    message: valid.toString()\n                });\n            }\n            if (valid === null) {\n                editRow.errors.push({\n                    type: 'error',\n                    message: `Invalid row validation for ${this.key}`\n                });\n            }\n        }\n        if (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {\n            this.showRowErrorAlerts(editRow, editRow.errors);\n        }\n        return editRow.errors;\n    }\n    showRowErrorAlerts(editRow, errors) {\n        if (editRow.alerts) {\n            if (this.alert) {\n                if (errors.length) {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n                else {\n                    this.alert.clear();\n                    this.alert = null;\n                }\n            }\n        }\n    }\n    /**\n     * @returns {boolean} - Return that this component processes its own validation.\n     */\n    get processOwnValidation() {\n        return true;\n    }\n    checkComponentValidity(data, dirty, row, options = {}, errors = []) {\n        var _a, _b;\n        const { silentCheck } = options;\n        const superValid = super.checkComponentValidity(data, dirty, row, options, errors);\n        // If super tells us that component invalid and there is no need to update alerts, just return false\n        if (!superValid && (!this.alert && !this.hasOpenRows())) {\n            return false;\n        }\n        let rowsEditing = false;\n        const allRowErrors = [];\n        this.editRows.forEach((editRow, index) => {\n            // Trigger all errors on the row.\n            const rowErrors = this.validateRow(editRow, dirty, silentCheck);\n            errors.push(...rowErrors);\n            allRowErrors.push(...rowErrors);\n            if (this.rowRefs) {\n                const rowContainer = this.rowRefs[index];\n                if (rowContainer) {\n                    const errorContainer = rowContainer.querySelector('.editgrid-row-error');\n                    if (rowErrors.length && errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n                        const rowError = rowErrors.find(error => error.rowError);\n                        this.addClass(errorContainer, 'help-block');\n                        errorContainer.textContent = this.t(rowError ? rowError.message : this.errorMessage('invalidRowError'));\n                    }\n                    else if (errorContainer) {\n                        errorContainer.textContent = '';\n                    }\n                }\n            }\n            // If this is a dirty check, and any rows are still editing, we need to throw validation error.\n            rowsEditing |= (dirty && this.isOpen(editRow));\n        });\n        if (allRowErrors.length) {\n            if (!silentCheck && (dirty || this.dirty) && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {\n                this.setCustomValidity(this.t(this.errorMessage('invalidRowsError')), dirty);\n                this.removeClass(this.element, 'has-error');\n            }\n            return false;\n        }\n        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {\n            this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);\n            errors.push(...this._errors);\n            return false;\n        }\n        const message = this.invalid || this.invalidMessage(data, dirty, false, row);\n        if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n            this.root.showErrors([message]);\n        }\n        else {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n        }\n        return superValid;\n    }\n    setRowInvalid(ref, index) {\n        const editRow = this.editRows[index];\n        const errorContainer = ref.querySelector('.editgrid-row-error');\n        if (errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n            this.addClass(errorContainer, 'help-block');\n            errorContainer.textContent = this.t(this.errorMessage('invalidRowError'));\n        }\n        else if (errorContainer) {\n            errorContainer.textContent = '';\n        }\n    }\n    changeState(changed, flags) {\n        if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {\n            this.rebuild();\n        }\n        else {\n            this.redraw();\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            value = this.defaultValue;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                return false;\n            }\n        }\n        const changed = this.hasChanged(value, this.dataValue);\n        if (this.parent && !this.options.server) {\n            this.parent.checkComponentConditions();\n        }\n        this.dataValue = value;\n        // Refresh editRow data when data changes.\n        this.dataValue.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow) {\n                editRow.data = row;\n                this.restoreRowContext(editRow, flags);\n                editRow.state = EditRowState.Saved;\n                editRow.backup = null;\n                editRow.errors = [];\n            }\n            else {\n                this.editRows[rowIndex] = {\n                    components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                    data: row,\n                    state: EditRowState.Saved,\n                    backup: null,\n                    errors: [],\n                };\n            }\n        });\n        let { length: dataLength } = this.dataValue;\n        // If the last row is a new row, then do not remove it.\n        if (this.editRows[dataLength] && (this.editRows[dataLength].state === EditRowState.New)) {\n            dataLength = (dataLength + 1);\n        }\n        this.editRows.slice(dataLength).forEach((editRow, index) => this.baseRemoveRow(dataLength + index));\n        this.editRows = this.editRows.slice(0, dataLength);\n        this.openWhenEmpty();\n        this.updateOnChange(flags, changed);\n        // do not call checkData with server option, it is called when change is triggered in updateOnChange\n        if (!this.options.server) {\n            this.checkData();\n        }\n        this.changeState(changed, flags);\n        return changed;\n    }\n    openWhenEmpty() {\n        const shouldBeOpened = !this.dataValue.length && this.component.openWhenEmpty;\n        const hasNoRows = !this.editRows.length;\n        if (hasNoRows && shouldBeOpened && !this.builderMode) {\n            const dataObj = {};\n            this.createRow(dataObj, 0);\n        }\n    }\n    restoreRowContext(editRow, flags = {}) {\n        editRow.components.forEach((component) => {\n            component.data = editRow.data;\n            this.setNestedValue(component, editRow.data, flags);\n        });\n    }\n    emptyRows() {\n        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));\n        this.editRows = [];\n    }\n    resetValue() {\n        super.resetValue();\n        this.emptyRows();\n    }\n}\nexports[\"default\"] = EditGridComponent;\nEditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/editgrid/EditGrid.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 process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst components_1 = __webpack_require__(/*! @formio/bootstrap/components */ \"./node_modules/@formio/bootstrap/lib/cjs/templates/components/index.js\");\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst Alert_1 = __importDefault(__webpack_require__(/*! ../alert/Alert */ \"./lib/cjs/components/alert/Alert.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst EditRowState = {\n    New: 'new',\n    Editing: 'editing',\n    Saved: 'saved',\n    Viewing: 'viewing',\n    Removed: 'removed',\n    Draft: 'draft',\n};\nclass EditGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            type: 'editgrid',\n            label: 'Edit Grid',\n            key: 'editGrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            removeRow: 'Cancel',\n            defaultOpen: false,\n            openWhenEmpty: false,\n            modal: false,\n            components: [],\n            inlineEdit: false,\n            templates: {\n                header: EditGridComponent.defaultHeaderTemplate,\n                row: EditGridComponent.defaultRowTemplate,\n                tableHeader: EditGridComponent.defaultTableHeaderTemplate,\n                tableRow: EditGridComponent.defaultTableRowTemplate,\n                footer: '',\n            },\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Edit Grid',\n            icon: 'tasks',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#edit-grid',\n            showPreview: false,\n            weight: 30,\n            schema: EditGridComponent.schema(),\n        };\n    }\n    static get defaultHeaderTemplate() {\n        return `<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (displayValue(component)) { %}\n          <div class=\"col-sm-2\">{{ t(component.label) }}</div>\n        {% } %}\n      {% }) %}\n    </div>`;\n    }\n    static get defaultTableHeaderTemplate() {\n        return `\n      <tr>\n        {% util.eachComponent(components, function(component) { %}\n          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n            <td class=\"editgrid-table-column\">{{ component.label }}</td>\n          {% } %}\n        {% }) %}\n        {% if (!instance.options.readOnly && !instance.disabled) { %}\n          <td class=\"editgrid-table-column\">Actions</td>\n        {% } %}\n      </tr>\n    `;\n    }\n    static get defaultRowTemplate() {\n        return `<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (displayValue(component)) { %}\n          <div class=\"col-sm-2\">\n            {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}\n          </div>\n        {% } %}\n      {% }) %}\n      {% if (!instance.options.readOnly && !instance.disabled) { %}\n        <div class=\"col-sm-2\">\n          <div class=\"btn-group pull-right\">\n            <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>`;\n    }\n    static get defaultTableRowTemplate() {\n        return `\n      {% util.eachComponent(components, function(component) { %}\n          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n            <td class=\"editgrid-table-column\">\n              {{ getView(component, row[component.key]) }}\n            </td>\n          {% } %}\n        {% }) %}\n        {% if (!instance.options.readOnly && !instance.disabled) { %}\n          <td class=\"editgrid-table-column\">\n            <div class=\"btn-group\">\n              <button class=\"btn btn-default btn-light btn-sm editRow\" aria-label=\"{{ t('Edit row') }}\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n              {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\" aria-label=\"{{ t('Remove row') }}\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n              {% } %}\n            </div>\n          </td>\n        {% } %}\n    `;\n    }\n    get defaultDialogTemplate() {\n        return `\n    <h3 ${this._referenceAttributeName}=\"dialogHeader\">${this.t('Do you want to clear data?')}</h3>\n    <div style=\"display:flex; justify-content: flex-end;\">\n      <button ${this._referenceAttributeName}=\"dialogCancelButton\" class=\"btn btn-secondary\" aria-label=\"${this.t('Cancel')}\">${this.t('Cancel')}</button>\n      <button ${this._referenceAttributeName}=\"dialogYesButton\" class=\"btn btn-danger\" aria-label=\"${this.t('Yes, delete it')}\">${this.t('Yes, delete it')}</button>\n    </div>\n  `;\n    }\n    get defaultRowTemplate() {\n        return this.displayAsTable\n            ? EditGridComponent.defaultTableRowTemplate\n            : EditGridComponent.defaultRowTemplate;\n    }\n    get defaultHeaderTemplate() {\n        return this.displayAsTable\n            ? EditGridComponent.defaultTableHeaderTemplate\n            : EditGridComponent.defaultHeaderTemplate;\n    }\n    get rowTemplate() {\n        let rowTemplate;\n        if (utils_1.Evaluator.noeval) {\n            rowTemplate = this.displayAsTable ?\n                components_1.editgrid.tableRow\n                : components_1.editgrid.row;\n        }\n        else {\n            rowTemplate = this.displayAsTable ?\n                lodash_1.default.get(this.component, 'templates.tableRow', this.defaultRowTemplate)\n                : lodash_1.default.get(this.component, 'templates.row', this.defaultRowTemplate);\n        }\n        return rowTemplate;\n    }\n    get headerTemplate() {\n        let headerTemplate;\n        if (utils_1.Evaluator.noeval) {\n            headerTemplate = this.displayAsTable ?\n                components_1.editgrid.tableHeader\n                : components_1.editgrid.header;\n        }\n        else {\n            headerTemplate = this.displayAsTable ?\n                lodash_1.default.get(this.component, 'templates.tableHeader', this.defaultHeaderTemplate)\n                : lodash_1.default.get(this.component, 'templates.header', this.defaultHeaderTemplate);\n        }\n        return headerTemplate;\n    }\n    /**\n     * @returns {boolean} - Returns true if the component has nested components which don't trigger changes on the root level\n     */\n    get hasScopedChildren() {\n        return !this.inlineEditMode;\n    }\n    get defaultSchema() {\n        return EditGridComponent.schema();\n    }\n    get emptyValue() {\n        return [];\n    }\n    get editgridKey() {\n        return `editgrid-${this.key}`;\n    }\n    get rowRef() {\n        return `${this.editgridKey}-row`;\n    }\n    get rowElements() {\n        return this.refs[this.rowRef];\n    }\n    get rowRefs() {\n        return this.refs[`editgrid-${this.component.key}-row`];\n    }\n    get addRowRef() {\n        return `${this.editgridKey}-addRow`;\n    }\n    get addRowElements() {\n        return this.refs[this.addRowRef];\n    }\n    get saveRowRef() {\n        return `${this.editgridKey}-saveRow`;\n    }\n    get saveRowElements() {\n        return this.refs[this.saveRowRef];\n    }\n    get cancelRowRef() {\n        return `${this.editgridKey}-cancelRow`;\n    }\n    get cancelRowElements() {\n        return this.refs[this.cancelRowRef];\n    }\n    get inlineEditMode() {\n        return this.component.inlineEdit;\n    }\n    get saveEditMode() {\n        return !this.inlineEditMode;\n    }\n    get minLength() {\n        return this.builderMode ? 0 : lodash_1.default.get(this.component, 'validate.minLength', 0);\n    }\n    get data() {\n        return this._data;\n    }\n    get dataValue() {\n        return super.dataValue || [];\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get displayAsTable() {\n        return this.component.displayAsTable;\n    }\n    set data(value) {\n        this._data = value;\n        const data = this.dataValue;\n        (this.editRows || []).forEach((row, index) => {\n            if (!data[index] && row.state !== EditRowState.New) {\n                data[index] = {};\n            }\n            const rowData = data[index] || {};\n            row.data = rowData;\n            row.components.forEach((component) => {\n                component.data = rowData;\n            });\n        });\n    }\n    get iteratableRows() {\n        return this.editRows;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        const defaultValue = Array.isArray(value) ? value : [];\n        lodash_1.default.times(this.minLength - defaultValue.length, () => defaultValue.push({}));\n        return defaultValue;\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'editgrid';\n    }\n    hasRemoveButtons() {\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    init() {\n        if (this.builderMode) {\n            this.editRows = [];\n            return super.init();\n        }\n        this.components = this.components || [];\n        const dataValue = this.dataValue;\n        const openWhenEmpty = !dataValue.length && this.component.openWhenEmpty;\n        if (openWhenEmpty) {\n            const dataObj = {};\n            this.editRows = [];\n            this.createRow(dataObj, 0);\n        }\n        else {\n            this.editRows = dataValue.map((row, rowIndex) => ({\n                components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                data: row,\n                state: EditRowState.Saved,\n                backup: null,\n                error: null,\n                rowIndex,\n            }));\n        }\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkData();\n        this.setVariableTypeComponents();\n        if (this.variableTypeComponentsIndexes.length) {\n            lodash_1.default.each(this.editRows || [], (editRow, rowIndex) => this.checkRowVariableTypeComponents(editRow, rowIndex));\n        }\n    }\n    checkRowVariableTypeComponents(editRow, rowIndex) {\n        const rowComponents = editRow.components;\n        if (lodash_1.default.some(this.variableTypeComponentsIndexes, (compIndex) => {\n            const variableTypeComp = rowComponents[compIndex];\n            return variableTypeComp.type !== variableTypeComp.component.type;\n        })) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex, true);\n        }\n    }\n    setVariableTypeComponents() {\n        //set components which type is changing within a row (e.g.,by mergeComponentSchema action)\n        this.variableTypeComponentsIndexes = [];\n        lodash_1.default.each(this.component.components, (comp, index) => {\n            if (comp.typeChangeEnabled) {\n                this.variableTypeComponentsIndexes.push(index);\n            }\n        });\n    }\n    isOpen(editRow) {\n        return [EditRowState.New, EditRowState.Editing, EditRowState.Viewing].includes(editRow.state);\n    }\n    isComponentVisibleInSomeRow(component) {\n        const rows = this.editRows;\n        const savedStates = [EditRowState.Saved, EditRowState.Editing, EditRowState.Draft];\n        const savedRows = rows.filter(row => lodash_1.default.includes(savedStates, row.state));\n        this.visibleInHeader = this.visibleInHeader || [];\n        const changeVisibleInHeader = (component, isVisible) => {\n            if (!isVisible) {\n                lodash_1.default.remove(this.visibleInHeader, (key) => key === component.key);\n            }\n            if (isVisible && !lodash_1.default.includes(this.visibleInHeader, component.key)) {\n                this.visibleInHeader.push(component.key);\n            }\n        };\n        if (lodash_1.default.isEmpty(rows)) {\n            const rowComponents = this.createRowComponents({}, 0);\n            let checkComponent;\n            (0, utils_1.eachComponent)(rowComponents, (comp) => {\n                if (comp.component.key === component.key) {\n                    checkComponent = comp;\n                }\n                comp.checkConditions();\n            });\n            const isVisible = checkComponent ? checkComponent.visible : true;\n            [...this.components].forEach((comp) => this.removeComponent(comp, this.components));\n            changeVisibleInHeader(component, isVisible);\n            return isVisible;\n        }\n        const isOpenRowWhenEmpty = lodash_1.default.get(this.component, 'openWhenEmpty') && rows.length === 1 && rows[0].state === EditRowState.New;\n        if (!lodash_1.default.isEmpty(rows) && lodash_1.default.isEmpty(savedRows) && !isOpenRowWhenEmpty) {\n            return lodash_1.default.includes(this.visibleInHeader, component.key);\n        }\n        return lodash_1.default.some(isOpenRowWhenEmpty ? rows : savedRows, (row, index) => {\n            const editingRow = row.state === EditRowState.Editing;\n            let isVisible;\n            if (!editingRow) {\n                const flattenedComponents = this.flattenComponents(index);\n                const instance = flattenedComponents[component.key];\n                isVisible = instance ? instance.visible : true;\n                changeVisibleInHeader(component, isVisible);\n            }\n            else {\n                isVisible = lodash_1.default.includes(this.visibleInHeader, component.key);\n            }\n            return isVisible;\n        });\n    }\n    render(children) {\n        if (this.builderMode) {\n            return super.render();\n        }\n        const dataValue = this.dataValue;\n        const headerTemplate = this.headerTemplate;\n        const t = this.t.bind(this);\n        const templateName = this.displayAsTable ? 'editgridTable' : 'editgrid';\n        return super.render(children || this.renderTemplate(templateName, {\n            ref: {\n                row: this.rowRef,\n                addRow: this.addRowRef,\n                saveRow: this.saveRowRef,\n                cancelRow: this.cancelRowRef,\n            },\n            header: this.renderString(headerTemplate, {\n                displayValue: (component) => this.displayComponentValue(component, true),\n                components: this.component.components,\n                value: dataValue,\n                t\n            }),\n            footer: this.renderString(lodash_1.default.get(this.component, 'templates.footer'), {\n                components: this.component.components,\n                value: dataValue,\n                t\n            }),\n            rows: this.editRows.map(this.renderRow.bind(this)),\n            openRows: this.editRows.map((row) => this.isOpen(row)),\n            errors: this.editRows.map((row) => row.error),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons: this.hasRemoveButtons(),\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        const templateName = this.displayAsTable && this.prevHasAddButton ? 'tableComponents' : 'components';\n        return this.renderTemplate(templateName, {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        this.loadRefs(element, {\n            [this.addRowRef]: 'multiple',\n            [this.saveRowRef]: 'multiple',\n            [this.cancelRowRef]: 'multiple',\n            [this.rowRef]: 'multiple',\n        });\n        this.addRowElements.forEach((addButton) => {\n            this.addEventListener(addButton, 'click', () => this.addRow());\n        });\n        let openRowCount = 0;\n        this.rowElements.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow === null || editRow === void 0 ? void 0 : editRow.isRowSelected) {\n                row.classList.add('selected');\n            }\n            if (this.isOpen(editRow)) {\n                this.attachComponents(row, editRow.components);\n                this.addEventListener(this.saveRowElements[openRowCount], 'click', () => this.saveRow(rowIndex, true));\n                this.addEventListener(this.cancelRowElements[openRowCount], 'click', () => this.cancelRow(rowIndex));\n                openRowCount++;\n            }\n            else {\n                // Attach edit and remove button events.\n                [\n                    {\n                        className: 'removeRow',\n                        event: 'click',\n                        action: () => this.removeRow(rowIndex, true),\n                    },\n                    {\n                        className: 'editRow',\n                        event: 'click',\n                        action: () => {\n                            this.editRow(rowIndex).then(() => {\n                                var _a;\n                                if (this.component.rowDrafts) {\n                                    const errors = this.validateRow(editRow, false);\n                                    const shouldShowRowErrorsAlert = this.component.modal && errors.length && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted);\n                                    if (shouldShowRowErrorsAlert) {\n                                        this.alert.showErrors(errors, false);\n                                        editRow.alerts = true;\n                                    }\n                                }\n                            });\n                        },\n                    },\n                    {\n                        className: 'row',\n                        event: 'click',\n                        action: () => {\n                            row.classList.toggle('selected');\n                            let eventName = 'editGridSelectRow';\n                            if (Array.from(row.classList).includes('selected')) {\n                                editRow.isRowSelected = true;\n                            }\n                            else {\n                                delete editRow.isRowSelected;\n                                eventName = 'editGridUnSelectRow';\n                            }\n                            this.emit(eventName, {\n                                component: this.component,\n                                data: this.dataValue[rowIndex]\n                            });\n                        },\n                    }\n                ].forEach(({ className, event, action, }) => {\n                    const elements = row.getElementsByClassName(className);\n                    Array.prototype.forEach.call(elements, (element) => {\n                        if (this.options.pdf && lodash_1.default.intersection(element.classList, ['editRow', 'removeRow']).length) {\n                            element.style.display = 'none';\n                        }\n                        else {\n                            this.addEventListener(element, event, action);\n                        }\n                    });\n                });\n            }\n        });\n        // Add open class to the element if any edit grid row is open\n        if (openRowCount) {\n            this.addClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n        }\n        else {\n            this.removeClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n        }\n        return super.attach(element);\n    }\n    flattenRowDataValue(dataValue) {\n        const flattened = {};\n        Object.keys(dataValue).forEach((key) => {\n            if (lodash_1.default.isObject(dataValue[key]) && !lodash_1.default.isNil(dataValue[key])) {\n                Object.assign(flattened, this.flattenRowDataValue(dataValue[key]));\n            }\n            else {\n                flattened[key] = dataValue[key];\n            }\n        });\n        return flattened;\n    }\n    isComponentVisibleInRow(component, flattenedComponents) {\n        const instance = flattenedComponents[component.key];\n        return instance ? instance.visible : true;\n    }\n    displayComponentValue(component, header) {\n        return !!((!component.hasOwnProperty('tableView') || component.tableView)\n            && header ? this.isComponentVisibleInSomeRow(component) : lodash_1.default.includes(this.visibleInHeader, component.key));\n    }\n    renderRow(row, rowIndex) {\n        const dataValue = this.dataValue;\n        if (this.isOpen(row)) {\n            return this.renderComponents(row.components);\n        }\n        else {\n            const flattenedComponents = this.flattenComponents(rowIndex);\n            const rowTemplate = this.rowTemplate;\n            return this.renderString(rowTemplate, {\n                row: dataValue[rowIndex] || {},\n                data: this.data,\n                rowIndex,\n                components: this.component.components,\n                flattenedComponents,\n                displayValue: (component) => this.displayComponentValue(component),\n                isVisibleInRow: (component) => this.isComponentVisibleInRow(component, flattenedComponents),\n                getView: (component, data) => {\n                    var _a, _b;\n                    const instance = flattenedComponents[component.key];\n                    const view = instance ? instance.getView(data || instance.dataValue) : '';\n                    // If there is an html tag in view, don't allow it to be injected in template\n                    const htmlTagRegExp = new RegExp('<(.*?)>');\n                    return typeof view === 'string' && view.length && !((_a = instance.component) === null || _a === void 0 ? void 0 : _a.template) && htmlTagRegExp.test(view) && ((_b = instance.component) === null || _b === void 0 ? void 0 : _b.inputFormat) !== 'html'\n                        ? `<input type=\"text\" value=\"${view.replace(/\"/g, '&quot;')}\" readonly/>`\n                        : view;\n                },\n                state: this.editRows[rowIndex].state,\n                t: this.t.bind(this)\n            });\n        }\n    }\n    eachComponent(fn, rowIndex) {\n        lodash_1.default.each(this.getComponents(rowIndex), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            var _a;\n            const rowData = this.dataValue[component.rowIndex];\n            const editRowData = (_a = this.editRows[component.rowIndex]) === null || _a === void 0 ? void 0 : _a.data;\n            component.data = rowData || editRowData;\n        });\n    }\n    flattenComponents(rowIndex) {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        }, rowIndex);\n        return result;\n    }\n    getComponents(rowIndex) {\n        var _a;\n        // Ensure editrows is set.\n        this.editRows = this.editRows || [];\n        return this.builderMode\n            ? super.getComponents()\n            : lodash_1.default.isNumber(rowIndex)\n                ? (((_a = this.editRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.components) || [])\n                : this.editRows.reduce((result, row) => result.concat(row.components || []), []);\n    }\n    destroy(all = false) {\n        this.calculatedValue = undefined;\n        super.destroy(all);\n    }\n    destroyComponents(all = false, rowIndex = 0) {\n        if (this.builderMode) {\n            return super.destroyComponents(all);\n        }\n        const components = this.getComponents(rowIndex).slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n    }\n    createRow(dataObj, rowIndex) {\n        const editRow = {\n            components: this.createRowComponents(dataObj, rowIndex),\n            data: dataObj,\n            state: EditRowState.New,\n            backup: null,\n            error: null,\n            rowIndex,\n        };\n        this.editRows.push(editRow);\n        if (this.inlineEditMode) {\n            this.dataValue.push(dataObj);\n        }\n        return editRow;\n    }\n    addRow() {\n        if (this.options.readOnly) {\n            return;\n        }\n        const dataObj = {};\n        const rowIndex = this.editRows.length;\n        const editRow = this.createRow(dataObj, rowIndex);\n        if (editRow.state === EditRowState.New) {\n            this.emptyRow = (0, utils_1.fastCloneDeep)(editRow.data);\n        }\n        if (this.inlineEditMode) {\n            this.triggerChange();\n        }\n        this.emit('editGridAddRow', {\n            component: this.component,\n            row: editRow,\n        });\n        this.processRow('checkData', null, {}, editRow.data, editRow.components);\n        if (this.component.modal) {\n            this.addRowModal(rowIndex);\n        }\n        else {\n            this.redraw();\n        }\n        return editRow;\n    }\n    addRowModal(rowIndex) {\n        const modalContent = this.ce('div');\n        const editRow = this.editRows[rowIndex];\n        editRow.willBeSaved = false;\n        const { components } = editRow;\n        modalContent.innerHTML = this.renderComponents(components);\n        const dialog = this.component.modal ? this.createModal(modalContent, {}, () => this.showDialog(rowIndex)) : undefined;\n        dialog.classList.add(`editgrid-row-modal-${this.id}`);\n        editRow.dialog = dialog;\n        if (this.alert) {\n            this.alert.clear();\n            this.alert = null;\n        }\n        this.alert = new Alert_1.default(dialog.refs.dialogContents, this);\n        this.addEventListener(dialog, 'close', () => {\n            if (!editRow.willBeSaved) {\n                if (this.editRows[rowIndex] && this.editRows[rowIndex].state !== EditRowState.New) {\n                    this.editRows[rowIndex].components.forEach((comp) => {\n                        comp.setPristine(true);\n                    });\n                }\n                this.cancelRow(rowIndex);\n            }\n            if (this.alert) {\n                this.alert.clear();\n                this.alert = null;\n            }\n            // Remove references to dialog elements to prevent possible in some cases memory leaks\n            delete editRow.confirmationDialog;\n            delete editRow.dialog;\n        });\n        dialog.refs.dialogContents.appendChild(this.ce('button', {\n            class: 'btn btn-primary',\n            onClick: () => {\n                // After an attempt to save, all the components inside the row should become not pristine\n                if (!this.component.rowDrafts) {\n                    editRow.components.forEach((comp) => comp.setPristine(false));\n                }\n                const errors = this.validateRow(editRow, true);\n                if (!errors.length || this.component.rowDrafts) {\n                    editRow.willBeSaved = true;\n                    dialog.close();\n                    this.saveRow(rowIndex, true);\n                }\n                else {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n            },\n        }, this.component.saveRow || 'Save'));\n        this.emit('editGridOpenModal', {\n            component: this.component,\n            row: editRow,\n            instance: this,\n        });\n        return this.attachComponents(modalContent, components);\n    }\n    showDialog(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow.state === EditRowState.New ? lodash_1.default.isEqual(this.emptyRow, editRow.data) : lodash_1.default.isEqual(editRow.backup, editRow.data)) {\n            return Promise.resolve();\n        }\n        const wrapper = this.ce('div', { ref: 'confirmationDialog' });\n        const dialogContent = this.component.dialogTemplate || this.defaultDialogTemplate;\n        wrapper.innerHTML = dialogContent;\n        wrapper.refs = {};\n        this.loadRefs.call(wrapper, wrapper, {\n            dialogHeader: 'single',\n            dialogCancelButton: 'single',\n            dialogYesButton: 'single',\n        });\n        const dialog = this.createModal(wrapper);\n        dialog.classList.add(`editgrid-row-modal-confirmation-${this.id}`);\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        let dialogResult;\n        const promise = new Promise((resolve, reject) => {\n            dialogResult = { resolve, reject };\n        });\n        this.addEventListener(wrapper.refs.dialogYesButton, 'click', (event) => {\n            close(event);\n            dialogResult.resolve();\n        });\n        this.addEventListener(wrapper.refs.dialogCancelButton, 'click', (event) => {\n            close(event);\n            dialogResult.reject();\n        });\n        editRow.confirmationDialog = dialog;\n        return promise;\n    }\n    editRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        const isAlreadyEditing = editRow.state === EditRowState.Editing || editRow.state === EditRowState.New;\n        if (!editRow || isAlreadyEditing) {\n            return Promise.resolve();\n        }\n        editRow.prevState = editRow.state;\n        editRow.state = this.options.readOnly ? EditRowState.Viewing : EditRowState.Editing;\n        if (this.lazyLoad && (editRow.components.length === 0)) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex);\n        }\n        const dataSnapshot = (0, utils_1.fastCloneDeep)(editRow.data);\n        if (this.inlineEditMode) {\n            editRow.backup = dataSnapshot;\n        }\n        else {\n            editRow.backup = (0, utils_1.fastCloneDeep)(editRow.data);\n            editRow.data = dataSnapshot;\n            this.restoreRowContext(editRow);\n        }\n        this.emit('editGridEditRow', {\n            component: this.component,\n            row: editRow,\n            instance: this,\n        });\n        if (this.component.modal) {\n            return this.addRowModal(rowIndex);\n        }\n        return this.redraw();\n    }\n    clearErrors(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow && Array.isArray(editRow.components)) {\n            editRow.components.forEach((comp) => {\n                comp.setPristine(true);\n                comp.setCustomValidity('');\n            });\n        }\n    }\n    cancelRow(rowIndex) {\n        if (this.options.readOnly) {\n            return;\n        }\n        const editRow = this.editRows[rowIndex];\n        switch (editRow.state) {\n            case EditRowState.New: {\n                editRow.state = EditRowState.Removed;\n                this.clearErrors(rowIndex);\n                this.destroyComponents(false, rowIndex);\n                if (this.inlineEditMode) {\n                    this.splice(rowIndex);\n                }\n                this.editRows.splice(rowIndex, 1);\n                this.openWhenEmpty();\n                break;\n            }\n            case EditRowState.Editing: {\n                editRow.state = editRow.prevState;\n                if (this.inlineEditMode) {\n                    this.dataValue[rowIndex] = editRow.backup;\n                }\n                editRow.data = editRow.backup;\n                editRow.backup = null;\n                this.restoreRowContext(editRow);\n                this.clearErrors(rowIndex);\n                break;\n            }\n        }\n        this.emit('editGridCancelRow', {\n            instance: this,\n            component: this.component,\n            editRow,\n        });\n        this.checkValidity(null, true);\n        this.redraw();\n        if (this.component.rowDrafts) {\n            this.checkValidity(this.data, false);\n        }\n    }\n    saveRow(rowIndex, modified) {\n        var _a, _b;\n        const editRow = this.editRows[rowIndex];\n        if (this.options.readOnly) {\n            return;\n        }\n        // After an attempt to save, all the components inside the row should become not pristine\n        if (!this.component.rowDrafts) {\n            editRow.components.forEach((comp) => comp.setPristine(false));\n        }\n        const errors = this.validateRow(editRow, true);\n        if (!this.component.rowDrafts) {\n            if (errors.length) {\n                return false;\n            }\n        }\n        if (this.saveEditMode) {\n            const dataValue = this.dataValue;\n            if ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.component.typeChangeEnabled) {\n                this.root.focusedComponent = null;\n            }\n            switch (editRow.state) {\n                case EditRowState.New: {\n                    const newIndex = dataValue.length;\n                    dataValue.push(editRow.data);\n                    editRow.components.forEach(component => component.rowIndex = newIndex);\n                    if (rowIndex !== newIndex) {\n                        this.editRows.splice(rowIndex, 1);\n                        this.editRows.splice(newIndex, 0, editRow);\n                    }\n                    break;\n                }\n                case EditRowState.Editing: {\n                    dataValue[rowIndex] = editRow.data;\n                    break;\n                }\n            }\n        }\n        editRow.state = this.component.rowDrafts && errors.length ? EditRowState.Draft : EditRowState.Saved;\n        editRow.backup = null;\n        this.updateValue();\n        this.emit('editGridSaveRow', {\n            component: this.component,\n            row: editRow.data,\n            instance: this\n        });\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        if (this.component.rowDrafts) {\n            editRow.components.forEach(comp => comp.setPristine(this.pristine));\n        }\n        this.checkValidity(null, true);\n        this.redraw();\n        if (editRow.alerts) {\n            editRow.alerts = false;\n        }\n        return true;\n    }\n    beforeFocus(component) {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        const relativePath = this.getRelativePath(component.path);\n        const arrayPath = (0, utils_1.getArrayFromComponentPath)(relativePath);\n        const rowIndex = arrayPath[0];\n        let rowToEditIndex = arrayPath[0];\n        this.editRows.forEach((row, indexInArray) => {\n            if (row.rowIndex === rowIndex) {\n                rowToEditIndex = indexInArray;\n            }\n        });\n        if (lodash_1.default.isNumber(rowToEditIndex)) {\n            this.editRow(rowToEditIndex);\n        }\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.editRows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(row.components, rowIndex + index);\n        });\n    }\n    baseRemoveRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        editRow.state = EditRowState.Removed;\n        this.destroyComponents(false, rowIndex);\n        return editRow;\n    }\n    removeRow(rowIndex, modified) {\n        if (this.options.readOnly) {\n            return;\n        }\n        this.clearErrors(rowIndex);\n        this.baseRemoveRow(rowIndex);\n        this.splice(rowIndex);\n        this.emit('editGridDeleteRow', {\n            index: rowIndex\n        });\n        this.editRows.splice(rowIndex, 1);\n        this.openWhenEmpty();\n        this.updateRowsComponents(rowIndex);\n        this.updateValue();\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        this.checkValidity(null, true);\n        this.checkData();\n        this.redraw();\n    }\n    createRowComponents(row, rowIndex, recreatePartially) {\n        // Iterate through existing components and destroy the ones with the same rowIndex.\n        if (this.components) {\n            for (let i = 0; i < this.components.length; i++) {\n                if (this.components[i].rowIndex === rowIndex) {\n                    this.components[i].destroy();\n                    this.components.splice(i, 1);\n                }\n            }\n        }\n        const currentRowComponents = lodash_1.default.get(this.editRows, `[${rowIndex}].components`, null);\n        return this.component.components.map((col, colIndex) => {\n            var _a;\n            if (recreatePartially && currentRowComponents && this.variableTypeComponentsIndexes.length) {\n                const currentComp = currentRowComponents[colIndex];\n                const shouldRecreate = lodash_1.default.includes(this.variableTypeComponentsIndexes, colIndex) && (currentComp === null || currentComp === void 0 ? void 0 : currentComp.type) !== ((_a = currentComp === null || currentComp === void 0 ? void 0 : currentComp.component) === null || _a === void 0 ? void 0 : _a.type);\n                if (!shouldRecreate) {\n                    return currentComp;\n                }\n                col = currentComp.component;\n            }\n            const column = lodash_1.default.clone(col);\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            options.onChange = (flags = {}, changed, modified) => {\n                var _a, _b;\n                if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {\n                    changed.instance.root.triggerChange(flags, changed, modified);\n                }\n                else if (!this.component.modal) {\n                    this.triggerRootChange(flags, changed, modified);\n                }\n                if (this.inlineEditMode) {\n                    return;\n                }\n                const editRow = this.editRows[rowIndex];\n                if (editRow) {\n                    this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);\n                    this.validateRow(editRow, false);\n                }\n                if (this.variableTypeComponentsIndexes.length) {\n                    this.checkRowVariableTypeComponents(editRow, rowIndex);\n                    this.redraw();\n                }\n            };\n            const comp = this.createComponent(lodash_1.default.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);\n            comp.rowIndex = rowIndex;\n            comp.inEditGrid = true;\n            return comp;\n        });\n    }\n    hasOpenRows() {\n        return this.editRows.some(row => this.isOpen(row));\n    }\n    getAttachedData(data = null) {\n        const ourData = (0, utils_1.fastCloneDeep)(data || this._data || this.rootValue);\n        lodash_1.default.set(ourData, this.key, this.editRows.map((row) => row.data));\n        return ourData;\n    }\n    shouldValidateDraft(editRow) {\n        var _a, _b;\n        // Draft rows should be validated only when there was an attempt to submit a form\n        return (editRow.state === EditRowState.Draft &&\n            !this.pristine &&\n            !((_a = this.root) === null || _a === void 0 ? void 0 : _a.pristine) &&\n            !this.hasOpenRows()) ||\n            ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted);\n    }\n    shouldValidateRow(editRow, dirty) {\n        return this.shouldValidateDraft(editRow) ||\n            editRow.state === EditRowState.New ||\n            editRow.state === EditRowState.Editing ||\n            editRow.alerts ||\n            dirty;\n    }\n    validateRow(editRow, dirty, forceSilentCheck) {\n        var _a;\n        editRow.errors = [];\n        if (this.shouldValidateRow(editRow, dirty)) {\n            const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;\n            const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);\n            const editGridValue = lodash_1.default.get(rootValue, this.path, []);\n            editGridValue[editRow.rowIndex] = editRow.data;\n            lodash_1.default.set(rootValue, this.path, editGridValue);\n            const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });\n            editRow.errors = (0, process_1.processSync)({\n                components: (0, utils_1.fastCloneDeep)(this.component.components).map((component) => {\n                    component.parentPath = `${this.path}[${editRow.rowIndex}]`;\n                    return component;\n                }),\n                data: rootValue,\n                row: editRow.data,\n                process: 'validateRow',\n                instances: this.componentsMap,\n                scope: { errors: [] },\n                processors: [\n                    {\n                        process: validationProcessorProcess,\n                        processSync: validationProcessorProcess\n                    }\n                ]\n            }).errors;\n        }\n        // TODO: this is essentially running its own custom validation and should be moved into a validation rule\n        if (this.component.validate && this.component.validate.row) {\n            const valid = this.evaluate(this.component.validate.row, {\n                valid: (editRow.length === 0),\n                row: editRow.data\n            }, 'valid', true);\n            if (valid.toString() !== 'true') {\n                editRow.errors.push({\n                    type: 'error',\n                    rowError: true,\n                    message: valid.toString()\n                });\n            }\n            if (valid === null) {\n                editRow.errors.push({\n                    type: 'error',\n                    message: `Invalid row validation for ${this.key}`\n                });\n            }\n        }\n        if (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {\n            this.showRowErrorAlerts(editRow, editRow.errors);\n        }\n        return editRow.errors;\n    }\n    showRowErrorAlerts(editRow, errors) {\n        if (editRow.alerts) {\n            if (this.alert) {\n                if (errors.length) {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n                else {\n                    this.alert.clear();\n                    this.alert = null;\n                }\n            }\n        }\n    }\n    /**\n     * @returns {boolean} - Return that this component processes its own validation.\n     */\n    get processOwnValidation() {\n        return true;\n    }\n    checkComponentValidity(data, dirty, row, options = {}, errors = []) {\n        var _a, _b;\n        const { silentCheck } = options;\n        const superValid = super.checkComponentValidity(data, dirty, row, options, errors);\n        // If super tells us that component invalid and there is no need to update alerts, just return false\n        if (!superValid && (!this.alert && !this.hasOpenRows())) {\n            return false;\n        }\n        let rowsEditing = false;\n        const allRowErrors = [];\n        this.editRows.forEach((editRow, index) => {\n            // Trigger all errors on the row.\n            const rowErrors = this.validateRow(editRow, dirty, silentCheck);\n            errors.push(...rowErrors);\n            allRowErrors.push(...rowErrors);\n            if (this.rowRefs) {\n                const rowContainer = this.rowRefs[index];\n                if (rowContainer) {\n                    const errorContainer = rowContainer.querySelector('.editgrid-row-error');\n                    if (rowErrors.length && errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n                        const rowError = rowErrors.find(error => error.rowError);\n                        this.addClass(errorContainer, 'help-block');\n                        errorContainer.textContent = this.t(rowError ? rowError.message : this.errorMessage('invalidRowError'));\n                    }\n                    else if (errorContainer) {\n                        errorContainer.textContent = '';\n                    }\n                }\n            }\n            // If this is a dirty check, and any rows are still editing, we need to throw validation error.\n            rowsEditing |= (dirty && this.isOpen(editRow));\n        });\n        if (allRowErrors.length) {\n            if (!silentCheck && (dirty || this.dirty) && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {\n                this.setCustomValidity(this.t(this.errorMessage('invalidRowsError')), dirty);\n                this.removeClass(this.element, 'has-error');\n            }\n            return false;\n        }\n        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {\n            this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);\n            errors.push(...this._errors);\n            return false;\n        }\n        const message = this.invalid || this.invalidMessage(data, dirty, false, row);\n        if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n            this.root.showErrors([message]);\n        }\n        else {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n        }\n        return superValid;\n    }\n    setRowInvalid(ref, index) {\n        const editRow = this.editRows[index];\n        const errorContainer = ref.querySelector('.editgrid-row-error');\n        if (errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n            this.addClass(errorContainer, 'help-block');\n            errorContainer.textContent = this.t(this.errorMessage('invalidRowError'));\n        }\n        else if (errorContainer) {\n            errorContainer.textContent = '';\n        }\n    }\n    changeState(changed, flags) {\n        if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {\n            this.rebuild();\n        }\n        else {\n            this.redraw();\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            value = this.defaultValue;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                return false;\n            }\n        }\n        const changed = this.hasChanged(value, this.dataValue);\n        if (this.parent && !this.options.server) {\n            this.parent.checkComponentConditions();\n        }\n        this.dataValue = value;\n        // Refresh editRow data when data changes.\n        this.dataValue.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow) {\n                editRow.data = row;\n                this.restoreRowContext(editRow, flags);\n                editRow.state = EditRowState.Saved;\n                editRow.backup = null;\n                editRow.errors = [];\n            }\n            else {\n                this.editRows[rowIndex] = {\n                    components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                    data: row,\n                    state: EditRowState.Saved,\n                    backup: null,\n                    errors: [],\n                };\n            }\n        });\n        let { length: dataLength } = this.dataValue;\n        // If the last row is a new row, then do not remove it.\n        if (this.editRows[dataLength] && (this.editRows[dataLength].state === EditRowState.New)) {\n            dataLength = (dataLength + 1);\n        }\n        this.editRows.slice(dataLength).forEach((editRow, index) => this.baseRemoveRow(dataLength + index));\n        this.editRows = this.editRows.slice(0, dataLength);\n        this.openWhenEmpty();\n        this.updateOnChange(flags, changed);\n        // do not call checkData with server option, it is called when change is triggered in updateOnChange\n        if (!this.options.server) {\n            this.checkData();\n        }\n        this.changeState(changed, flags);\n        return changed;\n    }\n    openWhenEmpty() {\n        const shouldBeOpened = !this.dataValue.length && this.component.openWhenEmpty;\n        const hasNoRows = !this.editRows.length;\n        if (hasNoRows && shouldBeOpened && !this.builderMode) {\n            const dataObj = {};\n            this.createRow(dataObj, 0);\n        }\n    }\n    restoreRowContext(editRow, flags = {}) {\n        editRow.components.forEach((component) => {\n            component.data = editRow.data;\n            this.setNestedValue(component, editRow.data, flags);\n        });\n    }\n    emptyRows() {\n        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));\n        this.editRows = [];\n    }\n    resetValue() {\n        super.resetValue();\n        this.emptyRows();\n    }\n}\nexports[\"default\"] = EditGridComponent;\nEditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/editgrid/EditGrid.js?");
 
 /***/ }),
 
@@ -6654,7 +6654,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 text_mask_addons_1 = __webpack_require__(/*! @formio/text-mask-addons */ \"./node_modules/@formio/text-mask-addons/dist/textMaskAddons.js\");\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass NumberComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'number',\n            label: 'Number',\n            key: 'number',\n            validate: {\n                min: '',\n                max: '',\n                step: 'any',\n                integer: ''\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Number',\n            icon: 'hashtag',\n            group: 'basic',\n            documentation: '/userguide/form-building/form-components#number',\n            weight: 30,\n            schema: NumberComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return NumberComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'number' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.number];\n    }\n    constructor(...args) {\n        var _a, _b, _c;\n        super(...args);\n        const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);\n        this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator\n            || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator)\n            || separators.decimalSeparator;\n        if (this.component.delimiter) {\n            this.delimiter = this.component.thousandsSeparator || ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;\n        }\n        else {\n            if (this.component.thousandsSeparator || ((_c = this.options.properties) === null || _c === void 0 ? void 0 : _c.thousandsSeparator) || this.options.thousandsSeparator) {\n                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');\n            }\n            this.delimiter = '';\n        }\n        const requireDecimal = lodash_1.default.get(this.component, 'requireDecimal', false);\n        this.decimalLimit = (0, utils_1.getNumberDecimalLimit)(this.component, requireDecimal ? 2 : 20);\n        // Currencies to override BrowserLanguage Config. Object key {}\n        if (lodash_1.default.has(this.options, `languageOverride.${this.options.language}`)) {\n            const override = lodash_1.default.get(this.options, `languageOverride.${this.options.language}`);\n            this.decimalSeparator = override.decimalSeparator;\n            this.delimiter = override.delimiter;\n        }\n        this.numberMask = this.createNumberMask();\n    }\n    /**\n     * Creates the number mask for normal numbers.\n     * @returns {*} - The number mask.\n     */\n    createNumberMask() {\n        return (0, text_mask_addons_1.createNumberMask)({\n            prefix: '',\n            suffix: '',\n            requireDecimal: lodash_1.default.get(this.component, 'requireDecimal', false),\n            thousandsSeparatorSymbol: this.delimiter || '',\n            decimalSymbol: lodash_1.default.get(this.component, 'decimalSymbol', this.decimalSeparator),\n            decimalLimit: lodash_1.default.get(this.component, 'decimalLimit', this.decimalLimit),\n            allowNegative: lodash_1.default.get(this.component, 'allowNegative', true),\n            allowDecimal: this.isDecimalAllowed(),\n        });\n    }\n    get defaultSchema() {\n        return NumberComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultValue === 0) {\n            defaultValue = this.component.defaultValue;\n        }\n        if (!this.component.multiple && lodash_1.default.isArray(defaultValue)) {\n            defaultValue = !defaultValue[0] && defaultValue[0] !== 0 ? null : defaultValue[0];\n        }\n        return defaultValue;\n    }\n    isDecimalAllowed() {\n        return lodash_1.default.get(this.component, 'allowDecimal', !(this.component.validate && this.component.validate.integer));\n    }\n    parseNumber(value) {\n        // Remove delimiters and convert decimal separator to dot.\n        value = value.split(this.delimiter).join('').replace(this.decimalSeparator, '.');\n        if (this.component.validate && this.component.validate.integer) {\n            return parseInt(value, 10);\n        }\n        else {\n            return parseFloat(value);\n        }\n    }\n    setInputMask(input) {\n        let numberPattern = '[0-9';\n        numberPattern += this.decimalSeparator || '';\n        numberPattern += this.delimiter || '';\n        numberPattern += ']*';\n        input.setAttribute('pattern', numberPattern);\n        input.mask = (0, vanilla_text_mask_1.maskInput)({\n            inputElement: input,\n            mask: this.numberMask,\n            shadowRoot: this.root ? this.root.shadowRoot : null,\n        });\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        if (this.component.mask) {\n            info.attr.type = 'password';\n        }\n        else {\n            info.attr.type = 'text';\n        }\n        info.attr.inputmode = this.isDecimalAllowed() ? 'decimal' : 'numeric';\n        info.changeEvent = 'input';\n        return info;\n    }\n    getValueAt(index) {\n        if (!this.refs.input.length || !this.refs.input[index]) {\n            return null;\n        }\n        const val = this.refs.input[index].value;\n        return val && val !== '-_' ? this.parseNumber(val) : null;\n    }\n    setValueAt(index, value, flags = {}) {\n        return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);\n    }\n    /**\n     * Converts a string to a floating point number, formats the number based on the parsed float function\n     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the\n     * formatted number back as a string\n     * Example Input: \"123.456,22\"\n     * Example Output: \"123456,22\"\n     * @param {string | number} input the numeric string to parse\n     * @returns {string | null} a parsed string\n     */\n    parseValue(input) {\n        if (typeof input === 'string') {\n            input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');\n        }\n        let value = parseFloat(input);\n        if (!lodash_1.default.isNaN(value)) {\n            value = String(value).replace('.', this.decimalSeparator);\n        }\n        else {\n            value = null;\n        }\n        return value;\n    }\n    formatValue(value) {\n        if (this.component.requireDecimal && value && !value.includes(this.decimalSeparator)) {\n            return `${value}${this.decimalSeparator}${lodash_1.default.repeat('0', this.decimalLimit)}`;\n        }\n        else if (this.component.requireDecimal && value && value.includes(this.decimalSeparator)) {\n            return `${value}${lodash_1.default.repeat('0', this.decimalLimit - value.split(this.decimalSeparator)[1].length)}`;\n        }\n        return value;\n    }\n    focus() {\n        const input = this.refs.input[0];\n        if (input) {\n            super.focus.call(this);\n            input.setSelectionRange(0, input.value.length);\n        }\n    }\n    getMaskedValue(value) {\n        value = value === null ? '0' : value.toString();\n        if (value.includes('.') && '.' !== this.decimalSeparator) {\n            value = value.replace('.', this.decimalSeparator);\n        }\n        return (0, vanilla_text_mask_1.conformToMask)(this.formatValue(value), this.numberMask).conformedValue;\n    }\n    getValueAsString(value, options) {\n        if (!value && value !== 0) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.map((val) => this.getMaskedValue(val)).join(', ');\n        }\n        return this.getMaskedValue(value);\n    }\n    addFocusBlurEvents(element) {\n        super.addFocusBlurEvents(element);\n        this.addEventListener(element, 'blur', () => {\n            element.value = this.getValueAsString(this.formatValue(this.parseValue(element.value)));\n        });\n    }\n}\nexports[\"default\"] = NumberComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/number/Number.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 text_mask_addons_1 = __webpack_require__(/*! @formio/text-mask-addons */ \"./node_modules/@formio/text-mask-addons/dist/textMaskAddons.js\");\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass NumberComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'number',\n            label: 'Number',\n            key: 'number',\n            validate: {\n                min: '',\n                max: '',\n                step: 'any',\n                integer: ''\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Number',\n            icon: 'hashtag',\n            group: 'basic',\n            documentation: '/userguide/form-building/form-components#number',\n            weight: 30,\n            schema: NumberComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return NumberComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'number' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.number];\n    }\n    constructor(...args) {\n        var _a, _b, _c;\n        super(...args);\n        const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);\n        this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator\n            || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator)\n            || separators.decimalSeparator;\n        if (this.component.delimiter) {\n            this.delimiter = this.component.thousandsSeparator || ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;\n        }\n        else {\n            if (this.component.thousandsSeparator || ((_c = this.options.properties) === null || _c === void 0 ? void 0 : _c.thousandsSeparator) || this.options.thousandsSeparator) {\n                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');\n            }\n            this.delimiter = '';\n        }\n        const requireDecimal = lodash_1.default.get(this.component, 'requireDecimal', false);\n        this.decimalLimit = (0, utils_1.getNumberDecimalLimit)(this.component, requireDecimal ? 2 : 20);\n        // Currencies to override BrowserLanguage Config. Object key {}\n        if (lodash_1.default.has(this.options, `languageOverride.${this.options.language}`)) {\n            const override = lodash_1.default.get(this.options, `languageOverride.${this.options.language}`);\n            this.decimalSeparator = override.decimalSeparator;\n            this.delimiter = override.delimiter;\n        }\n        this.numberMask = this.createNumberMask();\n    }\n    /**\n     * Creates the number mask for normal numbers.\n     * @returns {*} - The number mask.\n     */\n    createNumberMask() {\n        return (0, text_mask_addons_1.createNumberMask)({\n            prefix: '',\n            suffix: '',\n            requireDecimal: lodash_1.default.get(this.component, 'requireDecimal', false),\n            thousandsSeparatorSymbol: this.delimiter || '',\n            decimalSymbol: lodash_1.default.get(this.component, 'decimalSymbol', this.decimalSeparator),\n            decimalLimit: lodash_1.default.get(this.component, 'decimalLimit', this.decimalLimit),\n            allowNegative: lodash_1.default.get(this.component, 'allowNegative', true),\n            allowDecimal: this.isDecimalAllowed(),\n        });\n    }\n    get defaultSchema() {\n        return NumberComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (typeof defaultValue === 'string') {\n            // Default value may be a string or have custom thousands separators or decimal symbols, so we need to call\n            // parseNumber on it\n            defaultValue = this.parseNumber(defaultValue);\n        }\n        if (!defaultValue && this.component.defaultValue === 0) {\n            defaultValue = this.component.defaultValue;\n        }\n        if (!this.component.multiple && lodash_1.default.isArray(defaultValue)) {\n            defaultValue = !defaultValue[0] && defaultValue[0] !== 0 ? null : defaultValue[0];\n        }\n        return defaultValue;\n    }\n    isDecimalAllowed() {\n        return lodash_1.default.get(this.component, 'allowDecimal', !(this.component.validate && this.component.validate.integer));\n    }\n    /**\n     * parses a numeric string by removing the delimiters and replacing the decimal separator back to '.' so that it can\n     * be processed by either parseInt or parseFloat\n     * @param {string} value the value to be parsed\n     * @returns {number} a parsed number\n     */\n    parseNumber(value) {\n        // Remove delimiters and convert decimal separator to dot.\n        value = value.split(this.delimiter).join('').replace(this.decimalSeparator, '.');\n        if (this.component.validate && this.component.validate.integer) {\n            return parseInt(value, 10);\n        }\n        else {\n            return parseFloat(value);\n        }\n    }\n    setInputMask(input) {\n        let numberPattern = '[0-9';\n        numberPattern += this.decimalSeparator || '';\n        numberPattern += this.delimiter || '';\n        numberPattern += ']*';\n        input.setAttribute('pattern', numberPattern);\n        input.mask = (0, vanilla_text_mask_1.maskInput)({\n            inputElement: input,\n            mask: this.numberMask,\n            shadowRoot: this.root ? this.root.shadowRoot : null,\n        });\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        if (this.component.mask) {\n            info.attr.type = 'password';\n        }\n        else {\n            info.attr.type = 'text';\n        }\n        info.attr.inputmode = this.isDecimalAllowed() ? 'decimal' : 'numeric';\n        info.changeEvent = 'input';\n        return info;\n    }\n    getValueAt(index) {\n        if (!this.refs.input.length || !this.refs.input[index]) {\n            return null;\n        }\n        const val = this.refs.input[index].value;\n        return val && val !== '-_' ? this.parseNumber(val) : null;\n    }\n    setValueAt(index, value, flags = {}) {\n        return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);\n    }\n    /**\n     * Converts a string to a floating point number, formats the number based on the parsed float function\n     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the\n     * formatted number back as a string\n     * Example Input: \"123.456,22\"\n     * Example Output: \"123456,22\"\n     * @param {string | number} input the numeric string to parse\n     * @returns {string | null} a parsed string\n     */\n    parseValue(input) {\n        if (typeof input === 'string') {\n            input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');\n        }\n        let value = parseFloat(input);\n        if (!lodash_1.default.isNaN(value)) {\n            value = String(value).replace('.', this.decimalSeparator);\n        }\n        else {\n            value = null;\n        }\n        return value;\n    }\n    formatValue(value) {\n        if (this.component.requireDecimal && value && !value.includes(this.decimalSeparator)) {\n            return `${value}${this.decimalSeparator}${lodash_1.default.repeat('0', this.decimalLimit)}`;\n        }\n        else if (this.component.requireDecimal && value && value.includes(this.decimalSeparator)) {\n            return `${value}${lodash_1.default.repeat('0', this.decimalLimit - value.split(this.decimalSeparator)[1].length)}`;\n        }\n        return value;\n    }\n    focus() {\n        const input = this.refs.input[0];\n        if (input) {\n            super.focus.call(this);\n            input.setSelectionRange(0, input.value.length);\n        }\n    }\n    getMaskedValue(value) {\n        value = value === null ? '0' : value.toString();\n        if (value.includes('.') && '.' !== this.decimalSeparator) {\n            value = value.replace('.', this.decimalSeparator);\n        }\n        return (0, vanilla_text_mask_1.conformToMask)(this.formatValue(value), this.numberMask).conformedValue;\n    }\n    getValueAsString(value, options) {\n        if (!value && value !== 0) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.map((val) => this.getMaskedValue(val)).join(', ');\n        }\n        return this.getMaskedValue(value);\n    }\n    addFocusBlurEvents(element) {\n        super.addFocusBlurEvents(element);\n        this.addEventListener(element, 'blur', () => {\n            element.value = this.getValueAsString(this.formatValue(this.parseValue(element.value)));\n        });\n    }\n}\nexports[\"default\"] = NumberComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/number/Number.js?");
 
 /***/ }),
 
@@ -6709,7 +6709,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 NestedComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass PanelComponent extends NestedComponent_1.default {\n    static schema(...extend) {\n        return NestedComponent_1.default.schema({\n            label: 'Panel',\n            type: 'panel',\n            key: 'panel',\n            title: 'Panel',\n            theme: 'default',\n            breadcrumb: 'default',\n            components: [],\n            clearOnHide: false,\n            input: false,\n            tableView: false,\n            persistent: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Panel',\n            icon: 'list-alt',\n            group: 'layout',\n            documentation: '/userguide/form-building/layout-components#panel',\n            weight: 30,\n            schema: PanelComponent.schema()\n        };\n    }\n    get defaultSchema() {\n        return PanelComponent.schema();\n    }\n    get templateName() {\n        return 'panel';\n    }\n    static savedValueTypes() {\n        return [];\n    }\n    constructor(...args) {\n        super(...args);\n        this.noField = true;\n        this.on('componentError', (err) => {\n            //change collapsed value only when the panel is collapsed to avoid additional redrawing that prevents validation messages\n            if ((0, utils_1.isChildOf)(err.instance, this) && this.collapsed) {\n                this.collapsed = false;\n            }\n        });\n    }\n}\nexports[\"default\"] = PanelComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/panel/Panel.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 NestedComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass PanelComponent extends NestedComponent_1.default {\n    static schema(...extend) {\n        return NestedComponent_1.default.schema({\n            label: 'Panel',\n            type: 'panel',\n            key: 'panel',\n            title: 'Panel',\n            theme: 'default',\n            breadcrumb: 'default',\n            components: [],\n            clearOnHide: false,\n            input: false,\n            tableView: false,\n            persistent: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Panel',\n            icon: 'list-alt',\n            group: 'layout',\n            documentation: '/userguide/form-building/layout-components#panel',\n            showPreview: false,\n            weight: 30,\n            schema: PanelComponent.schema()\n        };\n    }\n    get defaultSchema() {\n        return PanelComponent.schema();\n    }\n    get templateName() {\n        return 'panel';\n    }\n    static savedValueTypes() {\n        return [];\n    }\n    constructor(...args) {\n        super(...args);\n        this.noField = true;\n        this.on('componentError', (err) => {\n            //change collapsed value only when the panel is collapsed to avoid additional redrawing that prevents validation messages\n            if ((0, utils_1.isChildOf)(err.instance, this) && this.collapsed) {\n                this.collapsed = false;\n            }\n        });\n    }\n}\nexports[\"default\"] = PanelComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/panel/Panel.js?");
 
 /***/ }),
 
@@ -6841,7 +6841,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 ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass RadioComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'radio',\n            inputType: 'radio',\n            label: 'Radio',\n            key: 'radio',\n            values: [{ label: '', value: '' }],\n            data: {\n                url: '',\n            },\n            fieldSet: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Radio',\n            group: 'basic',\n            icon: 'dot-circle-o',\n            weight: 80,\n            documentation: '/userguide/form-building/form-components#radio',\n            schema: RadioComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                return {\n                    type: 'select',\n                    dataSrc: 'custom',\n                    valueProperty: 'value',\n                    dataType: classComp.dataType || '',\n                    data: {\n                        custom() {\n                            return classComp.values;\n                        }\n                    },\n                };\n            } });\n    }\n    static get serverConditionSettings() {\n        return Object.assign(Object.assign({}, super.serverConditionSettings), { valueComponent(classComp) {\n                return {\n                    type: 'select',\n                    dataSrc: 'custom',\n                    valueProperty: 'value',\n                    dataType: classComp.dataType || '',\n                    data: {\n                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,\n                    },\n                };\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.previousValue = this.dataValue || null;\n    }\n    get defaultSchema() {\n        return RadioComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultValue === false) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get inputInfo() {\n        var _a;\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.changeEvent = 'click';\n        info.attr.class = 'form-check-input';\n        info.attr.name = info.attr.name += `[${(_a = this.root) === null || _a === void 0 ? void 0 : _a.id}-${this.id}]`;\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get isRadio() {\n        return this.component.inputType === 'radio';\n    }\n    get optionSelectedClass() {\n        return 'radio-selected';\n    }\n    get listData() {\n        const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});\n        return lodash_1.default.get(listData, this.path);\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.//\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.optionsLoaded = false;\n        this.loadedOptions = [];\n        // Get the template keys for this radio component.\n        this.getTemplateKeys();\n    }\n    render() {\n        return super.render(this.renderTemplate('radio', {\n            input: this.inputInfo,\n            inline: this.component.inline,\n            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,\n            value: this.dataValue,\n            row: this.row,\n        }));\n    }\n    attach(element) {\n        this.loadRefs(element, { input: 'multiple', wrapper: 'multiple' });\n        this.refs.input.forEach((input, index) => {\n            this.addEventListener(input, this.inputInfo.changeEvent, () => {\n                this.updateValue(null, {\n                    modified: true,\n                });\n            });\n            if (this.component.values[index]) {\n                this.addShortcut(input, this.component.values[index].shortcut);\n            }\n            if (this.isRadio) {\n                let dataValue = this.dataValue;\n                if (!lodash_1.default.isString(this.dataValue)) {\n                    dataValue = lodash_1.default.toString(this.dataValue);\n                }\n                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {\n                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;\n                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);\n                }\n                else {\n                    input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));\n                }\n                this.addEventListener(input, 'keyup', (event) => {\n                    if (event.key === ' ' && dataValue === input.value) {\n                        event.preventDefault();\n                        this.updateValue(null, {\n                            modified: true,\n                        });\n                    }\n                });\n            }\n        });\n        this.triggerUpdate();\n        this.setSelectedClasses();\n        return super.attach(element);\n    }\n    detach(element) {\n        if (element && this.refs.input) {\n            this.refs.input.forEach((input, index) => {\n                if (this.component.values[index]) {\n                    this.removeShortcut(input, this.component.values[index].shortcut);\n                }\n            });\n        }\n        super.detach();\n    }\n    getValue() {\n        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        // If the input type of the component is checkbox the value should be determined by the checkboxes checked property\n        let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;\n        this.refs.input.forEach((input, index) => {\n            if (input.checked) {\n                value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?\n                    this.loadedOptions[index].value :\n                    input.value;\n            }\n        });\n        return value;\n    }\n    validateValueProperty() {\n        if (this.component.dataSrc === 'values') {\n            return true;\n        }\n        return !lodash_1.default.some(this.refs.wrapper, (wrapper, index) => this.refs.input[index].checked && this.loadedOptions[index].invalid);\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.values;\n        if (values) {\n            return values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    getValueAsString(value, options = {}) {\n        if (lodash_1.default.isObject(value)) {\n            value = JSON.stringify(value);\n        }\n        else if (!lodash_1.default.isString(value)) {\n            value = lodash_1.default.toString(value);\n        }\n        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';\n        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {\n            return value;\n        }\n        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;\n        const option = lodash_1.default.find(values, (v) => v.value === value);\n        if (!value) {\n            return lodash_1.default.get(option, 'label', '');\n        }\n        return lodash_1.default.get(option, 'label', '');\n    }\n    setValueAt(index, value) {\n        if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {\n            const inputValue = this.refs.input[index].value;\n            this.refs.input[index].checked = (inputValue === value.toString());\n        }\n    }\n    loadItems(url, search, headers, options, method, body) {\n        if (this.optionsLoaded) {\n            return;\n        }\n        if (!this.shouldLoad && this.listData) {\n            this.loadItemsFromMetadata();\n            return;\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response);\n            this.optionsLoaded = true;\n            this.redraw();\n        })\n            .catch((err) => {\n            this.handleLoadingError(err);\n        });\n    }\n    loadItemsFromMetadata() {\n        this.listData.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                label: this.itemTemplate(item)\n            };\n            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n                this.loadedOptions[i].value = this.dataValue;\n            }\n        });\n        this.optionsLoaded = true;\n        this.redraw();\n    }\n    setItems(items) {\n        const listData = [];\n        items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                value: this.component.valueProperty ? item[this.component.valueProperty] : item,\n                label: this.component.valueProperty ? this.itemTemplate(item, item[this.component.valueProperty]) : this.itemTemplate(item, item, i)\n            };\n            listData.push(this.templateData[this.component.valueProperty ? item[this.component.valueProperty] : i]);\n            if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(item[this.component.valueProperty]) ||\n                (!this.isRadio && lodash_1.default.isObject(item[this.component.valueProperty])) ||\n                (!this.isRadio && lodash_1.default.isBoolean(item[this.component.valueProperty])))) {\n                this.loadedOptions[i].invalid = true;\n            }\n        });\n        if (this.isSelectURL) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.listData) {\n                submission.metadata.listData = {};\n            }\n            lodash_1.default.set(submission.metadata.listData, this.path, listData);\n        }\n    }\n    setSelectedClasses() {\n        if (this.refs.wrapper) {\n            //add/remove selected option class\n            const value = this.dataValue;\n            this.refs.wrapper.forEach((wrapper, index) => {\n                const input = this.refs.input[index];\n                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());\n                if (checked) {\n                    //add class to container when selected\n                    this.addClass(wrapper, this.optionSelectedClass);\n                    //change \"checked\" attribute\n                    input.setAttribute('checked', 'true');\n                }\n                else {\n                    this.removeClass(wrapper, this.optionSelectedClass);\n                    input.removeAttribute('checked');\n                }\n            });\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed) {\n            this.setSelectedClasses();\n        }\n        if (!flags || !flags.modified || !this.isRadio) {\n            if (changed) {\n                this.previousValue = this.dataValue;\n            }\n            return changed;\n        }\n        // If they clicked on the radio that is currently selected, it needs to reset the value.\n        this.currentValue = this.dataValue;\n        const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;\n        if (shouldResetValue) {\n            this.resetValue();\n            this.triggerChange(flags);\n            this.setSelectedClasses();\n        }\n        this.previousValue = this.dataValue;\n        return changed;\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        const dataType = this.component.dataType || 'auto';\n        if (value === this.emptyValue) {\n            return value;\n        }\n        switch (dataType) {\n            case 'auto':\n                if (!isNaN(parseFloat(value)) && isFinite(value) && lodash_1.default.toString(value) === Number(value).toString()) {\n                    value = +value;\n                }\n                if (value === 'true') {\n                    value = true;\n                }\n                if (value === 'false') {\n                    value = false;\n                }\n                break;\n            case 'number':\n                value = +value;\n                break;\n            case 'string':\n                if (typeof value === 'object') {\n                    value = JSON.stringify(value);\n                }\n                else {\n                    value = String(value);\n                }\n                break;\n            case 'boolean':\n                value = !(!value || value.toString() === 'false');\n                break;\n        }\n        if (this.isSelectURL && this.templateData && this.templateData[value]) {\n            const submission = this.root.submission;\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);\n        }\n        return super.normalizeValue(value);\n    }\n}\nexports[\"default\"] = RadioComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/radio/Radio.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass RadioComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'radio',\n            inputType: 'radio',\n            label: 'Radio',\n            key: 'radio',\n            values: [{ label: '', value: '' }],\n            data: {\n                url: '',\n            },\n            fieldSet: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Radio',\n            group: 'basic',\n            icon: 'dot-circle-o',\n            weight: 80,\n            documentation: '/userguide/form-building/form-components#radio',\n            schema: RadioComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                return {\n                    type: 'select',\n                    dataSrc: 'custom',\n                    valueProperty: 'value',\n                    dataType: classComp.dataType || '',\n                    data: {\n                        custom() {\n                            return classComp.values;\n                        }\n                    },\n                };\n            } });\n    }\n    static get serverConditionSettings() {\n        return Object.assign(Object.assign({}, super.serverConditionSettings), { valueComponent(classComp) {\n                return {\n                    type: 'select',\n                    dataSrc: 'custom',\n                    valueProperty: 'value',\n                    dataType: classComp.dataType || '',\n                    data: {\n                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,\n                    },\n                };\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.previousValue = this.dataValue || null;\n    }\n    get defaultSchema() {\n        return RadioComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultValue === false) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get inputInfo() {\n        var _a;\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.changeEvent = 'click';\n        info.attr.class = 'form-check-input';\n        info.attr.name = info.attr.name += `[${(_a = this.root) === null || _a === void 0 ? void 0 : _a.id}-${this.id}]`;\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get isRadio() {\n        return this.component.inputType === 'radio';\n    }\n    get optionSelectedClass() {\n        return 'radio-selected';\n    }\n    get listData() {\n        const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});\n        return lodash_1.default.get(listData, this.path);\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.//\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.optionsLoaded = false;\n        this.loadedOptions = [];\n        // Get the template keys for this radio component.\n        this.getTemplateKeys();\n    }\n    render() {\n        return super.render(this.renderTemplate('radio', {\n            input: this.inputInfo,\n            inline: this.component.inline,\n            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,\n            value: this.dataValue,\n            row: this.row,\n        }));\n    }\n    attach(element) {\n        this.loadRefs(element, { input: 'multiple', wrapper: 'multiple' });\n        this.refs.input.forEach((input, index) => {\n            this.addEventListener(input, this.inputInfo.changeEvent, () => {\n                this.updateValue(null, {\n                    modified: true,\n                });\n            });\n            if (this.component.values[index]) {\n                this.addShortcut(input, this.component.values[index].shortcut);\n            }\n            if (this.isRadio) {\n                let dataValue = this.dataValue;\n                if (!lodash_1.default.isString(this.dataValue)) {\n                    dataValue = lodash_1.default.toString(this.dataValue);\n                }\n                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {\n                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;\n                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);\n                }\n                else {\n                    input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));\n                }\n                this.addEventListener(input, 'keyup', (event) => {\n                    if (event.key === ' ' && dataValue === input.value) {\n                        event.preventDefault();\n                        this.updateValue(null, {\n                            modified: true,\n                        });\n                    }\n                });\n            }\n        });\n        this.triggerUpdate();\n        this.setSelectedClasses();\n        return super.attach(element);\n    }\n    detach(element) {\n        if (element && this.refs.input) {\n            this.refs.input.forEach((input, index) => {\n                if (this.component.values[index]) {\n                    this.removeShortcut(input, this.component.values[index].shortcut);\n                }\n            });\n        }\n        super.detach();\n    }\n    getValue() {\n        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        // If the input type of the component is checkbox the value should be determined by the checkboxes checked property\n        let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;\n        this.refs.input.forEach((input, index) => {\n            if (input.checked) {\n                value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?\n                    this.loadedOptions[index].value :\n                    input.value;\n            }\n        });\n        return value;\n    }\n    validateValueProperty() {\n        if (this.component.dataSrc === 'values') {\n            return true;\n        }\n        return !lodash_1.default.some(this.refs.wrapper, (wrapper, index) => this.refs.input[index].checked && this.loadedOptions[index].invalid);\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.values;\n        if (values) {\n            return values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    getValueAsString(value, options = {}) {\n        if (lodash_1.default.isObject(value)) {\n            value = JSON.stringify(value);\n        }\n        else if (!lodash_1.default.isString(value)) {\n            value = lodash_1.default.toString(value);\n        }\n        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';\n        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {\n            return value;\n        }\n        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;\n        const option = lodash_1.default.find(values, (v) => v.value === value);\n        if (!value) {\n            return lodash_1.default.get(option, 'label', '');\n        }\n        return lodash_1.default.get(option, 'label', '');\n    }\n    setValueAt(index, value) {\n        if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {\n            const inputValue = this.refs.input[index].value;\n            this.refs.input[index].checked = (inputValue === value.toString());\n        }\n    }\n    loadItems(url, search, headers, options, method, body) {\n        if (this.optionsLoaded) {\n            return;\n        }\n        if (!this.shouldLoad && this.listData) {\n            this.loadItemsFromMetadata();\n            return;\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        // Allow for url interpolation.\n        url = this.sanitize(this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        }), this.shouldSanitizeValue);\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response);\n            this.optionsLoaded = true;\n            this.redraw();\n        })\n            .catch((err) => {\n            this.handleLoadingError(err);\n        });\n    }\n    loadItemsFromMetadata() {\n        this.listData.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                label: this.itemTemplate(item)\n            };\n            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n                this.loadedOptions[i].value = this.dataValue;\n            }\n        });\n        this.optionsLoaded = true;\n        this.redraw();\n    }\n    setItems(items) {\n        const listData = [];\n        items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n            const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);\n            this.loadedOptions[i] = {\n                value: this.component.valueProperty ? valueAtProperty : item,\n                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)\n            };\n            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);\n            if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(valueAtProperty) ||\n                (!this.isRadio && lodash_1.default.isObject(valueAtProperty)) ||\n                (!this.isRadio && lodash_1.default.isBoolean(valueAtProperty)))) {\n                this.loadedOptions[i].invalid = true;\n            }\n        });\n        if (this.isSelectURL) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.listData) {\n                submission.metadata.listData = {};\n            }\n            lodash_1.default.set(submission.metadata.listData, this.path, listData);\n        }\n    }\n    setSelectedClasses() {\n        if (this.refs.wrapper) {\n            //add/remove selected option class\n            const value = this.dataValue;\n            this.refs.wrapper.forEach((wrapper, index) => {\n                const input = this.refs.input[index];\n                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());\n                if (checked) {\n                    //add class to container when selected\n                    this.addClass(wrapper, this.optionSelectedClass);\n                    //change \"checked\" attribute\n                    input.setAttribute('checked', 'true');\n                }\n                else {\n                    this.removeClass(wrapper, this.optionSelectedClass);\n                    input.removeAttribute('checked');\n                }\n            });\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed) {\n            this.setSelectedClasses();\n        }\n        if (!flags || !flags.modified || !this.isRadio) {\n            if (changed) {\n                this.previousValue = this.dataValue;\n            }\n            return changed;\n        }\n        // If they clicked on the radio that is currently selected, it needs to reset the value.\n        this.currentValue = this.dataValue;\n        const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;\n        if (shouldResetValue) {\n            this.resetValue();\n            this.triggerChange(flags);\n            this.setSelectedClasses();\n        }\n        this.previousValue = this.dataValue;\n        return changed;\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        const dataType = this.component.dataType || 'auto';\n        if (value === this.emptyValue) {\n            return value;\n        }\n        switch (dataType) {\n            case 'auto':\n                if (!isNaN(parseFloat(value)) && isFinite(value) && lodash_1.default.toString(value) === Number(value).toString()) {\n                    value = +value;\n                }\n                if (value === 'true') {\n                    value = true;\n                }\n                if (value === 'false') {\n                    value = false;\n                }\n                break;\n            case 'number':\n                value = +value;\n                break;\n            case 'string':\n                if (typeof value === 'object') {\n                    value = JSON.stringify(value);\n                }\n                else {\n                    value = String(value);\n                }\n                break;\n            case 'boolean':\n                value = !(!value || value.toString() === 'false');\n                break;\n        }\n        if (this.isSelectURL && this.templateData && this.templateData[value]) {\n            const submission = this.root.submission;\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);\n        }\n        return super.normalizeValue(value);\n    }\n}\nexports[\"default\"] = RadioComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/radio/Radio.js?");
 
 /***/ }),
 
@@ -6929,7 +6929,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 Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst ChoicesWrapper_1 = __importDefault(__webpack_require__(/*! ../../utils/ChoicesWrapper */ \"./lib/cjs/utils/ChoicesWrapper.js\"));\nclass SelectComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'select',\n            label: 'Select',\n            key: 'select',\n            idPath: 'id',\n            data: {\n                values: [{ label: '', value: '' }],\n                json: '',\n                url: '',\n                resource: '',\n                custom: ''\n            },\n            clearOnRefresh: false,\n            limit: 100,\n            valueProperty: '',\n            lazyLoad: true,\n            filter: '',\n            searchEnabled: true,\n            searchDebounce: 0.3,\n            searchField: '',\n            minSearch: 0,\n            readOnlyValue: false,\n            selectFields: '',\n            selectThreshold: 0.3,\n            uniqueOptions: false,\n            tableView: true,\n            fuseOptions: {\n                include: 'score',\n                threshold: 0.3,\n            },\n            indexeddb: {\n                filter: {}\n            },\n            customOptions: {},\n            useExactSearch: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select',\n            group: 'basic',\n            icon: 'th-list',\n            weight: 70,\n            documentation: '/userguide/form-building/form-components#select',\n            schema: SelectComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });\n                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {\n                    valueComp.reference = false;\n                    valueComp.onSetItems = `\n            var templateKeys = utils.getItemTemplateKeys(component.template) || [];\n            items = _.map(items || [], i => {\n              var item = {};\n              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));\n              return item;\n            })\n          `;\n                }\n                return valueComp;\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType, reference } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (reference) {\n            return [object];\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        // Keep track of the select options.\n        this.selectOptions = [];\n        if (this.itemsFromUrl) {\n            this.isFromSearch = false;\n            this.searchServerCount = null;\n            this.defaultServerCount = null;\n            this.isScrollLoading = false;\n            this.searchDownloadedResources = [];\n            this.defaultDownloadedResources = [];\n        }\n        // If this component has been activated.//\n        this.activated = false;\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.shouldPositionDropdown = this.hasDataGridAncestor();\n        if (this.isHtmlRenderMode()) {\n            this.activate();\n        }\n        // Get the template keys for this select component.\n        this.getTemplateKeys();\n    }\n    get dataReady() {\n        // If the root submission has been set, and we are still not attached, then assume\n        // that our data is ready.\n        if (this.root &&\n            this.root.submissionSet &&\n            !this.attached) {\n            return Promise.resolve();\n        }\n        return this.itemsLoaded;\n    }\n    get defaultSchema() {\n        return SelectComponent.schema();\n    }\n    get emptyValue() {\n        if (this.component.multiple) {\n            return [];\n        }\n        // if select has JSON data source type, we are defining if empty value would be an object or a string by checking JSON's first item\n        if (this.component.dataSrc === 'json' && this.component.data.json) {\n            const firstItem = this.component.data.json[0];\n            let firstValue;\n            if (this.valueProperty) {\n                firstValue = lodash_1.default.get(firstItem, this.valueProperty);\n            }\n            else {\n                firstValue = firstItem;\n            }\n            if (firstValue && typeof firstValue === 'string') {\n                return '';\n            }\n            else {\n                return {};\n            }\n        }\n        if (this.valueProperty) {\n            return '';\n        }\n        return {};\n    }\n    get valueProperty() {\n        if (this.component.valueProperty) {\n            return this.component.valueProperty;\n        }\n        // Force values datasource to use values without actually setting it on the component settings.\n        if (this.component.dataSrc === 'values') {\n            return 'value';\n        }\n        return '';\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'select';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get isSelectResource() {\n        return this.component.dataSrc === 'resource';\n    }\n    get itemsFromUrl() {\n        return this.isSelectResource || this.isSelectURL;\n    }\n    get isInfiniteScrollProvided() {\n        return this.itemsFromUrl;\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get shouldInitialLoad() {\n        if (this.component.widget === 'html5' &&\n            this.isEntireObjectDisplay() &&\n            this.component.searchField &&\n            this.dataValue) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\n    }\n    isEntireObjectDisplay() {\n        return this.component.dataSrc === 'resource' && this.valueProperty === 'data';\n    }\n    selectValueAndLabel(data) {\n        const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));\n        const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;\n        return {\n            value,\n            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)\n        };\n    }\n    itemTemplate(data, value) {\n        if (!lodash_1.default.isNumber(data) && lodash_1.default.isEmpty(data)) {\n            return '';\n        }\n        // If they wish to show the value in read only mode, then just return the itemValue here.\n        if (this.options.readOnly && this.component.readOnlyValue) {\n            return this.itemValue(data);\n        }\n        // Perform a fast interpretation if we should not use the template.\n        if (data && !this.component.template) {\n            const itemLabel = data.label || data;\n            const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;\n            return this.sanitize(value, this.shouldSanitizeValue);\n        }\n        if (this.component.multiple && lodash_1.default.isArray(this.dataValue) ? this.dataValue.find((val) => value === val) : (this.dataValue === value)) {\n            const selectData = this.selectData;\n            if (selectData) {\n                const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n                if (!this.templateData || !this.templateData[templateValue]) {\n                    this.getOptionTemplate(data, value);\n                }\n                if (this.component.multiple) {\n                    if (selectData[templateValue]) {\n                        data = selectData[templateValue];\n                    }\n                }\n                else {\n                    data = selectData;\n                }\n            }\n        }\n        if (typeof data === 'string' || typeof data === 'number') {\n            return this.sanitize(this.t(data, { _userInput: true }), this.shouldSanitizeValue);\n        }\n        if (Array.isArray(data)) {\n            return data.map((val) => {\n                if (typeof val === 'string' || typeof val === 'number') {\n                    return this.sanitize(this.t(val, { _userInput: true }), this.shouldSanitizeValue);\n                }\n                return val;\n            });\n        }\n        if (data.data) {\n            // checking additional fields in the template for the selected Entire Object option\n            const hasNestedFields = /item\\.data\\.\\w*/g.test(this.component.template);\n            data.data = this.isEntireObjectDisplay() && lodash_1.default.isObject(data.data) && !hasNestedFields\n                ? JSON.stringify(data.data)\n                : data.data;\n        }\n        return super.itemTemplate(data, value);\n    }\n    /**\n     * Adds an option to the select dropdown.\n     * @param {*} value - The value of the new option.\n     * @param {string} label - The label of the new option.\n     * @param {object} [attrs] - Additional value attributes. Defaults to {}.\n     * @param {string} [id] - An id. Defaults to a random string.\n     */\n    addOption(value, label, attrs = {}, id = (0, utils_1.getRandomComponentId)()) {\n        if (lodash_1.default.isNil(label))\n            return;\n        const idPath = this.component.idPath\n            ? this.component.idPath.split('.').reduceRight((obj, key) => ({ [key]: obj }), id)\n            : {};\n        const option = Object.assign({ value: this.getOptionValue(value), label }, idPath);\n        const skipOption = this.component.uniqueOptions\n            ? !!this.selectOptions.find((selectOption) => lodash_1.default.isEqual(selectOption.value, option.value))\n            : false;\n        if (skipOption) {\n            return;\n        }\n        if (value) {\n            this.selectOptions.push(option);\n        }\n        if (this.refs.selectContainer && (this.component.widget === 'html5')) {\n            // Replace an empty Object value to an empty String.\n            if (option.value && lodash_1.default.isObject(option.value) && lodash_1.default.isEmpty(option.value)) {\n                option.value = '';\n            }\n            // Add element to option so we can reference it later.\n            const div = document.createElement('div');\n            div.innerHTML = this.sanitize(this.renderTemplate('selectOption', {\n                selected: lodash_1.default.isEqual(this.getOptionValue(this.dataValue), option.value),\n                option,\n                attrs,\n                id,\n                useId: (this.valueProperty === '' || this.isEntireObjectDisplay()) && lodash_1.default.isObject(value) && id,\n            }), this.shouldSanitizeValue).trim();\n            option.element = div.firstChild;\n            this.refs.selectContainer.appendChild(option.element);\n        }\n    }\n    addValueOptions(items) {\n        items = items || [];\n        let added = false;\n        let data = this.dataValue;\n        // preset submission value with value property before request.\n        if (this.options.pdf && !items.length && this.component.dataSrc === 'url' && this.valueProperty) {\n            data = Array.isArray(data)\n                ? data.map(item => lodash_1.default.set({}, this.valueProperty, item))\n                : lodash_1.default.set({}, this.valueProperty, data);\n        }\n        if (!this.selectOptions.length) {\n            // Add the currently selected choices if they don't already exist.\n            const currentChoices = Array.isArray(data) && this.component.multiple ? data : [data];\n            added = this.addCurrentChoices(currentChoices, items);\n            if (!added && !this.component.multiple) {\n                this.addPlaceholder();\n            }\n        }\n        return added;\n    }\n    disableInfiniteScroll() {\n        if (!this.downloadedResources) {\n            return;\n        }\n        this.downloadedResources.serverCount = this.downloadedResources.length;\n        this.serverCount = this.downloadedResources.length;\n    }\n    /* eslint-disable max-statements */\n    setItems(items, fromSearch) {\n        var _a, _b;\n        this.selectItems = items;\n        // If the items is a string, then parse as JSON.\n        if (typeof items == 'string') {\n            try {\n                items = JSON.parse(items);\n            }\n            catch (err) {\n                console.warn(err.message);\n                items = [];\n            }\n        }\n        // Allow js processing (needed for form builder)\n        if (this.component.onSetItems) {\n            const newItems = typeof this.component.onSetItems === 'function'\n                ? this.component.onSetItems(this, items)\n                : this.evaluate(this.component.onSetItems, { items: items }, 'items');\n            if (newItems) {\n                items = newItems;\n            }\n        }\n        if (!this.choices && this.refs.selectContainer) {\n            this.empty(this.refs.selectContainer);\n        }\n        // If they provided select values, then we need to get them instead.\n        if (this.component.selectValues) {\n            items = lodash_1.default.get(items, this.component.selectValues, items) || [];\n        }\n        let areItemsEqual;\n        if (this.itemsFromUrl) {\n            areItemsEqual = this.isSelectURL ? lodash_1.default.isEqual(items, this.downloadedResources) : false;\n            const areItemsEnded = this.component.limit > items.length;\n            const areItemsDownloaded = areItemsEqual\n                && this.downloadedResources\n                && this.downloadedResources.length === items.length;\n            if (areItemsEnded) {\n                this.disableInfiniteScroll();\n            }\n            else if (areItemsDownloaded) {\n                this.selectOptions = [];\n            }\n            else {\n                this.serverCount = items.serverCount;\n            }\n        }\n        if (this.isScrollLoading && items) {\n            if (!areItemsEqual) {\n                this.downloadedResources = this.downloadedResources\n                    ? this.downloadedResources.concat(items)\n                    : items;\n            }\n            this.downloadedResources.serverCount = items.serverCount || this.downloadedResources.serverCount;\n        }\n        else {\n            this.downloadedResources = items || [];\n            this.selectOptions = [];\n            // If there is new select option with same id as already selected, set the new one\n            if (!lodash_1.default.isEmpty(this.dataValue) && this.component.idPath) {\n                const selectedOptionId = lodash_1.default.get(this.dataValue, this.component.idPath, null);\n                const newOptionWithSameId = !lodash_1.default.isNil(selectedOptionId) && items.find(item => {\n                    const itemId = lodash_1.default.get(item, this.component.idPath);\n                    return itemId === selectedOptionId;\n                });\n                if (newOptionWithSameId) {\n                    this.setValue(newOptionWithSameId);\n                }\n            }\n        }\n        // Add the value options.\n        if (!fromSearch) {\n            this.addValueOptions(items);\n        }\n        if (this.component.widget === 'html5' && !this.component.placeholder) {\n            this.addOption(null, '');\n        }\n        // Iterate through each of the items.\n        lodash_1.default.each(items, (item, index) => {\n            // preventing references of the components inside the form to the parent form when building forms\n            if (this.root && this.root.options.editForm && this.root.options.editForm._id && this.root.options.editForm._id === item._id)\n                return;\n            const itemValueAndLabel = this.selectValueAndLabel(item);\n            this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, lodash_1.default.get(item, this.component.idPath, String(index)));\n        });\n        if (this.choices) {\n            this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n        }\n        else if (this.loading) {\n            // Re-attach select input.\n            // this.appendTo(this.refs.input[0], this.selectContainer);\n        }\n        // We are no longer loading.\n        this.isScrollLoading = false;\n        this.loading = false;\n        const searching = fromSearch && ((_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.isFocussed);\n        if (!searching) {\n            // If a value is provided, then select it.\n            if (!this.isEmpty() || this.isRemoveButtonPressed) {\n                this.setValue(this.dataValue, {\n                    noUpdateEvent: true\n                });\n            }\n            else if (this.shouldAddDefaultValue && !this.options.readOnly) {\n                // If a default value is provided then select it.\n                const defaultValue = this.defaultValue;\n                if (!this.isEmpty(defaultValue)) {\n                    this.setValue(defaultValue);\n                }\n            }\n        }\n        // Say we are done loading the items.\n        this.itemsLoadedResolve();\n    }\n    getSingleItemValueForHTMLMode(data) {\n        var _a;\n        const option = (_a = this.selectOptions) === null || _a === void 0 ? void 0 : _a.find(({ value }) => lodash_1.default.isEqual(value, data));\n        if (option) {\n            return option.label || data;\n        }\n        return data;\n    }\n    itemValueForHTMLMode(value) {\n        if (!this.isHtmlRenderMode()) {\n            return super.itemValueForHTMLMode(value);\n        }\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item)\n                ? this.itemValueForHTMLMode(item)\n                : this.getSingleItemValueForHTMLMode(item));\n            return values.join(', ');\n        }\n        return this.getSingleItemValueForHTMLMode(value);\n    }\n    /* eslint-enable max-statements */\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && (this.component.defaultValue === false || this.component.defaultValue === 0)) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get loadingError() {\n        return !this.component.refreshOn && !this.component.refreshOnBlur && this.networkError;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        options = options || {};\n        // See if we should load items or not.\n        if (!this.shouldLoad || (!this.itemsFromUrl && this.options.readOnly)) {\n            this.isScrollLoading = false;\n            this.loading = false;\n            this.itemsLoadedResolve();\n            return;\n        }\n        // See if they have not met the minimum search requirements.\n        const minSearch = parseInt(this.component.minSearch, 10);\n        if (this.component.searchField &&\n            (minSearch > 0) &&\n            (!search || (search.length < minSearch))) {\n            // Set empty items.\n            return this.setItems([]);\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        const query = this.component.disableLimit ? {} : {\n            limit,\n            skip,\n        };\n        // Allow for url interpolation.\n        url = this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        });\n        // Add search capability.\n        if (this.component.searchField && search) {\n            const searchValue = Array.isArray(search)\n                ? search.join(',')\n                : typeof search === 'object'\n                    ? JSON.stringify(search)\n                    : search;\n            query[this.component.searchField] = this.component.searchField.endsWith('__regex')\n                ? lodash_1.default.escapeRegExp(searchValue)\n                : searchValue;\n        }\n        // If they wish to return only some fields.\n        if (this.component.selectFields) {\n            query.select = this.component.selectFields;\n        }\n        // Add sort capability\n        if (this.component.sort) {\n            query.sort = this.component.sort;\n        }\n        if (!lodash_1.default.isEmpty(query)) {\n            // Add the query string.\n            url += (!url.includes('?') ? '?' : '&') + Formio_1.Formio.serialize(query, (item) => this.interpolate(item));\n        }\n        // Add filter capability\n        if (this.component.filter) {\n            url += (!url.includes('?') ? '?' : '&') + this.interpolate(this.component.filter);\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response, !!search);\n        })\n            .catch((err) => {\n            if (this.itemsFromUrl) {\n                this.setItems([]);\n                this.disableInfiniteScroll();\n            }\n            this.isScrollLoading = false;\n            this.handleLoadingError(err);\n        });\n    }\n    handleLoadingError(err) {\n        this.loading = false;\n        if (err.networkError) {\n            this.networkError = true;\n        }\n        this.itemsLoadedResolve();\n        this.emit('componentError', {\n            component: this.component,\n            message: err.toString(),\n        });\n        console.warn(`Unable to load resources for ${this.key}`);\n    }\n    /**\n     * Get the request headers for this select dropdown.\n     * @returns {*} - Returns the request headers for this select dropdown.\n     */\n    get requestHeaders() {\n        // Create the headers object.\n        const headers = new Formio_1.Formio.Headers();\n        // Add custom headers to the url.\n        if (this.component.data && this.component.data.headers) {\n            try {\n                lodash_1.default.each(this.component.data.headers, (header) => {\n                    if (header.key) {\n                        headers.set(header.key, this.interpolate(header.value));\n                    }\n                });\n            }\n            catch (err) {\n                console.warn(err.message);\n            }\n        }\n        return headers;\n    }\n    getCustomItems() {\n        const customItems = this.evaluate(this.component.data.custom, {\n            values: []\n        }, 'values');\n        this.asyncValues = (0, utils_1.isPromise)(customItems);\n        return customItems;\n    }\n    asyncCustomValues() {\n        if (!lodash_1.default.isBoolean(this.asyncValues)) {\n            this.getCustomItems();\n        }\n        return this.asyncValues;\n    }\n    updateCustomItems(forceUpdate) {\n        if (this.asyncCustomValues()) {\n            if (!forceUpdate && !this.active) {\n                this.itemsLoadedResolve();\n                return;\n            }\n            this.loading = true;\n            this.getCustomItems()\n                .then(items => {\n                this.loading = false;\n                this.setItems(items || []);\n            })\n                .catch(err => {\n                this.handleLoadingError(err);\n            });\n        }\n        else {\n            this.setItems(this.getCustomItems() || []);\n        }\n    }\n    isEmpty(value = this.dataValue) {\n        return super.isEmpty(value) || value === undefined;\n    }\n    refresh(value, { instance }) {\n        if (this.component.clearOnRefresh && (instance && !instance.pristine)) {\n            this.setValue(this.emptyValue);\n        }\n        this.updateItems(null, true);\n    }\n    get additionalResourcesAvailable() {\n        return lodash_1.default.isNil(this.serverCount) || (this.serverCount > this.downloadedResources.length);\n    }\n    get serverCount() {\n        if (this.isFromSearch) {\n            return this.searchServerCount;\n        }\n        return this.defaultServerCount;\n    }\n    set serverCount(value) {\n        if (this.isFromSearch) {\n            this.searchServerCount = value;\n        }\n        else {\n            this.defaultServerCount = value;\n        }\n    }\n    get downloadedResources() {\n        if (this.isFromSearch) {\n            return this.searchDownloadedResources;\n        }\n        return this.defaultDownloadedResources;\n    }\n    set downloadedResources(value) {\n        if (this.isFromSearch) {\n            this.searchDownloadedResources = value;\n        }\n        else {\n            this.defaultDownloadedResources = value;\n        }\n    }\n    addPlaceholder() {\n        if (!this.component.placeholder) {\n            return;\n        }\n        this.addOption('', this.component.placeholder, { placeholder: true });\n    }\n    /**\n     * Activate this select control.\n     */\n    activate() {\n        if (this.loading || !this.active) {\n            this.setLoadingItem();\n        }\n        if (this.active) {\n            return;\n        }\n        this.activated = true;\n        this.triggerUpdate();\n    }\n    setLoadingItem(addToCurrentList = false) {\n        if (this.choices) {\n            if (addToCurrentList) {\n                this.choices.setChoices([{\n                        value: `${this.id}-loading`,\n                        label: 'Loading...',\n                        disabled: true,\n                    }], 'value', 'label');\n            }\n            else {\n                this.choices.setChoices([{\n                        value: '',\n                        label: `<i class=\"${this.iconClass('refresh')}\" style=\"font-size:1.3em;\"></i>`,\n                        disabled: true,\n                    }], 'value', 'label', true);\n            }\n        }\n        else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {\n            this.addOption('', this.t('loading...'));\n        }\n    }\n    get active() {\n        return !this.component.lazyLoad || this.activated;\n    }\n    render() {\n        const info = this.inputInfo;\n        info.attr = info.attr || {};\n        info.multiple = this.component.multiple;\n        return super.render(this.wrapElement(this.renderTemplate('select', {\n            input: info,\n            selectOptions: '',\n            index: null,\n        })));\n    }\n    wrapElement(element) {\n        return this.component.addResource && !this.options.readOnly\n            ? (this.renderTemplate('resourceAdd', {\n                element\n            }))\n            : element;\n    }\n    choicesOptions() {\n        const useSearch = this.component.hasOwnProperty('searchEnabled') ? this.component.searchEnabled : true;\n        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions == 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        const commonFuseOptions = {\n            maxPatternLength: 1000,\n            distance: 1000,\n        };\n        return Object.assign({ removeItemButton: this.component.disabled ? false : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {\n                containerOuter: 'choices form-group formio-choices',\n                containerInner: this.transform('class', 'form-control ui fluid selection dropdown')\n            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: (this.component.dropdown || 'auto'), searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch\n                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false }, customOptions);\n    }\n    /* eslint-disable max-statements */\n    attach(element) {\n        var _a, _b, _c;\n        const superAttach = super.attach(element);\n        this.loadRefs(element, {\n            selectContainer: 'single',\n            addResource: 'single',\n            autocompleteInput: 'single'\n        });\n        //enable autocomplete for select\n        const autocompleteInput = this.refs.autocompleteInput;\n        if (autocompleteInput) {\n            this.addEventListener(autocompleteInput, 'change', (event) => {\n                this.setValue(event.target.value);\n            });\n        }\n        const input = this.refs.selectContainer;\n        if (!input) {\n            return;\n        }\n        this.addEventListener(input, this.inputInfo.changeEvent, () => this.updateValue(null, {\n            modified: true\n        }));\n        this.attachRefreshOnBlur();\n        if (this.component.widget === 'html5') {\n            this.addFocusBlurEvents(input);\n            this.triggerUpdate(null, true);\n            if (this.visible) {\n                this.setItems(this.selectItems || []);\n            }\n            this.focusableElement = input;\n            if (this.component.dataSrc === 'custom') {\n                this.addEventListener(input, 'focus', () => this.updateCustomItems());\n            }\n            this.addEventListener(input, 'keydown', (event) => {\n                const { key } = event;\n                if (['Backspace', 'Delete'].includes(key)) {\n                    this.setValue(this.emptyValue);\n                }\n            });\n            return;\n        }\n        const tabIndex = input.tabIndex;\n        this.addPlaceholder();\n        if (this.i18next) {\n            input.setAttribute('dir', this.i18next.dir());\n        }\n        if ((_c = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.containerOuter) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.parentNode) {\n            this.choices.destroy();\n        }\n        const choicesOptions = this.choicesOptions();\n        if (ChoicesWrapper_1.default) {\n            this.choices = new ChoicesWrapper_1.default(input, choicesOptions);\n            if (this.selectOptions && this.selectOptions.length) {\n                this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n            }\n            if (this.component.multiple) {\n                this.focusableElement = this.choices.input.element;\n            }\n            else {\n                this.focusableElement = this.choices.containerInner.element;\n                this.choices.containerOuter.element.setAttribute('tabIndex', '-1');\n                this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());\n            }\n            this.addFocusBlurEvents(this.choices.input.element);\n            if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {\n                this.scrollList = this.choices.choiceList.element;\n                this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());\n            }\n            if (choicesOptions.removeItemButton) {\n                this.addEventListener(input, 'removeItem', () => {\n                    this.isRemoveButtonPressed = true;\n                });\n            }\n        }\n        if (window && this.choices && this.shouldPositionDropdown) {\n            this.addEventListener(window.document, 'scroll', () => {\n                this.positionDropdown(true);\n            }, false, true);\n        }\n        this.focusableElement.setAttribute('tabIndex', tabIndex);\n        // If a search field is provided, then add an event listener to update items on search.\n        if (this.component.searchField) {\n            // Make sure to clear the search when no value is provided.\n            if (this.choices && this.choices.input && this.choices.input.element) {\n                this.addEventListener(this.choices.input.element, 'input', (event) => {\n                    this.isFromSearch = !!event.target.value;\n                    if (!event.target.value) {\n                        this.triggerUpdate();\n                    }\n                    else {\n                        this.serverCount = null;\n                        this.downloadedResources = [];\n                    }\n                });\n            }\n            this.addEventListener(input, 'choice', () => {\n                if (this.component.multiple && this.component.dataSrc === 'resource' && this.isFromSearch) {\n                    this.triggerUpdate();\n                }\n                this.isFromSearch = false;\n            });\n            // avoid spamming the resource/url endpoint when we have server side filtering enabled.\n            const debounceTimeout = this.component.searchField && (this.isSelectResource || this.isSelectURL) ?\n                (this.component.searchDebounce === 0 ? 0 : this.component.searchDebounce || this.defaultSchema.searchDebounce) * 1000\n                : 0;\n            const updateComponent = (evt) => {\n                this.triggerUpdate(evt.detail.value);\n            };\n            this.addEventListener(input, 'search', lodash_1.default.debounce((e) => {\n                updateComponent(e);\n                this.positionDropdown();\n            }, debounceTimeout));\n            this.addEventListener(input, 'stopSearch', () => this.triggerUpdate());\n            this.addEventListener(input, 'hideDropdown', () => {\n                if (this.choices && this.choices.input && this.choices.input.element) {\n                    this.choices.input.element.value = '';\n                }\n                this.updateItems(null, true);\n            });\n        }\n        this.addEventListener(input, 'showDropdown', () => {\n            this.update();\n            this.positionDropdown();\n        });\n        if (this.shouldPositionDropdown) {\n            this.addEventListener(input, 'highlightChoice', () => {\n                this.positionDropdown();\n            });\n        }\n        if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {\n            this.addPlaceholderItem(choicesOptions.placeholderValue);\n            this.addEventListener(input, 'removeItem', () => {\n                this.addPlaceholderItem(choicesOptions.placeholderValue);\n            });\n        }\n        // Add value options.\n        this.addValueOptions();\n        this.setChoicesValue(this.dataValue);\n        if (this.isSelectResource && this.refs.addResource) {\n            this.addEventListener(this.refs.addResource, 'click', (event) => {\n                event.preventDefault();\n                const formioForm = this.ce('div');\n                const dialog = this.createModal(formioForm);\n                const projectUrl = lodash_1.default.get(this.root, 'formio.projectUrl', Formio_1.Formio.getProjectUrl());\n                const formUrl = `${projectUrl}/form/${this.component.data.resource}`;\n                new Form_1.default(formioForm, formUrl, {}).ready\n                    .then((form) => {\n                    form.on('submit', (submission) => {\n                        // If valueProperty is set, replace the submission with the corresponding value\n                        let value = this.valueProperty ? lodash_1.default.get(submission, this.valueProperty) : submission;\n                        if (this.component.multiple) {\n                            value = [...this.dataValue, value];\n                        }\n                        this.setValue(value);\n                        this.triggerUpdate();\n                        dialog.close();\n                    });\n                });\n            });\n        }\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        this.triggerUpdate();\n        return superAttach;\n    }\n    setDropdownPosition() {\n        var _a, _b, _c, _d;\n        const dropdown = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.dropdown) === null || _b === void 0 ? void 0 : _b.element;\n        const container = (_d = (_c = this.choices) === null || _c === void 0 ? void 0 : _c.containerOuter) === null || _d === void 0 ? void 0 : _d.element;\n        if (!dropdown || !container) {\n            return;\n        }\n        const containerPosition = container.getBoundingClientRect();\n        const isFlipped = container.classList.contains('is-flipped');\n        lodash_1.default.assign(dropdown.style, {\n            top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,\n            left: `${containerPosition.left}px`,\n            width: `${containerPosition.width}px`,\n            position: 'fixed',\n            bottom: 'unset',\n            right: 'unset',\n        });\n    }\n    hasDataGridAncestor(comp) {\n        comp = comp || this;\n        if (comp.inDataGrid || comp.type === 'datagrid') {\n            return true;\n        }\n        else if (comp.parent) {\n            return this.hasDataGridAncestor(comp.parent);\n        }\n        else {\n            return false;\n        }\n    }\n    positionDropdown(scroll) {\n        var _a;\n        if (!this.shouldPositionDropdown || !this.choices || (!((_a = this.choices.dropdown) === null || _a === void 0 ? void 0 : _a.isActive) && scroll)) {\n            return;\n        }\n        this.setDropdownPosition();\n        this.itemsLoaded.then(() => {\n            this.setDropdownPosition();\n        });\n    }\n    get isLoadingAvailable() {\n        return !this.isScrollLoading && this.additionalResourcesAvailable;\n    }\n    onScroll() {\n        if (this.isLoadingAvailable) {\n            this.isScrollLoading = true;\n            this.setLoadingItem(true);\n            this.triggerUpdate(this.choices.input.element.value);\n        }\n    }\n    attachRefreshOnBlur() {\n        if (this.component.refreshOnBlur) {\n            this.on('blur', (instance) => {\n                this.checkRefreshOn([{ instance, value: instance.dataValue }], { fromBlur: true });\n            });\n        }\n    }\n    addPlaceholderItem(placeholderValue) {\n        const items = this.choices._store.activeItems;\n        if (!items.length) {\n            this.choices._addItem({\n                value: '',\n                label: placeholderValue,\n                choiceId: 0,\n                groupId: -1,\n                customProperties: null,\n                placeholder: true,\n                keyCode: null\n            });\n        }\n    }\n    /* eslint-enable max-statements */\n    update() {\n        if (this.component.dataSrc === 'custom') {\n            this.updateCustomItems();\n        }\n        // Activate the control.\n        this.activate();\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.setDisabled(this.choices.containerInner.element, true);\n            this.focusableElement.removeAttribute('tabIndex');\n            this.choices.disable();\n        }\n        else {\n            this.setDisabled(this.choices.containerInner.element, false);\n            this.focusableElement.setAttribute('tabIndex', this.component.tabindex || 0);\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    set visible(value) {\n        // If we go from hidden to visible, trigger a refresh.\n        if (value && (!this._visible !== !value)) {\n            this.triggerUpdate();\n        }\n        super.visible = value;\n    }\n    get visible() {\n        return super.visible;\n    }\n    addCurrentChoices(values, items, keyValue) {\n        if (!values) {\n            return false;\n        }\n        const notFoundValuesToAdd = [];\n        const added = values.reduce((defaultAdded, value) => {\n            if (!value || lodash_1.default.isEmpty(value)) {\n                return defaultAdded;\n            }\n            let found = false;\n            // Make sure that `items` and `this.selectOptions` points\n            // to the same reference. Because `this.selectOptions` is\n            // internal property and all items are populated by\n            // `this.addOption` method, we assume that items has\n            // 'label' and 'value' properties. This assumption allows\n            // us to read correct value from the item.\n            const isSelectOptions = items === this.selectOptions;\n            if (items && items.length) {\n                lodash_1.default.each(items, (choice) => {\n                    if (choice._id && value._id && (choice._id === value._id)) {\n                        found = true;\n                        return false;\n                    }\n                    const itemValue = keyValue ? choice.value : this.itemValue(choice, isSelectOptions);\n                    found |= lodash_1.default.isEqual(itemValue, value);\n                    return found ? false : true;\n                });\n            }\n            // Add the default option if no item is found.\n            if (!found) {\n                notFoundValuesToAdd.push(this.selectValueAndLabel(value));\n                return true;\n            }\n            return found || defaultAdded;\n        }, false);\n        if (notFoundValuesToAdd.length) {\n            if (this.choices) {\n                this.choices.setChoices(notFoundValuesToAdd, 'value', 'label');\n            }\n            notFoundValuesToAdd.map(notFoundValue => {\n                this.addOption(notFoundValue.value, notFoundValue.label);\n            });\n        }\n        return added;\n    }\n    getValueAsString(data, options) {\n        return (this.component.multiple && Array.isArray(data))\n            ? data.map((v) => this.asString(v, options)).join(', ')\n            : this.asString(data, options);\n    }\n    getValue() {\n        // If the widget isn't active.\n        if (this.viewOnly || this.loading\n            || (!this.component.lazyLoad && !this.selectOptions.length)\n            || !this.element) {\n            return this.dataValue;\n        }\n        let value = this.emptyValue;\n        if (this.choices) {\n            value = this.choices.getValue(true);\n            // Make sure we don't get the placeholder\n            if (!this.component.multiple &&\n                this.component.placeholder &&\n                (value === this.t(this.component.placeholder, { _userInput: true }))) {\n                value = this.emptyValue;\n            }\n        }\n        else if (this.refs.selectContainer) {\n            value = this.refs.selectContainer.value;\n            if (this.valueProperty === '' || this.isEntireObjectDisplay()) {\n                if (value === '') {\n                    return {};\n                }\n                const option = this.selectOptions[value] ||\n                    this.selectOptions.find(option => option.id === value);\n                if (option && lodash_1.default.isObject(option.value)) {\n                    value = option.value;\n                }\n            }\n        }\n        else {\n            value = this.dataValue;\n        }\n        // Choices will return undefined if nothing is selected. We really want '' to be empty.\n        if (value === undefined || value === null) {\n            value = '';\n        }\n        return value;\n    }\n    redraw() {\n        const done = super.redraw();\n        this.triggerUpdate();\n        return done;\n    }\n    normalizeSingleValue(value) {\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        const dataType = this.component.dataType || 'auto';\n        const normalize = {\n            value,\n            number() {\n                const numberValue = Number(this.value);\n                const isEquivalent = value.toString() === numberValue.toString();\n                if (!Number.isNaN(numberValue) && Number.isFinite(numberValue) && value !== '' && isEquivalent) {\n                    this.value = numberValue;\n                }\n                return this;\n            },\n            boolean() {\n                if (lodash_1.default.isString(this.value)\n                    && (this.value.toLowerCase() === 'true'\n                        || this.value.toLowerCase() === 'false')) {\n                    this.value = (this.value.toLowerCase() === 'true');\n                }\n                return this;\n            },\n            string() {\n                this.value = String(this.value);\n                return this;\n            },\n            object() {\n                return this;\n            },\n            auto() {\n                if (lodash_1.default.isObject(this.value)) {\n                    this.value = this.object().value;\n                }\n                else {\n                    this.value = this.string().number().boolean().value;\n                }\n                return this;\n            }\n        };\n        try {\n            return normalize[dataType]().value;\n        }\n        catch (err) {\n            console.warn('Failed to normalize value', err);\n            return value;\n        }\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        if (this.component.multiple && Array.isArray(value)) {\n            return value.map((singleValue) => this.normalizeSingleValue(singleValue));\n        }\n        return super.normalizeValue(this.normalizeSingleValue(value));\n    }\n    setMetadata(value) {\n        var _a;\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        // Check to see if we need to save off the template data into our metadata.\n        const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n        const shouldSaveData = !valueIsObject || this.component.reference;\n        if (templateValue && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            let templateData = this.templateData[templateValue];\n            if (this.component.multiple) {\n                templateData = {};\n                const dataValue = this.dataValue;\n                if (dataValue && lodash_1.default.isArray(dataValue) && dataValue.length) {\n                    dataValue.forEach((dataValueItem) => {\n                        const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;\n                        templateData[dataValueItemValue] = this.templateData[dataValueItemValue];\n                    });\n                }\n                templateData[value] = this.templateData[value];\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, templateData);\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed || !this.selectMetadata) {\n            if (this.component.multiple && Array.isArray(this.dataValue)) {\n                this.dataValue.forEach(singleValue => this.setMetadata(singleValue));\n            }\n            else {\n                this.setMetadata(this.dataValue);\n            }\n        }\n        return changed;\n    }\n    setValue(value, flags = {}) {\n        const previousValue = this.dataValue;\n        const changed = this.updateValue(value, flags);\n        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {})) && !flags.fromSubmission) {\n            return false;\n        }\n        value = this.dataValue;\n        const hasPreviousValue = !this.isEmpty(previousValue);\n        const hasValue = !this.isEmpty(value);\n        // Undo typing when searching to set the value.\n        if (this.component.multiple && Array.isArray(value)) {\n            value = value.map(value => {\n                if (typeof value === 'boolean' || typeof value === 'number') {\n                    return value.toString();\n                }\n                return value;\n            });\n        }\n        else {\n            if (typeof value === 'boolean' || typeof value === 'number') {\n                value = value.toString();\n            }\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.itemsLoaded.then(() => {\n                this.redraw();\n            });\n            return changed;\n        }\n        // Do not set the value if we are loading... that will happen after it is done.\n        if (this.loading) {\n            return changed;\n        }\n        // Determine if we need to perform an initial lazyLoad api call if searchField is provided.\n        if (this.isInitApiCallNeeded(hasValue)) {\n            this.loading = true;\n            this.lazyLoadInit = true;\n            const searchProperty = this.component.searchField || this.component.valueProperty;\n            this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);\n            return changed;\n        }\n        // Add the value options.\n        this.itemsLoaded.then(() => {\n            this.addValueOptions();\n            this.setChoicesValue(value, hasPreviousValue, flags);\n        });\n        return changed;\n    }\n    isInitApiCallNeeded(hasValue) {\n        return this.component.lazyLoad &&\n            !this.lazyLoadInit &&\n            !this.active &&\n            !this.selectOptions.length &&\n            hasValue &&\n            this.shouldInitialLoad &&\n            this.visible && (this.component.searchField || this.component.valueProperty);\n    }\n    setChoicesValue(value, hasPreviousValue, flags = {}) {\n        const hasValue = !this.isEmpty(value) || flags.fromSubmission;\n        hasPreviousValue = (hasPreviousValue === undefined) ? true : hasPreviousValue;\n        if (this.choices) {\n            // Now set the value.\n            if (hasValue) {\n                this.choices.removeActiveItems();\n                // Add the currently selected choices if they don't already exist.\n                const currentChoices = Array.isArray(value) && this.component.multiple ? value : [value];\n                if (!this.addCurrentChoices(currentChoices, this.selectOptions, true)) {\n                    this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n                }\n                this.choices.setChoiceByValue(currentChoices);\n            }\n            else if (hasPreviousValue || flags.resetValue) {\n                this.choices.removeActiveItems();\n            }\n        }\n        else {\n            if (hasValue) {\n                const values = Array.isArray(value) ? value : [value];\n                if (!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2\n                    || (this.selectData && flags.fromSubmission)) {\n                    const { value, label } = this.selectValueAndLabel(this.dataValue);\n                    this.addOption(value, label);\n                }\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    lodash_1.default.each(values, (val) => {\n                        if (selectOption.value === '') {\n                            selectOption.value = {};\n                        }\n                        if (lodash_1.default.isEqual(val, selectOption.value) && selectOption.element) {\n                            selectOption.element.selected = true;\n                            selectOption.element.setAttribute('selected', 'selected');\n                            return false;\n                        }\n                    });\n                });\n            }\n            else {\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    if (selectOption.element) {\n                        selectOption.element.selected = false;\n                        selectOption.element.removeAttribute('selected');\n                    }\n                });\n            }\n        }\n    }\n    get itemsLoaded() {\n        return this._itemsLoaded || Promise.resolve();\n    }\n    set itemsLoaded(promise) {\n        this._itemsLoaded = promise;\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.getOptionsValues();\n        if (values) {\n            if (lodash_1.default.isObject(value)) {\n                const compareComplexValues = (optionValue) => {\n                    const normalizedOptionValue = this.normalizeSingleValue(optionValue);\n                    if (!lodash_1.default.isObject(normalizedOptionValue)) {\n                        return false;\n                    }\n                    try {\n                        return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));\n                    }\n                    catch (err) {\n                        console.warn.error('Error while comparing items', err);\n                        return false;\n                    }\n                };\n                return values.findIndex((optionValue) => compareComplexValues(optionValue)) !== -1;\n            }\n            return values.findIndex((optionValue) => this.normalizeSingleValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    /**\n     * Performs required transformations on the initial value to use in selectOptions\n     * @param {*} value - The value to transform.\n     * @returns {*} - Returns the options value.\n     */\n    getOptionValue(value) {\n        return lodash_1.default.isObject(value) && this.isEntireObjectDisplay()\n            ? this.normalizeSingleValue(value)\n            : lodash_1.default.isObject(value) && (this.valueProperty || this.component.key !== 'resource')\n                ? value\n                : lodash_1.default.isObject(value) && !this.valueProperty\n                    ? this.interpolate(this.component.template, { item: value }).replace(/<\\/?[^>]+(>|$)/g, '')\n                    : lodash_1.default.isNull(value)\n                        ? this.emptyValue\n                        : String(this.normalizeSingleValue(value));\n    }\n    /**\n     * If component has static values (values, json) or custom values, returns an array of them\n     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.\n     */\n    getOptionsValues() {\n        let rawItems = [];\n        switch (this.component.dataSrc) {\n            case 'values':\n                rawItems = this.component.data.values;\n                break;\n            case 'json':\n                rawItems = this.component.data.json;\n                break;\n            case 'custom':\n                rawItems = this.getCustomItems();\n                break;\n        }\n        if (typeof rawItems === 'string') {\n            try {\n                rawItems = JSON.parse(rawItems);\n            }\n            catch (err) {\n                console.warn(err.message);\n                rawItems = [];\n            }\n        }\n        if (!Array.isArray(rawItems)) {\n            return;\n        }\n        return rawItems.map((item) => this.getOptionValue(this.itemValue(item)));\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue('', {\n            noUpdateEvent: true\n        });\n        this.unset();\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - Returns FALSE for select components.\n     */\n    validateMultiple() {\n        // Select component will contain one input when flagged as multiple.\n        return false;\n    }\n    /**\n     * Output this select dropdown as a string value.\n     * @returns {*}\n     */\n    isBooleanOrNumber(value) {\n        return typeof value === 'number' || typeof value === 'boolean';\n    }\n    getNormalizedValues() {\n        if (!this.component || !this.component.data || !this.component.data.values) {\n            return;\n        }\n        return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));\n    }\n    asString(value, options = {}) {\n        var _a;\n        value = value !== null && value !== void 0 ? value : this.getValue();\n        if (options.modalPreview && this.selectData) {\n            const { label } = this.selectValueAndLabel(value);\n            return label;\n        }\n        //need to convert values to strings to be able to compare values with available options that are strings\n        const convertToString = (data, valueProperty) => {\n            if (valueProperty) {\n                if (Array.isArray(data)) {\n                    data.forEach((item) => item[valueProperty] = item[valueProperty].toString());\n                }\n                else {\n                    data[valueProperty] = data[valueProperty].toString();\n                }\n                return data;\n            }\n            if (this.isBooleanOrNumber(data)) {\n                data = data.toString();\n            }\n            if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {\n                data = data.map(item => {\n                    if (this.isBooleanOrNumber(item)) {\n                        item = item.toString();\n                    }\n                });\n            }\n            return data;\n        };\n        value = convertToString(value);\n        if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {\n            const { items, valueProperty, } = this.component.dataSrc === 'values'\n                ? {\n                    items: convertToString(this.getNormalizedValues(), 'value'),\n                    valueProperty: 'value',\n                }\n                : {\n                    items: convertToString(this.getCustomItems(), this.valueProperty),\n                    valueProperty: this.valueProperty,\n                };\n            const getFromValues = () => {\n                const initialValue = lodash_1.default.find(items, [valueProperty, value]);\n                const values = this.defaultSchema.data.values || [];\n                return lodash_1.default.isEqual(initialValue, values[0]) ? '-' : initialValue;\n            };\n            value = (this.component.multiple && Array.isArray(value))\n                ? lodash_1.default.filter(items, (item) => value.includes(item.value))\n                : valueProperty\n                    ? (_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value }\n                    : value;\n        }\n        if (lodash_1.default.isString(value)) {\n            return value;\n        }\n        const getTemplateValue = (v) => {\n            const itemTemplate = this.itemTemplate(v);\n            return options.csv && itemTemplate\n                ? (0, utils_1.removeHTML)(itemTemplate)\n                : itemTemplate;\n        };\n        if (Array.isArray(value)) {\n            const items = [];\n            value.forEach(item => items.push(getTemplateValue(item)));\n            if (this.component.dataSrc === 'resource' && items.length > 0) {\n                return items.join(', ');\n            }\n            else if (items.length > 0) {\n                return items.join('<br />');\n            }\n            else {\n                return '-';\n            }\n        }\n        if (this.isEntireObjectDisplay() && lodash_1.default.isObject(value)) {\n            return JSON.stringify(value);\n        }\n        return !lodash_1.default.isNil(value)\n            ? getTemplateValue(value)\n            : '-';\n    }\n    detach() {\n        var _a, _b;\n        this.off('blur');\n        if (this.choices) {\n            if ((_b = (_a = this.choices.containerOuter) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.parentNode) {\n                this.choices.destroy();\n            }\n            this.choices = null;\n        }\n        super.detach();\n    }\n    focus() {\n        if (this.focusableElement) {\n            super.focus.call(this);\n            this.focusableElement.focus();\n        }\n    }\n    setErrorClasses(elements, dirty, hasError, hasMessages, element = this.element) {\n        super.setErrorClasses(elements, dirty, hasError, hasMessages, element);\n        if (this.choices) {\n            super.setErrorClasses([this.choices.containerInner.element], dirty, hasError, hasMessages, element);\n        }\n        else {\n            super.setErrorClasses([this.refs.selectContainer], dirty, hasError, hasMessages, element);\n        }\n    }\n}\nexports[\"default\"] = SelectComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/Select.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 Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst ChoicesWrapper_1 = __importDefault(__webpack_require__(/*! ../../utils/ChoicesWrapper */ \"./lib/cjs/utils/ChoicesWrapper.js\"));\nclass SelectComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'select',\n            label: 'Select',\n            key: 'select',\n            idPath: 'id',\n            data: {\n                values: [{ label: '', value: '' }],\n                json: '',\n                url: '',\n                resource: '',\n                custom: ''\n            },\n            clearOnRefresh: false,\n            limit: 100,\n            valueProperty: '',\n            lazyLoad: true,\n            filter: '',\n            searchEnabled: true,\n            searchDebounce: 0.3,\n            searchField: '',\n            minSearch: 0,\n            readOnlyValue: false,\n            selectFields: '',\n            selectThreshold: 0.3,\n            uniqueOptions: false,\n            tableView: true,\n            fuseOptions: {\n                include: 'score',\n                threshold: 0.3,\n            },\n            indexeddb: {\n                filter: {}\n            },\n            customOptions: {},\n            useExactSearch: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select',\n            group: 'basic',\n            icon: 'th-list',\n            weight: 70,\n            documentation: '/userguide/form-building/form-components#select',\n            schema: SelectComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        const numberType = () => ({ type: 'number' });\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });\n                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {\n                    valueComp.reference = false;\n                    valueComp.onSetItems = `\n            var templateKeys = utils.getItemTemplateKeys(component.template) || [];\n            items = _.map(items || [], i => {\n              var item = {};\n              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));\n              return item;\n            })\n          `;\n                }\n                return valueComp;\n            }, dataTypeOperators: {\n                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],\n            }, dataTypeValueComponents: {\n                number: {\n                    lessThan: numberType,\n                    greaterThan: numberType,\n                    lessThanOrEqual: numberType,\n                    greaterThanOrEqual: numberType,\n                },\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType, reference } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (reference) {\n            return [object];\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        // Keep track of the select options.\n        this.selectOptions = [];\n        if (this.itemsFromUrl) {\n            this.isFromSearch = false;\n            this.searchServerCount = null;\n            this.defaultServerCount = null;\n            this.isScrollLoading = false;\n            this.searchDownloadedResources = [];\n            this.defaultDownloadedResources = [];\n        }\n        // If this component has been activated.//\n        this.activated = false;\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.shouldPositionDropdown = this.hasDataGridAncestor();\n        if (this.isHtmlRenderMode()) {\n            this.activate();\n        }\n        // Get the template keys for this select component.\n        this.getTemplateKeys();\n    }\n    get dataReady() {\n        // If the root submission has been set, and we are still not attached, then assume\n        // that our data is ready.\n        if (this.root &&\n            this.root.submissionSet &&\n            !this.attached) {\n            return Promise.resolve();\n        }\n        return this.itemsLoaded;\n    }\n    get defaultSchema() {\n        return SelectComponent.schema();\n    }\n    get emptyValue() {\n        if (this.component.multiple) {\n            return [];\n        }\n        // if select has JSON data source type, we are defining if empty value would be an object or a string by checking JSON's first item\n        if (this.component.dataSrc === 'json' && this.component.data.json) {\n            const firstItem = this.component.data.json[0];\n            let firstValue;\n            if (this.valueProperty) {\n                firstValue = lodash_1.default.get(firstItem, this.valueProperty);\n            }\n            else {\n                firstValue = firstItem;\n            }\n            if (firstValue && typeof firstValue === 'string') {\n                return '';\n            }\n            else {\n                return {};\n            }\n        }\n        if (this.valueProperty) {\n            return '';\n        }\n        return {};\n    }\n    get valueProperty() {\n        if (this.component.valueProperty) {\n            return this.component.valueProperty;\n        }\n        // Force values datasource to use values without actually setting it on the component settings.\n        if (this.component.dataSrc === 'values') {\n            return 'value';\n        }\n        return '';\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'select';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get isSelectResource() {\n        return this.component.dataSrc === 'resource';\n    }\n    get itemsFromUrl() {\n        return this.isSelectResource || this.isSelectURL;\n    }\n    get isInfiniteScrollProvided() {\n        return this.itemsFromUrl;\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get shouldInitialLoad() {\n        if (this.component.widget === 'html5' &&\n            this.isEntireObjectDisplay() &&\n            this.component.searchField &&\n            this.dataValue) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\n    }\n    isEntireObjectDisplay() {\n        return this.component.dataSrc === 'resource' && this.valueProperty === 'data';\n    }\n    selectValueAndLabel(data) {\n        const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));\n        const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;\n        return {\n            value,\n            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)\n        };\n    }\n    itemTemplate(data, value) {\n        if (!lodash_1.default.isNumber(data) && lodash_1.default.isEmpty(data)) {\n            return '';\n        }\n        // If they wish to show the value in read only mode, then just return the itemValue here.\n        if (this.options.readOnly && this.component.readOnlyValue) {\n            return this.itemValue(data);\n        }\n        // Perform a fast interpretation if we should not use the template.\n        if (data && !this.component.template) {\n            const itemLabel = data.label || data;\n            const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;\n            return this.sanitize(value, this.shouldSanitizeValue);\n        }\n        if (this.component.multiple && lodash_1.default.isArray(this.dataValue) ? this.dataValue.find((val) => value === val) : (this.dataValue === value)) {\n            const selectData = this.selectData;\n            if (selectData) {\n                const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n                if (!this.templateData || !this.templateData[templateValue]) {\n                    this.getOptionTemplate(data, value);\n                }\n                if (this.component.multiple) {\n                    if (selectData[templateValue]) {\n                        data = selectData[templateValue];\n                    }\n                }\n                else {\n                    data = selectData;\n                }\n            }\n        }\n        if (typeof data === 'string' || typeof data === 'number') {\n            return this.sanitize(this.t(data, { _userInput: true }), this.shouldSanitizeValue);\n        }\n        if (Array.isArray(data)) {\n            return data.map((val) => {\n                if (typeof val === 'string' || typeof val === 'number') {\n                    return this.sanitize(this.t(val, { _userInput: true }), this.shouldSanitizeValue);\n                }\n                return val;\n            });\n        }\n        if (data.data) {\n            // checking additional fields in the template for the selected Entire Object option\n            const hasNestedFields = /item\\.data\\.\\w*/g.test(this.component.template);\n            data.data = this.isEntireObjectDisplay() && lodash_1.default.isObject(data.data) && !hasNestedFields\n                ? JSON.stringify(data.data)\n                : data.data;\n        }\n        return super.itemTemplate(data, value);\n    }\n    /**\n     * Adds an option to the select dropdown.\n     * @param {*} value - The value of the new option.\n     * @param {string} label - The label of the new option.\n     * @param {object} [attrs] - Additional value attributes. Defaults to {}.\n     * @param {string} [id] - An id. Defaults to a random string.\n     */\n    addOption(value, label, attrs = {}, id = (0, utils_1.getRandomComponentId)()) {\n        if (lodash_1.default.isNil(label))\n            return;\n        const idPath = this.component.idPath\n            ? this.component.idPath.split('.').reduceRight((obj, key) => ({ [key]: obj }), id)\n            : {};\n        const option = Object.assign({ value: this.getOptionValue(value), label }, idPath);\n        const skipOption = this.component.uniqueOptions\n            ? !!this.selectOptions.find((selectOption) => lodash_1.default.isEqual(selectOption.value, option.value))\n            : false;\n        if (skipOption) {\n            return;\n        }\n        if (value) {\n            this.selectOptions.push(option);\n        }\n        if (this.refs.selectContainer && (this.component.widget === 'html5')) {\n            // Replace an empty Object value to an empty String.\n            if (option.value && lodash_1.default.isObject(option.value) && lodash_1.default.isEmpty(option.value)) {\n                option.value = '';\n            }\n            // Add element to option so we can reference it later.\n            const div = document.createElement('div');\n            div.innerHTML = this.sanitize(this.renderTemplate('selectOption', {\n                selected: lodash_1.default.isEqual(this.getOptionValue(this.dataValue), option.value),\n                option,\n                attrs,\n                id,\n                useId: (this.valueProperty === '' || this.isEntireObjectDisplay()) && lodash_1.default.isObject(value) && id,\n            }), this.shouldSanitizeValue).trim();\n            option.element = div.firstChild;\n            this.refs.selectContainer.appendChild(option.element);\n        }\n    }\n    addValueOptions(items) {\n        items = items || [];\n        let added = false;\n        let data = this.dataValue;\n        // preset submission value with value property before request.\n        if (this.options.pdf && !items.length && this.component.dataSrc === 'url' && this.valueProperty) {\n            data = Array.isArray(data)\n                ? data.map(item => lodash_1.default.set({}, this.valueProperty, item))\n                : lodash_1.default.set({}, this.valueProperty, data);\n        }\n        if (!this.selectOptions.length) {\n            // Add the currently selected choices if they don't already exist.\n            const currentChoices = Array.isArray(data) && this.component.multiple ? data : [data];\n            added = this.addCurrentChoices(currentChoices, items);\n            if (!added && !this.component.multiple) {\n                this.addPlaceholder();\n            }\n        }\n        return added;\n    }\n    disableInfiniteScroll() {\n        if (!this.downloadedResources) {\n            return;\n        }\n        this.downloadedResources.serverCount = this.downloadedResources.length;\n        this.serverCount = this.downloadedResources.length;\n    }\n    /* eslint-disable max-statements */\n    setItems(items, fromSearch) {\n        var _a, _b;\n        this.selectItems = items;\n        // If the items is a string, then parse as JSON.\n        if (typeof items == 'string') {\n            try {\n                items = JSON.parse(items);\n            }\n            catch (err) {\n                console.warn(err.message);\n                items = [];\n            }\n        }\n        // Allow js processing (needed for form builder)\n        if (this.component.onSetItems) {\n            const newItems = typeof this.component.onSetItems === 'function'\n                ? this.component.onSetItems(this, items)\n                : this.evaluate(this.component.onSetItems, { items: items }, 'items');\n            if (newItems) {\n                items = newItems;\n            }\n        }\n        if (!this.choices && this.refs.selectContainer) {\n            this.empty(this.refs.selectContainer);\n        }\n        // If they provided select values, then we need to get them instead.\n        if (this.component.selectValues) {\n            items = lodash_1.default.get(items, this.component.selectValues, items) || [];\n        }\n        let areItemsEqual;\n        if (this.itemsFromUrl) {\n            areItemsEqual = this.isSelectURL ? lodash_1.default.isEqual(items, this.downloadedResources) : false;\n            const areItemsEnded = this.component.limit > items.length;\n            const areItemsDownloaded = areItemsEqual\n                && this.downloadedResources\n                && this.downloadedResources.length === items.length;\n            if (areItemsEnded) {\n                this.disableInfiniteScroll();\n            }\n            else if (areItemsDownloaded) {\n                this.selectOptions = [];\n            }\n            else {\n                this.serverCount = items.serverCount;\n            }\n        }\n        if (this.isScrollLoading && items) {\n            if (!areItemsEqual) {\n                this.downloadedResources = this.downloadedResources\n                    ? this.downloadedResources.concat(items)\n                    : items;\n            }\n            this.downloadedResources.serverCount = items.serverCount || this.downloadedResources.serverCount;\n        }\n        else {\n            this.downloadedResources = items || [];\n            this.selectOptions = [];\n            // If there is new select option with same id as already selected, set the new one\n            if (!lodash_1.default.isEmpty(this.dataValue) && this.component.idPath) {\n                const selectedOptionId = lodash_1.default.get(this.dataValue, this.component.idPath, null);\n                const newOptionWithSameId = !lodash_1.default.isNil(selectedOptionId) && items.find(item => {\n                    const itemId = lodash_1.default.get(item, this.component.idPath);\n                    return itemId === selectedOptionId;\n                });\n                if (newOptionWithSameId) {\n                    this.setValue(newOptionWithSameId);\n                }\n            }\n        }\n        // Add the value options.\n        if (!fromSearch) {\n            this.addValueOptions(items);\n        }\n        if (this.component.widget === 'html5' && !this.component.placeholder) {\n            this.addOption(null, '');\n        }\n        // Iterate through each of the items.\n        lodash_1.default.each(items, (item, index) => {\n            // preventing references of the components inside the form to the parent form when building forms\n            if (this.root && this.root.options.editForm && this.root.options.editForm._id && this.root.options.editForm._id === item._id)\n                return;\n            const itemValueAndLabel = this.selectValueAndLabel(item);\n            this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, lodash_1.default.get(item, this.component.idPath, String(index)));\n        });\n        if (this.choices) {\n            this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n        }\n        else if (this.loading) {\n            // Re-attach select input.\n            // this.appendTo(this.refs.input[0], this.selectContainer);\n        }\n        // We are no longer loading.\n        this.isScrollLoading = false;\n        this.loading = false;\n        const searching = fromSearch && ((_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.isFocussed);\n        if (!searching) {\n            // If a value is provided, then select it.\n            if (!this.isEmpty() || this.isRemoveButtonPressed) {\n                this.setValue(this.dataValue, {\n                    noUpdateEvent: true\n                });\n            }\n            else if (this.shouldAddDefaultValue && !this.options.readOnly) {\n                // If a default value is provided then select it.\n                const defaultValue = this.defaultValue;\n                if (!this.isEmpty(defaultValue)) {\n                    this.setValue(defaultValue);\n                }\n            }\n        }\n        // Say we are done loading the items.\n        this.itemsLoadedResolve();\n    }\n    getSingleItemValueForHTMLMode(data) {\n        var _a;\n        const option = (_a = this.selectOptions) === null || _a === void 0 ? void 0 : _a.find(({ value }) => lodash_1.default.isEqual(value, data));\n        if (option) {\n            return option.label || data;\n        }\n        return data;\n    }\n    itemValueForHTMLMode(value) {\n        if (!this.isHtmlRenderMode()) {\n            return super.itemValueForHTMLMode(value);\n        }\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item)\n                ? this.itemValueForHTMLMode(item)\n                : this.getSingleItemValueForHTMLMode(item));\n            return values.join(', ');\n        }\n        return this.getSingleItemValueForHTMLMode(value);\n    }\n    /* eslint-enable max-statements */\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && (this.component.defaultValue === false || this.component.defaultValue === 0)) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get loadingError() {\n        return !this.component.refreshOn && !this.component.refreshOnBlur && this.networkError;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        options = options || {};\n        // See if we should load items or not.\n        if (!this.shouldLoad || (!this.itemsFromUrl && this.options.readOnly)) {\n            this.isScrollLoading = false;\n            this.loading = false;\n            this.itemsLoadedResolve();\n            return;\n        }\n        // See if they have not met the minimum search requirements.\n        const minSearch = parseInt(this.component.minSearch, 10);\n        if (this.component.searchField &&\n            (minSearch > 0) &&\n            (!search || (search.length < minSearch))) {\n            // Set empty items.\n            return this.setItems([]);\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        const query = this.component.disableLimit ? {} : {\n            limit,\n            skip,\n        };\n        // Allow for url interpolation.\n        url = this.sanitize(this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        }), this.shouldSanitizeValue);\n        // Add search capability.\n        if (this.component.searchField && search) {\n            const searchValue = Array.isArray(search)\n                ? search.join(',')\n                : typeof search === 'object'\n                    ? JSON.stringify(search)\n                    : search;\n            query[this.component.searchField] = this.component.searchField.endsWith('__regex')\n                ? lodash_1.default.escapeRegExp(searchValue)\n                : searchValue;\n        }\n        // If they wish to return only some fields.\n        if (this.component.selectFields) {\n            query.select = this.component.selectFields;\n        }\n        // Add sort capability\n        if (this.component.sort) {\n            query.sort = this.component.sort;\n        }\n        if (!lodash_1.default.isEmpty(query)) {\n            // Add the query string.\n            url += (!url.includes('?') ? '?' : '&') + Formio_1.Formio.serialize(query, (item) => this.interpolate(item));\n        }\n        // Add filter capability\n        if (this.component.filter) {\n            url += (!url.includes('?') ? '?' : '&') + this.interpolate(this.component.filter);\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response, !!search);\n        })\n            .catch((err) => {\n            if (this.itemsFromUrl) {\n                this.setItems([]);\n                this.disableInfiniteScroll();\n            }\n            this.isScrollLoading = false;\n            this.handleLoadingError(err);\n        });\n    }\n    handleLoadingError(err) {\n        this.loading = false;\n        if (err.networkError) {\n            this.networkError = true;\n        }\n        this.itemsLoadedResolve();\n        this.emit('componentError', {\n            component: this.component,\n            message: err.toString(),\n        });\n        console.warn(`Unable to load resources for ${this.key}`);\n    }\n    /**\n     * Get the request headers for this select dropdown.\n     * @returns {*} - Returns the request headers for this select dropdown.\n     */\n    get requestHeaders() {\n        // Create the headers object.\n        const headers = new Formio_1.Formio.Headers();\n        // Add custom headers to the url.\n        if (this.component.data && this.component.data.headers) {\n            try {\n                lodash_1.default.each(this.component.data.headers, (header) => {\n                    if (header.key) {\n                        headers.set(header.key, this.interpolate(header.value));\n                    }\n                });\n            }\n            catch (err) {\n                console.warn(err.message);\n            }\n        }\n        return headers;\n    }\n    getCustomItems() {\n        const customItems = this.evaluate(this.component.data.custom, {\n            values: []\n        }, 'values');\n        this.asyncValues = (0, utils_1.isPromise)(customItems);\n        return customItems;\n    }\n    asyncCustomValues() {\n        if (!lodash_1.default.isBoolean(this.asyncValues)) {\n            this.getCustomItems();\n        }\n        return this.asyncValues;\n    }\n    updateCustomItems(forceUpdate) {\n        if (this.asyncCustomValues()) {\n            if (!forceUpdate && !this.active) {\n                this.itemsLoadedResolve();\n                return;\n            }\n            this.loading = true;\n            this.getCustomItems()\n                .then(items => {\n                this.loading = false;\n                this.setItems(items || []);\n            })\n                .catch(err => {\n                this.handleLoadingError(err);\n            });\n        }\n        else {\n            this.setItems(this.getCustomItems() || []);\n        }\n    }\n    isEmpty(value = this.dataValue) {\n        return super.isEmpty(value) || value === undefined;\n    }\n    refresh(value, { instance }) {\n        if (this.component.clearOnRefresh && (instance && !instance.pristine)) {\n            this.setValue(this.emptyValue);\n        }\n        this.updateItems(null, true);\n    }\n    get additionalResourcesAvailable() {\n        return lodash_1.default.isNil(this.serverCount) || (this.serverCount > this.downloadedResources.length);\n    }\n    get serverCount() {\n        if (this.isFromSearch) {\n            return this.searchServerCount;\n        }\n        return this.defaultServerCount;\n    }\n    set serverCount(value) {\n        if (this.isFromSearch) {\n            this.searchServerCount = value;\n        }\n        else {\n            this.defaultServerCount = value;\n        }\n    }\n    get downloadedResources() {\n        if (this.isFromSearch) {\n            return this.searchDownloadedResources;\n        }\n        return this.defaultDownloadedResources;\n    }\n    set downloadedResources(value) {\n        if (this.isFromSearch) {\n            this.searchDownloadedResources = value;\n        }\n        else {\n            this.defaultDownloadedResources = value;\n        }\n    }\n    addPlaceholder() {\n        if (!this.component.placeholder) {\n            return;\n        }\n        this.addOption('', this.component.placeholder, { placeholder: true });\n    }\n    /**\n     * Activate this select control.\n     */\n    activate() {\n        if (this.loading || !this.active) {\n            this.setLoadingItem();\n        }\n        if (this.active) {\n            return;\n        }\n        this.activated = true;\n        this.triggerUpdate();\n    }\n    setLoadingItem(addToCurrentList = false) {\n        if (this.choices) {\n            if (addToCurrentList) {\n                this.choices.setChoices([{\n                        value: `${this.id}-loading`,\n                        label: 'Loading...',\n                        disabled: true,\n                    }], 'value', 'label');\n            }\n            else {\n                this.choices.setChoices([{\n                        value: '',\n                        label: `<i class=\"${this.iconClass('refresh')}\" style=\"font-size:1.3em;\"></i>`,\n                        disabled: true,\n                    }], 'value', 'label', true);\n            }\n        }\n        else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {\n            this.addOption('', this.t('loading...'));\n        }\n    }\n    get active() {\n        return !this.component.lazyLoad || this.activated;\n    }\n    render() {\n        const info = this.inputInfo;\n        info.attr = info.attr || {};\n        info.multiple = this.component.multiple;\n        return super.render(this.wrapElement(this.renderTemplate('select', {\n            input: info,\n            selectOptions: '',\n            index: null,\n        })));\n    }\n    wrapElement(element) {\n        return this.component.addResource && !this.options.readOnly\n            ? (this.renderTemplate('resourceAdd', {\n                element\n            }))\n            : element;\n    }\n    choicesOptions() {\n        const useSearch = this.component.hasOwnProperty('searchEnabled') ? this.component.searchEnabled : true;\n        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions == 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        const commonFuseOptions = {\n            maxPatternLength: 1000,\n            distance: 1000,\n        };\n        return Object.assign({ removeItemButton: this.component.disabled ? false : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {\n                containerOuter: 'choices form-group formio-choices',\n                containerInner: this.transform('class', 'form-control ui fluid selection dropdown')\n            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: (this.component.dropdown || 'auto'), searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch\n                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false }, customOptions);\n    }\n    /* eslint-disable max-statements */\n    attach(element) {\n        var _a, _b, _c;\n        const superAttach = super.attach(element);\n        this.loadRefs(element, {\n            selectContainer: 'single',\n            addResource: 'single',\n            autocompleteInput: 'single'\n        });\n        //enable autocomplete for select\n        const autocompleteInput = this.refs.autocompleteInput;\n        if (autocompleteInput) {\n            this.addEventListener(autocompleteInput, 'change', (event) => {\n                this.setValue(event.target.value);\n            });\n        }\n        const input = this.refs.selectContainer;\n        if (!input) {\n            return;\n        }\n        this.addEventListener(input, this.inputInfo.changeEvent, () => this.updateValue(null, {\n            modified: true\n        }));\n        this.attachRefreshOnBlur();\n        if (this.component.widget === 'html5') {\n            this.addFocusBlurEvents(input);\n            this.triggerUpdate(null, true);\n            if (this.visible) {\n                this.setItems(this.selectItems || []);\n            }\n            this.focusableElement = input;\n            if (this.component.dataSrc === 'custom') {\n                this.addEventListener(input, 'focus', () => this.updateCustomItems());\n            }\n            this.addEventListener(input, 'keydown', (event) => {\n                const { key } = event;\n                if (['Backspace', 'Delete'].includes(key)) {\n                    this.setValue(this.emptyValue);\n                }\n            });\n            return;\n        }\n        const tabIndex = input.tabIndex;\n        this.addPlaceholder();\n        if (this.i18next) {\n            input.setAttribute('dir', this.i18next.dir());\n        }\n        if ((_c = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.containerOuter) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.parentNode) {\n            this.choices.destroy();\n        }\n        const choicesOptions = this.choicesOptions();\n        if (ChoicesWrapper_1.default) {\n            this.choices = new ChoicesWrapper_1.default(input, choicesOptions);\n            if (this.selectOptions && this.selectOptions.length) {\n                this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n            }\n            if (this.component.multiple) {\n                this.focusableElement = this.choices.input.element;\n            }\n            else {\n                this.focusableElement = this.choices.containerInner.element;\n                this.choices.containerOuter.element.setAttribute('tabIndex', '-1');\n                this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());\n            }\n            this.addFocusBlurEvents(this.choices.input.element);\n            if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {\n                this.scrollList = this.choices.choiceList.element;\n                this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());\n            }\n            if (choicesOptions.removeItemButton) {\n                this.addEventListener(input, 'removeItem', () => {\n                    this.isRemoveButtonPressed = true;\n                });\n            }\n        }\n        if (window && this.choices && this.shouldPositionDropdown) {\n            this.addEventListener(window.document, 'scroll', () => {\n                this.positionDropdown(true);\n            }, false, true);\n        }\n        this.focusableElement.setAttribute('tabIndex', tabIndex);\n        // If a search field is provided, then add an event listener to update items on search.\n        if (this.component.searchField) {\n            // Make sure to clear the search when no value is provided.\n            if (this.choices && this.choices.input && this.choices.input.element) {\n                this.addEventListener(this.choices.input.element, 'input', (event) => {\n                    this.isFromSearch = !!event.target.value;\n                    if (!event.target.value) {\n                        this.triggerUpdate();\n                    }\n                    else {\n                        this.serverCount = null;\n                        this.downloadedResources = [];\n                    }\n                });\n            }\n            this.addEventListener(input, 'choice', () => {\n                if (this.component.multiple && this.component.dataSrc === 'resource' && this.isFromSearch) {\n                    this.triggerUpdate();\n                }\n                this.isFromSearch = false;\n            });\n            // avoid spamming the resource/url endpoint when we have server side filtering enabled.\n            const debounceTimeout = this.component.searchField && (this.isSelectResource || this.isSelectURL) ?\n                (this.component.searchDebounce === 0 ? 0 : this.component.searchDebounce || this.defaultSchema.searchDebounce) * 1000\n                : 0;\n            const updateComponent = (evt) => {\n                this.triggerUpdate(evt.detail.value);\n            };\n            this.addEventListener(input, 'search', lodash_1.default.debounce((e) => {\n                updateComponent(e);\n                this.positionDropdown();\n            }, debounceTimeout));\n            this.addEventListener(input, 'stopSearch', () => this.triggerUpdate());\n            this.addEventListener(input, 'hideDropdown', () => {\n                if (this.choices && this.choices.input && this.choices.input.element) {\n                    this.choices.input.element.value = '';\n                }\n                this.updateItems(null, true);\n            });\n        }\n        this.addEventListener(input, 'showDropdown', () => {\n            this.update();\n            this.positionDropdown();\n        });\n        if (this.shouldPositionDropdown) {\n            this.addEventListener(input, 'highlightChoice', () => {\n                this.positionDropdown();\n            });\n        }\n        if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {\n            this.addPlaceholderItem(choicesOptions.placeholderValue);\n            this.addEventListener(input, 'removeItem', () => {\n                this.addPlaceholderItem(choicesOptions.placeholderValue);\n            });\n        }\n        // Add value options.\n        this.addValueOptions();\n        this.setChoicesValue(this.dataValue);\n        if (this.isSelectResource && this.refs.addResource) {\n            this.addEventListener(this.refs.addResource, 'click', (event) => {\n                event.preventDefault();\n                const formioForm = this.ce('div');\n                const dialog = this.createModal(formioForm);\n                const projectUrl = lodash_1.default.get(this.root, 'formio.projectUrl', Formio_1.Formio.getProjectUrl());\n                const formUrl = `${projectUrl}/form/${this.component.data.resource}`;\n                new Form_1.default(formioForm, formUrl, {}).ready\n                    .then((form) => {\n                    form.on('submit', (submission) => {\n                        // If valueProperty is set, replace the submission with the corresponding value\n                        let value = this.valueProperty ? lodash_1.default.get(submission, this.valueProperty) : submission;\n                        if (this.component.multiple) {\n                            value = [...this.dataValue, value];\n                        }\n                        this.setValue(value);\n                        this.triggerUpdate();\n                        dialog.close();\n                    });\n                });\n            });\n        }\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        this.triggerUpdate();\n        return superAttach;\n    }\n    setDropdownPosition() {\n        var _a, _b, _c, _d;\n        const dropdown = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.dropdown) === null || _b === void 0 ? void 0 : _b.element;\n        const container = (_d = (_c = this.choices) === null || _c === void 0 ? void 0 : _c.containerOuter) === null || _d === void 0 ? void 0 : _d.element;\n        if (!dropdown || !container) {\n            return;\n        }\n        const containerPosition = container.getBoundingClientRect();\n        const isFlipped = container.classList.contains('is-flipped');\n        lodash_1.default.assign(dropdown.style, {\n            top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,\n            left: `${containerPosition.left}px`,\n            width: `${containerPosition.width}px`,\n            position: 'fixed',\n            bottom: 'unset',\n            right: 'unset',\n        });\n    }\n    hasDataGridAncestor(comp) {\n        comp = comp || this;\n        if (comp.inDataGrid || comp.type === 'datagrid') {\n            return true;\n        }\n        else if (comp.parent) {\n            return this.hasDataGridAncestor(comp.parent);\n        }\n        else {\n            return false;\n        }\n    }\n    positionDropdown(scroll) {\n        var _a;\n        if (!this.shouldPositionDropdown || !this.choices || (!((_a = this.choices.dropdown) === null || _a === void 0 ? void 0 : _a.isActive) && scroll)) {\n            return;\n        }\n        this.setDropdownPosition();\n        this.itemsLoaded.then(() => {\n            this.setDropdownPosition();\n        });\n    }\n    get isLoadingAvailable() {\n        return !this.isScrollLoading && this.additionalResourcesAvailable;\n    }\n    onScroll() {\n        if (this.isLoadingAvailable) {\n            this.isScrollLoading = true;\n            this.setLoadingItem(true);\n            this.triggerUpdate(this.choices.input.element.value);\n        }\n    }\n    attachRefreshOnBlur() {\n        if (this.component.refreshOnBlur) {\n            this.on('blur', (instance) => {\n                this.checkRefreshOn([{ instance, value: instance.dataValue }], { fromBlur: true });\n            });\n        }\n    }\n    addPlaceholderItem(placeholderValue) {\n        const items = this.choices._store.activeItems;\n        if (!items.length) {\n            this.choices._addItem({\n                value: '',\n                label: placeholderValue,\n                choiceId: 0,\n                groupId: -1,\n                customProperties: null,\n                placeholder: true,\n                keyCode: null\n            });\n        }\n    }\n    /* eslint-enable max-statements */\n    update() {\n        if (this.component.dataSrc === 'custom') {\n            this.updateCustomItems();\n        }\n        // Activate the control.\n        this.activate();\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.setDisabled(this.choices.containerInner.element, true);\n            this.focusableElement.removeAttribute('tabIndex');\n            this.choices.disable();\n        }\n        else {\n            this.setDisabled(this.choices.containerInner.element, false);\n            this.focusableElement.setAttribute('tabIndex', this.component.tabindex || 0);\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    set visible(value) {\n        // If we go from hidden to visible, trigger a refresh.\n        if (value && (!this._visible !== !value)) {\n            this.triggerUpdate();\n        }\n        super.visible = value;\n    }\n    get visible() {\n        return super.visible;\n    }\n    addCurrentChoices(values, items, keyValue) {\n        if (!values) {\n            return false;\n        }\n        const notFoundValuesToAdd = [];\n        const added = values.reduce((defaultAdded, value) => {\n            if (!value || lodash_1.default.isEmpty(value)) {\n                return defaultAdded;\n            }\n            let found = false;\n            // Make sure that `items` and `this.selectOptions` points\n            // to the same reference. Because `this.selectOptions` is\n            // internal property and all items are populated by\n            // `this.addOption` method, we assume that items has\n            // 'label' and 'value' properties. This assumption allows\n            // us to read correct value from the item.\n            const isSelectOptions = items === this.selectOptions;\n            if (items && items.length) {\n                lodash_1.default.each(items, (choice) => {\n                    if (choice._id && value._id && (choice._id === value._id)) {\n                        found = true;\n                        return false;\n                    }\n                    const itemValue = keyValue ? choice.value : this.itemValue(choice, isSelectOptions);\n                    found |= lodash_1.default.isEqual(itemValue, value);\n                    return found ? false : true;\n                });\n            }\n            // Add the default option if no item is found.\n            if (!found) {\n                notFoundValuesToAdd.push(this.selectValueAndLabel(value));\n                return true;\n            }\n            return found || defaultAdded;\n        }, false);\n        if (notFoundValuesToAdd.length) {\n            if (this.choices) {\n                this.choices.setChoices(notFoundValuesToAdd, 'value', 'label');\n            }\n            notFoundValuesToAdd.map(notFoundValue => {\n                this.addOption(notFoundValue.value, notFoundValue.label);\n            });\n        }\n        return added;\n    }\n    getValueAsString(data, options) {\n        return (this.component.multiple && Array.isArray(data))\n            ? data.map((v) => this.asString(v, options)).join(', ')\n            : this.asString(data, options);\n    }\n    getValue() {\n        // If the widget isn't active.\n        if (this.viewOnly || this.loading\n            || (!this.component.lazyLoad && !this.selectOptions.length)\n            || !this.element) {\n            return this.dataValue;\n        }\n        let value = this.emptyValue;\n        if (this.choices) {\n            value = this.choices.getValue(true);\n            // Make sure we don't get the placeholder\n            if (!this.component.multiple &&\n                this.component.placeholder &&\n                (value === this.t(this.component.placeholder, { _userInput: true }))) {\n                value = this.emptyValue;\n            }\n        }\n        else if (this.refs.selectContainer) {\n            value = this.refs.selectContainer.value;\n            if (this.valueProperty === '' || this.isEntireObjectDisplay()) {\n                if (value === '') {\n                    return {};\n                }\n                const option = this.selectOptions[value] ||\n                    this.selectOptions.find(option => option.id === value);\n                if (option && lodash_1.default.isObject(option.value)) {\n                    value = option.value;\n                }\n            }\n        }\n        else {\n            value = this.dataValue;\n        }\n        // Choices will return undefined if nothing is selected. We really want '' to be empty.\n        if (value === undefined || value === null) {\n            value = '';\n        }\n        return value;\n    }\n    redraw() {\n        const done = super.redraw();\n        this.triggerUpdate();\n        return done;\n    }\n    normalizeSingleValue(value) {\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        const dataType = this.component.dataType || 'auto';\n        const normalize = {\n            value,\n            number() {\n                const numberValue = Number(this.value);\n                const isEquivalent = value.toString() === numberValue.toString();\n                if (!Number.isNaN(numberValue) && Number.isFinite(numberValue) && value !== '' && isEquivalent) {\n                    this.value = numberValue;\n                }\n                return this;\n            },\n            boolean() {\n                if (lodash_1.default.isString(this.value)\n                    && (this.value.toLowerCase() === 'true'\n                        || this.value.toLowerCase() === 'false')) {\n                    this.value = (this.value.toLowerCase() === 'true');\n                }\n                return this;\n            },\n            string() {\n                this.value = String(this.value);\n                return this;\n            },\n            object() {\n                return this;\n            },\n            auto() {\n                if (lodash_1.default.isObject(this.value)) {\n                    this.value = this.object().value;\n                }\n                else {\n                    this.value = this.string().number().boolean().value;\n                }\n                return this;\n            }\n        };\n        try {\n            return normalize[dataType]().value;\n        }\n        catch (err) {\n            console.warn('Failed to normalize value', err);\n            return value;\n        }\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        if (this.component.multiple && Array.isArray(value)) {\n            return value.map((singleValue) => this.normalizeSingleValue(singleValue));\n        }\n        return super.normalizeValue(this.normalizeSingleValue(value));\n    }\n    setMetadata(value) {\n        var _a;\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        // Check to see if we need to save off the template data into our metadata.\n        const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n        const shouldSaveData = !valueIsObject || this.component.reference;\n        if (templateValue && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            let templateData = this.templateData[templateValue];\n            if (this.component.multiple) {\n                templateData = {};\n                const dataValue = this.dataValue;\n                if (dataValue && lodash_1.default.isArray(dataValue) && dataValue.length) {\n                    dataValue.forEach((dataValueItem) => {\n                        const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;\n                        templateData[dataValueItemValue] = this.templateData[dataValueItemValue];\n                    });\n                }\n                templateData[value] = this.templateData[value];\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, templateData);\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed || !this.selectMetadata) {\n            if (this.component.multiple && Array.isArray(this.dataValue)) {\n                this.dataValue.forEach(singleValue => this.setMetadata(singleValue));\n            }\n            else {\n                this.setMetadata(this.dataValue);\n            }\n        }\n        return changed;\n    }\n    setValue(value, flags = {}) {\n        const previousValue = this.dataValue;\n        const changed = this.updateValue(value, flags);\n        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {})) && !flags.fromSubmission) {\n            return false;\n        }\n        value = this.dataValue;\n        const hasPreviousValue = !this.isEmpty(previousValue);\n        const hasValue = !this.isEmpty(value);\n        // Undo typing when searching to set the value.\n        if (this.component.multiple && Array.isArray(value)) {\n            value = value.map(value => {\n                if (typeof value === 'boolean' || typeof value === 'number') {\n                    return value.toString();\n                }\n                return value;\n            });\n        }\n        else {\n            if (typeof value === 'boolean' || typeof value === 'number') {\n                value = value.toString();\n            }\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.itemsLoaded.then(() => {\n                this.redraw();\n            });\n            return changed;\n        }\n        // Do not set the value if we are loading... that will happen after it is done.\n        if (this.loading) {\n            return changed;\n        }\n        // Determine if we need to perform an initial lazyLoad api call if searchField is provided.\n        if (this.isInitApiCallNeeded(hasValue)) {\n            this.loading = true;\n            this.lazyLoadInit = true;\n            const searchProperty = this.component.searchField || this.component.valueProperty;\n            this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);\n            return changed;\n        }\n        // Add the value options.\n        this.itemsLoaded.then(() => {\n            this.addValueOptions();\n            this.setChoicesValue(value, hasPreviousValue, flags);\n        });\n        return changed;\n    }\n    isInitApiCallNeeded(hasValue) {\n        return this.component.lazyLoad &&\n            !this.lazyLoadInit &&\n            !this.active &&\n            !this.selectOptions.length &&\n            hasValue &&\n            this.shouldInitialLoad &&\n            this.visible && (this.component.searchField || this.component.valueProperty);\n    }\n    setChoicesValue(value, hasPreviousValue, flags = {}) {\n        const hasValue = !this.isEmpty(value) || flags.fromSubmission;\n        hasPreviousValue = (hasPreviousValue === undefined) ? true : hasPreviousValue;\n        if (this.choices) {\n            // Now set the value.\n            if (hasValue) {\n                this.choices.removeActiveItems();\n                // Add the currently selected choices if they don't already exist.\n                const currentChoices = Array.isArray(value) && this.component.multiple ? value : [value];\n                if (!this.addCurrentChoices(currentChoices, this.selectOptions, true)) {\n                    this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n                }\n                this.choices.setChoiceByValue(currentChoices);\n            }\n            else if (hasPreviousValue || flags.resetValue) {\n                this.choices.removeActiveItems();\n            }\n        }\n        else {\n            if (hasValue) {\n                const values = Array.isArray(value) ? value : [value];\n                if (!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2\n                    || (this.selectData && flags.fromSubmission)) {\n                    const { value, label } = this.selectValueAndLabel(this.dataValue);\n                    this.addOption(value, label);\n                }\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    lodash_1.default.each(values, (val) => {\n                        if (selectOption.value === '') {\n                            selectOption.value = {};\n                        }\n                        if (lodash_1.default.isEqual(val, selectOption.value) && selectOption.element) {\n                            selectOption.element.selected = true;\n                            selectOption.element.setAttribute('selected', 'selected');\n                            return false;\n                        }\n                    });\n                });\n            }\n            else {\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    if (selectOption.element) {\n                        selectOption.element.selected = false;\n                        selectOption.element.removeAttribute('selected');\n                    }\n                });\n            }\n        }\n    }\n    get itemsLoaded() {\n        return this._itemsLoaded || Promise.resolve();\n    }\n    set itemsLoaded(promise) {\n        this._itemsLoaded = promise;\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.getOptionsValues();\n        if (values) {\n            if (lodash_1.default.isObject(value)) {\n                const compareComplexValues = (optionValue) => {\n                    const normalizedOptionValue = this.normalizeSingleValue(optionValue);\n                    if (!lodash_1.default.isObject(normalizedOptionValue)) {\n                        return false;\n                    }\n                    try {\n                        return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));\n                    }\n                    catch (err) {\n                        console.warn.error('Error while comparing items', err);\n                        return false;\n                    }\n                };\n                return values.findIndex((optionValue) => compareComplexValues(optionValue)) !== -1;\n            }\n            return values.findIndex((optionValue) => this.normalizeSingleValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    /**\n     * Performs required transformations on the initial value to use in selectOptions\n     * @param {*} value - The value to transform.\n     * @returns {*} - Returns the options value.\n     */\n    getOptionValue(value) {\n        return lodash_1.default.isObject(value) && this.isEntireObjectDisplay()\n            ? this.normalizeSingleValue(value)\n            : lodash_1.default.isObject(value) && (this.valueProperty || this.component.key !== 'resource')\n                ? value\n                : lodash_1.default.isObject(value) && !this.valueProperty\n                    ? this.interpolate(this.component.template, { item: value }).replace(/<\\/?[^>]+(>|$)/g, '')\n                    : lodash_1.default.isNull(value)\n                        ? this.emptyValue\n                        : String(this.normalizeSingleValue(value));\n    }\n    /**\n     * If component has static values (values, json) or custom values, returns an array of them\n     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.\n     */\n    getOptionsValues() {\n        let rawItems = [];\n        switch (this.component.dataSrc) {\n            case 'values':\n                rawItems = this.component.data.values;\n                break;\n            case 'json':\n                rawItems = this.component.data.json;\n                break;\n            case 'custom':\n                rawItems = this.getCustomItems();\n                break;\n        }\n        if (typeof rawItems === 'string') {\n            try {\n                rawItems = JSON.parse(rawItems);\n            }\n            catch (err) {\n                console.warn(err.message);\n                rawItems = [];\n            }\n        }\n        if (!Array.isArray(rawItems)) {\n            return;\n        }\n        return rawItems.map((item) => this.getOptionValue(this.itemValue(item)));\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue('', {\n            noUpdateEvent: true\n        });\n        this.unset();\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - Returns FALSE for select components.\n     */\n    validateMultiple() {\n        // Select component will contain one input when flagged as multiple.\n        return false;\n    }\n    /**\n     * Output this select dropdown as a string value.\n     * @returns {*}\n     */\n    isBooleanOrNumber(value) {\n        return typeof value === 'number' || typeof value === 'boolean';\n    }\n    getNormalizedValues() {\n        if (!this.component || !this.component.data || !this.component.data.values) {\n            return;\n        }\n        return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));\n    }\n    asString(value, options = {}) {\n        var _a;\n        value = value !== null && value !== void 0 ? value : this.getValue();\n        if (options.modalPreview && this.selectData) {\n            const { label } = this.selectValueAndLabel(value);\n            return label;\n        }\n        //need to convert values to strings to be able to compare values with available options that are strings\n        const convertToString = (data, valueProperty) => {\n            if (valueProperty) {\n                if (Array.isArray(data)) {\n                    data.forEach((item) => item[valueProperty] = item[valueProperty].toString());\n                }\n                else {\n                    data[valueProperty] = data[valueProperty].toString();\n                }\n                return data;\n            }\n            if (this.isBooleanOrNumber(data)) {\n                data = data.toString();\n            }\n            if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {\n                data = data.map(item => {\n                    if (this.isBooleanOrNumber(item)) {\n                        item = item.toString();\n                    }\n                });\n            }\n            return data;\n        };\n        value = convertToString(value);\n        if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {\n            const { items, valueProperty, } = this.component.dataSrc === 'values'\n                ? {\n                    items: convertToString(this.getNormalizedValues(), 'value'),\n                    valueProperty: 'value',\n                }\n                : {\n                    items: convertToString(this.getCustomItems(), this.valueProperty),\n                    valueProperty: this.valueProperty,\n                };\n            const getFromValues = () => {\n                const initialValue = lodash_1.default.find(items, [valueProperty, value]);\n                const values = this.defaultSchema.data.values || [];\n                return lodash_1.default.isEqual(initialValue, values[0]) ? '-' : initialValue;\n            };\n            value = (this.component.multiple && Array.isArray(value))\n                ? lodash_1.default.filter(items, (item) => value.includes(item.value))\n                : valueProperty\n                    ? (_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value }\n                    : value;\n        }\n        if (lodash_1.default.isString(value)) {\n            return value;\n        }\n        const getTemplateValue = (v) => {\n            const itemTemplate = this.itemTemplate(v);\n            return options.csv && itemTemplate\n                ? (0, utils_1.removeHTML)(itemTemplate)\n                : itemTemplate;\n        };\n        if (Array.isArray(value)) {\n            const items = [];\n            value.forEach(item => items.push(getTemplateValue(item)));\n            if (this.component.dataSrc === 'resource' && items.length > 0) {\n                return items.join(', ');\n            }\n            else if (items.length > 0) {\n                return items.join('<br />');\n            }\n            else {\n                return '-';\n            }\n        }\n        if (this.isEntireObjectDisplay() && lodash_1.default.isObject(value)) {\n            return JSON.stringify(value);\n        }\n        return !lodash_1.default.isNil(value)\n            ? getTemplateValue(value)\n            : '-';\n    }\n    detach() {\n        var _a, _b;\n        this.off('blur');\n        if (this.choices) {\n            if ((_b = (_a = this.choices.containerOuter) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.parentNode) {\n                this.choices.destroy();\n            }\n            this.choices = null;\n        }\n        super.detach();\n    }\n    focus() {\n        if (this.focusableElement) {\n            super.focus.call(this);\n            this.focusableElement.focus();\n        }\n    }\n    setErrorClasses(elements, dirty, hasError, hasMessages, element = this.element) {\n        super.setErrorClasses(elements, dirty, hasError, hasMessages, element);\n        if (this.choices) {\n            super.setErrorClasses([this.choices.containerInner.element], dirty, hasError, hasMessages, element);\n        }\n        else {\n            super.setErrorClasses([this.refs.selectContainer], dirty, hasError, hasMessages, element);\n        }\n    }\n}\nexports[\"default\"] = SelectComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/Select.js?");
 
 /***/ }),
 
@@ -7325,7 +7325,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 moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst TextField_1 = __importDefault(__webpack_require__(/*! ../textfield/TextField */ \"./lib/cjs/components/textfield/TextField.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst defaultDataFormat = 'HH:mm:ss';\nclass TimeComponent extends TextField_1.default {\n    static schema(...extend) {\n        return TextField_1.default.schema({\n            type: 'time',\n            label: 'Time',\n            key: 'time',\n            inputType: 'time',\n            format: 'HH:mm',\n            dataFormat: defaultDataFormat,\n        }, ...extend);\n    }\n    static get serverConditionSettings() {\n        return Object.assign(Object.assign({}, super.serverConditionSettings), { valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'time' });\n            } });\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        const { edge: isEdgeBrowser, version: edgeVersion } = (0, utils_1.getBrowserInfo)();\n        this.component.inputMask = this.getInputMaskFromFormat(this.component.format);\n        this.component.inputType = isEdgeBrowser && edgeVersion <= 18\n            ? 'text'\n            : (this.component.inputType || 'time');\n        this.rawData = this.component.multiple ? [] : this.emptyValue;\n    }\n    static get builderInfo() {\n        return {\n            title: 'Time',\n            icon: 'clock-o',\n            group: 'advanced',\n            documentation: '/userguide/form-building/advanced-components#time-1',\n            weight: 55,\n            schema: TimeComponent.schema(),\n        };\n    }\n    get dataFormat() {\n        return this.component.dataFormat || defaultDataFormat;\n    }\n    get defaultSchema() {\n        return TimeComponent.schema();\n    }\n    get defaultValue() {\n        let value = super.defaultValue;\n        if (this.component.multiple && Array.isArray(value)) {\n            value = value.map(item => item ? this.getStringAsValue(item) : item);\n        }\n        else {\n            if (value) {\n                value = this.getStringAsValue(value);\n            }\n        }\n        return value;\n    }\n    get validationValue() {\n        if (Array.isArray(this.rawData) && !this.rawData.length || !this.rawData) {\n            return this.dataValue;\n        }\n        return this.rawData;\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.attr.type = this.component.inputType;\n        return info;\n    }\n    get skipMaskValidation() {\n        return true;\n    }\n    isNotCompleteInput(value) {\n        return value.includes('_');\n    }\n    removeValue(index) {\n        this.rawData = Array.isArray(this.rawData) ? [...this.rawData.slice(0, index), ...this.rawData.slice(index + 1)] : this.emptyValue;\n        super.removeValue(index);\n    }\n    resetRawData(index) {\n        if (index) {\n            this.setRawValue(this.emptyValue, index);\n        }\n        else {\n            this.rawData = [];\n        }\n    }\n    setRawValue(value, index) {\n        if (Array.isArray(this.rawData)) {\n            this.rawData[index] = value;\n        }\n        else {\n            this.rawData = value;\n        }\n    }\n    getRawValue(index) {\n        if (index && Array.isArray(this.rawData)) {\n            return this.rawData[index] || this.emptyValue;\n        }\n        else {\n            return this.rawData;\n        }\n    }\n    getValueAt(index) {\n        if (!this.refs.input.length || !this.refs.input[index]) {\n            return this.emptyValue;\n        }\n        const { value } = this.refs.input[index];\n        if (!value) {\n            this.resetRawData(index);\n            return this.emptyValue;\n        }\n        this.setRawValue(value, index);\n        return this.getStringAsValue(value);\n    }\n    setValueAt(index, value) {\n        this.setRawValue(value ? this.getValueAsString(value) : value, index);\n        this.refs.input[index].value = this.getRawValue(index);\n    }\n    getStringAsValue(view) {\n        return view ? (0, moment_1.default)(view, this.component.format).format(this.component.dataFormat) : view;\n    }\n    getValueAsString(value) {\n        if (Array.isArray(value) && this.component.multiple) {\n            return value.map(item => (0, moment_1.default)(item, this.component.dataFormat).format(this.component.format)).join(', ');\n        }\n        return (value ? (0, moment_1.default)(value, this.component.dataFormat).format(this.component.format) : value) || '';\n    }\n    getInputMaskFromFormat(format) {\n        if (format === 'LT') {\n            return '99:99 AA';\n        }\n        if (format === 'LTS') {\n            return '99:99:99 AA';\n        }\n        return format.replace(/[hHmMsSk]/g, '9')\n            .replace(/[aA]/, 'AA');\n    }\n    addFocusBlurEvents(element) {\n        super.addFocusBlurEvents(element);\n        this.addEventListener(element, 'blur', () => {\n            element.value = this.getValueAsString(element.value);\n        });\n    }\n}\nexports[\"default\"] = TimeComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/time/Time.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 moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst TextField_1 = __importDefault(__webpack_require__(/*! ../textfield/TextField */ \"./lib/cjs/components/textfield/TextField.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst defaultDataFormat = 'HH:mm:ss';\nclass TimeComponent extends TextField_1.default {\n    static schema(...extend) {\n        return TextField_1.default.schema({\n            type: 'time',\n            label: 'Time',\n            key: 'time',\n            inputType: 'time',\n            format: 'HH:mm',\n            dataFormat: defaultDataFormat,\n        }, ...extend);\n    }\n    static get serverConditionSettings() {\n        return Object.assign(Object.assign({}, super.serverConditionSettings), { valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'time' });\n            } });\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        const { edge: isEdgeBrowser, version: edgeVersion } = (0, utils_1.getBrowserInfo)();\n        this.component.inputMask = this.getInputMaskFromFormat(this.component.format);\n        this.component.inputType = isEdgeBrowser && edgeVersion <= 18\n            ? 'text'\n            : (this.component.inputType || 'time');\n        // If default value is given then the raw data needs to be set\n        this.rawData = this.component.multiple ? [] : this.getValueAsString(this.defaultValue) || this.emptyValue;\n    }\n    static get builderInfo() {\n        return {\n            title: 'Time',\n            icon: 'clock-o',\n            group: 'advanced',\n            documentation: '/userguide/form-building/advanced-components#time-1',\n            weight: 55,\n            schema: TimeComponent.schema(),\n        };\n    }\n    get dataFormat() {\n        return this.component.dataFormat || defaultDataFormat;\n    }\n    get defaultSchema() {\n        return TimeComponent.schema();\n    }\n    get defaultValue() {\n        let value = super.defaultValue;\n        if (this.component.multiple && Array.isArray(value)) {\n            value = value.map(item => item ? this.getStringAsValue(item) : item);\n        }\n        else {\n            if (value) {\n                value = this.getStringAsValue(value);\n            }\n        }\n        return value;\n    }\n    get validationValue() {\n        if ((Array.isArray(this.rawData) && !this.rawData.length) || !this.rawData) {\n            return this.dataValue;\n        }\n        return this.rawData;\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.attr.type = this.component.inputType;\n        return info;\n    }\n    get skipMaskValidation() {\n        return true;\n    }\n    isNotCompleteInput(value) {\n        return value.includes('_');\n    }\n    removeValue(index) {\n        this.rawData = Array.isArray(this.rawData) ? [...this.rawData.slice(0, index), ...this.rawData.slice(index + 1)] : this.emptyValue;\n        super.removeValue(index);\n    }\n    resetRawData(index) {\n        if (index) {\n            this.setRawValue(this.emptyValue, index);\n        }\n        else {\n            this.rawData = [];\n        }\n    }\n    setRawValue(value, index) {\n        if (Array.isArray(this.rawData)) {\n            this.rawData[index] = value;\n        }\n        else {\n            this.rawData = value;\n        }\n    }\n    getRawValue(index) {\n        if (index && Array.isArray(this.rawData)) {\n            return this.rawData[index] || this.emptyValue;\n        }\n        else {\n            return this.rawData;\n        }\n    }\n    getValueAt(index) {\n        if (!this.refs.input.length || !this.refs.input[index]) {\n            return this.emptyValue;\n        }\n        const { value } = this.refs.input[index];\n        if (!value) {\n            this.resetRawData(index);\n            return this.emptyValue;\n        }\n        this.setRawValue(value, index);\n        return this.getStringAsValue(value);\n    }\n    setValueAt(index, value) {\n        this.setRawValue(value ? this.getValueAsString(value) : value, index);\n        this.refs.input[index].value = this.getRawValue(index);\n    }\n    getStringAsValue(view) {\n        return view ? (0, moment_1.default)(view, this.component.format).format(this.component.dataFormat) : view;\n    }\n    getValueAsString(value) {\n        if (Array.isArray(value) && this.component.multiple) {\n            return value.map(item => (0, moment_1.default)(item, this.component.dataFormat).format(this.component.format)).join(', ');\n        }\n        return (value ? (0, moment_1.default)(value, this.component.dataFormat).format(this.component.format) : value) || '';\n    }\n    getInputMaskFromFormat(format) {\n        if (format === 'LT') {\n            return '99:99 AA';\n        }\n        if (format === 'LTS') {\n            return '99:99:99 AA';\n        }\n        return format.replace(/[hHmMsSk]/g, '9')\n            .replace(/[aA]/, 'AA');\n    }\n    addFocusBlurEvents(element) {\n        super.addFocusBlurEvents(element);\n        this.addEventListener(element, 'blur', () => {\n            element.value = this.getValueAsString(element.value);\n        });\n    }\n}\nexports[\"default\"] = TimeComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/time/Time.js?");
 
 /***/ }),