@formio/js 5.0.0-rc.32 → 5.0.0-rc.34

package/dist/formio.full.js

@@ -784,7 +784,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Evaluator = exports.BaseEvaluator = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\n// BaseEvaluator is for extending.\nclass BaseEvaluator {\n    static evaluator(func, ...params) {\n        if (Evaluator.noeval) {\n            console.warn('No evaluations allowed for this renderer.');\n            return lodash_1.noop;\n        }\n        if (typeof func === 'function') {\n            return func;\n        }\n        if (typeof params[0] === 'object') {\n            params = (0, lodash_1.keys)(params[0]);\n        }\n        return new Function(...params, func);\n    }\n    ;\n    static interpolateString(rawTemplate, data, options = {}) {\n        return rawTemplate.replace(/({{\\s*(.*?)\\s*}})/g, (match, $1, $2) => {\n            // If this is a function call and we allow evals.\n            if ($2.indexOf('(') !== -1) {\n                return $2.replace(/([^\\(]+)\\(([^\\)]+)\\s*\\);?/, (evalMatch, funcName, args) => {\n                    funcName = (0, lodash_1.trim)(funcName);\n                    const func = (0, lodash_1.get)(data, funcName);\n                    if (func) {\n                        if (args) {\n                            args = args.split(',').map((arg) => {\n                                arg = (0, lodash_1.trim)(arg);\n                                if ((arg.indexOf('\"') === 0) || (arg.indexOf(\"'\") === 0)) {\n                                    return arg.substring(1, arg.length - 1);\n                                }\n                                return (0, lodash_1.get)(data, arg);\n                            });\n                        }\n                        return Evaluator.evaluate(func, args, '', false, data, options);\n                    }\n                    return '';\n                });\n            }\n            else {\n                let dataPath = $2;\n                if ($2.indexOf('?') !== -1) {\n                    dataPath = $2.replace(/\\?\\./g, '.');\n                }\n                // Allow for conditional values.\n                const parts = dataPath.split('||').map((item) => item.trim());\n                let value = '';\n                let path = '';\n                for (let i = 0; i < parts.length; i++) {\n                    path = parts[i];\n                    value = (0, lodash_1.get)(data, path);\n                    if (value) {\n                        break;\n                    }\n                }\n                if (options.data) {\n                    (0, lodash_1.set)(options.data, path, value);\n                }\n                return value;\n            }\n        });\n    }\n    static interpolate(rawTemplate, data, options = {}) {\n        if (typeof rawTemplate === 'function') {\n            try {\n                return rawTemplate(data);\n            }\n            catch (err) {\n                console.warn('Error interpolating template', err, data);\n                return err.message;\n            }\n        }\n        return Evaluator.interpolateString(String(rawTemplate), data, options);\n    }\n    ;\n    /**\n     * Evaluate a method.\n     *\n     * @param func\n     * @param args\n     * @return {*}\n     */\n    static evaluate(func, args = {}, ret = '', interpolate = false, context = {}, options = {}) {\n        let returnVal = null;\n        options = (0, lodash_1.isObject)(options) ? options : { noeval: options };\n        const component = args.component ? args.component : { key: 'unknown' };\n        if (!args.form && args.instance) {\n            args.form = (0, lodash_1.get)(args.instance, 'root._form', {});\n        }\n        const componentKey = component.key;\n        if (typeof func === 'string') {\n            if (ret) {\n                func += `;return ${ret}`;\n            }\n            if (interpolate) {\n                func = BaseEvaluator.interpolate(func, args, options);\n            }\n            try {\n                if (Evaluator.noeval || options.noeval) {\n                    func = lodash_1.noop;\n                }\n                else {\n                    func = Evaluator.evaluator(func, args, context);\n                }\n                args = (0, lodash_1.values)(args);\n            }\n            catch (err) {\n                console.warn(`An error occured within the custom function for ${componentKey}`, err);\n                returnVal = null;\n                func = false;\n            }\n        }\n        if (typeof func === 'function') {\n            try {\n                returnVal = Evaluator.execute(func, args, context, options);\n            }\n            catch (err) {\n                returnVal = null;\n                console.warn(`An error occured within custom function for ${componentKey}`, err);\n            }\n        }\n        else if (func) {\n            console.warn(`Unknown function type for ${componentKey}`);\n        }\n        return returnVal;\n    }\n    /**\n     * Execute a function.\n     *\n     * @param func\n     * @param args\n     * @returns\n     */\n    static execute(func, args, context = {}, options = {}) {\n        options = (0, lodash_1.isObject)(options) ? options : { noeval: options };\n        if (Evaluator.noeval || options.noeval) {\n            console.warn('No evaluations allowed for this renderer.');\n            return;\n        }\n        return Array.isArray(args) ? func.apply(context, args) : func.call(context, args);\n    }\n    ;\n}\nexports.BaseEvaluator = BaseEvaluator;\nBaseEvaluator.templateSettings = {\n    interpolate: /{{([\\s\\S]+?)}}/g,\n    evaluate: /\\{%([\\s\\S]+?)%\\}/g,\n    escape: /\\{\\{\\{([\\s\\S]+?)\\}\\}\\}/g\n};\nBaseEvaluator.noeval = false;\n// The extendable evaluator\nclass Evaluator extends BaseEvaluator {\n    /**\n     * Allow external modules the ability to extend the Evaluator.\n     * @param evaluator\n     */\n    static registerEvaluator(evaluator) {\n        Object.keys(evaluator).forEach((key) => {\n            Evaluator[key] = evaluator[key];\n        });\n    }\n}\nexports.Evaluator = Evaluator;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/Evaluator.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Evaluator = exports.BaseEvaluator = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\n// BaseEvaluator is for extending.\nclass BaseEvaluator {\n    static evaluator(func, ...params) {\n        if (Evaluator.noeval) {\n            console.warn('No evaluations allowed for this renderer.');\n            return lodash_1.noop;\n        }\n        if (typeof func === 'function') {\n            return func;\n        }\n        if (typeof params[0] === 'object') {\n            params = (0, lodash_1.keys)(params[0]);\n        }\n        return new Function(...params, func);\n    }\n    ;\n    static interpolateString(rawTemplate, data, options = {}) {\n        if (!rawTemplate) {\n            return '';\n        }\n        if (typeof rawTemplate !== 'string') {\n            return rawTemplate.toString();\n        }\n        return rawTemplate.replace(/({{\\s*(.*?)\\s*}})/g, (match, $1, $2) => {\n            // If this is a function call and we allow evals.\n            if ($2.indexOf('(') !== -1) {\n                return $2.replace(/([^\\(]+)\\(([^\\)]+)\\s*\\);?/, (evalMatch, funcName, args) => {\n                    funcName = (0, lodash_1.trim)(funcName);\n                    const func = (0, lodash_1.get)(data, funcName);\n                    if (func) {\n                        if (args) {\n                            args = args.split(',').map((arg) => {\n                                arg = (0, lodash_1.trim)(arg);\n                                if ((arg.indexOf('\"') === 0) || (arg.indexOf(\"'\") === 0)) {\n                                    return arg.substring(1, arg.length - 1);\n                                }\n                                return (0, lodash_1.get)(data, arg);\n                            });\n                        }\n                        return Evaluator.evaluate(func, args, '', false, data, options);\n                    }\n                    return '';\n                });\n            }\n            else {\n                let dataPath = $2;\n                if ($2.indexOf('?') !== -1) {\n                    dataPath = $2.replace(/\\?\\./g, '.');\n                }\n                // Allow for conditional values.\n                const parts = dataPath.split('||').map((item) => item.trim());\n                let value = '';\n                let path = '';\n                for (let i = 0; i < parts.length; i++) {\n                    path = parts[i];\n                    value = (0, lodash_1.get)(data, path);\n                    if (value) {\n                        break;\n                    }\n                }\n                if (options.data) {\n                    (0, lodash_1.set)(options.data, path, value);\n                }\n                return value;\n            }\n        });\n    }\n    static interpolate(rawTemplate, data, options = {}) {\n        if (typeof rawTemplate === 'function') {\n            try {\n                return rawTemplate(data);\n            }\n            catch (err) {\n                console.warn('Error interpolating template', err, data);\n                return err.message;\n            }\n        }\n        return Evaluator.interpolateString(String(rawTemplate), data, options);\n    }\n    ;\n    /**\n     * Evaluate a method.\n     *\n     * @param func\n     * @param args\n     * @return {*}\n     */\n    static evaluate(func, args = {}, ret = '', interpolate = false, context = {}, options = {}) {\n        let returnVal = null;\n        options = (0, lodash_1.isObject)(options) ? options : { noeval: options };\n        const component = args.component ? args.component : { key: 'unknown' };\n        if (!args.form && args.instance) {\n            args.form = (0, lodash_1.get)(args.instance, 'root._form', {});\n        }\n        const componentKey = component.key;\n        if (typeof func === 'string') {\n            if (ret) {\n                func += `;return ${ret}`;\n            }\n            if (interpolate) {\n                func = BaseEvaluator.interpolate(func, args, options);\n            }\n            try {\n                if (Evaluator.noeval || options.noeval) {\n                    func = lodash_1.noop;\n                }\n                else {\n                    func = Evaluator.evaluator(func, args, context);\n                }\n                args = (0, lodash_1.values)(args);\n            }\n            catch (err) {\n                console.warn(`An error occured within the custom function for ${componentKey}`, err);\n                returnVal = null;\n                func = false;\n            }\n        }\n        if (typeof func === 'function') {\n            try {\n                returnVal = Evaluator.execute(func, args, context, options);\n            }\n            catch (err) {\n                returnVal = null;\n                console.warn(`An error occured within custom function for ${componentKey}`, err);\n            }\n        }\n        else if (func) {\n            console.warn(`Unknown function type for ${componentKey}`);\n        }\n        return returnVal;\n    }\n    /**\n     * Execute a function.\n     *\n     * @param func\n     * @param args\n     * @returns\n     */\n    static execute(func, args, context = {}, options = {}) {\n        options = (0, lodash_1.isObject)(options) ? options : { noeval: options };\n        if (Evaluator.noeval || options.noeval) {\n            console.warn('No evaluations allowed for this renderer.');\n            return;\n        }\n        return Array.isArray(args) ? func.apply(context, args) : func.call(context, args);\n    }\n    ;\n}\nexports.BaseEvaluator = BaseEvaluator;\nBaseEvaluator.templateSettings = {\n    interpolate: /{{([\\s\\S]+?)}}/g,\n    evaluate: /\\{%([\\s\\S]+?)%\\}/g,\n    escape: /\\{\\{\\{([\\s\\S]+?)\\}\\}\\}/g\n};\nBaseEvaluator.noeval = false;\n// The extendable evaluator\nclass Evaluator extends BaseEvaluator {\n    /**\n     * Allow external modules the ability to extend the Evaluator.\n     * @param evaluator\n     */\n    static registerEvaluator(evaluator) {\n        Object.keys(evaluator).forEach((key) => {\n            Evaluator[key] = evaluator[key];\n        });\n    }\n}\nexports.Evaluator = Evaluator;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/Evaluator.js?");
 
 /***/ }),
 
@@ -4377,7 +4377,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 WebformBuilder_1 = __importDefault(__webpack_require__(/*! ./WebformBuilder */ \"./lib/cjs/WebformBuilder.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.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 utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass WizardBuilder extends WebformBuilder_1.default {\n    constructor() {\n        let element, options;\n        if (arguments[0] instanceof HTMLElement || arguments[1]) {\n            element = arguments[0];\n            options = arguments[1];\n        }\n        else {\n            options = arguments[0];\n        }\n        // Reset skipInit in case PDFBuilder has set it.\n        options.skipInit = false;\n        options.display = 'wizard';\n        super(element, options);\n        this._form = {\n            components: [\n                this.getPageConfig(1),\n            ],\n        };\n        this.page = 0;\n        // Need to create a component order for each group.\n        for (const group in this.groups) {\n            if (this.groups[group] && this.groups[group].components) {\n                this.groups[group].componentOrder = Object.keys(this.groups[group].components)\n                    .map(key => this.groups[group].components[key])\n                    .filter(component => component && !component.ignore)\n                    .sort((a, b) => a.weight - b.weight)\n                    .map(component => component.key);\n            }\n        }\n        const originalRenderComponentsHook = this.options.hooks.renderComponents;\n        this.options.hooks.renderComponents = (html, { components, self }) => {\n            if (self.type === 'form' && !self.root) {\n                return html;\n            }\n            else {\n                return originalRenderComponentsHook(html, { components, self });\n            }\n        };\n        const originalAttachComponentsHook = this.options.hooks.attachComponents;\n        this.options.hooks.attachComponents = (element, components, container, component) => {\n            if (component.type === 'form' && !component.root) {\n                return element;\n            }\n            return originalAttachComponentsHook(element, components, container, component);\n        };\n        // Wizard pages don't replace themselves in the right array. Do that here.\n        this.on('saveComponent', (component, originalComponent) => {\n            const webformComponents = this.webform.components.map(({ component }) => component);\n            if (this._form.components.includes(originalComponent)) {\n                this._form.components[this._form.components.indexOf(originalComponent)] = component;\n                this.rebuild();\n            }\n            else if (webformComponents.includes(originalComponent)) {\n                this._form.components.push(component);\n                this.rebuild();\n            }\n            else {\n                // Fallback to look for panel based on key.\n                const formComponentIndex = this._form.components.findIndex((comp) => originalComponent.key === comp.key);\n                if (formComponentIndex !== -1) {\n                    this._form.components[formComponentIndex] = component;\n                    this.rebuild();\n                }\n            }\n        }, true);\n    }\n    removeComponent(component, parent, original) {\n        const remove = super.removeComponent(component, parent, original);\n        // If user agrees to remove the whole group of the components and it could be a Wizard page, find it and remove\n        if (remove && component.type === 'panel') {\n            const pageIndex = this.pages.findIndex((page) => page.key === component.key);\n            const componentIndex = this._form.components.findIndex((comp) => comp.key === component.key);\n            if (pageIndex !== -1) {\n                this.removePage(pageIndex, componentIndex);\n            }\n        }\n        return remove;\n    }\n    allowDrop(element) {\n        return (this.webform && this.webform.refs && this.webform.refs.webform === element) ? false : true;\n    }\n    get pages() {\n        return lodash_1.default.filter(this._form.components, { type: 'panel' });\n    }\n    get currentPage() {\n        const pages = this.pages;\n        return (pages && (pages.length >= this.page)) ? pages[this.page] : null;\n    }\n    set form(value) {\n        this._form = value;\n        if (!this._form.components || !Array.isArray(this._form.components)) {\n            this._form.components = [];\n        }\n        if (this.pages.length === 0) {\n            const components = this._form.components.filter((component) => component.type !== 'button');\n            this._form.components = [this.getPageConfig(1, components)];\n        }\n        else {\n            const components = this._form.components\n                .filter((component) => component.type !== 'button' || component.action !== 'submit');\n            this._form.components = components;\n        }\n        this.rebuild();\n    }\n    get form() {\n        return this._form;\n    }\n    get schema() {\n        lodash_1.default.assign(this.currentPage, this.webform._form.components[0]);\n        const webform = new Webform_1.default(this.options);\n        webform.setForm(this._form, { noEmit: true });\n        return webform.schema;\n    }\n    render() {\n        return this.renderTemplate('builderWizard', {\n            sidebar: this.renderTemplate('builderSidebar', {\n                scrollEnabled: this.sideBarScroll,\n                groupOrder: this.groupOrder,\n                groupId: `builder-sidebar-${this.id}`,\n                groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n                    group: this.groups[groupKey],\n                    groupKey,\n                    groupId: `builder-sidebar-${this.id}`,\n                    subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n                        group,\n                        groupKey: group.key,\n                        groupId: `group-container-${groupKey}`,\n                        subgroups: []\n                    })),\n                })),\n            }),\n            pages: this.pages,\n            form: this.webform.render(),\n        });\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            addPage: 'multiple',\n            gotoPage: 'multiple',\n        });\n        this.refs.gotoPage.forEach((page, index) => {\n            page.parentNode.dragInfo = { index };\n        });\n        if (this.dragulaLib) {\n            this.navigationDragula = this.dragulaLib([this.element.querySelector('.wizard-pages')], {\n                moves: (el) => (!el.classList.contains('wizard-add-page')),\n                accepts: (el, target, source, sibling) => (sibling ? true : false),\n            })\n                .on('drop', this.onReorder.bind(this));\n        }\n        this.refs.addPage.forEach(link => {\n            this.addEventListener(link, 'click', (event) => {\n                event.preventDefault();\n                this.addPage();\n            });\n        });\n        this.refs.gotoPage.forEach((link, index) => {\n            this.addEventListener(link, 'click', (event) => {\n                event.preventDefault();\n                this.setPage(index);\n            });\n        });\n        return super.attach(element);\n    }\n    detach() {\n        if (this.navigationDragula) {\n            this.navigationDragula.destroy();\n        }\n        this.navigationDragula = null;\n        super.detach();\n    }\n    rebuild() {\n        var _a;\n        const page = this.currentPage;\n        this.webform.setForm({\n            display: 'form',\n            type: 'form',\n            components: page ? [page] : [],\n            controller: ((_a = this._form) === null || _a === void 0 ? void 0 : _a.controller) || ''\n        }, { keepAsReference: true });\n        return this.redraw();\n    }\n    addPage(page) {\n        const newPage = page && page.schema ? (0, utils_1.fastCloneDeep)(page.schema) : this.getPageConfig(this.pages.length + 1);\n        builder_1.default.uniquify(this._form.components, newPage);\n        this._form.components.push(newPage);\n        this.emitSaveComponentEvent(newPage, newPage, this._form, 'components', (this._form.components.length - 1), true, newPage);\n        this.emit('change', this._form);\n        return this.rebuild();\n    }\n    removePage(pageIndex, componentIndex) {\n        this._form.components.splice(componentIndex, 1);\n        this.emit('change', this._form);\n        if (pageIndex === this.pages.length) {\n            // If the last page is removed.\n            if (pageIndex === 0) {\n                this._form.components.push(this.getPageConfig(1));\n                return this.rebuild();\n            }\n            else {\n                return this.setPage(pageIndex - 1);\n            }\n        }\n        else {\n            return this.rebuild();\n        }\n    }\n    onReorder(element, _target, _source, sibling) {\n        const isSiblingAnAddPageButton = sibling === null || sibling === void 0 ? void 0 : sibling.classList.contains('wizard-add-page');\n        // We still can paste before Add Page button\n        if (!element.dragInfo || (sibling && !sibling.dragInfo && !isSiblingAnAddPageButton)) {\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 ? sibling.dragInfo.index : this.pages.length);\n        const movedBelow = newPosition > oldPosition;\n        const formComponents = (0, utils_1.fastCloneDeep)(this._form.components);\n        const draggedRowData = this._form.components[oldPosition];\n        //insert element at new position\n        formComponents.splice(newPosition, 0, draggedRowData);\n        //remove element from old position (if was moved above, after insertion it's at +1 index)\n        formComponents.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n        this._form.components = (0, utils_1.fastCloneDeep)(formComponents);\n        return this.rebuild().then(() => {\n            this.emit('change', this._form);\n        });\n    }\n    setPage(index) {\n        if (index === this.page) {\n            return;\n        }\n        this.page = index;\n        return this.rebuild();\n    }\n    getPageConfig(index, components = []) {\n        return {\n            title: `Page ${index}`,\n            label: `Page ${index}`,\n            type: 'panel',\n            key: `page${index}`,\n            components,\n        };\n    }\n    pasteComponent(component) {\n        if (component instanceof WizardBuilder) {\n            return;\n        }\n        if (this._form.components.find(comp => lodash_1.default.isEqual(component.component, comp))) {\n            this.addPage(component);\n        }\n        else {\n            return super.pasteComponent(component);\n        }\n    }\n}\nexports[\"default\"] = WizardBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/WizardBuilder.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 WebformBuilder_1 = __importDefault(__webpack_require__(/*! ./WebformBuilder */ \"./lib/cjs/WebformBuilder.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.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 utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass WizardBuilder extends WebformBuilder_1.default {\n    constructor() {\n        let element, options;\n        if (arguments[0] instanceof HTMLElement || arguments[1]) {\n            element = arguments[0];\n            options = arguments[1];\n        }\n        else {\n            options = arguments[0];\n        }\n        // Reset skipInit in case PDFBuilder has set it.\n        options.skipInit = false;\n        options.display = 'wizard';\n        super(element, options);\n        this._form = {\n            components: [\n                this.getPageConfig(1),\n            ],\n        };\n        this.page = 0;\n        // Need to create a component order for each group.\n        for (const group in this.groups) {\n            if (this.groups[group] && this.groups[group].components) {\n                this.groups[group].componentOrder = Object.keys(this.groups[group].components)\n                    .map(key => this.groups[group].components[key])\n                    .filter(component => component && !component.ignore)\n                    .sort((a, b) => a.weight - b.weight)\n                    .map(component => component.key);\n            }\n        }\n        const originalRenderComponentsHook = this.options.hooks.renderComponents;\n        this.options.hooks.renderComponents = (html, { components, self }) => {\n            if (self.type === 'form' && !self.root) {\n                return html;\n            }\n            else {\n                return originalRenderComponentsHook(html, { components, self });\n            }\n        };\n        const originalAttachComponentsHook = this.options.hooks.attachComponents;\n        this.options.hooks.attachComponents = (element, components, container, component) => {\n            if (component.type === 'form' && !component.root) {\n                return element;\n            }\n            return originalAttachComponentsHook(element, components, container, component);\n        };\n        // Wizard pages don't replace themselves in the right array. Do that here.\n        this.on('saveComponent', (component, originalComponent) => {\n            const webformComponents = this.webform.components.map(({ component }) => component);\n            if (this._form.components.includes(originalComponent)) {\n                this._form.components[this._form.components.indexOf(originalComponent)] = component;\n                this.rebuild();\n            }\n            else if (webformComponents.includes(originalComponent)) {\n                this._form.components.push(component);\n                this.rebuild();\n            }\n            else {\n                // Fallback to look for panel based on key.\n                const formComponentIndex = this._form.components.findIndex((comp) => originalComponent.key === comp.key);\n                if (formComponentIndex !== -1) {\n                    this._form.components[formComponentIndex] = component;\n                    this.rebuild();\n                }\n            }\n        }, true);\n    }\n    removeComponent(component, parent, original) {\n        const remove = super.removeComponent(component, parent, original);\n        // If user agrees to remove the whole group of the components and it could be a Wizard page, find it and remove\n        if (remove && component.type === 'panel') {\n            const pageIndex = this.pages.findIndex((page) => page.key === component.key);\n            const componentIndex = this._form.components.findIndex((comp) => comp.key === component.key);\n            if (pageIndex !== -1) {\n                this.removePage(pageIndex, componentIndex);\n            }\n        }\n        return remove;\n    }\n    allowDrop(element) {\n        return (this.webform && this.webform.refs && this.webform.refs.webform === element) ? false : true;\n    }\n    get pages() {\n        return lodash_1.default.filter(this._form.components, { type: 'panel' });\n    }\n    get currentPage() {\n        const pages = this.pages;\n        return (pages && (pages.length >= this.page)) ? pages[this.page] : null;\n    }\n    setForm(value) {\n        this._form = value;\n        if (!this._form.components || !Array.isArray(this._form.components)) {\n            this._form.components = [];\n        }\n        if (this.pages.length === 0) {\n            const components = this._form.components.filter((component) => component.type !== 'button');\n            this._form.components = [this.getPageConfig(1, components)];\n        }\n        else {\n            const components = this._form.components\n                .filter((component) => component.type !== 'button' || component.action !== 'submit');\n            this._form.components = components;\n        }\n        this.rebuild();\n    }\n    set form(value) {\n        this.setForm(value);\n    }\n    get form() {\n        return this._form;\n    }\n    get schema() {\n        lodash_1.default.assign(this.currentPage, this.webform._form.components[0]);\n        const webform = new Webform_1.default(this.options);\n        webform.setForm(this._form, { noEmit: true });\n        return webform.schema;\n    }\n    render() {\n        return this.renderTemplate('builderWizard', {\n            sidebar: this.renderTemplate('builderSidebar', {\n                scrollEnabled: this.sideBarScroll,\n                groupOrder: this.groupOrder,\n                groupId: `builder-sidebar-${this.id}`,\n                groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n                    group: this.groups[groupKey],\n                    groupKey,\n                    groupId: `builder-sidebar-${this.id}`,\n                    subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n                        group,\n                        groupKey: group.key,\n                        groupId: `group-container-${groupKey}`,\n                        subgroups: []\n                    })),\n                })),\n            }),\n            pages: this.pages,\n            form: this.webform.render(),\n        });\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            addPage: 'multiple',\n            gotoPage: 'multiple',\n        });\n        this.refs.gotoPage.forEach((page, index) => {\n            page.parentNode.dragInfo = { index };\n        });\n        if (this.dragulaLib) {\n            this.navigationDragula = this.dragulaLib([this.element.querySelector('.wizard-pages')], {\n                moves: (el) => (!el.classList.contains('wizard-add-page')),\n                accepts: (el, target, source, sibling) => (sibling ? true : false),\n            })\n                .on('drop', this.onReorder.bind(this));\n        }\n        this.refs.addPage.forEach(link => {\n            this.addEventListener(link, 'click', (event) => {\n                event.preventDefault();\n                this.addPage();\n            });\n        });\n        this.refs.gotoPage.forEach((link, index) => {\n            this.addEventListener(link, 'click', (event) => {\n                event.preventDefault();\n                this.setPage(index);\n            });\n        });\n        return super.attach(element);\n    }\n    detach() {\n        if (this.navigationDragula) {\n            this.navigationDragula.destroy();\n        }\n        this.navigationDragula = null;\n        super.detach();\n    }\n    rebuild() {\n        var _a;\n        const page = this.currentPage;\n        this.webform.setForm({\n            display: 'form',\n            type: 'form',\n            components: page ? [page] : [],\n            controller: ((_a = this._form) === null || _a === void 0 ? void 0 : _a.controller) || ''\n        }, { keepAsReference: true });\n        return this.redraw();\n    }\n    addPage(page) {\n        const newPage = page && page.schema ? (0, utils_1.fastCloneDeep)(page.schema) : this.getPageConfig(this.pages.length + 1);\n        builder_1.default.uniquify(this._form.components, newPage);\n        this._form.components.push(newPage);\n        this.emitSaveComponentEvent(newPage, newPage, this._form, 'components', (this._form.components.length - 1), true, newPage);\n        this.emit('change', this._form);\n        return this.rebuild();\n    }\n    removePage(pageIndex, componentIndex) {\n        this._form.components.splice(componentIndex, 1);\n        this.emit('change', this._form);\n        if (pageIndex === this.pages.length) {\n            // If the last page is removed.\n            if (pageIndex === 0) {\n                this._form.components.push(this.getPageConfig(1));\n                return this.rebuild();\n            }\n            else {\n                return this.setPage(pageIndex - 1);\n            }\n        }\n        else {\n            return this.rebuild();\n        }\n    }\n    onReorder(element, _target, _source, sibling) {\n        const isSiblingAnAddPageButton = sibling === null || sibling === void 0 ? void 0 : sibling.classList.contains('wizard-add-page');\n        // We still can paste before Add Page button\n        if (!element.dragInfo || (sibling && !sibling.dragInfo && !isSiblingAnAddPageButton)) {\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 ? sibling.dragInfo.index : this.pages.length);\n        const movedBelow = newPosition > oldPosition;\n        const formComponents = (0, utils_1.fastCloneDeep)(this._form.components);\n        const draggedRowData = this._form.components[oldPosition];\n        //insert element at new position\n        formComponents.splice(newPosition, 0, draggedRowData);\n        //remove element from old position (if was moved above, after insertion it's at +1 index)\n        formComponents.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n        this._form.components = (0, utils_1.fastCloneDeep)(formComponents);\n        return this.rebuild().then(() => {\n            this.emit('change', this._form);\n        });\n    }\n    setPage(index) {\n        if (index === this.page) {\n            return;\n        }\n        this.page = index;\n        return this.rebuild();\n    }\n    getPageConfig(index, components = []) {\n        return {\n            title: `Page ${index}`,\n            label: `Page ${index}`,\n            type: 'panel',\n            key: `page${index}`,\n            components,\n        };\n    }\n    pasteComponent(component) {\n        if (component instanceof WizardBuilder) {\n            return;\n        }\n        if (this._form.components.find(comp => lodash_1.default.isEqual(component.component, comp))) {\n            this.addPage(component);\n        }\n        else {\n            return super.pasteComponent(component);\n        }\n    }\n}\nexports[\"default\"] = WizardBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/WizardBuilder.js?");
 
 /***/ }),
 
@@ -4476,7 +4476,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (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 }));\n/* globals Quill, ClassicEditor, CKEDITOR */\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ismobilejs_1 = __importDefault(__webpack_require__(/*! ismobilejs */ \"./node_modules/ismobilejs/esm/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Element_1 = __importDefault(__webpack_require__(/*! ../../../Element */ \"./lib/cjs/Element.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst widgets_1 = __importDefault(__webpack_require__(/*! ../../../widgets */ \"./lib/cjs/widgets/index.js\"));\nconst addons_1 = __importDefault(__webpack_require__(/*! ../../../addons */ \"./lib/cjs/addons/index.js\"));\nconst uploadAdapter_1 = __webpack_require__(/*! ../../../providers/storage/uploadAdapter */ \"./lib/cjs/providers/storage/uploadAdapter.js\");\nconst en_1 = __importDefault(__webpack_require__(/*! ../../../translations/en */ \"./lib/cjs/translations/en.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ../../../templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nconst isIEBrowser = FormioUtils.getBrowserInfo().ie;\n/**\n * This is the Component class\n which all elements within the FormioForm derive from.\n */\nclass Component extends Element_1.default {\n    static schema(...sources) {\n        return lodash_1.default.merge({\n            /**\n             * Determines if this component provides an input.\n             */\n            input: true,\n            /**\n             * The data key for this component (how the data is stored in the database).\n             */\n            key: '',\n            /**\n             * The input placeholder for this component.\n             */\n            placeholder: '',\n            /**\n             * The input prefix\n             */\n            prefix: '',\n            /**\n             * The custom CSS class to provide to this component.\n             */\n            customClass: '',\n            /**\n             * The input suffix.\n             */\n            suffix: '',\n            /**\n             * If this component should allow an array of values to be captured.\n             */\n            multiple: false,\n            /**\n             * The default value of this component.\n             */\n            defaultValue: null,\n            /**\n             * If the data of this component should be protected (no GET api requests can see the data)\n             */\n            protected: false,\n            /**\n             * Validate if the value of this component should be unique within the form.\n             */\n            unique: false,\n            /**\n             * If the value of this component should be persisted within the backend api database.\n             */\n            persistent: true,\n            /**\n             * Determines if the component should be within the form, but not visible.\n             */\n            hidden: false,\n            /**\n             * If the component should be cleared when hidden.\n             */\n            clearOnHide: true,\n            /**\n             * This will refresh this component options when this field changes.\n             */\n            refreshOn: '',\n            /**\n             * This will redraw the component when this field changes.\n             */\n            redrawOn: '',\n            /**\n             * If this component should be included as a column within a submission table.\n             */\n            tableView: false,\n            /**\n             * If this component should be rendering in modal.\n             */\n            modalEdit: false,\n            /**\n             * The input label provided to this component.\n             */\n            label: '',\n            dataGridLabel: false,\n            labelPosition: 'top',\n            description: '',\n            errorLabel: '',\n            tooltip: '',\n            hideLabel: false,\n            tabindex: '',\n            disabled: false,\n            autofocus: false,\n            dbIndex: false,\n            customDefaultValue: '',\n            calculateValue: '',\n            calculateServer: false,\n            widget: null,\n            /**\n             * Attributes that will be assigned to the input elements of this component.\n             */\n            attributes: {},\n            /**\n             * This will perform the validation on either \"change\" or \"blur\" of the input element.\n             */\n            validateOn: 'change',\n            /**\n             * The validation criteria for this component.\n             */\n            validate: {\n                /**\n                 * If this component is required.\n                 */\n                required: false,\n                /**\n                 * Custom JavaScript validation.\n                 */\n                custom: '',\n                /**\n                 * If the custom validation should remain private (only the backend will see it and execute it).\n                 */\n                customPrivate: false,\n                /**\n                 * If this component should implement a strict date validation if the Calendar widget is implemented.\n                 */\n                strictDateValidation: false,\n                multiple: false,\n                unique: false\n            },\n            /**\n             * The simple conditional settings for a component.\n             */\n            conditional: {\n                show: null,\n                when: null,\n                eq: ''\n            },\n            overlay: {\n                style: '',\n                left: '',\n                top: '',\n                width: '',\n                height: '',\n            },\n            allowCalculateOverride: false,\n            encrypted: false,\n            showCharCount: false,\n            showWordCount: false,\n            properties: {},\n            allowMultipleMasks: false,\n            addons: [],\n        }, ...sources);\n    }\n    /**\n     * Return the simple condition settings as part of the component.\n     *\n     * @return {Object}\n     *\n     */\n    static get conditionOperatorsSettings() {\n        return {\n            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n            valueComponent() {\n                return { type: 'textfield' };\n            }\n        };\n    }\n    /**\n     * Return the array of possible types of component value absed on its schema.\n     *\n     * @param schema\n     * @return {Array}\n     *\n     */\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];\n    }\n    /**\n     * Provides a table view for this component. Override if you wish to do something different than using getView\n     * method of your instance.\n     *\n     * @param value\n     * @param options\n     */\n    /* eslint-disable no-unused-vars */\n    static tableView(value, options) { }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Initialize a new Component.\n     *\n     * @param {Object} component - The component JSON you wish to initialize.\n     * @param {Object} options - The options for this component.\n     * @param {Object} data - The global data submission object this component will belong.\n     */\n    /* eslint-disable max-statements */\n    constructor(component, options, data) {\n        super(Object.assign({\n            renderMode: 'form',\n            attachMode: 'full',\n            noDefaults: false\n        }, options || {}));\n        // Restore the component id.\n        if (component && component.id) {\n            this.id = component.id;\n        }\n        /**\n         * Determines if this component has a condition assigned to it.\n         * @type {null}\n         * @private\n         */\n        this._hasCondition = null;\n        /**\n         * References to dom elements\n         */\n        this.refs = {};\n        // Allow global override for any component JSON.\n        if (component &&\n            this.options.components &&\n            this.options.components[component.type]) {\n            lodash_1.default.merge(component, this.options.components[component.type]);\n        }\n        /**\n         * The data path to this specific component instance.\n         *\n         * @type {string}\n         */\n        this.path = (component === null || component === void 0 ? void 0 : component.key) || '';\n        /**\n         * An array of all the children components errors.\n         */\n        this.childErrors = [];\n        /**\n         * Last validation errors that have occured.\n         */\n        this._errors = [];\n        this._visibleErrors = [];\n        /**\n         * The Form.io component JSON schema.\n         * @type {*}\n         */\n        this.component = this.mergeSchema(component || {});\n        // Add the id to the component.\n        this.component.id = this.id;\n        this.afterComponentAssign();\n        // Save off the original component to be used in logic.\n        this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n        /**\n         * If the component has been attached\n         */\n        this.attached = false;\n        /**\n         * If the component has been rendered\n         */\n        this.rendered = false;\n        /**\n         * The data object in which this component resides.\n         * @type {*}\n         */\n        this._data = data || {};\n        /**\n         * Tool tip text after processing\n         * @type {string}\n         */\n        this.tooltip = '';\n        /**\n         * The row path of this component.\n         * @type {number}\n         */\n        this.row = this.options.row;\n        /**\n         * Points to a flat map of child components (if applicable).\n         *\n         * @type {Object}\n         */\n        this.childComponentsMap = {};\n        /**\n         * Determines if this component is disabled, or not.\n         *\n         * @type {boolean}\n         */\n        this._disabled = (0, utils_1.boolValue)(this.component.disabled) ? this.component.disabled : false;\n        /**\n         * Points to the root component, usually the FormComponent.\n         *\n         * @type {Component}\n         */\n        this.root = this.options.root || this;\n        this.localRoot = this.options.localRoot || this;\n        /**\n         * If this input has been input and provided value.\n         *\n         * @type {boolean}\n         */\n        this.pristine = true;\n        /**\n         * Points to the parent component.\n         *\n         * @type {Component}\n         */\n        this.parent = this.options.parent;\n        this.options.name = this.options.name || 'data';\n        this._path = '';\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        /**\n         * Determines if this component is visible, or not.\n         */\n        this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;\n        this._visible = this._parentVisible && this.conditionallyVisible(null, data);\n        this._parentDisabled = false;\n        /**\n         * Used to trigger a new change in this component.\n         * @type {function} - Call to trigger a change in this component.\n         */\n        let changes = [];\n        let lastChanged = null;\n        let triggerArgs = [];\n        const _triggerChange = lodash_1.default.debounce((...args) => {\n            if (this.root) {\n                this.root.changing = false;\n            }\n            triggerArgs = [];\n            if (!args[1] && lastChanged) {\n                // Set the changed component if one isn't provided.\n                args[1] = lastChanged;\n            }\n            if (lodash_1.default.isEmpty(args[0]) && lastChanged) {\n                // Set the flags if it is empty and lastChanged exists.\n                args[0] = lastChanged.flags;\n            }\n            lastChanged = null;\n            args[3] = changes;\n            const retVal = this.onChange(...args);\n            changes = [];\n            return retVal;\n        }, 100);\n        this.triggerChange = (...args) => {\n            if (args[1]) {\n                // Make sure that during the debounce that we always track lastChanged component, even if they\n                // don't provide one later.\n                lastChanged = args[1];\n                changes.push(lastChanged);\n            }\n            if (this.root) {\n                this.root.changing = true;\n            }\n            if (args.length) {\n                triggerArgs = args;\n            }\n            return _triggerChange(...triggerArgs);\n        };\n        /**\n         * Used to trigger a redraw event within this component.\n         *\n         * @type {Function}\n         */\n        this.triggerRedraw = lodash_1.default.debounce(this.redraw.bind(this), 100);\n        /**\n         * list of attached tooltips\n         * @type {Array}\n         */\n        this.tooltips = [];\n        /**\n         * List of attached addons\n         * @type {Array}\n         */\n        this.addons = [];\n        // To force this component to be invalid.\n        this.invalid = false;\n        if (this.component) {\n            this.type = this.component.type;\n            if (this.allowData && this.key) {\n                this.options.name += `[${this.key}]`;\n                // If component is visible or not set to clear on hide, set the default value.\n                if (this.visible || !this.component.clearOnHide) {\n                    if (!this.hasValue()) {\n                        if (this.shouldAddDefaultValue) {\n                            this.dataValue = this.defaultValue;\n                        }\n                    }\n                    else {\n                        // Ensure the dataValue is set.\n                        /* eslint-disable  no-self-assign */\n                        this.dataValue = this.dataValue;\n                        /* eslint-enable  no-self-assign */\n                    }\n                }\n            }\n            /**\n             * The element information for creating the input element.\n             * @type {*}\n             */\n            this.info = this.elementInfo();\n        }\n        // Allow anyone to hook into the component creation.\n        this.hook('component');\n        if (!this.options.skipInit) {\n            this.init();\n        }\n    }\n    /* eslint-enable max-statements */\n    get componentsMap() {\n        var _a;\n        if ((_a = this.localRoot) === null || _a === void 0 ? void 0 : _a.childComponentsMap) {\n            return this.localRoot.childComponentsMap;\n        }\n        const localMap = {};\n        localMap[this.path] = this;\n        return localMap;\n    }\n    get data() {\n        return this._data;\n    }\n    set data(value) {\n        this._data = value;\n    }\n    mergeSchema(component = {}) {\n        return lodash_1.default.defaultsDeep(component, this.defaultSchema);\n    }\n    // Allow componets to notify when ready.\n    get ready() {\n        return Promise.resolve(this);\n    }\n    get isPDFReadOnlyMode() {\n        return this.parent &&\n            this.parent.form &&\n            (this.parent.form.display === 'pdf') &&\n            this.options.readOnly;\n    }\n    get labelInfo() {\n        const label = {};\n        label.hidden = this.labelIsHidden();\n        label.className = '';\n        label.labelPosition = this.component.labelPosition;\n        label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;\n        const isPDFReadOnlyMode = this.isPDFReadOnlyMode;\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {\n            label.className += ' field-required';\n        }\n        if (label.hidden) {\n            label.className += ' control-label--hidden';\n        }\n        if (this.info.attr.id) {\n            label.for = this.info.attr.id;\n        }\n        return label;\n    }\n    init() {\n        var _a;\n        this.disabled = this.shouldDisabled;\n        this._visible = this.conditionallyVisible(null, null);\n        if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {\n            this.component.addons.forEach((addon) => this.createAddon(addon));\n        }\n    }\n    afterComponentAssign() {\n        //implement in extended classes\n    }\n    createAddon(addonConfiguration) {\n        var _a;\n        const name = addonConfiguration.name;\n        if (!name) {\n            return;\n        }\n        const settings = ((_a = addonConfiguration.settings) === null || _a === void 0 ? void 0 : _a.data) || {};\n        const Addon = addons_1.default[name.value];\n        let addon = null;\n        if (Addon) {\n            const supportedComponents = Addon.info.supportedComponents;\n            const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||\n                supportedComponents.indexOf(this.component.type) !== -1;\n            if (supportsThisComponentType) {\n                addon = new Addon(settings, this);\n                this.addons.push(addon);\n            }\n            else {\n                console.warn(`Addon ${name.label} does not support component of type ${this.component.type}.`);\n            }\n        }\n        return addon;\n    }\n    teardown() {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        delete this._currentForm;\n        delete this.parent;\n        delete this.root;\n        delete this.triggerChange;\n        delete this.triggerRedraw;\n        if (this.options) {\n            delete this.options.root;\n            delete this.options.parent;\n            delete this.options.i18next;\n        }\n        super.teardown();\n    }\n    destroy(all = false) {\n        super.destroy(all);\n        this.detach();\n        this.addons.forEach((addon) => addon.destroy());\n        if (all) {\n            this.teardown();\n        }\n    }\n    get shouldDisabled() {\n        return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);\n    }\n    get isInputComponent() {\n        return !this.component.hasOwnProperty('input') || this.component.input;\n    }\n    get allowData() {\n        return this.hasInput;\n    }\n    get hasInput() {\n        return this.isInputComponent || (this.refs.input && this.refs.input.length);\n    }\n    get defaultSchema() {\n        return Component.schema();\n    }\n    get key() {\n        return lodash_1.default.get(this.component, 'key', '');\n    }\n    set parentVisible(value) {\n        this._parentVisible = value;\n    }\n    get parentVisible() {\n        return this._parentVisible;\n    }\n    set parentDisabled(value) {\n        this._parentDisabled = value;\n    }\n    get parentDisabled() {\n        return this._parentDisabled;\n    }\n    shouldForceVisibility(component, visibility) {\n        if (!this.options[visibility]) {\n            return false;\n        }\n        if (!component) {\n            component = this.component;\n        }\n        if (lodash_1.default.isArray(this.options[visibility])) {\n            return this.options[visibility].includes(component.key);\n        }\n        return this.options[visibility][component.key];\n    }\n    shouldForceHide(component) {\n        return this.shouldForceVisibility(component, 'hide');\n    }\n    shouldForceShow(component) {\n        return this.shouldForceVisibility(component, 'show');\n    }\n    /**\n     *\n     * @param value {boolean}\n     */\n    set visible(value) {\n        if (this._visible !== value) {\n            // Skip if this component is set to visible and is supposed to be hidden.\n            if (value && this.shouldForceHide()) {\n                return;\n            }\n            // Skip if this component is set to hidden and is supposed to be shown.\n            if (!value && this.shouldForceShow()) {\n                return;\n            }\n            this._visible = value;\n            this.clearOnHide();\n            this.redraw();\n        }\n    }\n    /**\n     *\n     * @returns {boolean}\n     */\n    get visible() {\n        // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.\n        if (this.builderMode || this.previewMode || this.options.showHiddenFields) {\n            return true;\n        }\n        if (this.shouldForceHide()) {\n            return false;\n        }\n        if (this.shouldForceShow()) {\n            return true;\n        }\n        return this._visible && this._parentVisible;\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n    }\n    get fullMode() {\n        return this.options.attachMode === 'full';\n    }\n    get builderMode() {\n        return this.options.attachMode === 'builder';\n    }\n    get calculatedPath() {\n        console.error('component.calculatedPath was deprecated, use component.path instead.');\n        return this.path;\n    }\n    get labelPosition() {\n        return this.component.labelPosition;\n    }\n    get labelWidth() {\n        const width = this.component.labelWidth;\n        return width >= 0 ? width : 30;\n    }\n    get labelMargin() {\n        const margin = this.component.labelMargin;\n        return margin >= 0 ? margin : 3;\n    }\n    get isAdvancedLabel() {\n        return [\n            'left-left',\n            'left-right',\n            'right-left',\n            'right-right'\n        ].includes(this.labelPosition);\n    }\n    get labelPositions() {\n        return this.labelPosition.split('-');\n    }\n    get skipInEmail() {\n        return false;\n    }\n    rightDirection(direction) {\n        if (this.options.condensedMode) {\n            return false;\n        }\n        return direction === 'right';\n    }\n    getLabelInfo(isCondensed = false) {\n        const isRightPosition = this.rightDirection(this.labelPositions[0]);\n        const isLeftPosition = this.labelPositions[0] === 'left' || isCondensed;\n        const isRightAlign = this.rightDirection(this.labelPositions[1]);\n        let contentMargin = '';\n        if (this.component.hideLabel) {\n            const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;\n            contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';\n            contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';\n        }\n        const labelStyles = `\n      flex: ${this.labelWidth};\n      ${isRightPosition ? 'margin-left' : 'margin-right'}: ${this.labelMargin}%;\n    `;\n        const contentStyles = `\n      flex: ${100 - this.labelWidth - this.labelMargin};\n      ${contentMargin};\n      ${this.component.hideLabel ? `max-width: ${100 - this.labelWidth - this.labelMargin}` : ''};\n    `;\n        return {\n            isRightPosition,\n            isRightAlign,\n            labelStyles,\n            contentStyles\n        };\n    }\n    /**\n     * Returns only the schema that is different from the default.\n     *\n     * @param schema\n     * @param defaultSchema\n     */\n    getModifiedSchema(schema, defaultSchema, recursion) {\n        const modified = {};\n        if (!defaultSchema) {\n            return schema;\n        }\n        lodash_1.default.each(schema, (val, key) => {\n            if (!lodash_1.default.isArray(val) && lodash_1.default.isObject(val) && defaultSchema.hasOwnProperty(key)) {\n                const subModified = this.getModifiedSchema(val, defaultSchema[key], true);\n                if (!lodash_1.default.isEmpty(subModified)) {\n                    modified[key] = subModified;\n                }\n            }\n            else if (lodash_1.default.isArray(val)) {\n                if (val.length !== 0 && !lodash_1.default.isEqual(val, defaultSchema[key])) {\n                    modified[key] = val;\n                }\n            }\n            else if ((!recursion && (key === 'type')) ||\n                (!recursion && (key === 'key')) ||\n                (!recursion && (key === 'label')) ||\n                (!recursion && (key === 'input')) ||\n                (!recursion && (key === 'tableView')) ||\n                (val !== '' && !defaultSchema.hasOwnProperty(key)) ||\n                (val !== '' && val !== defaultSchema[key]) ||\n                (defaultSchema[key] && val !== defaultSchema[key])) {\n                modified[key] = val;\n            }\n        });\n        return modified;\n    }\n    /**\n     * Returns the JSON schema for this component.\n     */\n    get schema() {\n        return (0, utils_1.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));\n    }\n    /**\n     * Returns true if component is inside DataGrid\n     */\n    get isInDataGrid() {\n        return this.inDataGrid;\n    }\n    /**\n     * Translate a text using the i18n system.\n     *\n     * @param {string} text - The i18n identifier.\n     * @param {Object} params - The i18n parameters to use for translation.\n     */\n    t(text, params = {}, ...args) {\n        if (!text) {\n            return '';\n        }\n        // Use _userInput: true to ignore translations from defaults\n        if (text in en_1.default && params._userInput) {\n            return text;\n        }\n        params.data = params.data || this.rootValue;\n        params.row = params.row || this.data;\n        params.component = params.component || this.component;\n        return super.t(text, params, ...args);\n    }\n    labelIsHidden() {\n        return !this.component.label ||\n            ((!this.isInDataGrid && this.component.hideLabel) ||\n                (this.isInDataGrid && !this.component.dataGridLabel) ||\n                this.options.inputsOnly) && !this.builderMode;\n    }\n    transform(type, value) {\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        return frameworkTemplates.hasOwnProperty('transform')\n            ? frameworkTemplates.transform(type, value, this)\n            : (type, value) => value;\n    }\n    getTemplate(names, modes) {\n        modes = Array.isArray(modes) ? modes : [modes];\n        names = Array.isArray(names) ? names : [names];\n        if (!modes.includes('form')) {\n            modes.push('form');\n        }\n        let result = null;\n        if (this.options.templates) {\n            result = this.checkTemplate(this.options.templates, names, modes);\n            if (result) {\n                return result;\n            }\n        }\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        result = this.checkTemplate(frameworkTemplates, names, modes);\n        if (result) {\n            return result;\n        }\n        // Default back to bootstrap if not defined.\n        const name = names[names.length - 1];\n        const templatesByName = Templates_1.default.defaultTemplates[name];\n        if (!templatesByName) {\n            return `Unknown template: ${name}`;\n        }\n        const templateByMode = this.checkTemplateMode(templatesByName, modes);\n        if (templateByMode) {\n            return templateByMode;\n        }\n        return templatesByName.form;\n    }\n    checkTemplate(templates, names, modes) {\n        for (const name of names) {\n            const templatesByName = templates[name];\n            if (templatesByName) {\n                const templateByMode = this.checkTemplateMode(templatesByName, modes);\n                if (templateByMode) {\n                    return templateByMode;\n                }\n            }\n        }\n        return null;\n    }\n    checkTemplateMode(templatesByName, modes) {\n        for (const mode of modes) {\n            const templateByMode = templatesByName[mode];\n            if (templateByMode) {\n                return templateByMode;\n            }\n        }\n        return null;\n    }\n    getFormattedAttribute(attr) {\n        return attr ? this.t(attr, { _userInput: true }).replace(/\"/g, '&quot;') : '';\n    }\n    getFormattedTooltip(tooltipValue) {\n        const tooltip = this.interpolate(tooltipValue || '').replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return this.getFormattedAttribute(tooltip);\n    }\n    isHtmlRenderMode() {\n        return this.options.renderMode === 'html';\n    }\n    renderTemplate(name, data = {}, modeOption) {\n        // Need to make this fall back to form if renderMode is not found similar to how we search templates.\n        const mode = modeOption || this.options.renderMode || 'form';\n        data.component = this.component;\n        data.self = this;\n        data.options = this.options;\n        data.readOnly = this.options.readOnly;\n        data.iconClass = this.iconClass.bind(this);\n        data.size = this.size.bind(this);\n        data.t = this.t.bind(this);\n        data.transform = this.transform.bind(this);\n        data.id = data.id || this.id;\n        data.key = data.key || this.key;\n        data.value = data.value || this.dataValue;\n        data.disabled = this.disabled;\n        data.builder = this.builderMode;\n        data.render = (...args) => {\n            console.warn(`Form.io 'render' template function is deprecated.\n      If you need to render template (template A) inside of another template (template B),\n      pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`);\n            return this.renderTemplate(...args);\n        };\n        data.label = data.labelInfo || this.labelInfo;\n        data.tooltip = this.getFormattedTooltip(this.component.tooltip);\n        // Allow more specific template names\n        const names = [\n            `${name}-${this.component.type}-${this.key}`,\n            `${name}-${this.component.type}`,\n            `${name}-${this.key}`,\n            `${name}`,\n        ];\n        // Allow template alters.\n        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(this.getTemplate(names, mode), data), data, mode);\n    }\n    /**\n     * Sanitize an html string.\n     *\n     * @param string\n     * @returns {*}\n     */\n    sanitize(dirty, forceSanitize, options) {\n        var _a;\n        if (!this.shouldSanitizeValue && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, {\n            sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),\n        });\n    }\n    /**\n     * Render a template string into html.\n     *\n     * @param template\n     * @param data\n     * @param actions\n     *\n     * @return {HTMLElement|String} - The created element or an empty string if template is not specified.\n     */\n    renderString(template, data) {\n        if (!template) {\n            return '';\n        }\n        // Interpolate the template and populate\n        return this.interpolate(template, data);\n    }\n    performInputMapping(input) {\n        return input;\n    }\n    get widget() {\n        var _a;\n        const settings = this.component.widget;\n        if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {\n            settings.shadowRoot = this.root.shadowRoot;\n        }\n        const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;\n        return widget;\n    }\n    getBrowserLanguage() {\n        const nav = window.navigator;\n        const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];\n        let language;\n        // support for HTML 5.1 \"navigator.languages\"\n        if (Array.isArray(nav.languages)) {\n            for (let i = 0; i < nav.languages.length; i++) {\n                language = nav.languages[i];\n                if (language && language.length) {\n                    return language.split(';')[0];\n                }\n            }\n        }\n        // support for other well known properties in browsers\n        for (let i = 0; i < browserLanguagePropertyKeys.length; i++) {\n            language = nav[browserLanguagePropertyKeys[i]];\n            if (language && language.length) {\n                return language.split(';')[0];\n            }\n        }\n        return null;\n    }\n    /**\n     * Called before a next and previous page is triggered allowing the components\n     * to perform special functions.\n     *\n     * @return {*}\n     */\n    beforePage() {\n        return Promise.resolve(true);\n    }\n    beforeNext() {\n        return this.beforePage(true);\n    }\n    /**\n     * Called before a submission is triggered allowing the components\n     * to perform special async functions.\n     *\n     * @return {*}\n     */\n    beforeSubmit() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Return the submission timezone.\n     *\n     * @return {*}\n     */\n    get submissionTimezone() {\n        this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');\n        return this.options.submissionTimezone;\n    }\n    get timezone() {\n        return this.getTimezone(this.component);\n    }\n    getTimezone(settings) {\n        if (settings.timezone) {\n            return settings.timezone;\n        }\n        if (settings.displayInTimezone === 'utc') {\n            return 'UTC';\n        }\n        const submissionTimezone = this.submissionTimezone;\n        if (submissionTimezone &&\n            ((settings.displayInTimezone === 'submission') ||\n                ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {\n            return submissionTimezone;\n        }\n        // Return current timezone if none are provided.\n        return (0, utils_1.currentTimezone)();\n    }\n    loadRefs(element, refs) {\n        for (const ref in refs) {\n            const refType = refs[ref];\n            const isString = typeof refType === 'string';\n            const selector = isString && refType.includes('scope') ? `:scope > [ref=\"${ref}\"]` : `[ref=\"${ref}\"]`;\n            if (isString && refType.startsWith('single')) {\n                this.refs[ref] = element.querySelector(selector);\n            }\n            else {\n                this.refs[ref] = element.querySelectorAll(selector);\n            }\n        }\n    }\n    setOpenModalElement(template) {\n        this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n    }\n    getModalPreviewTemplate() {\n        var _a;\n        const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;\n        let modalLabel;\n        if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {\n            modalLabel = { className: 'field-required' };\n        }\n        return this.renderTemplate('modalPreview', {\n            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),\n            messages: '',\n            labelInfo: modalLabel,\n        });\n    }\n    build(element) {\n        element = element || this.element;\n        this.empty(element);\n        this.setContent(element, this.render());\n        return this.attach(element);\n    }\n    get hasModalSaveButton() {\n        return true;\n    }\n    render(children = `Unknown component: ${this.component.type}`, topLevel = false) {\n        const isVisible = this.visible;\n        this.rendered = true;\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            return ComponentModal_1.default.render(this, {\n                visible: isVisible,\n                showSaveButton: this.hasModalSaveButton,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n        else {\n            return this.renderTemplate('component', {\n                visible: isVisible,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n    }\n    attachTooltips(toolTipsRefs) {\n        toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {\n            if (tooltip) {\n                const tooltipAttribute = tooltip.getAttribute('data-tooltip');\n                const tooltipDataTitle = tooltip.getAttribute('data-title');\n                const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)\n                    .replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n                this.tooltips[index] = (0, tippy_js_1.default)(tooltip, {\n                    allowHTML: true,\n                    trigger: 'mouseenter click focus',\n                    placement: 'right',\n                    zIndex: 10000,\n                    interactive: true,\n                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),\n                });\n            }\n        });\n    }\n    createComponentModal(element, modalShouldBeOpened, currentValue) {\n        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue);\n    }\n    attach(element) {\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n            const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n            const openModalTemplate = this.componentModal && modalShouldBeOpened\n                ? this.componentModal.openModalTemplate\n                : null;\n            this.componentModal = this.createComponentModal(element, modalShouldBeOpened, currentValue);\n            this.setOpenModalElement(openModalTemplate);\n        }\n        this.attached = true;\n        this.setElement(element);\n        element.component = this;\n        // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.\n        if (this.element.id) {\n            this.id = this.element.id;\n            this.component.id = this.id;\n        }\n        this.loadRefs(element, {\n            messageContainer: 'single',\n            tooltip: 'multiple'\n        });\n        this.attachTooltips(this.refs.tooltip);\n        // Attach logic.\n        this.attachLogic();\n        this.autofocus();\n        // Allow global attach.\n        this.hook('attachComponent', element, this);\n        // Allow attach per component type.\n        const type = this.component.type;\n        if (type) {\n            this.hook(`attach${type.charAt(0).toUpperCase() + type.substring(1, type.length)}`, element, this);\n        }\n        this.restoreFocus();\n        this.addons.forEach((addon) => addon.attach(element));\n        return Promise.resolve();\n    }\n    restoreFocus() {\n        var _a, _b, _c;\n        const isFocused = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path;\n        if (isFocused) {\n            this.loadRefs(this.element, { input: 'multiple' });\n            this.focus((_c = this.root.currentSelection) === null || _c === void 0 ? void 0 : _c.index);\n            this.restoreCaretPosition();\n        }\n    }\n    addShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || !this.root || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.addShortcut(element, shortcut);\n    }\n    removeShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.removeShortcut(element, shortcut);\n    }\n    /**\n     * Remove all event handlers.\n     */\n    detach() {\n        // First iterate through each ref and delete the component so there are no dangling component references.\n        lodash_1.default.each(this.refs, (ref) => {\n            if (typeof ref === NodeList) {\n                ref.forEach((elem) => {\n                    delete elem.component;\n                });\n            }\n            else if (ref) {\n                delete ref.component;\n            }\n        });\n        this.refs = {};\n        this.removeEventListeners();\n        this.detachLogic();\n        if (this.tooltip) {\n            this.tooltip.destroy();\n        }\n    }\n    checkRefresh(refreshData, changed, flags) {\n        const changePath = lodash_1.default.get(changed, 'instance.path', false);\n        // Don't let components change themselves.\n        if (changePath && this.path === changePath) {\n            return;\n        }\n        if (refreshData === 'data') {\n            this.refresh(this.data, changed, flags);\n        }\n        else if ((changePath && (0, utils_1.getComponentPath)(changed.instance) === refreshData) && changed && changed.instance &&\n            // Make sure the changed component is not in a different \"context\". Solves issues where refreshOn being set\n            // in fields inside EditGrids could alter their state from other rows (which is bad).\n            this.inContext(changed.instance)) {\n            this.refresh(changed.value, changed, flags);\n        }\n    }\n    checkRefreshOn(changes, flags = {}) {\n        changes = changes || [];\n        if (flags.noRefresh) {\n            return;\n        }\n        if (!changes.length && flags.changed) {\n            changes = [flags.changed];\n        }\n        const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;\n        // If they wish to refresh on a value, then add that here.\n        if (refreshOn) {\n            if (Array.isArray(refreshOn)) {\n                refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));\n            }\n            else {\n                changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));\n            }\n        }\n    }\n    /**\n     * Refreshes the component with a new value.\n     *\n     * @param value\n     */\n    refresh(value) {\n        if (this.hasOwnProperty('refreshOnValue')) {\n            this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);\n        }\n        else {\n            this.refreshOnChanged = true;\n        }\n        this.refreshOnValue = (0, utils_1.fastCloneDeep)(value);\n        if (this.refreshOnChanged) {\n            if (this.component.clearOnRefresh) {\n                this.setValue(null);\n            }\n            this.triggerRedraw();\n        }\n    }\n    /**\n     * Checks to see if a separate component is in the \"context\" of this component. This is determined by first checking\n     * if they share the same \"data\" object. It will then walk up the parent tree and compare its parents data objects\n     * with the components data and returns true if they are in the same context.\n     *\n     * Different rows of the same EditGrid, for example, are in different contexts.\n     *\n     * @param component\n     */\n    inContext(component) {\n        if (component.data === this.data) {\n            return true;\n        }\n        let parent = this.parent;\n        while (parent) {\n            if (parent.data === component.data) {\n                return true;\n            }\n            parent = parent.parent;\n        }\n        return false;\n    }\n    get viewOnly() {\n        return this.options.readOnly && this.options.viewAsHtml;\n    }\n    setElement(element) {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        this.element = element;\n    }\n    createViewOnlyElement() {\n        this.setElement(this.ce('dl', {\n            id: this.id\n        }));\n        if (this.element) {\n            // Ensure you can get the component info from the element.\n            this.element.component = this;\n        }\n        return this.element;\n    }\n    get defaultViewOnlyValue() {\n        return '-';\n    }\n    /**\n     * Uses the widget to determine the output string.\n     *\n     * @param value\n     * @return {*}\n     */\n    getWidgetValueAsString(value, options) {\n        const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;\n        if (!value || noInputWidget) {\n            if (!this.widget || !value) {\n                return value;\n            }\n            else {\n                return this.widget.getValueAsString(value);\n            }\n        }\n        if (Array.isArray(value)) {\n            const values = [];\n            value.forEach((val, index) => {\n                const widget = this.refs.input[index] && this.refs.input[index].widget;\n                if (widget) {\n                    values.push(widget.getValueAsString(val, options));\n                }\n            });\n            return values;\n        }\n        const widget = this.refs.input[0].widget;\n        return widget.getValueAsString(value, options);\n    }\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.join(', ');\n        }\n        if (lodash_1.default.isPlainObject(value)) {\n            return JSON.stringify(value);\n        }\n        if (value === null || value === undefined) {\n            return '';\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue);\n    }\n    getView(value, options) {\n        if (this.component.protected) {\n            return '--- PROTECTED ---';\n        }\n        return this.getValueAsString(value, options);\n    }\n    updateItems(...args) {\n        this.restoreValue();\n        this.onChange(...args);\n    }\n    /**\n     * @param {*} data\n     * @param {boolean} [forceUseValue=false] - if true, return 'value' property of the data\n     * @return {*}\n     */\n    itemValue(data, forceUseValue = false) {\n        if (lodash_1.default.isObject(data) && !lodash_1.default.isArray(data)) {\n            if (this.valueProperty) {\n                return lodash_1.default.get(data, this.valueProperty);\n            }\n            if (forceUseValue) {\n                return data.value;\n            }\n        }\n        return data;\n    }\n    itemValueForHTMLMode(value) {\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));\n            return values.join(', ');\n        }\n        return this.itemValue(value);\n    }\n    createModal(element, attr, confirm) {\n        const dialog = this.ce('div', attr || {});\n        this.setContent(dialog, this.renderTemplate('dialog'));\n        // Add refs to dialog, not \"this\".\n        dialog.refs = {};\n        this.loadRefs.call(dialog, dialog, {\n            dialogOverlay: 'single',\n            dialogContents: 'single',\n            dialogClose: 'single',\n        });\n        dialog.refs.dialogContents.appendChild(element);\n        document.body.appendChild(dialog);\n        document.body.classList.add('modal-open');\n        dialog.close = () => {\n            document.body.classList.remove('modal-open');\n            dialog.dispatchEvent(new CustomEvent('close'));\n        };\n        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        const handleCloseClick = (e) => {\n            if (confirm) {\n                confirm().then(() => close(e))\n                    .catch(() => { });\n            }\n            else {\n                close(e);\n            }\n        };\n        this.addEventListener(dialog.refs.dialogOverlay, 'click', handleCloseClick);\n        this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);\n        return dialog;\n    }\n    get optimizeRedraw() {\n        if (this.options.optimizeRedraw && this.element && !this.visible) {\n            this.addClass(this.element, 'formio-removed');\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Retrieves the CSS class name of this component.\n     * @returns {string} - The class name of this component.\n     */\n    get className() {\n        let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';\n        className += `formio-component formio-component-${this.component.type} `;\n        // TODO: find proper way to avoid overriding of default type-based component styles\n        if (this.key && this.key !== 'form') {\n            className += `formio-component-${this.key} `;\n        }\n        if (this.component.multiple) {\n            className += 'formio-component-multiple ';\n        }\n        if (this.component.customClass) {\n            className += this.component.customClass;\n        }\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required)) {\n            className += ' required';\n        }\n        if (this.labelIsHidden()) {\n            className += ' formio-component-label-hidden';\n        }\n        if (!this.visible) {\n            className += ' formio-hidden';\n        }\n        return className;\n    }\n    /**\n     * Build the custom style from the layout values\n     * @return {string} - The custom style\n     */\n    get customStyle() {\n        let customCSS = '';\n        lodash_1.default.each(this.component.style, (value, key) => {\n            if (value !== '') {\n                customCSS += `${key}:${value};`;\n            }\n        });\n        return customCSS;\n    }\n    static get serverConditionSettings() {\n        return Component.conditionOperatorsSettings;\n    }\n    get isMobile() {\n        return (0, ismobilejs_1.default)();\n    }\n    /**\n     * Returns the outside wrapping element of this component.\n     * @returns {HTMLElement}\n     */\n    getElement() {\n        return this.element;\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     *\n     * @param additional\n     * @return {*}\n     */\n    evalContext(additional) {\n        return super.evalContext(Object.assign({\n            component: this.component,\n            row: this.data,\n            rowIndex: this.rowIndex,\n            data: this.rootValue,\n            iconClass: this.iconClass.bind(this),\n            // Bind the translate function to the data context of any interpolated string.\n            // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)\n            // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.\n            t: this.t.bind(this),\n            submission: (this.root ? this.root._submission : {\n                data: this.rootValue\n            }),\n            form: this.root ? this.root._form : {},\n            options: this.options,\n        }, additional));\n    }\n    /**\n     * Sets the pristine flag for this component.\n     *\n     * @param pristine {boolean} - TRUE to make pristine, FALSE not pristine.\n     */\n    setPristine(pristine) {\n        this.pristine = pristine;\n    }\n    get isPristine() {\n        return this.pristine;\n    }\n    setDirty(dirty) {\n        this.dirty = dirty;\n    }\n    get isDirty() {\n        return this.dirty;\n    }\n    /**\n     * Removes a value out of the data array and rebuild the rows.\n     * @param {number} index - The index of the data element to remove.\n     */\n    removeValue(index) {\n        this.splice(index);\n        this.redraw();\n        this.restoreValue();\n        this.triggerRootChange();\n    }\n    iconClass(name, spinning) {\n        const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';\n        return Templates_1.default.current.hasOwnProperty('iconClass')\n            ? Templates_1.default.current.iconClass(iconset, name, spinning)\n            : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;\n    }\n    size(size) {\n        return Templates_1.default.current.hasOwnProperty('size')\n            ? Templates_1.default.current.size(size)\n            : size;\n    }\n    /**\n     * The readible name for this component.\n     * @returns {string} - The name of the component.\n     */\n    get name() {\n        return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });\n    }\n    get visibleErrors() {\n        return this._visibleErrors;\n    }\n    get errors() {\n        return this._errors;\n    }\n    /**\n     * Returns the error label for this component.\n     * @return {*}\n     */\n    get errorLabel() {\n        return this.t(this.component.errorLabel\n            || this.component.label\n            || this.component.placeholder\n            || this.key);\n    }\n    /**\n     * Get the error message provided a certain type of error.\n     * @param type\n     * @return {*}\n     */\n    errorMessage(type) {\n        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n    }\n    setContent(element, content, forceSanitize, sanitizeOptions) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);\n            return true;\n        }\n        return false;\n    }\n    restoreCaretPosition() {\n        var _a, _b, _c;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {\n                const { selection, index } = this.root.currentSelection;\n                let input = this.refs.input[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (input) {\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(...selection);\n                    }\n                }\n                else {\n                    input = this.refs.input[this.refs.input.length];\n                    const lastCharacter = ((_c = input.value) === null || _c === void 0 ? void 0 : _c.length) || 0;\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(lastCharacter, lastCharacter);\n                    }\n                }\n            }\n        }\n    }\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element || !this.element.parentNode || this.optimizeRedraw) {\n            // Return a non-resolving promise.\n            return Promise.resolve();\n        }\n        this.detach();\n        this.emit('redraw');\n        // Since we are going to replace the element, we need to know it's position so we can find it in the parent's children.\n        const parent = this.element.parentNode;\n        const index = Array.prototype.indexOf.call(parent.children, this.element);\n        this.element.outerHTML = this.sanitize(this.render());\n        this.setElement(parent.children[index]);\n        return this.attach(this.element);\n    }\n    rebuild() {\n        this.destroy();\n        this.init();\n        this.visible = this.conditionallyVisible(null, null);\n        return this.redraw();\n    }\n    removeEventListeners() {\n        super.removeEventListeners();\n        this.tooltips.forEach(tooltip => tooltip.destroy());\n        this.tooltips = [];\n    }\n    hasClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.hasClass(element, this.transform('class', className));\n    }\n    addClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.addClass(element, this.transform('class', className));\n    }\n    removeClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.removeClass(element, this.transform('class', className));\n    }\n    /**\n     * Determines if this component has a condition defined.\n     *\n     * @return {null}\n     */\n    hasCondition() {\n        if (this._hasCondition !== null) {\n            return this._hasCondition;\n        }\n        this._hasCondition = FormioUtils.hasCondition(this.component);\n        return this._hasCondition;\n    }\n    /**\n     * Check if this component is conditionally visible.\n     *\n     * @param data\n     * @return {boolean}\n     */\n    conditionallyVisible(data, row) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        if (this.builderMode || this.previewMode || !this.hasCondition()) {\n            return !this.component.hidden;\n        }\n        data = data || (this.root ? this.root.data : {});\n        return this.checkCondition(row, data);\n    }\n    /**\n     * Checks the condition of this component.\n     *\n     * TODO: Switch row and data parameters to be consistent with other methods.\n     *\n     * @param row - The row contextual data.\n     * @param data - The global data object.\n     * @return {boolean} - True if the condition applies to this component.\n     */\n    checkCondition(row, data) {\n        return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);\n    }\n    /**\n     * Check for conditionals and hide/show the element based on those conditions.\n     */\n    checkComponentConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {\n            this.redraw();\n        }\n        // Check advanced conditions\n        const visible = this.conditionallyVisible(data, row);\n        if (this.visible !== visible) {\n            this.visible = visible;\n        }\n        return visible;\n    }\n    /**\n     * Checks conditions for this component and any sub components.\n     * @param args\n     * @return {boolean}\n     */\n    checkConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.checkComponentConditions(data, flags, row);\n    }\n    get logic() {\n        return this.component.logic || [];\n    }\n    /**\n     * Check all triggers and apply necessary actions.\n     *\n     * @param data\n     */\n    fieldLogic(data, row) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        const logics = this.logic;\n        // If there aren't logic, don't go further.\n        if (logics.length === 0) {\n            return;\n        }\n        const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n        let changed = logics.reduce((changed, logic) => {\n            const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);\n            return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;\n        }, false);\n        // If component definition changed, replace and mark as changed.\n        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n            this.component = newComponent;\n            changed = true;\n            const disabled = this.shouldDisabled;\n            // Change disabled state if it has changed\n            if (this.disabled !== disabled) {\n                this.disabled = disabled;\n            }\n        }\n        return changed;\n    }\n    isIE() {\n        if (typeof window === 'undefined') {\n            return false;\n        }\n        const userAgent = window.navigator.userAgent;\n        const msie = userAgent.indexOf('MSIE ');\n        if (msie > 0) {\n            // IE 10 or older => return version number\n            return parseInt(userAgent.substring(msie + 5, userAgent.indexOf('.', msie)), 10);\n        }\n        const trident = userAgent.indexOf('Trident/');\n        if (trident > 0) {\n            // IE 11 => return version number\n            const rv = userAgent.indexOf('rv:');\n            return parseInt(userAgent.substring(rv + 3, userAgent.indexOf('.', rv)), 10);\n        }\n        const edge = userAgent.indexOf('Edge/');\n        if (edge > 0) {\n            // IE 12 (aka Edge) => return version number\n            return parseInt(userAgent.substring(edge + 5, userAgent.indexOf('.', edge)), 10);\n        }\n        // other browser\n        return false;\n    }\n    defineActionValue(action, argsObject) {\n        return this.evaluate(action.value, argsObject, 'value');\n    }\n    applyActions(newComponent, actions, result, row, data) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return actions.reduce((changed, action) => {\n            switch (action.type) {\n                case 'property': {\n                    FormioUtils.setActionProperty(newComponent, action, result, row, data, this);\n                    const property = action.property.value;\n                    if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'value': {\n                    const oldValue = this.getValue();\n                    const newValue = this.defineActionValue(action, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    });\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'mergeComponentSchema': {\n                    const schema = this.evaluate(action.schemaDefinition, {\n                        value: lodash_1.default.clone(this.getValue()),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    }, 'schema');\n                    lodash_1.default.assign(newComponent, schema);\n                    if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'customAction': {\n                    const oldValue = this.getValue();\n                    const newValue = this.evaluate(action.customAction, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        input: oldValue,\n                        component: newComponent,\n                        result,\n                    }, 'value');\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n            }\n            return changed;\n        }, false);\n    }\n    // Deprecated\n    addInputError(message, dirty, elements) {\n        this.addMessages(message);\n        this.setErrorClasses(elements, dirty, !!message);\n    }\n    // Deprecated\n    removeInputError(elements) {\n        this.setErrorClasses(elements, true, false);\n    }\n    /**\n     * Add a new input error to this element.\n     *\n     * @param message\n     * @param dirty\n     */\n    addMessages(messages) {\n        if (!messages) {\n            return;\n        }\n        // Standardize on array of objects for message.\n        if (typeof messages === 'string') {\n            messages = {\n                messages,\n                level: 'error',\n            };\n        }\n        if (!Array.isArray(messages)) {\n            messages = [messages];\n        }\n        messages = lodash_1.default.uniqBy(messages, message => message.message);\n        if (this.refs.messageContainer) {\n            this.setContent(this.refs.messageContainer, messages.map((message) => {\n                if (message.message && typeof message.message === 'string') {\n                    message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');\n                }\n                return this.renderTemplate('message', Object.assign({}, message));\n            }).join(''));\n        }\n    }\n    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n        this.clearErrorClasses();\n        elements.forEach((element) => {\n            this.setElementInvalid(this.performInputMapping(element), false);\n        });\n        this.setInputWidgetErrorClasses(elements, hasErrors);\n        if (hasErrors) {\n            // Add error classes\n            elements.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), true);\n            });\n            if (dirty && this.options.highlightErrors) {\n                this.addClass(element, this.options.componentErrorClass);\n            }\n            else {\n                this.addClass(element, 'has-error');\n            }\n        }\n        if (hasMessages) {\n            this.addClass(element, 'has-message');\n        }\n    }\n    setElementInvalid(element, invalid) {\n        if (!element)\n            return;\n        if (invalid) {\n            this.addClass(element, 'is-invalid');\n        }\n        else {\n            this.removeClass(element, 'is-invalid');\n        }\n        element.setAttribute('aria-invalid', invalid ? 'true' : 'false');\n    }\n    clearOnHide() {\n        // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.\n        if (\n        // if change happens inside EditGrid's row, it doesn't trigger change on the root level, so rootPristine will be true\n        (!this.rootPristine || this.options.server || (0, utils_1.isInsideScopingComponent)(this)) &&\n            this.component.clearOnHide !== false &&\n            !this.options.readOnly &&\n            !this.options.showHiddenFields) {\n            if (!this.visible) {\n                this.deleteValue();\n            }\n            else if (!this.hasValue() && this.shouldAddDefaultValue) {\n                // If shown, ensure the default is set.\n                this.setValue(this.defaultValue, {\n                    noUpdateEvent: true\n                });\n            }\n        }\n    }\n    triggerRootChange(...args) {\n        if (this.options.onChange) {\n            this.options.onChange(...args);\n        }\n        else if (this.root) {\n            this.root.triggerChange(...args);\n        }\n    }\n    onChange(flags, fromRoot) {\n        flags = flags || {};\n        if (flags.modified) {\n            if (!flags.noPristineChangeOnModified) {\n                this.pristine = false;\n            }\n            this.addClass(this.getElement(), 'formio-modified');\n        }\n        // If we are supposed to validate on blur, then don't trigger validation yet.\n        if (this.component.validateOn === 'blur') {\n            flags.noValidate = true;\n        }\n        if (this.component.onChange) {\n            this.evaluate(this.component.onChange, {\n                flags\n            });\n        }\n        // Set the changed variable.\n        const changed = {\n            instance: this,\n            component: this.component,\n            value: this.dataValue,\n            flags: flags\n        };\n        // Emit the change.\n        this.emit('componentChange', changed);\n        // Do not propogate the modified flag.\n        let modified = false;\n        if (flags.modified) {\n            modified = true;\n            delete flags.modified;\n        }\n        // Bubble this change up to the top.\n        if (!fromRoot) {\n            this.triggerRootChange(flags, changed, modified);\n        }\n        return changed;\n    }\n    get wysiwygDefault() {\n        return {\n            quill: {\n                theme: 'snow',\n                placeholder: this.t(this.component.placeholder, { _userInput: true }),\n                modules: {\n                    toolbar: [\n                        [{ 'size': ['small', false, 'large', 'huge'] }],\n                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n                        [{ 'font': [] }],\n                        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],\n                        [{ 'color': [] }, { 'background': [] }],\n                        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],\n                        ['blockquote', 'code-block'],\n                        ['link', 'image', 'video', 'formula', 'source']\n                    ]\n                }\n            },\n            ace: {\n                theme: 'ace/theme/xcode',\n                maxLines: 12,\n                minLines: 12,\n                tabSize: 2,\n                mode: 'ace/mode/javascript',\n                placeholder: this.t(this.component.placeholder, { _userInput: true })\n            },\n            ckeditor: {\n                image: {\n                    toolbar: [\n                        'imageTextAlternative',\n                        '|',\n                        'imageStyle:full',\n                        'imageStyle:alignLeft',\n                        'imageStyle:alignCenter',\n                        'imageStyle:alignRight'\n                    ],\n                    styles: [\n                        'full',\n                        'alignLeft',\n                        'alignCenter',\n                        'alignRight'\n                    ]\n                },\n                extraPlugins: []\n            },\n            default: {}\n        };\n    }\n    addCKE(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? {} : settings;\n        settings.base64Upload = this.component.isUploadEnabled ? false : true;\n        settings.mediaEmbed = { previewsInData: true };\n        settings = lodash_1.default.merge(this.wysiwygDefault.ckeditor, lodash_1.default.get(this.options, 'editors.ckeditor.settings', {}), settings);\n        if (this.component.isUploadEnabled) {\n            settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));\n        }\n        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)\n            .then(() => {\n            if (!element.parentNode) {\n                return Promise.reject();\n            }\n            if (isIEBrowser) {\n                const editor = CKEDITOR.replace(element);\n                editor.on('change', () => onChange(editor.getData()));\n                return Promise.resolve(editor);\n            }\n            else {\n                return ClassicEditor.create(element, settings).then(editor => {\n                    editor.model.document.on('change', () => onChange(editor.data.get()));\n                    return editor;\n                });\n            }\n        });\n    }\n    addQuill(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? this.wysiwygDefault.quill : settings;\n        settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);\n        settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });\n        // Lazy load the quill css.\n        Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }\n        ], true);\n        // Lazy load the quill library.\n        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)\n            .then(() => {\n            return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)\n                .then(() => {\n                if (!element.parentNode) {\n                    return Promise.reject();\n                }\n                this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);\n                /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ **/\n                const txtArea = document.createElement('textarea');\n                txtArea.setAttribute('class', 'quill-source-code');\n                this.quill.addContainer('ql-custom').appendChild(txtArea);\n                const qlSource = element.parentNode.querySelector('.ql-source');\n                if (qlSource) {\n                    this.addEventListener(qlSource, 'click', (event) => {\n                        event.preventDefault();\n                        if (txtArea.style.display === 'inherit') {\n                            this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));\n                        }\n                        txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';\n                    });\n                }\n                /** END CODEBLOCK **/\n                // Make sure to select cursor when they click on the element.\n                this.addEventListener(element, 'click', () => this.quill.focus());\n                // Allows users to skip toolbar items when tabbing though form\n                const elm = document.querySelectorAll('.ql-formats > button');\n                for (let i = 0; i < elm.length; i++) {\n                    elm[i].setAttribute('tabindex', '-1');\n                }\n                this.quill.on('text-change', () => {\n                    txtArea.value = this.quill.root.innerHTML;\n                    onChange(txtArea);\n                });\n                return this.quill;\n            });\n        });\n    }\n    get shouldSanitizeValue() {\n        var _a;\n        // Sanitize value if sanitizing for thw whole content is turned off\n        return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);\n    }\n    addAce(element, settings, onChange) {\n        if (!settings || (settings.theme === 'snow')) {\n            const mode = settings ? settings.mode : '';\n            settings = {};\n            if (mode) {\n                settings.mode = mode;\n            }\n        }\n        settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});\n        return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)\n            .then((editor) => {\n            editor = editor.edit(element);\n            editor.removeAllListeners('change');\n            editor.setOptions(settings);\n            editor.getSession().setMode(settings.mode);\n            editor.on('change', () => onChange(editor.getValue()));\n            if (settings.isUseWorkerDisabled) {\n                editor.session.setUseWorker(false);\n            }\n            return editor;\n        });\n    }\n    get tree() {\n        return this.component.tree || false;\n    }\n    /**\n     * The empty value for this component.\n     *\n     * @return {null}\n     */\n    get emptyValue() {\n        return null;\n    }\n    /**\n     * Returns if this component has a value set.\n     *\n     */\n    hasValue(data) {\n        return !lodash_1.default.isUndefined(lodash_1.default.get(data || this.data, this.key));\n    }\n    /**\n     * Get the data value at the root level.\n     *\n     * @return {*}\n     */\n    get rootValue() {\n        return this.root ? this.root.data : this.data;\n    }\n    get rootPristine() {\n        return lodash_1.default.get(this, 'root.pristine', false);\n    }\n    /**\n     * Get the static value of this component.\n     * @return {*}\n     */\n    get dataValue() {\n        if (!this.key ||\n            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {\n            return this.emptyValue;\n        }\n        if (!this.hasValue() && this.shouldAddDefaultValue) {\n            const empty = this.component.multiple ? [] : this.emptyValue;\n            if (!this.rootPristine) {\n                this.dataValue = empty;\n            }\n            return empty;\n        }\n        return lodash_1.default.get(this._data, this.key);\n    }\n    /**\n     * Sets the static value of this component.\n     *\n     * @param value\n     */\n    set dataValue(value) {\n        if (!this.allowData ||\n            !this.key ||\n            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {\n            return;\n        }\n        if ((value !== null) && (value !== undefined)) {\n            value = this.hook('setDataValue', value, this.key, this._data);\n        }\n        if ((value === null) || (value === undefined)) {\n            this.unset();\n            return;\n        }\n        lodash_1.default.set(this._data, this.key, value);\n        return;\n    }\n    /**\n     * Splice a value from the dataValue.\n     *\n     * @param index\n     */\n    splice(index, flags = {}) {\n        if (this.hasValue()) {\n            const dataValue = this.dataValue || [];\n            if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {\n                dataValue.splice(index, 1);\n                this.dataValue = dataValue;\n                this.triggerChange(flags);\n            }\n        }\n    }\n    unset() {\n        lodash_1.default.unset(this._data, this.key);\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n    getCustomDefaultValue(defaultValue) {\n        if (this.component.customDefaultValue && !this.options.preview) {\n            defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');\n        }\n        return defaultValue;\n    }\n    get shouldAddDefaultValue() {\n        return !this.options.noDefaults || (this.component.defaultValue && !this.isEmpty(this.component.defaultValue)) || this.component.customDefaultValue;\n    }\n    get defaultValue() {\n        let defaultValue = this.emptyValue;\n        if (this.component.defaultValue) {\n            defaultValue = this.component.defaultValue;\n        }\n        defaultValue = this.getCustomDefaultValue(defaultValue);\n        const checkMask = (value) => {\n            if (typeof value === 'string') {\n                const placeholderChar = this.placeholderChar;\n                value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;\n                if (!FormioUtils.matchInputMask(value, this.defaultMask)) {\n                    value = '';\n                }\n            }\n            else {\n                value = '';\n            }\n            return value;\n        };\n        if (this.defaultMask) {\n            if (Array.isArray(defaultValue)) {\n                defaultValue = defaultValue.map(checkMask);\n            }\n            else {\n                defaultValue = checkMask(defaultValue);\n            }\n        }\n        // Clone so that it creates a new instance.\n        return lodash_1.default.cloneDeep(defaultValue);\n    }\n    /**\n     * Get the input value of this component.\n     *\n     * @return {*}\n     */\n    getValue() {\n        if (!this.hasInput || this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        const values = [];\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                if (!this.component.multiple) {\n                    return this.getValueAt(i);\n                }\n                values.push(this.getValueAt(i));\n            }\n        }\n        if (values.length === 0 && !this.component.multiple) {\n            return '';\n        }\n        return values;\n    }\n    /**\n     * Get the value at a specific index.\n     *\n     * @param index\n     * @returns {*}\n     */\n    getValueAt(index) {\n        const input = this.performInputMapping(this.refs.input[index]);\n        return input ? input.value : undefined;\n    }\n    /**\n     * Set the value of this component.\n     *\n     * @param value\n     * @param flags\n     *\n     * @return {boolean} - If the value changed.\n     */\n    setValue(value, flags = {}) {\n        const changed = this.updateValue(value, flags);\n        value = this.dataValue;\n        if (!this.hasInput) {\n            return changed;\n        }\n        const isArray = Array.isArray(value);\n        const valueInput = this.refs.fileLink || this.refs.input;\n        if (isArray &&\n            Array.isArray(this.defaultValue) &&\n            this.refs.hasOwnProperty('input') &&\n            valueInput &&\n            (valueInput.length !== value.length) &&\n            this.visible) {\n            this.redraw();\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.redraw();\n            return changed;\n        }\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                this.setValueAt(i, isArray ? value[i] : value, flags);\n            }\n        }\n        return changed;\n    }\n    /**\n     * Set the value at a specific index.\n     *\n     * @param index\n     * @param value\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {\n            value = this.defaultValue;\n        }\n        const input = this.performInputMapping(this.refs.input[index]);\n        const valueMaskInput = this.refs.valueMaskInput;\n        if (valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) {\n            valueMaskInput.mask.textMaskInputElement.update(value);\n        }\n        if (input.mask) {\n            input.mask.textMaskInputElement.update(value);\n        }\n        else if (input.widget && input.widget.setValue) {\n            input.widget.setValue(value);\n        }\n        else {\n            input.value = value;\n        }\n    }\n    get hasSetValue() {\n        return this.hasValue() && !this.isEmpty(this.dataValue);\n    }\n    setDefaultValue() {\n        if (this.defaultValue && this.shouldAddDefaultValue) {\n            const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;\n            this.setValue(defaultValue, {\n                noUpdateEvent: true\n            });\n        }\n    }\n    /**\n     * Restore the value of a control.\n     */\n    restoreValue() {\n        if (this.hasSetValue) {\n            this.setValue(this.dataValue, {\n                noUpdateEvent: true\n            });\n        }\n        else {\n            this.setDefaultValue();\n        }\n    }\n    /**\n     * Normalize values coming into updateValue.\n     *\n     * @param value\n     * @return {*}\n     */\n    normalizeValue(value) {\n        if (this.component.multiple && !Array.isArray(value)) {\n            value = value ? [value] : [];\n        }\n        return value;\n    }\n    /**\n     * Update a value of this component.\n     *\n     * @param flags\n     */\n    updateComponentValue(value, flags = {}) {\n        let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;\n        newValue = this.normalizeValue(newValue, flags);\n        const oldValue = this.dataValue;\n        let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);\n        if (changed) {\n            this.dataValue = newValue;\n            changed = this.dataValue !== oldValue;\n            this.updateOnChange(flags, changed);\n        }\n        if (this.componentModal && flags && flags.fromSubmission) {\n            this.componentModal.setValue(value);\n        }\n        return changed;\n    }\n    /**\n     * Updates the value of this component plus all sub-components.\n     *\n     * @param args\n     * @return {boolean}\n     */\n    updateValue(...args) {\n        return this.updateComponentValue(...args);\n    }\n    getIcon(name, content, styles, ref = 'icon') {\n        return this.renderTemplate('icon', {\n            className: this.iconClass(name),\n            ref,\n            styles,\n            content\n        });\n    }\n    /**\n     * Resets the value of this component.\n     */\n    resetValue() {\n        this.unset();\n        this.setValue(this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\n    }\n    /**\n     * Determine if the value of this component has changed.\n     *\n     * @param newValue\n     * @param oldValue\n     * @return {boolean}\n     */\n    hasChanged(newValue, oldValue) {\n        if (((newValue === undefined) || (newValue === null)) &&\n            ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {\n            return false;\n        }\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            this.allowData &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    /**\n     * Update the value on change.\n     *\n     * @param flags\n     */\n    updateOnChange(flags = {}, changed = false) {\n        if (!flags.noUpdateEvent && changed) {\n            if (flags.fromSubmission) {\n                // Reset the errors when a submission has been made and allow it to revalidate.\n                this._errors = [];\n            }\n            this.triggerChange(flags);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Perform a calculated value operation.\n     *\n     * @param data - The global data object.\n     *\n     * @return {boolean} - If the value changed during calculation.\n     */\n    convertNumberOrBoolToString(value) {\n        if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n        }\n        return value;\n    }\n    doValueCalculation(dataValue, data, row) {\n        var _a;\n        return this.evaluate(this.component.calculateValue, {\n            value: dataValue,\n            data,\n            row: row || this.data,\n            submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {\n                data: this.rootValue\n            }\n        }, 'value');\n    }\n    /* eslint-disable max-statements */\n    calculateComponentValue(data, flags, row) {\n        // Skip value calculation for the component if we don't have entire form data set\n        if (lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {\n            return false;\n        }\n        // If no calculated value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        const { clearOnHide } = this.component;\n        const shouldBeCleared = !this.visible && clearOnHide;\n        const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);\n        // Handle all cases when calculated values should not fire.\n        if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||\n            !(this.component.calculateValue || this.component.calculateValueVariable) ||\n            shouldBeCleared ||\n            (this.options.server && !this.component.calculateServer) ||\n            (flags.dataSourceInitialLoading && allowOverride)) {\n            return false;\n        }\n        const dataValue = this.dataValue;\n        // Calculate the new value.\n        let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);\n        if (this.options.readOnly && dataValue && !calculatedValue) {\n            return false;\n        }\n        if (lodash_1.default.isNil(calculatedValue)) {\n            calculatedValue = this.emptyValue;\n        }\n        const changed = !lodash_1.default.isEqual(dataValue, calculatedValue);\n        // Do not override calculations on server if they have calculateServer set.\n        if (allowOverride) {\n            // The value is considered locked if it is not empty and comes from a submission value.\n            const fromSubmission = (flags.fromSubmission && this.component.persistent === true);\n            if (this.isEmpty(dataValue)) {\n                // Reset the calculation lock if ever the data is cleared.\n                this.calculationLocked = false;\n            }\n            else if (this.calculationLocked || fromSubmission) {\n                this.calculationLocked = true;\n                return false;\n            }\n            const firstPass = (this.calculatedValue === undefined);\n            if (firstPass) {\n                this.calculatedValue = null;\n            }\n            const newCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(calculatedValue));\n            const previousCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(this.calculatedValue));\n            const normalizedDataValue = this.normalizeValue(this.convertNumberOrBoolToString(dataValue));\n            const calculationChanged = !lodash_1.default.isEqual(previousCalculatedValue, newCalculatedValue);\n            const previousChanged = !lodash_1.default.isEqual(normalizedDataValue, previousCalculatedValue);\n            if (calculationChanged && previousChanged && !firstPass) {\n                return false;\n            }\n            // Check to ensure that the calculated value is different than the previously calculated value.\n            if (previousCalculatedValue && previousChanged && !calculationChanged) {\n                return false;\n            }\n            if (flags.isReordered || !calculationChanged) {\n                return false;\n            }\n            if (fromSubmission) {\n                // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass\n                this.calculatedValue = calculatedValue;\n                return false;\n            }\n            // If this is the firstPass, and the dataValue is different than to the calculatedValue.\n            if (firstPass && !this.isEmpty(dataValue) && changed && calculationChanged) {\n                // Return that we have a change so it will perform another pass.\n                return true;\n            }\n        }\n        this.calculatedValue = calculatedValue;\n        if (changed) {\n            if (!flags.noPristineChangeOnModified) {\n                this.pristine = false;\n            }\n            flags.triggeredComponentId = this.id;\n            return this.setValue(calculatedValue, flags);\n        }\n        return false;\n    }\n    /* eslint-enable max-statements */\n    /**\n     * Performs calculations in this component plus any child components.\n     *\n     * @param args\n     * @return {boolean}\n     */\n    calculateValue(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.calculateComponentValue(data, flags, row);\n    }\n    /**\n     * Get this component's label text.\n     *\n     */\n    get label() {\n        return this.component.label;\n    }\n    /**\n     * Set this component's label text and render it.\n     *\n     * @param value - The new label text.\n     */\n    set label(value) {\n        this.component.label = value;\n        if (this.labelElement) {\n            this.labelElement.innerText = value;\n        }\n    }\n    /**\n     * Get FormioForm element at the root of this component tree.\n     *\n     */\n    getRoot() {\n        return this.root;\n    }\n    /**\n     * Returns the invalid message, or empty string if the component is valid.\n     *\n     * @param data\n     * @param dirty\n     * @return {*}\n     */\n    invalidMessage(data, dirty, ignoreCondition, row) {\n        if (!ignoreCondition && !this.checkCondition(row, data)) {\n            return '';\n        }\n        // See if this is forced invalid.\n        if (this.invalid) {\n            return this.invalid;\n        }\n        // No need to check for errors if there is no input or if it is pristine.\n        if (!this.hasInput || (!dirty && this.pristine)) {\n            return '';\n        }\n        const validationScope = { errors: [] };\n        (0, process_1.processOneSync)({\n            component: this.component,\n            data,\n            row,\n            path: this.path || this.component.key,\n            scope: validationScope,\n            instance: this,\n            processors: [\n                process_1.validateProcessSync\n            ]\n        });\n        const errors = validationScope.errors;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return lodash_1.default.map(interpolatedErrors, 'message').join('\\n\\n');\n    }\n    /**\n     * Returns if the component is valid or not.\n     *\n     * @param data\n     * @param dirty\n     * @return {boolean}\n     */\n    isValid(data, dirty) {\n        return !this.invalidMessage(data, dirty);\n    }\n    setComponentValidity(errors, dirty, silentCheck) {\n        if (silentCheck) {\n            return [];\n        }\n        const messages = errors.filter(message => !message.fromServer);\n        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {\n            return this.setCustomValidity(messages, dirty);\n        }\n        else {\n            return this.setCustomValidity('');\n        }\n    }\n    /**\n     * Interpolate errors from the validation methods.\n     * @param {*} errors\n     * @returns\n     */\n    interpolateErrors(errors) {\n        var _a;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;\n    }\n    /**\n     * Show component validation errors.\n     * @param {*} errors - An array of errors that have occured.\n     * @param {*} data - The root submission data.\n     * @param {*} row - The contextual row data.\n     * @param {*} flags - The flags to perform validation.\n     * @returns\n     */\n    showValidationErrors(errors, data, row, flags) {\n        if (flags.silentCheck) {\n            return [];\n        }\n        if (this.options.alwaysDirty) {\n            flags.dirty = true;\n        }\n        if (flags.fromSubmission && this.hasValue(data)) {\n            flags.dirty = true;\n        }\n        this.setDirty(flags.dirty);\n        return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);\n    }\n    /**\n     * Perform a component validation.\n     * @param {*} data - The root data you wish to use for this component.\n     * @param {*} row - The contextual row data you wish to use for this component.\n     * @param {*} flags - The flags to control the behavior of the validation.\n     * @returns\n     */\n    validateComponent(data, row, flags = {}) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        const { async = false } = flags;\n        if (this.shouldSkipValidation(data, row, flags)) {\n            return async ? Promise.resolve([]) : [];\n        }\n        const processContext = {\n            component: this.component,\n            data,\n            row,\n            path: this.path || this.component.key,\n            instance: this,\n            scope: { errors: [] },\n            processors: [\n                async ? process_1.validateProcess : process_1.validateProcessSync\n            ]\n        };\n        if (async) {\n            return (0, process_1.processOne)(processContext).then(() => {\n                this._errors = this.interpolateErrors(processContext.scope.errors);\n                return this._errors;\n            });\n        }\n        (0, process_1.processOneSync)(processContext);\n        this._errors = this.interpolateErrors(processContext.scope.errors);\n        return this._errors;\n    }\n    /**\n     * Checks the validity of this component and sets the error message if it is invalid.\n     *\n     * @param data\n     * @param dirty\n     * @param row\n     * @return {boolean}\n     */\n    checkComponentValidity(data, dirty, row, flags = {}, allErrors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        flags.dirty = dirty || false;\n        if (flags.async) {\n            return this.validateComponent(data, row, flags).then((errors) => {\n                allErrors.push(...errors);\n                if (this.parent && this.parent.childErrors) {\n                    this.parent.childErrors.push(...errors);\n                }\n                this.showValidationErrors(errors, data, row, flags);\n                return errors.length === 0;\n            });\n        }\n        else {\n            const errors = this.validateComponent(data, row, flags);\n            this.showValidationErrors(errors, data, row, flags);\n            allErrors.push(...errors);\n            if (this.parent && this.parent.childErrors) {\n                this.parent.childErrors.push(...errors);\n            }\n            return errors.length === 0;\n        }\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data\n     * @param {*} dirty\n     * @param {*} row\n     * @param {*} silentCheck\n     * @returns\n     */\n    checkValidity(data, dirty, row, silentCheck, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        console.log('Deprecation warning:  Component.checkValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');\n        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n    }\n    checkAsyncValidity(data, dirty, row, silentCheck, errors = []) {\n        console.log('Deprecation warning:  Component.checkAsyncValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');\n        return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);\n    }\n    /**\n     * Check the conditions, calculations, and validity of a single component and triggers an update if\n     * something changed.\n     *\n     * @param data - The root data of the change event.\n     * @param flags - The flags from this change event.\n     *\n     * @return boolean - If component is valid or not.\n     */\n    checkData(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners\n        if (!flags.fromBlur) {\n            this.checkRefreshOn(flags.changes, flags);\n        }\n        if (flags.noCheck) {\n            return true;\n        }\n        this.checkComponentConditions(data, flags, row);\n        if (this.id !== flags.triggeredComponentId) {\n            this.calculateComponentValue(data, flags, row);\n        }\n    }\n    checkModal(errors = [], dirty = false) {\n        const messages = errors.filter(error => !error.fromServer);\n        const isValid = errors.length === 0;\n        if (!this.component.modalEdit || !this.componentModal) {\n            return;\n        }\n        if (dirty && !isValid) {\n            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);\n        }\n        else {\n            this.clearErrorClasses(this.refs.openModalWrapper);\n        }\n    }\n    get validationValue() {\n        return this.dataValue;\n    }\n    isEmpty(value = this.dataValue) {\n        const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;\n        return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB)) || lodash_1.default.isEqual(valueA, valueB);\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     *\n     * @return {boolean}\n     */\n    validateMultiple() {\n        return true;\n    }\n    clearErrorClasses(element = this.element) {\n        this.removeClass(element, this.options.componentErrorClass);\n        this.removeClass(element, 'alert alert-danger');\n        this.removeClass(element, 'has-error');\n        this.removeClass(element, 'has-message');\n    }\n    setInputWidgetErrorClasses(inputRefs, hasErrors) {\n        if (!this.isInputComponent || !this.component.widget || !(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.length)) {\n            return;\n        }\n        inputRefs.forEach((input) => {\n            if ((input === null || input === void 0 ? void 0 : input.widget) && input.widget.setErrorClasses) {\n                input.widget.setErrorClasses(hasErrors);\n            }\n        });\n    }\n    addFocusBlurEvents(element) {\n        this.addEventListener(element, 'focus', () => {\n            if (this.root.focusedComponent !== this) {\n                if (this.root.pendingBlur) {\n                    this.root.pendingBlur();\n                }\n                this.root.focusedComponent = this;\n                this.emit('focus', this);\n            }\n            else if (this.root.focusedComponent === this && this.root.pendingBlur) {\n                this.root.pendingBlur.cancel();\n                this.root.pendingBlur = null;\n            }\n        });\n        this.addEventListener(element, 'blur', () => {\n            this.root.pendingBlur = FormioUtils.delay(() => {\n                this.emit('blur', this);\n                if (this.component.validateOn === 'blur') {\n                    this.root.triggerChange({ fromBlur: true }, {\n                        instance: this,\n                        component: this.component,\n                        value: this.dataValue,\n                        flags: { fromBlur: true }\n                    });\n                }\n                this.root.focusedComponent = null;\n                this.root.pendingBlur = null;\n            });\n        });\n    }\n    // eslint-disable-next-line max-statements\n    setCustomValidity(messages, dirty, external) {\n        const inputRefs = this.isInputComponent ? this.refs.input || [] : null;\n        if (typeof messages === 'string' && messages) {\n            messages = {\n                level: 'error',\n                message: messages,\n                component: this.component,\n            };\n        }\n        if (!Array.isArray(messages)) {\n            if (messages) {\n                messages = [messages];\n            }\n            else {\n                messages = [];\n            }\n        }\n        const errors = messages.filter(message => message.level === 'error');\n        let invalidInputRefs = inputRefs;\n        // Filter the invalid input refs in multiple components\n        if (this.component.multiple) {\n            const refsArray = Array.from(inputRefs);\n            refsArray.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), false);\n            });\n            this.setInputWidgetErrorClasses(refsArray, false);\n            invalidInputRefs = refsArray.filter((ref, index) => {\n                var _a;\n                return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {\n                    var _a;\n                    return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;\n                });\n            });\n        }\n        if (messages.length) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            this.emit('componentError', {\n                instance: this,\n                component: this.component,\n                message: messages[0].message,\n                messages,\n                external: !!external,\n            });\n            this.addMessages(messages, dirty, invalidInputRefs);\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n        }\n        else if (!errors.length || (errors[0].external === !!external)) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            if (this.refs.modalMessageContainer) {\n                this.empty(this.refs.modalMessageContainer);\n            }\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n            this.clearErrorClasses();\n        }\n        this._visibleErrors = messages;\n        return messages;\n    }\n    /**\n     * Determines if the value of this component is hidden from the user as if it is coming from the server, but is\n     * protected.\n     *\n     * @return {boolean|*}\n     */\n    isValueHidden() {\n        if (this.component.protected && this.root.editing) {\n            return false;\n        }\n        if (!this.root || !this.root.hasOwnProperty('editing')) {\n            return false;\n        }\n        if (!this.root || !this.root.editing) {\n            return false;\n        }\n        return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));\n    }\n    shouldSkipValidation(data, row, flags = {}) {\n        const rules = [\n            // Do not validate if the flags say not too.\n            () => flags.noValidate,\n            // Force valid if component is read-only\n            () => this.options.readOnly,\n            // Do not check validations if component is not an input component.\n            () => !this.hasInput,\n            // Check to see if we are editing and if so, check component persistence.\n            () => this.isValueHidden(),\n            // Force valid if component is hidden.\n            () => !this.visible,\n            // Force valid if component is conditionally hidden.\n            () => !this.checkCondition(row, data)\n        ];\n        return rules.some(pred => pred());\n    }\n    // Maintain reverse compatibility.\n    whenReady() {\n        console.warn('The whenReady() method has been deprecated. Please use the dataReady property instead.');\n        return this.dataReady;\n    }\n    get dataReady() {\n        return Promise.resolve();\n    }\n    /**\n     * Prints out the value of this component as a string value.\n     */\n    asString(value) {\n        value = value || this.getValue();\n        return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');\n    }\n    /**\n     * Return if the component is disabled.\n     * @return {boolean}\n     */\n    get disabled() {\n        return this._disabled || this.parentDisabled;\n    }\n    /**\n     * Disable this component.\n     *\n     * @param {boolean} disabled\n     */\n    set disabled(disabled) {\n        this._disabled = disabled;\n    }\n    setDisabled(element, disabled) {\n        if (!element) {\n            return;\n        }\n        element.disabled = disabled;\n        if (disabled) {\n            element.setAttribute('disabled', 'disabled');\n        }\n        else {\n            element.removeAttribute('disabled');\n        }\n    }\n    setLoading(element, loading) {\n        if (!element || (element.loading === loading)) {\n            return;\n        }\n        element.loading = loading;\n        if (!element.loader && loading) {\n            element.loader = this.ce('i', {\n                class: `${this.iconClass('refresh', true)} button-icon-right`\n            });\n        }\n        if (element.loader) {\n            if (loading) {\n                this.appendTo(element.loader, element);\n            }\n            else {\n                this.removeChildFrom(element.loader, element);\n            }\n        }\n    }\n    selectOptions(select, tag, options, defaultValue) {\n        lodash_1.default.each(options, (option) => {\n            const attrs = {\n                value: option.value\n            };\n            if (defaultValue !== undefined && (option.value === defaultValue)) {\n                attrs.selected = 'selected';\n            }\n            const optionElement = this.ce('option', attrs);\n            optionElement.appendChild(this.text(option.label));\n            select.appendChild(optionElement);\n        });\n    }\n    setSelectValue(select, value) {\n        const options = select.querySelectorAll('option');\n        lodash_1.default.each(options, (option) => {\n            if (option.value === value) {\n                option.setAttribute('selected', 'selected');\n            }\n            else {\n                option.removeAttribute('selected');\n            }\n        });\n        if (select.onchange) {\n            select.onchange();\n        }\n        if (select.onselect) {\n            select.onselect();\n        }\n    }\n    getRelativePath(path) {\n        const keyPart = `.${this.key}`;\n        const thisPath = this.isInputComponent ? this.path\n            : this.path.slice(0).replace(keyPart, '');\n        return path.replace(thisPath, '');\n    }\n    clear() {\n        this.detach();\n        this.empty(this.getElement());\n    }\n    append(element) {\n        this.appendTo(element, this.element);\n    }\n    prepend(element) {\n        this.prependTo(element, this.element);\n    }\n    removeChild(element) {\n        this.removeChildFrom(element, this.element);\n    }\n    detachLogic() {\n        this.logic.forEach(logic => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.off(event); // only applies to callbacks on this component\n            }\n        });\n    }\n    attachLogic() {\n        // Do not attach logic during builder mode.\n        if (this.builderMode) {\n            return;\n        }\n        this.logic.forEach((logic) => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.on(event, (...args) => {\n                    const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n                    if (this.applyActions(newComponent, logic.actions, args)) {\n                        // If component definition changed, replace it.\n                        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                            this.component = newComponent;\n                            const visible = this.conditionallyVisible(null, null);\n                            const disabled = this.shouldDisabled;\n                            // Change states which won't be recalculated during redrawing\n                            if (this.visible !== visible) {\n                                this.visible = visible;\n                            }\n                            if (this.disabled !== disabled) {\n                                this.disabled = disabled;\n                            }\n                            this.redraw();\n                        }\n                    }\n                }, true);\n            }\n        });\n    }\n    /**\n     * Get the element information.\n     */\n    elementInfo() {\n        const attributes = {\n            name: this.options.name,\n            type: this.component.inputType || 'text',\n            class: 'form-control',\n            lang: this.options.language\n        };\n        if (this.component.placeholder) {\n            attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });\n        }\n        if (this.component.tabindex) {\n            attributes.tabindex = this.component.tabindex;\n        }\n        if (this.disabled) {\n            attributes.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attributes, this.component.attributes);\n        return {\n            type: 'input',\n            component: this.component,\n            changeEvent: 'change',\n            attr: attributes\n        };\n    }\n    autofocus() {\n        const hasAutofocus = this.component.autofocus && !this.builderMode && !this.options.preview;\n        if (hasAutofocus) {\n            this.on('render', () => this.focus(), true);\n        }\n    }\n    scrollIntoView(element = this.element) {\n        if (!element) {\n            return;\n        }\n        const { left, top } = element.getBoundingClientRect();\n        window.scrollTo(left + window.scrollX, top + window.scrollY);\n    }\n    focus(index) {\n        var _a, _b;\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if ((_a = this.refs.input) === null || _a === void 0 ? void 0 : _a.length) {\n            const focusingInput = typeof index === 'number' && this.refs.input[index]\n                ? this.refs.input[index]\n                : this.refs.input[this.refs.input.length - 1];\n            if (((_b = this.component.widget) === null || _b === void 0 ? void 0 : _b.type) === 'calendar') {\n                const sibling = focusingInput.nextSibling;\n                if (sibling) {\n                    sibling.focus();\n                }\n            }\n            else {\n                focusingInput.focus();\n            }\n        }\n        if (this.refs.openModal) {\n            this.refs.openModal.focus();\n        }\n        if (this.parent.refs.openModal) {\n            this.parent.refs.openModal.focus();\n        }\n    }\n    /**\n     * Get `Formio` instance for working with files\n     */\n    get fileService() {\n        if (this.options.fileService) {\n            return this.options.fileService;\n        }\n        if (this.options.formio) {\n            return this.options.formio;\n        }\n        if (this.root && this.root.formio) {\n            return this.root.formio;\n        }\n        const formio = new Formio_1.Formio();\n        // If a form is loaded, then make sure to set the correct formUrl.\n        if (this.root && this.root._form && this.root._form._id) {\n            formio.formUrl = `${formio.projectUrl}/form/${this.root._form._id}`;\n        }\n        return formio;\n    }\n    resetCaches() { }\n    get previewMode() {\n        return false;\n    }\n}\nexports[\"default\"] = Component;\nComponent.externalLibraries = {};\nComponent.requireLibrary = function (name, property, src, polling) {\n    if (!Component.externalLibraries.hasOwnProperty(name)) {\n        Component.externalLibraries[name] = {};\n        Component.externalLibraries[name].ready = new Promise((resolve, reject) => {\n            Component.externalLibraries[name].resolve = resolve;\n            Component.externalLibraries[name].reject = reject;\n        });\n        const callbackName = `${name}Callback`;\n        if (!polling && !window[callbackName]) {\n            window[callbackName] = function () {\n                this.resolve();\n            }.bind(Component.externalLibraries[name]);\n        }\n        // See if the plugin already exists.\n        const plugin = lodash_1.default.get(window, property);\n        if (plugin) {\n            Component.externalLibraries[name].resolve(plugin);\n        }\n        else {\n            src = Array.isArray(src) ? src : [src];\n            src.forEach((lib) => {\n                let attrs = {};\n                let elementType = '';\n                if (typeof lib === 'string') {\n                    lib = {\n                        type: 'script',\n                        src: lib\n                    };\n                }\n                switch (lib.type) {\n                    case 'script':\n                        elementType = 'script';\n                        attrs = {\n                            src: lib.src,\n                            type: 'text/javascript',\n                            defer: true,\n                            async: true\n                        };\n                        break;\n                    case 'styles':\n                        elementType = 'link';\n                        attrs = {\n                            href: lib.src,\n                            rel: 'stylesheet'\n                        };\n                        break;\n                }\n                // Add the script to the top page.\n                const script = document.createElement(elementType);\n                for (const attr in attrs) {\n                    script.setAttribute(attr, attrs[attr]);\n                }\n                document.getElementsByTagName('head')[0].appendChild(script);\n            });\n            // if no callback is provided, then check periodically for the script.\n            if (polling) {\n                setTimeout(function checkLibrary() {\n                    const plugin = lodash_1.default.get(window, property);\n                    if (plugin) {\n                        Component.externalLibraries[name].resolve(plugin);\n                    }\n                    else {\n                        // check again after 200 ms.\n                        setTimeout(checkLibrary, 200);\n                    }\n                }, 200);\n            }\n        }\n    }\n    return Component.externalLibraries[name].ready;\n};\nComponent.libraryReady = function (name) {\n    if (Component.externalLibraries.hasOwnProperty(name) &&\n        Component.externalLibraries[name].ready) {\n        return Component.externalLibraries[name].ready;\n    }\n    return Promise.reject(`${name} library was not required.`);\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/Component.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 }));\n/* globals Quill, ClassicEditor, CKEDITOR */\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ismobilejs_1 = __importDefault(__webpack_require__(/*! ismobilejs */ \"./node_modules/ismobilejs/esm/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Element_1 = __importDefault(__webpack_require__(/*! ../../../Element */ \"./lib/cjs/Element.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst widgets_1 = __importDefault(__webpack_require__(/*! ../../../widgets */ \"./lib/cjs/widgets/index.js\"));\nconst addons_1 = __importDefault(__webpack_require__(/*! ../../../addons */ \"./lib/cjs/addons/index.js\"));\nconst uploadAdapter_1 = __webpack_require__(/*! ../../../providers/storage/uploadAdapter */ \"./lib/cjs/providers/storage/uploadAdapter.js\");\nconst en_1 = __importDefault(__webpack_require__(/*! ../../../translations/en */ \"./lib/cjs/translations/en.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ../../../templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nconst isIEBrowser = FormioUtils.getBrowserInfo().ie;\n/**\n * This is the Component class\n which all elements within the FormioForm derive from.\n */\nclass Component extends Element_1.default {\n    static schema(...sources) {\n        return lodash_1.default.merge({\n            /**\n             * Determines if this component provides an input.\n             */\n            input: true,\n            /**\n             * The data key for this component (how the data is stored in the database).\n             */\n            key: '',\n            /**\n             * The input placeholder for this component.\n             */\n            placeholder: '',\n            /**\n             * The input prefix\n             */\n            prefix: '',\n            /**\n             * The custom CSS class to provide to this component.\n             */\n            customClass: '',\n            /**\n             * The input suffix.\n             */\n            suffix: '',\n            /**\n             * If this component should allow an array of values to be captured.\n             */\n            multiple: false,\n            /**\n             * The default value of this component.\n             */\n            defaultValue: null,\n            /**\n             * If the data of this component should be protected (no GET api requests can see the data)\n             */\n            protected: false,\n            /**\n             * Validate if the value of this component should be unique within the form.\n             */\n            unique: false,\n            /**\n             * If the value of this component should be persisted within the backend api database.\n             */\n            persistent: true,\n            /**\n             * Determines if the component should be within the form, but not visible.\n             */\n            hidden: false,\n            /**\n             * If the component should be cleared when hidden.\n             */\n            clearOnHide: true,\n            /**\n             * This will refresh this component options when this field changes.\n             */\n            refreshOn: '',\n            /**\n             * This will redraw the component when this field changes.\n             */\n            redrawOn: '',\n            /**\n             * If this component should be included as a column within a submission table.\n             */\n            tableView: false,\n            /**\n             * If this component should be rendering in modal.\n             */\n            modalEdit: false,\n            /**\n             * The input label provided to this component.\n             */\n            label: '',\n            dataGridLabel: false,\n            labelPosition: 'top',\n            description: '',\n            errorLabel: '',\n            tooltip: '',\n            hideLabel: false,\n            tabindex: '',\n            disabled: false,\n            autofocus: false,\n            dbIndex: false,\n            customDefaultValue: '',\n            calculateValue: '',\n            calculateServer: false,\n            widget: null,\n            /**\n             * Attributes that will be assigned to the input elements of this component.\n             */\n            attributes: {},\n            /**\n             * This will perform the validation on either \"change\" or \"blur\" of the input element.\n             */\n            validateOn: 'change',\n            /**\n             * The validation criteria for this component.\n             */\n            validate: {\n                /**\n                 * If this component is required.\n                 */\n                required: false,\n                /**\n                 * Custom JavaScript validation.\n                 */\n                custom: '',\n                /**\n                 * If the custom validation should remain private (only the backend will see it and execute it).\n                 */\n                customPrivate: false,\n                /**\n                 * If this component should implement a strict date validation if the Calendar widget is implemented.\n                 */\n                strictDateValidation: false,\n                multiple: false,\n                unique: false\n            },\n            /**\n             * The simple conditional settings for a component.\n             */\n            conditional: {\n                show: null,\n                when: null,\n                eq: ''\n            },\n            overlay: {\n                style: '',\n                left: '',\n                top: '',\n                width: '',\n                height: '',\n            },\n            allowCalculateOverride: false,\n            encrypted: false,\n            showCharCount: false,\n            showWordCount: false,\n            properties: {},\n            allowMultipleMasks: false,\n            addons: [],\n        }, ...sources);\n    }\n    /**\n     * Return the simple condition settings as part of the component.\n     *\n     * @return {Object}\n     *\n     */\n    static get conditionOperatorsSettings() {\n        return {\n            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n            valueComponent() {\n                return { type: 'textfield' };\n            }\n        };\n    }\n    /**\n     * Return the array of possible types of component value absed on its schema.\n     *\n     * @param schema\n     * @return {Array}\n     *\n     */\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];\n    }\n    /**\n     * Provides a table view for this component. Override if you wish to do something different than using getView\n     * method of your instance.\n     *\n     * @param value\n     * @param options\n     */\n    /* eslint-disable no-unused-vars */\n    static tableView(value, options) { }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Initialize a new Component.\n     *\n     * @param {Object} component - The component JSON you wish to initialize.\n     * @param {Object} options - The options for this component.\n     * @param {Object} data - The global data submission object this component will belong.\n     */\n    /* eslint-disable max-statements */\n    constructor(component, options, data) {\n        super(Object.assign({\n            renderMode: 'form',\n            attachMode: 'full',\n            noDefaults: false\n        }, options || {}));\n        // Restore the component id.\n        if (component && component.id) {\n            this.id = component.id;\n        }\n        /**\n         * Determines if this component has a condition assigned to it.\n         * @type {null}\n         * @private\n         */\n        this._hasCondition = null;\n        /**\n         * References to dom elements\n         */\n        this.refs = {};\n        // Allow global override for any component JSON.\n        if (component &&\n            this.options.components &&\n            this.options.components[component.type]) {\n            lodash_1.default.merge(component, this.options.components[component.type]);\n        }\n        /**\n         * The data path to this specific component instance.\n         *\n         * @type {string}\n         */\n        this.path = (component === null || component === void 0 ? void 0 : component.key) || '';\n        /**\n         * An array of all the children components errors.\n         */\n        this.childErrors = [];\n        /**\n         * Last validation errors that have occured.\n         */\n        this._errors = [];\n        this._visibleErrors = [];\n        /**\n         * The Form.io component JSON schema.\n         * @type {*}\n         */\n        this.component = this.mergeSchema(component || {});\n        // Add the id to the component.\n        this.component.id = this.id;\n        this.afterComponentAssign();\n        // Save off the original component to be used in logic.\n        this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n        /**\n         * If the component has been attached\n         */\n        this.attached = false;\n        /**\n         * If the component has been rendered\n         */\n        this.rendered = false;\n        /**\n         * The data object in which this component resides.\n         * @type {*}\n         */\n        this._data = data || {};\n        /**\n         * Tool tip text after processing\n         * @type {string}\n         */\n        this.tooltip = '';\n        /**\n         * The row path of this component.\n         * @type {number}\n         */\n        this.row = this.options.row;\n        /**\n         * Points to a flat map of child components (if applicable).\n         *\n         * @type {Object}\n         */\n        this.childComponentsMap = {};\n        /**\n         * Determines if this component is disabled, or not.\n         *\n         * @type {boolean}\n         */\n        this._disabled = (0, utils_1.boolValue)(this.component.disabled) ? this.component.disabled : false;\n        /**\n         * Points to the root component, usually the FormComponent.\n         *\n         * @type {Component}\n         */\n        this.root = this.options.root || this;\n        this.localRoot = this.options.localRoot || this;\n        /**\n         * If this input has been input and provided value.\n         *\n         * @type {boolean}\n         */\n        this.pristine = true;\n        /**\n         * Points to the parent component.\n         *\n         * @type {Component}\n         */\n        this.parent = this.options.parent;\n        this.options.name = this.options.name || 'data';\n        this._path = '';\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        /**\n         * Determines if this component is visible, or not.\n         */\n        this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;\n        this._visible = this._parentVisible && this.conditionallyVisible(null, data);\n        this._parentDisabled = false;\n        /**\n         * Used to trigger a new change in this component.\n         * @type {function} - Call to trigger a change in this component.\n         */\n        let changes = [];\n        let lastChanged = null;\n        let triggerArgs = [];\n        const _triggerChange = lodash_1.default.debounce((...args) => {\n            if (this.root) {\n                this.root.changing = false;\n            }\n            triggerArgs = [];\n            if (!args[1] && lastChanged) {\n                // Set the changed component if one isn't provided.\n                args[1] = lastChanged;\n            }\n            if (lodash_1.default.isEmpty(args[0]) && lastChanged) {\n                // Set the flags if it is empty and lastChanged exists.\n                args[0] = lastChanged.flags;\n            }\n            lastChanged = null;\n            args[3] = changes;\n            const retVal = this.onChange(...args);\n            changes = [];\n            return retVal;\n        }, 100);\n        this.triggerChange = (...args) => {\n            if (args[1]) {\n                // Make sure that during the debounce that we always track lastChanged component, even if they\n                // don't provide one later.\n                lastChanged = args[1];\n                changes.push(lastChanged);\n            }\n            if (this.root) {\n                this.root.changing = true;\n            }\n            if (args.length) {\n                triggerArgs = args;\n            }\n            return _triggerChange(...triggerArgs);\n        };\n        /**\n         * Used to trigger a redraw event within this component.\n         *\n         * @type {Function}\n         */\n        this.triggerRedraw = lodash_1.default.debounce(this.redraw.bind(this), 100);\n        /**\n         * list of attached tooltips\n         * @type {Array}\n         */\n        this.tooltips = [];\n        /**\n         * List of attached addons\n         * @type {Array}\n         */\n        this.addons = [];\n        // To force this component to be invalid.\n        this.invalid = false;\n        if (this.component) {\n            this.type = this.component.type;\n            if (this.allowData && this.key) {\n                this.options.name += `[${this.key}]`;\n                // If component is visible or not set to clear on hide, set the default value.\n                if (this.visible || !this.component.clearOnHide) {\n                    if (!this.hasValue()) {\n                        if (this.shouldAddDefaultValue) {\n                            this.dataValue = this.defaultValue;\n                        }\n                    }\n                    else {\n                        // Ensure the dataValue is set.\n                        /* eslint-disable  no-self-assign */\n                        this.dataValue = this.dataValue;\n                        /* eslint-enable  no-self-assign */\n                    }\n                }\n            }\n            /**\n             * The element information for creating the input element.\n             * @type {*}\n             */\n            this.info = this.elementInfo();\n        }\n        // Allow anyone to hook into the component creation.\n        this.hook('component');\n        if (!this.options.skipInit) {\n            this.init();\n        }\n    }\n    /* eslint-enable max-statements */\n    get componentsMap() {\n        var _a;\n        if ((_a = this.localRoot) === null || _a === void 0 ? void 0 : _a.childComponentsMap) {\n            return this.localRoot.childComponentsMap;\n        }\n        const localMap = {};\n        localMap[this.path] = this;\n        return localMap;\n    }\n    get data() {\n        return this._data;\n    }\n    set data(value) {\n        this._data = value;\n    }\n    mergeSchema(component = {}) {\n        return lodash_1.default.defaultsDeep(component, this.defaultSchema);\n    }\n    // Allow componets to notify when ready.\n    get ready() {\n        return Promise.resolve(this);\n    }\n    get isPDFReadOnlyMode() {\n        return this.parent &&\n            this.parent.form &&\n            (this.parent.form.display === 'pdf') &&\n            this.options.readOnly;\n    }\n    get labelInfo() {\n        const label = {};\n        label.hidden = this.labelIsHidden();\n        label.className = '';\n        label.labelPosition = this.component.labelPosition;\n        label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;\n        const isPDFReadOnlyMode = this.isPDFReadOnlyMode;\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {\n            label.className += ' field-required';\n        }\n        if (label.hidden) {\n            label.className += ' control-label--hidden';\n        }\n        if (this.info.attr.id) {\n            label.for = this.info.attr.id;\n        }\n        return label;\n    }\n    init() {\n        var _a;\n        this.disabled = this.shouldDisabled;\n        this._visible = this.conditionallyVisible(null, null);\n        if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {\n            this.component.addons.forEach((addon) => this.createAddon(addon));\n        }\n    }\n    afterComponentAssign() {\n        //implement in extended classes\n    }\n    createAddon(addonConfiguration) {\n        var _a;\n        const name = addonConfiguration.name;\n        if (!name) {\n            return;\n        }\n        const settings = ((_a = addonConfiguration.settings) === null || _a === void 0 ? void 0 : _a.data) || {};\n        const Addon = addons_1.default[name.value];\n        let addon = null;\n        if (Addon) {\n            const supportedComponents = Addon.info.supportedComponents;\n            const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||\n                supportedComponents.indexOf(this.component.type) !== -1;\n            if (supportsThisComponentType) {\n                addon = new Addon(settings, this);\n                this.addons.push(addon);\n            }\n            else {\n                console.warn(`Addon ${name.label} does not support component of type ${this.component.type}.`);\n            }\n        }\n        return addon;\n    }\n    teardown() {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        delete this._currentForm;\n        delete this.parent;\n        delete this.root;\n        delete this.triggerChange;\n        delete this.triggerRedraw;\n        if (this.options) {\n            delete this.options.root;\n            delete this.options.parent;\n            delete this.options.i18next;\n        }\n        super.teardown();\n    }\n    destroy(all = false) {\n        super.destroy(all);\n        this.detach();\n        this.addons.forEach((addon) => addon.destroy());\n        if (all) {\n            this.teardown();\n        }\n    }\n    get shouldDisabled() {\n        return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);\n    }\n    get isInputComponent() {\n        return !this.component.hasOwnProperty('input') || this.component.input;\n    }\n    get allowData() {\n        return this.hasInput;\n    }\n    get hasInput() {\n        return this.isInputComponent || (this.refs.input && this.refs.input.length);\n    }\n    get defaultSchema() {\n        return Component.schema();\n    }\n    get key() {\n        return lodash_1.default.get(this.component, 'key', '');\n    }\n    set parentVisible(value) {\n        this._parentVisible = value;\n    }\n    get parentVisible() {\n        return this._parentVisible;\n    }\n    set parentDisabled(value) {\n        this._parentDisabled = value;\n    }\n    get parentDisabled() {\n        return this._parentDisabled;\n    }\n    shouldForceVisibility(component, visibility) {\n        if (!this.options[visibility]) {\n            return false;\n        }\n        if (!component) {\n            component = this.component;\n        }\n        if (lodash_1.default.isArray(this.options[visibility])) {\n            return this.options[visibility].includes(component.key);\n        }\n        return this.options[visibility][component.key];\n    }\n    shouldForceHide(component) {\n        return this.shouldForceVisibility(component, 'hide');\n    }\n    shouldForceShow(component) {\n        return this.shouldForceVisibility(component, 'show');\n    }\n    /**\n     *\n     * @param value {boolean}\n     */\n    set visible(value) {\n        if (this._visible !== value) {\n            // Skip if this component is set to visible and is supposed to be hidden.\n            if (value && this.shouldForceHide()) {\n                return;\n            }\n            // Skip if this component is set to hidden and is supposed to be shown.\n            if (!value && this.shouldForceShow()) {\n                return;\n            }\n            this._visible = value;\n            this.clearOnHide();\n            this.redraw();\n        }\n    }\n    /**\n     *\n     * @returns {boolean}\n     */\n    get visible() {\n        // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.\n        if (this.builderMode || this.previewMode || this.options.showHiddenFields) {\n            return true;\n        }\n        if (this.shouldForceHide()) {\n            return false;\n        }\n        if (this.shouldForceShow()) {\n            return true;\n        }\n        return this._visible && this._parentVisible;\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n    }\n    get fullMode() {\n        return this.options.attachMode === 'full';\n    }\n    get builderMode() {\n        return this.options.attachMode === 'builder';\n    }\n    get calculatedPath() {\n        console.error('component.calculatedPath was deprecated, use component.path instead.');\n        return this.path;\n    }\n    get labelPosition() {\n        return this.component.labelPosition;\n    }\n    get labelWidth() {\n        const width = this.component.labelWidth;\n        return width >= 0 ? width : 30;\n    }\n    get labelMargin() {\n        const margin = this.component.labelMargin;\n        return margin >= 0 ? margin : 3;\n    }\n    get isAdvancedLabel() {\n        return [\n            'left-left',\n            'left-right',\n            'right-left',\n            'right-right'\n        ].includes(this.labelPosition);\n    }\n    get labelPositions() {\n        return this.labelPosition.split('-');\n    }\n    get skipInEmail() {\n        return false;\n    }\n    rightDirection(direction) {\n        if (this.options.condensedMode) {\n            return false;\n        }\n        return direction === 'right';\n    }\n    getLabelInfo(isCondensed = false) {\n        const isRightPosition = this.rightDirection(this.labelPositions[0]);\n        const isLeftPosition = this.labelPositions[0] === 'left' || isCondensed;\n        const isRightAlign = this.rightDirection(this.labelPositions[1]);\n        let contentMargin = '';\n        if (this.component.hideLabel) {\n            const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;\n            contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';\n            contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';\n        }\n        const labelStyles = `\n      flex: ${this.labelWidth};\n      ${isRightPosition ? 'margin-left' : 'margin-right'}: ${this.labelMargin}%;\n    `;\n        const contentStyles = `\n      flex: ${100 - this.labelWidth - this.labelMargin};\n      ${contentMargin};\n      ${this.component.hideLabel ? `max-width: ${100 - this.labelWidth - this.labelMargin}` : ''};\n    `;\n        return {\n            isRightPosition,\n            isRightAlign,\n            labelStyles,\n            contentStyles\n        };\n    }\n    /**\n     * Returns only the schema that is different from the default.\n     *\n     * @param schema\n     * @param defaultSchema\n     */\n    getModifiedSchema(schema, defaultSchema, recursion) {\n        const modified = {};\n        if (!defaultSchema) {\n            return schema;\n        }\n        lodash_1.default.each(schema, (val, key) => {\n            if (!lodash_1.default.isArray(val) && lodash_1.default.isObject(val) && defaultSchema.hasOwnProperty(key)) {\n                const subModified = this.getModifiedSchema(val, defaultSchema[key], true);\n                if (!lodash_1.default.isEmpty(subModified)) {\n                    modified[key] = subModified;\n                }\n            }\n            else if (lodash_1.default.isArray(val)) {\n                if (val.length !== 0 && !lodash_1.default.isEqual(val, defaultSchema[key])) {\n                    modified[key] = val;\n                }\n            }\n            else if ((!recursion && (key === 'type')) ||\n                (!recursion && (key === 'key')) ||\n                (!recursion && (key === 'label')) ||\n                (!recursion && (key === 'input')) ||\n                (!recursion && (key === 'tableView')) ||\n                (val !== '' && !defaultSchema.hasOwnProperty(key)) ||\n                (val !== '' && val !== defaultSchema[key]) ||\n                (defaultSchema[key] && val !== defaultSchema[key])) {\n                modified[key] = val;\n            }\n        });\n        return modified;\n    }\n    /**\n     * Returns the JSON schema for this component.\n     */\n    get schema() {\n        return (0, utils_1.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));\n    }\n    /**\n     * Returns true if component is inside DataGrid\n     */\n    get isInDataGrid() {\n        return this.inDataGrid;\n    }\n    /**\n     * Translate a text using the i18n system.\n     *\n     * @param {string} text - The i18n identifier.\n     * @param {Object} params - The i18n parameters to use for translation.\n     */\n    t(text, params = {}, ...args) {\n        if (!text) {\n            return '';\n        }\n        // Use _userInput: true to ignore translations from defaults\n        if (text in en_1.default && params._userInput) {\n            return text;\n        }\n        params.data = params.data || this.rootValue;\n        params.row = params.row || this.data;\n        params.component = params.component || this.component;\n        return super.t(text, params, ...args);\n    }\n    labelIsHidden() {\n        return !this.component.label ||\n            ((!this.isInDataGrid && this.component.hideLabel) ||\n                (this.isInDataGrid && !this.component.dataGridLabel) ||\n                this.options.inputsOnly) && !this.builderMode;\n    }\n    transform(type, value) {\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        return frameworkTemplates.hasOwnProperty('transform')\n            ? frameworkTemplates.transform(type, value, this)\n            : (type, value) => value;\n    }\n    getTemplate(names, modes) {\n        modes = Array.isArray(modes) ? modes : [modes];\n        names = Array.isArray(names) ? names : [names];\n        if (!modes.includes('form')) {\n            modes.push('form');\n        }\n        let result = null;\n        if (this.options.templates) {\n            result = this.checkTemplate(this.options.templates, names, modes);\n            if (result) {\n                return result;\n            }\n        }\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        result = this.checkTemplate(frameworkTemplates, names, modes);\n        if (result) {\n            return result;\n        }\n        // Default back to bootstrap if not defined.\n        const name = names[names.length - 1];\n        const templatesByName = Templates_1.default.defaultTemplates[name];\n        if (!templatesByName) {\n            return `Unknown template: ${name}`;\n        }\n        const templateByMode = this.checkTemplateMode(templatesByName, modes);\n        if (templateByMode) {\n            return templateByMode;\n        }\n        return templatesByName.form;\n    }\n    checkTemplate(templates, names, modes) {\n        for (const name of names) {\n            const templatesByName = templates[name];\n            if (templatesByName) {\n                const templateByMode = this.checkTemplateMode(templatesByName, modes);\n                if (templateByMode) {\n                    return templateByMode;\n                }\n            }\n        }\n        return null;\n    }\n    checkTemplateMode(templatesByName, modes) {\n        for (const mode of modes) {\n            const templateByMode = templatesByName[mode];\n            if (templateByMode) {\n                return templateByMode;\n            }\n        }\n        return null;\n    }\n    getFormattedAttribute(attr) {\n        return attr ? this.t(attr, { _userInput: true }).replace(/\"/g, '&quot;') : '';\n    }\n    getFormattedTooltip(tooltipValue) {\n        const tooltip = this.interpolate(tooltipValue || '').replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return this.getFormattedAttribute(tooltip);\n    }\n    isHtmlRenderMode() {\n        return this.options.renderMode === 'html';\n    }\n    renderTemplate(name, data = {}, modeOption) {\n        // Need to make this fall back to form if renderMode is not found similar to how we search templates.\n        const mode = modeOption || this.options.renderMode || 'form';\n        data.component = this.component;\n        data.self = this;\n        data.options = this.options;\n        data.readOnly = this.options.readOnly;\n        data.iconClass = this.iconClass.bind(this);\n        data.size = this.size.bind(this);\n        data.t = this.t.bind(this);\n        data.transform = this.transform.bind(this);\n        data.id = data.id || this.id;\n        data.key = data.key || this.key;\n        data.value = data.value || this.dataValue;\n        data.disabled = this.disabled;\n        data.builder = this.builderMode;\n        data.render = (...args) => {\n            console.warn(`Form.io 'render' template function is deprecated.\n      If you need to render template (template A) inside of another template (template B),\n      pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`);\n            return this.renderTemplate(...args);\n        };\n        data.label = data.labelInfo || this.labelInfo;\n        data.tooltip = this.getFormattedTooltip(this.component.tooltip);\n        // Allow more specific template names\n        const names = [\n            `${name}-${this.component.type}-${this.key}`,\n            `${name}-${this.component.type}`,\n            `${name}-${this.key}`,\n            `${name}`,\n        ];\n        // Allow template alters.\n        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(this.getTemplate(names, mode), data), data, mode);\n    }\n    /**\n     * Sanitize an html string.\n     *\n     * @param string\n     * @returns {*}\n     */\n    sanitize(dirty, forceSanitize, options) {\n        var _a;\n        if (!this.shouldSanitizeValue && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, {\n            sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),\n        });\n    }\n    /**\n     * Render a template string into html.\n     *\n     * @param template\n     * @param data\n     * @param actions\n     *\n     * @return {HTMLElement|String} - The created element or an empty string if template is not specified.\n     */\n    renderString(template, data) {\n        if (!template) {\n            return '';\n        }\n        // Interpolate the template and populate\n        return this.interpolate(template, data);\n    }\n    performInputMapping(input) {\n        return input;\n    }\n    get widget() {\n        var _a;\n        const settings = this.component.widget;\n        if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {\n            settings.shadowRoot = this.root.shadowRoot;\n        }\n        const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;\n        return widget;\n    }\n    getBrowserLanguage() {\n        const nav = window.navigator;\n        const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];\n        let language;\n        // support for HTML 5.1 \"navigator.languages\"\n        if (Array.isArray(nav.languages)) {\n            for (let i = 0; i < nav.languages.length; i++) {\n                language = nav.languages[i];\n                if (language && language.length) {\n                    return language.split(';')[0];\n                }\n            }\n        }\n        // support for other well known properties in browsers\n        for (let i = 0; i < browserLanguagePropertyKeys.length; i++) {\n            language = nav[browserLanguagePropertyKeys[i]];\n            if (language && language.length) {\n                return language.split(';')[0];\n            }\n        }\n        return null;\n    }\n    /**\n     * Called before a next and previous page is triggered allowing the components\n     * to perform special functions.\n     *\n     * @return {*}\n     */\n    beforePage() {\n        return Promise.resolve(true);\n    }\n    beforeNext() {\n        return this.beforePage(true);\n    }\n    /**\n     * Called before a submission is triggered allowing the components\n     * to perform special async functions.\n     *\n     * @return {*}\n     */\n    beforeSubmit() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Return the submission timezone.\n     *\n     * @return {*}\n     */\n    get submissionTimezone() {\n        this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');\n        return this.options.submissionTimezone;\n    }\n    get timezone() {\n        return this.getTimezone(this.component);\n    }\n    getTimezone(settings) {\n        if (settings.timezone) {\n            return settings.timezone;\n        }\n        if (settings.displayInTimezone === 'utc') {\n            return 'UTC';\n        }\n        const submissionTimezone = this.submissionTimezone;\n        if (submissionTimezone &&\n            ((settings.displayInTimezone === 'submission') ||\n                ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {\n            return submissionTimezone;\n        }\n        // Return current timezone if none are provided.\n        return (0, utils_1.currentTimezone)();\n    }\n    loadRefs(element, refs) {\n        for (const ref in refs) {\n            const refType = refs[ref];\n            const isString = typeof refType === 'string';\n            const selector = isString && refType.includes('scope') ? `:scope > [ref=\"${ref}\"]` : `[ref=\"${ref}\"]`;\n            if (isString && refType.startsWith('single')) {\n                this.refs[ref] = element.querySelector(selector);\n            }\n            else {\n                this.refs[ref] = element.querySelectorAll(selector);\n            }\n        }\n    }\n    setOpenModalElement(template) {\n        this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n    }\n    getModalPreviewTemplate() {\n        var _a;\n        const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;\n        let modalLabel;\n        if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {\n            modalLabel = { className: 'field-required' };\n        }\n        return this.renderTemplate('modalPreview', {\n            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),\n            messages: '',\n            labelInfo: modalLabel,\n        });\n    }\n    build(element) {\n        element = element || this.element;\n        this.empty(element);\n        this.setContent(element, this.render());\n        return this.attach(element);\n    }\n    get hasModalSaveButton() {\n        return true;\n    }\n    render(children = `Unknown component: ${this.component.type}`, topLevel = false) {\n        const isVisible = this.visible;\n        this.rendered = true;\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            return ComponentModal_1.default.render(this, {\n                visible: isVisible,\n                showSaveButton: this.hasModalSaveButton,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n        else {\n            return this.renderTemplate('component', {\n                visible: isVisible,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n    }\n    attachTooltips(toolTipsRefs) {\n        toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {\n            if (tooltip) {\n                const tooltipAttribute = tooltip.getAttribute('data-tooltip');\n                const tooltipDataTitle = tooltip.getAttribute('data-title');\n                const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)\n                    .replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n                this.tooltips[index] = (0, tippy_js_1.default)(tooltip, {\n                    allowHTML: true,\n                    trigger: 'mouseenter click focus',\n                    placement: 'right',\n                    zIndex: 10000,\n                    interactive: true,\n                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),\n                });\n            }\n        });\n    }\n    createComponentModal(element, modalShouldBeOpened, currentValue) {\n        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue);\n    }\n    attach(element) {\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n            const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n            const openModalTemplate = this.componentModal && modalShouldBeOpened\n                ? this.componentModal.openModalTemplate\n                : null;\n            this.componentModal = this.createComponentModal(element, modalShouldBeOpened, currentValue);\n            this.setOpenModalElement(openModalTemplate);\n        }\n        this.attached = true;\n        this.setElement(element);\n        element.component = this;\n        // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.\n        if (this.element.id) {\n            this.id = this.element.id;\n            this.component.id = this.id;\n        }\n        this.loadRefs(element, {\n            messageContainer: 'single',\n            tooltip: 'multiple'\n        });\n        this.attachTooltips(this.refs.tooltip);\n        // Attach logic.\n        this.attachLogic();\n        this.autofocus();\n        // Allow global attach.\n        this.hook('attachComponent', element, this);\n        // Allow attach per component type.\n        const type = this.component.type;\n        if (type) {\n            this.hook(`attach${type.charAt(0).toUpperCase() + type.substring(1, type.length)}`, element, this);\n        }\n        this.restoreFocus();\n        this.addons.forEach((addon) => addon.attach(element));\n        return Promise.resolve();\n    }\n    restoreFocus() {\n        var _a, _b, _c;\n        const isFocused = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path;\n        if (isFocused) {\n            this.loadRefs(this.element, { input: 'multiple' });\n            this.focus((_c = this.root.currentSelection) === null || _c === void 0 ? void 0 : _c.index);\n            this.restoreCaretPosition();\n        }\n    }\n    addShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || !this.root || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.addShortcut(element, shortcut);\n    }\n    removeShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.removeShortcut(element, shortcut);\n    }\n    /**\n     * Remove all event handlers.\n     */\n    detach() {\n        // First iterate through each ref and delete the component so there are no dangling component references.\n        lodash_1.default.each(this.refs, (ref) => {\n            if (typeof ref === NodeList) {\n                ref.forEach((elem) => {\n                    delete elem.component;\n                });\n            }\n            else if (ref) {\n                delete ref.component;\n            }\n        });\n        this.refs = {};\n        this.removeEventListeners();\n        this.detachLogic();\n        if (this.tooltip) {\n            this.tooltip.destroy();\n        }\n    }\n    checkRefresh(refreshData, changed, flags) {\n        const changePath = lodash_1.default.get(changed, 'instance.path', false);\n        // Don't let components change themselves.\n        if (changePath && this.path === changePath) {\n            return;\n        }\n        if (refreshData === 'data') {\n            this.refresh(this.data, changed, flags);\n        }\n        else if ((changePath && (0, utils_1.getComponentPath)(changed.instance) === refreshData) && changed && changed.instance &&\n            // Make sure the changed component is not in a different \"context\". Solves issues where refreshOn being set\n            // in fields inside EditGrids could alter their state from other rows (which is bad).\n            this.inContext(changed.instance)) {\n            this.refresh(changed.value, changed, flags);\n        }\n    }\n    checkRefreshOn(changes, flags = {}) {\n        changes = changes || [];\n        if (flags.noRefresh) {\n            return;\n        }\n        if (!changes.length && flags.changed) {\n            changes = [flags.changed];\n        }\n        const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;\n        // If they wish to refresh on a value, then add that here.\n        if (refreshOn) {\n            if (Array.isArray(refreshOn)) {\n                refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));\n            }\n            else {\n                changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));\n            }\n        }\n    }\n    /**\n     * Refreshes the component with a new value.\n     *\n     * @param value\n     */\n    refresh(value) {\n        if (this.hasOwnProperty('refreshOnValue')) {\n            this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);\n        }\n        else {\n            this.refreshOnChanged = true;\n        }\n        this.refreshOnValue = (0, utils_1.fastCloneDeep)(value);\n        if (this.refreshOnChanged) {\n            if (this.component.clearOnRefresh) {\n                this.setValue(null);\n            }\n            this.triggerRedraw();\n        }\n    }\n    /**\n     * Checks to see if a separate component is in the \"context\" of this component. This is determined by first checking\n     * if they share the same \"data\" object. It will then walk up the parent tree and compare its parents data objects\n     * with the components data and returns true if they are in the same context.\n     *\n     * Different rows of the same EditGrid, for example, are in different contexts.\n     *\n     * @param component\n     */\n    inContext(component) {\n        if (component.data === this.data) {\n            return true;\n        }\n        let parent = this.parent;\n        while (parent) {\n            if (parent.data === component.data) {\n                return true;\n            }\n            parent = parent.parent;\n        }\n        return false;\n    }\n    get viewOnly() {\n        return this.options.readOnly && this.options.viewAsHtml;\n    }\n    setElement(element) {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        this.element = element;\n    }\n    createViewOnlyElement() {\n        this.setElement(this.ce('dl', {\n            id: this.id\n        }));\n        if (this.element) {\n            // Ensure you can get the component info from the element.\n            this.element.component = this;\n        }\n        return this.element;\n    }\n    get defaultViewOnlyValue() {\n        return '-';\n    }\n    /**\n     * Uses the widget to determine the output string.\n     *\n     * @param value\n     * @return {*}\n     */\n    getWidgetValueAsString(value, options) {\n        const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;\n        if (!value || noInputWidget) {\n            if (!this.widget || !value) {\n                return value;\n            }\n            else {\n                return this.widget.getValueAsString(value);\n            }\n        }\n        if (Array.isArray(value)) {\n            const values = [];\n            value.forEach((val, index) => {\n                const widget = this.refs.input[index] && this.refs.input[index].widget;\n                if (widget) {\n                    values.push(widget.getValueAsString(val, options));\n                }\n            });\n            return values;\n        }\n        const widget = this.refs.input[0].widget;\n        return widget.getValueAsString(value, options);\n    }\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.join(', ');\n        }\n        if (lodash_1.default.isPlainObject(value)) {\n            return JSON.stringify(value);\n        }\n        if (value === null || value === undefined) {\n            return '';\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue);\n    }\n    getView(value, options) {\n        if (this.component.protected) {\n            return '--- PROTECTED ---';\n        }\n        return this.getValueAsString(value, options);\n    }\n    updateItems(...args) {\n        this.restoreValue();\n        this.onChange(...args);\n    }\n    /**\n     * @param {*} data\n     * @param {boolean} [forceUseValue=false] - if true, return 'value' property of the data\n     * @return {*}\n     */\n    itemValue(data, forceUseValue = false) {\n        if (lodash_1.default.isObject(data) && !lodash_1.default.isArray(data)) {\n            if (this.valueProperty) {\n                return lodash_1.default.get(data, this.valueProperty);\n            }\n            if (forceUseValue) {\n                return data.value;\n            }\n        }\n        return data;\n    }\n    itemValueForHTMLMode(value) {\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));\n            return values.join(', ');\n        }\n        return this.itemValue(value);\n    }\n    createModal(element, attr, confirm) {\n        const dialog = this.ce('div', attr || {});\n        this.setContent(dialog, this.renderTemplate('dialog'));\n        // Add refs to dialog, not \"this\".\n        dialog.refs = {};\n        this.loadRefs.call(dialog, dialog, {\n            dialogOverlay: 'single',\n            dialogContents: 'single',\n            dialogClose: 'single',\n        });\n        dialog.refs.dialogContents.appendChild(element);\n        document.body.appendChild(dialog);\n        document.body.classList.add('modal-open');\n        dialog.close = () => {\n            document.body.classList.remove('modal-open');\n            dialog.dispatchEvent(new CustomEvent('close'));\n        };\n        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        const handleCloseClick = (e) => {\n            if (confirm) {\n                confirm().then(() => close(e))\n                    .catch(() => { });\n            }\n            else {\n                close(e);\n            }\n        };\n        this.addEventListener(dialog.refs.dialogOverlay, 'click', handleCloseClick);\n        this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);\n        return dialog;\n    }\n    get optimizeRedraw() {\n        if (this.options.optimizeRedraw && this.element && !this.visible) {\n            this.addClass(this.element, 'formio-removed');\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Retrieves the CSS class name of this component.\n     * @returns {string} - The class name of this component.\n     */\n    get className() {\n        let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';\n        className += `formio-component formio-component-${this.component.type} `;\n        // TODO: find proper way to avoid overriding of default type-based component styles\n        if (this.key && this.key !== 'form') {\n            className += `formio-component-${this.key} `;\n        }\n        if (this.component.multiple) {\n            className += 'formio-component-multiple ';\n        }\n        if (this.component.customClass) {\n            className += this.component.customClass;\n        }\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required)) {\n            className += ' required';\n        }\n        if (this.labelIsHidden()) {\n            className += ' formio-component-label-hidden';\n        }\n        if (!this.visible) {\n            className += ' formio-hidden';\n        }\n        return className;\n    }\n    /**\n     * Build the custom style from the layout values\n     * @return {string} - The custom style\n     */\n    get customStyle() {\n        let customCSS = '';\n        lodash_1.default.each(this.component.style, (value, key) => {\n            if (value !== '') {\n                customCSS += `${key}:${value};`;\n            }\n        });\n        return customCSS;\n    }\n    static get serverConditionSettings() {\n        return Component.conditionOperatorsSettings;\n    }\n    get isMobile() {\n        return (0, ismobilejs_1.default)();\n    }\n    /**\n     * Returns the outside wrapping element of this component.\n     * @returns {HTMLElement}\n     */\n    getElement() {\n        return this.element;\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     *\n     * @param additional\n     * @return {*}\n     */\n    evalContext(additional) {\n        return super.evalContext(Object.assign({\n            component: this.component,\n            row: this.data,\n            rowIndex: this.rowIndex,\n            data: this.rootValue,\n            iconClass: this.iconClass.bind(this),\n            // Bind the translate function to the data context of any interpolated string.\n            // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)\n            // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.\n            t: this.t.bind(this),\n            submission: (this.root ? this.root._submission : {\n                data: this.rootValue\n            }),\n            form: this.root ? this.root._form : {},\n            options: this.options,\n        }, additional));\n    }\n    /**\n     * Sets the pristine flag for this component.\n     *\n     * @param pristine {boolean} - TRUE to make pristine, FALSE not pristine.\n     */\n    setPristine(pristine) {\n        this.pristine = pristine;\n    }\n    get isPristine() {\n        return this.pristine;\n    }\n    setDirty(dirty) {\n        this.dirty = dirty;\n    }\n    get isDirty() {\n        return this.dirty;\n    }\n    /**\n     * Removes a value out of the data array and rebuild the rows.\n     * @param {number} index - The index of the data element to remove.\n     */\n    removeValue(index) {\n        this.splice(index);\n        this.redraw();\n        this.restoreValue();\n        this.triggerRootChange();\n    }\n    iconClass(name, spinning) {\n        const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';\n        return Templates_1.default.current.hasOwnProperty('iconClass')\n            ? Templates_1.default.current.iconClass(iconset, name, spinning)\n            : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;\n    }\n    size(size) {\n        return Templates_1.default.current.hasOwnProperty('size')\n            ? Templates_1.default.current.size(size)\n            : size;\n    }\n    /**\n     * The readible name for this component.\n     * @returns {string} - The name of the component.\n     */\n    get name() {\n        return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });\n    }\n    get visibleErrors() {\n        return this._visibleErrors;\n    }\n    get errors() {\n        return this._errors;\n    }\n    /**\n     * Returns the error label for this component.\n     * @return {*}\n     */\n    get errorLabel() {\n        return this.t(this.component.errorLabel\n            || this.component.label\n            || this.component.placeholder\n            || this.key);\n    }\n    /**\n     * Get the error message provided a certain type of error.\n     * @param type\n     * @return {*}\n     */\n    errorMessage(type) {\n        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n    }\n    setContent(element, content, forceSanitize, sanitizeOptions) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);\n            return true;\n        }\n        return false;\n    }\n    restoreCaretPosition() {\n        var _a, _b, _c;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {\n                const { selection, index } = this.root.currentSelection;\n                let input = this.refs.input[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (input) {\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(...selection);\n                    }\n                }\n                else {\n                    input = this.refs.input[this.refs.input.length];\n                    const lastCharacter = ((_c = input.value) === null || _c === void 0 ? void 0 : _c.length) || 0;\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(lastCharacter, lastCharacter);\n                    }\n                }\n            }\n        }\n    }\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element || !this.element.parentNode || this.optimizeRedraw) {\n            // Return a non-resolving promise.\n            return Promise.resolve();\n        }\n        this.detach();\n        this.emit('redraw');\n        // Since we are going to replace the element, we need to know it's position so we can find it in the parent's children.\n        const parent = this.element.parentNode;\n        const index = Array.prototype.indexOf.call(parent.children, this.element);\n        this.element.outerHTML = this.sanitize(this.render());\n        this.setElement(parent.children[index]);\n        return this.attach(this.element);\n    }\n    rebuild() {\n        this.destroy();\n        this.init();\n        this.visible = this.conditionallyVisible(null, null);\n        return this.redraw();\n    }\n    removeEventListeners() {\n        super.removeEventListeners();\n        this.tooltips.forEach(tooltip => tooltip.destroy());\n        this.tooltips = [];\n    }\n    hasClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.hasClass(element, this.transform('class', className));\n    }\n    addClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.addClass(element, this.transform('class', className));\n    }\n    removeClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.removeClass(element, this.transform('class', className));\n    }\n    /**\n     * Determines if this component has a condition defined.\n     *\n     * @return {null}\n     */\n    hasCondition() {\n        if (this._hasCondition !== null) {\n            return this._hasCondition;\n        }\n        this._hasCondition = FormioUtils.hasCondition(this.component);\n        return this._hasCondition;\n    }\n    /**\n     * Check if this component is conditionally visible.\n     *\n     * @param data\n     * @return {boolean}\n     */\n    conditionallyVisible(data, row) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        if (this.builderMode || this.previewMode || !this.hasCondition()) {\n            return !this.component.hidden;\n        }\n        data = data || (this.root ? this.root.data : {});\n        return this.checkCondition(row, data);\n    }\n    /**\n     * Checks the condition of this component.\n     *\n     * TODO: Switch row and data parameters to be consistent with other methods.\n     *\n     * @param row - The row contextual data.\n     * @param data - The global data object.\n     * @return {boolean} - True if the condition applies to this component.\n     */\n    checkCondition(row, data) {\n        return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);\n    }\n    /**\n     * Check for conditionals and hide/show the element based on those conditions.\n     */\n    checkComponentConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {\n            this.redraw();\n        }\n        // Check advanced conditions\n        const visible = this.conditionallyVisible(data, row);\n        if (this.visible !== visible) {\n            this.visible = visible;\n        }\n        return visible;\n    }\n    /**\n     * Checks conditions for this component and any sub components.\n     * @param args\n     * @return {boolean}\n     */\n    checkConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.checkComponentConditions(data, flags, row);\n    }\n    get logic() {\n        return this.component.logic || [];\n    }\n    /**\n     * Check all triggers and apply necessary actions.\n     *\n     * @param data\n     */\n    fieldLogic(data, row) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        const logics = this.logic;\n        // If there aren't logic, don't go further.\n        if (logics.length === 0) {\n            return;\n        }\n        const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n        let changed = logics.reduce((changed, logic) => {\n            const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);\n            return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;\n        }, false);\n        // If component definition changed, replace and mark as changed.\n        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n            this.component = newComponent;\n            changed = true;\n            const disabled = this.shouldDisabled;\n            // Change disabled state if it has changed\n            if (this.disabled !== disabled) {\n                this.disabled = disabled;\n            }\n        }\n        return changed;\n    }\n    isIE() {\n        if (typeof window === 'undefined') {\n            return false;\n        }\n        const userAgent = window.navigator.userAgent;\n        const msie = userAgent.indexOf('MSIE ');\n        if (msie > 0) {\n            // IE 10 or older => return version number\n            return parseInt(userAgent.substring(msie + 5, userAgent.indexOf('.', msie)), 10);\n        }\n        const trident = userAgent.indexOf('Trident/');\n        if (trident > 0) {\n            // IE 11 => return version number\n            const rv = userAgent.indexOf('rv:');\n            return parseInt(userAgent.substring(rv + 3, userAgent.indexOf('.', rv)), 10);\n        }\n        const edge = userAgent.indexOf('Edge/');\n        if (edge > 0) {\n            // IE 12 (aka Edge) => return version number\n            return parseInt(userAgent.substring(edge + 5, userAgent.indexOf('.', edge)), 10);\n        }\n        // other browser\n        return false;\n    }\n    defineActionValue(action, argsObject) {\n        return this.evaluate(action.value, argsObject, 'value');\n    }\n    applyActions(newComponent, actions, result, row, data) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return actions.reduce((changed, action) => {\n            switch (action.type) {\n                case 'property': {\n                    FormioUtils.setActionProperty(newComponent, action, result, row, data, this);\n                    const property = action.property.value;\n                    if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'value': {\n                    const oldValue = this.getValue();\n                    const newValue = this.defineActionValue(action, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    });\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'mergeComponentSchema': {\n                    const schema = this.evaluate(action.schemaDefinition, {\n                        value: lodash_1.default.clone(this.getValue()),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    }, 'schema');\n                    lodash_1.default.assign(newComponent, schema);\n                    if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'customAction': {\n                    const oldValue = this.getValue();\n                    const newValue = this.evaluate(action.customAction, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        input: oldValue,\n                        component: newComponent,\n                        result,\n                    }, 'value');\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n            }\n            return changed;\n        }, false);\n    }\n    // Deprecated\n    addInputError(message, dirty, elements) {\n        this.addMessages(message);\n        this.setErrorClasses(elements, dirty, !!message);\n    }\n    // Deprecated\n    removeInputError(elements) {\n        this.setErrorClasses(elements, true, false);\n    }\n    /**\n     * Add a new input error to this element.\n     *\n     * @param message\n     * @param dirty\n     */\n    addMessages(messages) {\n        if (!messages) {\n            return;\n        }\n        // Standardize on array of objects for message.\n        if (typeof messages === 'string') {\n            messages = {\n                messages,\n                level: 'error',\n            };\n        }\n        if (!Array.isArray(messages)) {\n            messages = [messages];\n        }\n        messages = lodash_1.default.uniqBy(messages, message => message.message);\n        if (this.refs.messageContainer) {\n            this.setContent(this.refs.messageContainer, messages.map((message) => {\n                if (message.message && typeof message.message === 'string') {\n                    message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');\n                }\n                return this.renderTemplate('message', Object.assign({}, message));\n            }).join(''));\n        }\n    }\n    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n        this.clearErrorClasses();\n        elements.forEach((element) => {\n            this.setElementInvalid(this.performInputMapping(element), false);\n        });\n        this.setInputWidgetErrorClasses(elements, hasErrors);\n        if (hasErrors) {\n            // Add error classes\n            elements.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), true);\n            });\n            if (dirty && this.options.highlightErrors) {\n                this.addClass(element, this.options.componentErrorClass);\n            }\n            else {\n                this.addClass(element, 'has-error');\n            }\n        }\n        if (hasMessages) {\n            this.addClass(element, 'has-message');\n        }\n    }\n    setElementInvalid(element, invalid) {\n        if (!element)\n            return;\n        if (invalid) {\n            this.addClass(element, 'is-invalid');\n        }\n        else {\n            this.removeClass(element, 'is-invalid');\n        }\n        element.setAttribute('aria-invalid', invalid ? 'true' : 'false');\n    }\n    clearOnHide() {\n        // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.\n        if (\n        // if change happens inside EditGrid's row, it doesn't trigger change on the root level, so rootPristine will be true\n        (!this.rootPristine || this.options.server || (0, utils_1.isInsideScopingComponent)(this)) &&\n            this.component.clearOnHide !== false &&\n            !this.options.readOnly &&\n            !this.options.showHiddenFields) {\n            if (!this.visible) {\n                this.deleteValue();\n            }\n            else if (!this.hasValue() && this.shouldAddDefaultValue) {\n                // If shown, ensure the default is set.\n                this.setValue(this.defaultValue, {\n                    noUpdateEvent: true\n                });\n            }\n        }\n    }\n    triggerRootChange(...args) {\n        if (this.options.onChange) {\n            this.options.onChange(...args);\n        }\n        else if (this.root && this.root.triggerChange) {\n            this.root.triggerChange(...args);\n        }\n    }\n    onChange(flags, fromRoot) {\n        flags = flags || {};\n        if (flags.modified) {\n            if (!flags.noPristineChangeOnModified) {\n                this.pristine = false;\n            }\n            this.addClass(this.getElement(), 'formio-modified');\n        }\n        // If we are supposed to validate on blur, then don't trigger validation yet.\n        if (this.component.validateOn === 'blur') {\n            flags.noValidate = true;\n        }\n        if (this.component.onChange) {\n            this.evaluate(this.component.onChange, {\n                flags\n            });\n        }\n        // Set the changed variable.\n        const changed = {\n            instance: this,\n            component: this.component,\n            value: this.dataValue,\n            flags: flags\n        };\n        // Emit the change.\n        this.emit('componentChange', changed);\n        // Do not propogate the modified flag.\n        let modified = false;\n        if (flags.modified) {\n            modified = true;\n            delete flags.modified;\n        }\n        // Bubble this change up to the top.\n        if (!fromRoot) {\n            this.triggerRootChange(flags, changed, modified);\n        }\n        return changed;\n    }\n    get wysiwygDefault() {\n        return {\n            quill: {\n                theme: 'snow',\n                placeholder: this.t(this.component.placeholder, { _userInput: true }),\n                modules: {\n                    toolbar: [\n                        [{ 'size': ['small', false, 'large', 'huge'] }],\n                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n                        [{ 'font': [] }],\n                        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],\n                        [{ 'color': [] }, { 'background': [] }],\n                        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],\n                        ['blockquote', 'code-block'],\n                        ['link', 'image', 'video', 'formula', 'source']\n                    ]\n                }\n            },\n            ace: {\n                theme: 'ace/theme/xcode',\n                maxLines: 12,\n                minLines: 12,\n                tabSize: 2,\n                mode: 'ace/mode/javascript',\n                placeholder: this.t(this.component.placeholder, { _userInput: true })\n            },\n            ckeditor: {\n                image: {\n                    toolbar: [\n                        'imageTextAlternative',\n                        '|',\n                        'imageStyle:full',\n                        'imageStyle:alignLeft',\n                        'imageStyle:alignCenter',\n                        'imageStyle:alignRight'\n                    ],\n                    styles: [\n                        'full',\n                        'alignLeft',\n                        'alignCenter',\n                        'alignRight'\n                    ]\n                },\n                extraPlugins: []\n            },\n            default: {}\n        };\n    }\n    addCKE(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? {} : settings;\n        settings.base64Upload = this.component.isUploadEnabled ? false : true;\n        settings.mediaEmbed = { previewsInData: true };\n        settings = lodash_1.default.merge(this.wysiwygDefault.ckeditor, lodash_1.default.get(this.options, 'editors.ckeditor.settings', {}), settings);\n        if (this.component.isUploadEnabled) {\n            settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));\n        }\n        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)\n            .then(() => {\n            if (!element.parentNode) {\n                return Promise.reject();\n            }\n            if (isIEBrowser) {\n                const editor = CKEDITOR.replace(element);\n                editor.on('change', () => onChange(editor.getData()));\n                return Promise.resolve(editor);\n            }\n            else {\n                return ClassicEditor.create(element, settings).then(editor => {\n                    editor.model.document.on('change', () => onChange(editor.data.get()));\n                    return editor;\n                });\n            }\n        });\n    }\n    addQuill(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? this.wysiwygDefault.quill : settings;\n        settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);\n        settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });\n        // Lazy load the quill css.\n        Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }\n        ], true);\n        // Lazy load the quill library.\n        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)\n            .then(() => {\n            return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)\n                .then(() => {\n                if (!element.parentNode) {\n                    return Promise.reject();\n                }\n                this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);\n                /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ **/\n                const txtArea = document.createElement('textarea');\n                txtArea.setAttribute('class', 'quill-source-code');\n                this.quill.addContainer('ql-custom').appendChild(txtArea);\n                const qlSource = element.parentNode.querySelector('.ql-source');\n                if (qlSource) {\n                    this.addEventListener(qlSource, 'click', (event) => {\n                        event.preventDefault();\n                        if (txtArea.style.display === 'inherit') {\n                            this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));\n                        }\n                        txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';\n                    });\n                }\n                /** END CODEBLOCK **/\n                // Make sure to select cursor when they click on the element.\n                this.addEventListener(element, 'click', () => this.quill.focus());\n                // Allows users to skip toolbar items when tabbing though form\n                const elm = document.querySelectorAll('.ql-formats > button');\n                for (let i = 0; i < elm.length; i++) {\n                    elm[i].setAttribute('tabindex', '-1');\n                }\n                this.quill.on('text-change', () => {\n                    txtArea.value = this.quill.root.innerHTML;\n                    onChange(txtArea);\n                });\n                return this.quill;\n            });\n        });\n    }\n    get shouldSanitizeValue() {\n        var _a;\n        // Sanitize value if sanitizing for thw whole content is turned off\n        return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);\n    }\n    addAce(element, settings, onChange) {\n        if (!settings || (settings.theme === 'snow')) {\n            const mode = settings ? settings.mode : '';\n            settings = {};\n            if (mode) {\n                settings.mode = mode;\n            }\n        }\n        settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});\n        return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)\n            .then((editor) => {\n            editor = editor.edit(element);\n            editor.removeAllListeners('change');\n            editor.setOptions(settings);\n            editor.getSession().setMode(settings.mode);\n            editor.on('change', () => onChange(editor.getValue()));\n            if (settings.isUseWorkerDisabled) {\n                editor.session.setUseWorker(false);\n            }\n            return editor;\n        });\n    }\n    get tree() {\n        return this.component.tree || false;\n    }\n    /**\n     * The empty value for this component.\n     *\n     * @return {null}\n     */\n    get emptyValue() {\n        return null;\n    }\n    /**\n     * Returns if this component has a value set.\n     *\n     */\n    hasValue(data) {\n        return !lodash_1.default.isUndefined(lodash_1.default.get(data || this.data, this.key));\n    }\n    /**\n     * Get the data value at the root level.\n     *\n     * @return {*}\n     */\n    get rootValue() {\n        return this.root ? this.root.data : this.data;\n    }\n    get rootPristine() {\n        return lodash_1.default.get(this, 'root.pristine', false);\n    }\n    /**\n     * Get the static value of this component.\n     * @return {*}\n     */\n    get dataValue() {\n        if (!this.key ||\n            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {\n            return this.emptyValue;\n        }\n        if (!this.hasValue() && this.shouldAddDefaultValue) {\n            const empty = this.component.multiple ? [] : this.emptyValue;\n            if (!this.rootPristine) {\n                this.dataValue = empty;\n            }\n            return empty;\n        }\n        return lodash_1.default.get(this._data, this.key);\n    }\n    /**\n     * Sets the static value of this component.\n     *\n     * @param value\n     */\n    set dataValue(value) {\n        if (!this.allowData ||\n            !this.key ||\n            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {\n            return;\n        }\n        if ((value !== null) && (value !== undefined)) {\n            value = this.hook('setDataValue', value, this.key, this._data);\n        }\n        if ((value === null) || (value === undefined)) {\n            this.unset();\n            return;\n        }\n        lodash_1.default.set(this._data, this.key, value);\n        return;\n    }\n    /**\n     * Splice a value from the dataValue.\n     *\n     * @param index\n     */\n    splice(index, flags = {}) {\n        if (this.hasValue()) {\n            const dataValue = this.dataValue || [];\n            if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {\n                dataValue.splice(index, 1);\n                this.dataValue = dataValue;\n                this.triggerChange(flags);\n            }\n        }\n    }\n    unset() {\n        lodash_1.default.unset(this._data, this.key);\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n    getCustomDefaultValue(defaultValue) {\n        if (this.component.customDefaultValue && !this.options.preview) {\n            defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');\n        }\n        return defaultValue;\n    }\n    get shouldAddDefaultValue() {\n        return !this.options.noDefaults || (this.component.defaultValue && !this.isEmpty(this.component.defaultValue)) || this.component.customDefaultValue;\n    }\n    get defaultValue() {\n        let defaultValue = this.emptyValue;\n        if (this.component.defaultValue) {\n            defaultValue = this.component.defaultValue;\n        }\n        defaultValue = this.getCustomDefaultValue(defaultValue);\n        const checkMask = (value) => {\n            if (typeof value === 'string') {\n                const placeholderChar = this.placeholderChar;\n                value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;\n                if (!FormioUtils.matchInputMask(value, this.defaultMask)) {\n                    value = '';\n                }\n            }\n            else {\n                value = '';\n            }\n            return value;\n        };\n        if (this.defaultMask) {\n            if (Array.isArray(defaultValue)) {\n                defaultValue = defaultValue.map(checkMask);\n            }\n            else {\n                defaultValue = checkMask(defaultValue);\n            }\n        }\n        // Clone so that it creates a new instance.\n        return lodash_1.default.cloneDeep(defaultValue);\n    }\n    /**\n     * Get the input value of this component.\n     *\n     * @return {*}\n     */\n    getValue() {\n        if (!this.hasInput || this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        const values = [];\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                if (!this.component.multiple) {\n                    return this.getValueAt(i);\n                }\n                values.push(this.getValueAt(i));\n            }\n        }\n        if (values.length === 0 && !this.component.multiple) {\n            return '';\n        }\n        return values;\n    }\n    /**\n     * Get the value at a specific index.\n     *\n     * @param index\n     * @returns {*}\n     */\n    getValueAt(index) {\n        const input = this.performInputMapping(this.refs.input[index]);\n        return input ? input.value : undefined;\n    }\n    /**\n     * Set the value of this component.\n     *\n     * @param value\n     * @param flags\n     *\n     * @return {boolean} - If the value changed.\n     */\n    setValue(value, flags = {}) {\n        const changed = this.updateValue(value, flags);\n        value = this.dataValue;\n        if (!this.hasInput) {\n            return changed;\n        }\n        const isArray = Array.isArray(value);\n        const valueInput = this.refs.fileLink || this.refs.input;\n        if (isArray &&\n            Array.isArray(this.defaultValue) &&\n            this.refs.hasOwnProperty('input') &&\n            valueInput &&\n            (valueInput.length !== value.length) &&\n            this.visible) {\n            this.redraw();\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.redraw();\n            return changed;\n        }\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                this.setValueAt(i, isArray ? value[i] : value, flags);\n            }\n        }\n        return changed;\n    }\n    /**\n     * Set the value at a specific index.\n     *\n     * @param index\n     * @param value\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {\n            value = this.defaultValue;\n        }\n        const input = this.performInputMapping(this.refs.input[index]);\n        const valueMaskInput = this.refs.valueMaskInput;\n        if (valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) {\n            valueMaskInput.mask.textMaskInputElement.update(value);\n        }\n        if (input.mask) {\n            input.mask.textMaskInputElement.update(value);\n        }\n        else if (input.widget && input.widget.setValue) {\n            input.widget.setValue(value);\n        }\n        else {\n            input.value = value;\n        }\n    }\n    get hasSetValue() {\n        return this.hasValue() && !this.isEmpty(this.dataValue);\n    }\n    setDefaultValue() {\n        if (this.defaultValue && this.shouldAddDefaultValue) {\n            const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;\n            this.setValue(defaultValue, {\n                noUpdateEvent: true\n            });\n        }\n    }\n    /**\n     * Restore the value of a control.\n     */\n    restoreValue() {\n        if (this.hasSetValue) {\n            this.setValue(this.dataValue, {\n                noUpdateEvent: true\n            });\n        }\n        else {\n            this.setDefaultValue();\n        }\n    }\n    /**\n     * Normalize values coming into updateValue.\n     *\n     * @param value\n     * @return {*}\n     */\n    normalizeValue(value) {\n        if (this.component.multiple && !Array.isArray(value)) {\n            value = value ? [value] : [];\n        }\n        return value;\n    }\n    /**\n     * Update a value of this component.\n     *\n     * @param flags\n     */\n    updateComponentValue(value, flags = {}) {\n        let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;\n        newValue = this.normalizeValue(newValue, flags);\n        const oldValue = this.dataValue;\n        let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);\n        if (changed) {\n            this.dataValue = newValue;\n            changed = this.dataValue !== oldValue;\n            this.updateOnChange(flags, changed);\n        }\n        if (this.componentModal && flags && flags.fromSubmission) {\n            this.componentModal.setValue(value);\n        }\n        return changed;\n    }\n    /**\n     * Updates the value of this component plus all sub-components.\n     *\n     * @param args\n     * @return {boolean}\n     */\n    updateValue(...args) {\n        return this.updateComponentValue(...args);\n    }\n    getIcon(name, content, styles, ref = 'icon') {\n        return this.renderTemplate('icon', {\n            className: this.iconClass(name),\n            ref,\n            styles,\n            content\n        });\n    }\n    /**\n     * Resets the value of this component.\n     */\n    resetValue() {\n        this.unset();\n        this.setValue(this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\n    }\n    /**\n     * Determine if the value of this component has changed.\n     *\n     * @param newValue\n     * @param oldValue\n     * @return {boolean}\n     */\n    hasChanged(newValue, oldValue) {\n        if (((newValue === undefined) || (newValue === null)) &&\n            ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {\n            return false;\n        }\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            this.allowData &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    /**\n     * Update the value on change.\n     *\n     * @param flags\n     */\n    updateOnChange(flags = {}, changed = false) {\n        if (!flags.noUpdateEvent && changed) {\n            if (flags.fromSubmission) {\n                // Reset the errors when a submission has been made and allow it to revalidate.\n                this._errors = [];\n            }\n            this.triggerChange(flags);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Perform a calculated value operation.\n     *\n     * @param data - The global data object.\n     *\n     * @return {boolean} - If the value changed during calculation.\n     */\n    convertNumberOrBoolToString(value) {\n        if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n        }\n        return value;\n    }\n    doValueCalculation(dataValue, data, row) {\n        var _a;\n        return this.evaluate(this.component.calculateValue, {\n            value: dataValue,\n            data,\n            row: row || this.data,\n            submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {\n                data: this.rootValue\n            }\n        }, 'value');\n    }\n    /* eslint-disable max-statements */\n    calculateComponentValue(data, flags, row) {\n        // Skip value calculation for the component if we don't have entire form data set\n        if (lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {\n            return false;\n        }\n        // If no calculated value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        const { clearOnHide } = this.component;\n        const shouldBeCleared = !this.visible && clearOnHide;\n        const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);\n        // Handle all cases when calculated values should not fire.\n        if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||\n            !(this.component.calculateValue || this.component.calculateValueVariable) ||\n            shouldBeCleared ||\n            (this.options.server && !this.component.calculateServer) ||\n            (flags.dataSourceInitialLoading && allowOverride)) {\n            return false;\n        }\n        const dataValue = this.dataValue;\n        // Calculate the new value.\n        let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);\n        if (this.options.readOnly && dataValue && !calculatedValue) {\n            return false;\n        }\n        if (lodash_1.default.isNil(calculatedValue)) {\n            calculatedValue = this.emptyValue;\n        }\n        const changed = !lodash_1.default.isEqual(dataValue, calculatedValue);\n        // Do not override calculations on server if they have calculateServer set.\n        if (allowOverride) {\n            // The value is considered locked if it is not empty and comes from a submission value.\n            const fromSubmission = (flags.fromSubmission && this.component.persistent === true);\n            if (this.isEmpty(dataValue)) {\n                // Reset the calculation lock if ever the data is cleared.\n                this.calculationLocked = false;\n            }\n            else if (this.calculationLocked || fromSubmission) {\n                this.calculationLocked = true;\n                return false;\n            }\n            const firstPass = (this.calculatedValue === undefined);\n            if (firstPass) {\n                this.calculatedValue = null;\n            }\n            const newCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(calculatedValue));\n            const previousCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(this.calculatedValue));\n            const normalizedDataValue = this.normalizeValue(this.convertNumberOrBoolToString(dataValue));\n            const calculationChanged = !lodash_1.default.isEqual(previousCalculatedValue, newCalculatedValue);\n            const previousChanged = !lodash_1.default.isEqual(normalizedDataValue, previousCalculatedValue);\n            if (calculationChanged && previousChanged && !firstPass) {\n                return false;\n            }\n            // Check to ensure that the calculated value is different than the previously calculated value.\n            if (previousCalculatedValue && previousChanged && !calculationChanged) {\n                return false;\n            }\n            if (flags.isReordered || !calculationChanged) {\n                return false;\n            }\n            if (fromSubmission) {\n                // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass\n                this.calculatedValue = calculatedValue;\n                return false;\n            }\n            // If this is the firstPass, and the dataValue is different than to the calculatedValue.\n            if (firstPass && !this.isEmpty(dataValue) && changed && calculationChanged) {\n                // Return that we have a change so it will perform another pass.\n                return true;\n            }\n        }\n        this.calculatedValue = calculatedValue;\n        if (changed) {\n            if (!flags.noPristineChangeOnModified) {\n                this.pristine = false;\n            }\n            flags.triggeredComponentId = this.id;\n            return this.setValue(calculatedValue, flags);\n        }\n        return false;\n    }\n    /* eslint-enable max-statements */\n    /**\n     * Performs calculations in this component plus any child components.\n     *\n     * @param args\n     * @return {boolean}\n     */\n    calculateValue(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.calculateComponentValue(data, flags, row);\n    }\n    /**\n     * Get this component's label text.\n     *\n     */\n    get label() {\n        return this.component.label;\n    }\n    /**\n     * Set this component's label text and render it.\n     *\n     * @param value - The new label text.\n     */\n    set label(value) {\n        this.component.label = value;\n        if (this.labelElement) {\n            this.labelElement.innerText = value;\n        }\n    }\n    /**\n     * Get FormioForm element at the root of this component tree.\n     *\n     */\n    getRoot() {\n        return this.root;\n    }\n    /**\n     * Returns the invalid message, or empty string if the component is valid.\n     *\n     * @param data\n     * @param dirty\n     * @return {*}\n     */\n    invalidMessage(data, dirty, ignoreCondition, row) {\n        if (!ignoreCondition && !this.checkCondition(row, data)) {\n            return '';\n        }\n        // See if this is forced invalid.\n        if (this.invalid) {\n            return this.invalid;\n        }\n        // No need to check for errors if there is no input or if it is pristine.\n        if (!this.hasInput || (!dirty && this.pristine)) {\n            return '';\n        }\n        const validationScope = { errors: [] };\n        (0, process_1.processOneSync)({\n            component: this.component,\n            data,\n            row,\n            path: this.path || this.component.key,\n            scope: validationScope,\n            instance: this,\n            processors: [\n                process_1.validateProcessSync\n            ]\n        });\n        const errors = validationScope.errors;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return lodash_1.default.map(interpolatedErrors, 'message').join('\\n\\n');\n    }\n    /**\n     * Returns if the component is valid or not.\n     *\n     * @param data\n     * @param dirty\n     * @return {boolean}\n     */\n    isValid(data, dirty) {\n        return !this.invalidMessage(data, dirty);\n    }\n    setComponentValidity(errors, dirty, silentCheck) {\n        if (silentCheck) {\n            return [];\n        }\n        const messages = errors.filter(message => !message.fromServer);\n        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {\n            return this.setCustomValidity(messages, dirty);\n        }\n        else {\n            return this.setCustomValidity('');\n        }\n    }\n    /**\n     * Interpolate errors from the validation methods.\n     * @param {*} errors\n     * @returns\n     */\n    interpolateErrors(errors) {\n        var _a;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;\n    }\n    /**\n     * Show component validation errors.\n     * @param {*} errors - An array of errors that have occured.\n     * @param {*} data - The root submission data.\n     * @param {*} row - The contextual row data.\n     * @param {*} flags - The flags to perform validation.\n     * @returns\n     */\n    showValidationErrors(errors, data, row, flags) {\n        if (flags.silentCheck) {\n            return [];\n        }\n        if (this.options.alwaysDirty) {\n            flags.dirty = true;\n        }\n        if (flags.fromSubmission && this.hasValue(data)) {\n            flags.dirty = true;\n        }\n        this.setDirty(flags.dirty);\n        return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);\n    }\n    /**\n     * Perform a component validation.\n     * @param {*} data - The root data you wish to use for this component.\n     * @param {*} row - The contextual row data you wish to use for this component.\n     * @param {*} flags - The flags to control the behavior of the validation.\n     * @returns\n     */\n    validateComponent(data, row, flags = {}) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        const { async = false } = flags;\n        if (this.shouldSkipValidation(data, row, flags)) {\n            return async ? Promise.resolve([]) : [];\n        }\n        const processContext = {\n            component: this.component,\n            data,\n            row,\n            path: this.path || this.component.key,\n            instance: this,\n            scope: { errors: [] },\n            processors: [\n                async ? process_1.validateProcess : process_1.validateProcessSync\n            ]\n        };\n        if (async) {\n            return (0, process_1.processOne)(processContext).then(() => {\n                this._errors = this.interpolateErrors(processContext.scope.errors);\n                return this._errors;\n            });\n        }\n        (0, process_1.processOneSync)(processContext);\n        this._errors = this.interpolateErrors(processContext.scope.errors);\n        return this._errors;\n    }\n    /**\n     * Checks the validity of this component and sets the error message if it is invalid.\n     *\n     * @param data\n     * @param dirty\n     * @param row\n     * @return {boolean}\n     */\n    checkComponentValidity(data, dirty, row, flags = {}, allErrors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        flags.dirty = dirty || false;\n        if (flags.async) {\n            return this.validateComponent(data, row, flags).then((errors) => {\n                allErrors.push(...errors);\n                if (this.parent && this.parent.childErrors) {\n                    this.parent.childErrors.push(...errors);\n                }\n                this.showValidationErrors(errors, data, row, flags);\n                return errors.length === 0;\n            });\n        }\n        else {\n            const errors = this.validateComponent(data, row, flags);\n            this.showValidationErrors(errors, data, row, flags);\n            allErrors.push(...errors);\n            if (this.parent && this.parent.childErrors) {\n                this.parent.childErrors.push(...errors);\n            }\n            return errors.length === 0;\n        }\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data\n     * @param {*} dirty\n     * @param {*} row\n     * @param {*} silentCheck\n     * @returns\n     */\n    checkValidity(data, dirty, row, silentCheck, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        console.log('Deprecation warning:  Component.checkValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');\n        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n    }\n    checkAsyncValidity(data, dirty, row, silentCheck, errors = []) {\n        console.log('Deprecation warning:  Component.checkAsyncValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');\n        return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);\n    }\n    /**\n     * Check the conditions, calculations, and validity of a single component and triggers an update if\n     * something changed.\n     *\n     * @param data - The root data of the change event.\n     * @param flags - The flags from this change event.\n     *\n     * @return boolean - If component is valid or not.\n     */\n    checkData(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners\n        if (!flags.fromBlur) {\n            this.checkRefreshOn(flags.changes, flags);\n        }\n        if (flags.noCheck) {\n            return true;\n        }\n        this.checkComponentConditions(data, flags, row);\n        if (this.id !== flags.triggeredComponentId) {\n            this.calculateComponentValue(data, flags, row);\n        }\n    }\n    checkModal(errors = [], dirty = false) {\n        const messages = errors.filter(error => !error.fromServer);\n        const isValid = errors.length === 0;\n        if (!this.component.modalEdit || !this.componentModal) {\n            return;\n        }\n        if (dirty && !isValid) {\n            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);\n        }\n        else {\n            this.clearErrorClasses(this.refs.openModalWrapper);\n        }\n    }\n    get validationValue() {\n        return this.dataValue;\n    }\n    isEmpty(value = this.dataValue) {\n        const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;\n        return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB)) || lodash_1.default.isEqual(valueA, valueB);\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     *\n     * @return {boolean}\n     */\n    validateMultiple() {\n        return true;\n    }\n    clearErrorClasses(element = this.element) {\n        this.removeClass(element, this.options.componentErrorClass);\n        this.removeClass(element, 'alert alert-danger');\n        this.removeClass(element, 'has-error');\n        this.removeClass(element, 'has-message');\n    }\n    setInputWidgetErrorClasses(inputRefs, hasErrors) {\n        if (!this.isInputComponent || !this.component.widget || !(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.length)) {\n            return;\n        }\n        inputRefs.forEach((input) => {\n            if ((input === null || input === void 0 ? void 0 : input.widget) && input.widget.setErrorClasses) {\n                input.widget.setErrorClasses(hasErrors);\n            }\n        });\n    }\n    addFocusBlurEvents(element) {\n        this.addEventListener(element, 'focus', () => {\n            if (this.root.focusedComponent !== this) {\n                if (this.root.pendingBlur) {\n                    this.root.pendingBlur();\n                }\n                this.root.focusedComponent = this;\n                this.emit('focus', this);\n            }\n            else if (this.root.focusedComponent === this && this.root.pendingBlur) {\n                this.root.pendingBlur.cancel();\n                this.root.pendingBlur = null;\n            }\n        });\n        this.addEventListener(element, 'blur', () => {\n            this.root.pendingBlur = FormioUtils.delay(() => {\n                this.emit('blur', this);\n                if (this.component.validateOn === 'blur') {\n                    this.root.triggerChange({ fromBlur: true }, {\n                        instance: this,\n                        component: this.component,\n                        value: this.dataValue,\n                        flags: { fromBlur: true }\n                    });\n                }\n                this.root.focusedComponent = null;\n                this.root.pendingBlur = null;\n            });\n        });\n    }\n    // eslint-disable-next-line max-statements\n    setCustomValidity(messages, dirty, external) {\n        const inputRefs = this.isInputComponent ? this.refs.input || [] : null;\n        if (typeof messages === 'string' && messages) {\n            messages = {\n                level: 'error',\n                message: messages,\n                component: this.component,\n            };\n        }\n        if (!Array.isArray(messages)) {\n            if (messages) {\n                messages = [messages];\n            }\n            else {\n                messages = [];\n            }\n        }\n        const errors = messages.filter(message => message.level === 'error');\n        let invalidInputRefs = inputRefs;\n        // Filter the invalid input refs in multiple components\n        if (this.component.multiple) {\n            const refsArray = Array.from(inputRefs);\n            refsArray.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), false);\n            });\n            this.setInputWidgetErrorClasses(refsArray, false);\n            invalidInputRefs = refsArray.filter((ref, index) => {\n                var _a;\n                return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {\n                    var _a;\n                    return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;\n                });\n            });\n        }\n        if (messages.length) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            this.emit('componentError', {\n                instance: this,\n                component: this.component,\n                message: messages[0].message,\n                messages,\n                external: !!external,\n            });\n            this.addMessages(messages, dirty, invalidInputRefs);\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n        }\n        else if (!errors.length || (errors[0].external === !!external)) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            if (this.refs.modalMessageContainer) {\n                this.empty(this.refs.modalMessageContainer);\n            }\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n            this.clearErrorClasses();\n        }\n        this._visibleErrors = messages;\n        return messages;\n    }\n    /**\n     * Determines if the value of this component is hidden from the user as if it is coming from the server, but is\n     * protected.\n     *\n     * @return {boolean|*}\n     */\n    isValueHidden() {\n        if (this.component.protected && this.root.editing) {\n            return false;\n        }\n        if (!this.root || !this.root.hasOwnProperty('editing')) {\n            return false;\n        }\n        if (!this.root || !this.root.editing) {\n            return false;\n        }\n        return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));\n    }\n    shouldSkipValidation(data, row, flags = {}) {\n        const rules = [\n            // Do not validate if the flags say not too.\n            () => flags.noValidate,\n            // Force valid if component is read-only\n            () => this.options.readOnly,\n            // Do not check validations if component is not an input component.\n            () => !this.hasInput,\n            // Check to see if we are editing and if so, check component persistence.\n            () => this.isValueHidden(),\n            // Force valid if component is hidden.\n            () => !this.visible,\n            // Force valid if component is conditionally hidden.\n            () => !this.checkCondition(row, data)\n        ];\n        return rules.some(pred => pred());\n    }\n    // Maintain reverse compatibility.\n    whenReady() {\n        console.warn('The whenReady() method has been deprecated. Please use the dataReady property instead.');\n        return this.dataReady;\n    }\n    get dataReady() {\n        return Promise.resolve();\n    }\n    /**\n     * Prints out the value of this component as a string value.\n     */\n    asString(value) {\n        value = value || this.getValue();\n        return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');\n    }\n    /**\n     * Return if the component is disabled.\n     * @return {boolean}\n     */\n    get disabled() {\n        return this._disabled || this.parentDisabled;\n    }\n    /**\n     * Disable this component.\n     *\n     * @param {boolean} disabled\n     */\n    set disabled(disabled) {\n        this._disabled = disabled;\n    }\n    setDisabled(element, disabled) {\n        if (!element) {\n            return;\n        }\n        element.disabled = disabled;\n        if (disabled) {\n            element.setAttribute('disabled', 'disabled');\n        }\n        else {\n            element.removeAttribute('disabled');\n        }\n    }\n    setLoading(element, loading) {\n        if (!element || (element.loading === loading)) {\n            return;\n        }\n        element.loading = loading;\n        if (!element.loader && loading) {\n            element.loader = this.ce('i', {\n                class: `${this.iconClass('refresh', true)} button-icon-right`\n            });\n        }\n        if (element.loader) {\n            if (loading) {\n                this.appendTo(element.loader, element);\n            }\n            else {\n                this.removeChildFrom(element.loader, element);\n            }\n        }\n    }\n    selectOptions(select, tag, options, defaultValue) {\n        lodash_1.default.each(options, (option) => {\n            const attrs = {\n                value: option.value\n            };\n            if (defaultValue !== undefined && (option.value === defaultValue)) {\n                attrs.selected = 'selected';\n            }\n            const optionElement = this.ce('option', attrs);\n            optionElement.appendChild(this.text(option.label));\n            select.appendChild(optionElement);\n        });\n    }\n    setSelectValue(select, value) {\n        const options = select.querySelectorAll('option');\n        lodash_1.default.each(options, (option) => {\n            if (option.value === value) {\n                option.setAttribute('selected', 'selected');\n            }\n            else {\n                option.removeAttribute('selected');\n            }\n        });\n        if (select.onchange) {\n            select.onchange();\n        }\n        if (select.onselect) {\n            select.onselect();\n        }\n    }\n    getRelativePath(path) {\n        const keyPart = `.${this.key}`;\n        const thisPath = this.isInputComponent ? this.path\n            : this.path.slice(0).replace(keyPart, '');\n        return path.replace(thisPath, '');\n    }\n    clear() {\n        this.detach();\n        this.empty(this.getElement());\n    }\n    append(element) {\n        this.appendTo(element, this.element);\n    }\n    prepend(element) {\n        this.prependTo(element, this.element);\n    }\n    removeChild(element) {\n        this.removeChildFrom(element, this.element);\n    }\n    detachLogic() {\n        this.logic.forEach(logic => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.off(event); // only applies to callbacks on this component\n            }\n        });\n    }\n    attachLogic() {\n        // Do not attach logic during builder mode.\n        if (this.builderMode) {\n            return;\n        }\n        this.logic.forEach((logic) => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.on(event, (...args) => {\n                    const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n                    if (this.applyActions(newComponent, logic.actions, args)) {\n                        // If component definition changed, replace it.\n                        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                            this.component = newComponent;\n                            const visible = this.conditionallyVisible(null, null);\n                            const disabled = this.shouldDisabled;\n                            // Change states which won't be recalculated during redrawing\n                            if (this.visible !== visible) {\n                                this.visible = visible;\n                            }\n                            if (this.disabled !== disabled) {\n                                this.disabled = disabled;\n                            }\n                            this.redraw();\n                        }\n                    }\n                }, true);\n            }\n        });\n    }\n    /**\n     * Get the element information.\n     */\n    elementInfo() {\n        const attributes = {\n            name: this.options.name,\n            type: this.component.inputType || 'text',\n            class: 'form-control',\n            lang: this.options.language\n        };\n        if (this.component.placeholder) {\n            attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });\n        }\n        if (this.component.tabindex) {\n            attributes.tabindex = this.component.tabindex;\n        }\n        if (this.disabled) {\n            attributes.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attributes, this.component.attributes);\n        return {\n            type: 'input',\n            component: this.component,\n            changeEvent: 'change',\n            attr: attributes\n        };\n    }\n    autofocus() {\n        const hasAutofocus = this.component.autofocus && !this.builderMode && !this.options.preview;\n        if (hasAutofocus) {\n            this.on('render', () => this.focus(), true);\n        }\n    }\n    scrollIntoView(element = this.element) {\n        if (!element) {\n            return;\n        }\n        const { left, top } = element.getBoundingClientRect();\n        window.scrollTo(left + window.scrollX, top + window.scrollY);\n    }\n    focus(index) {\n        var _a, _b;\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if ((_a = this.refs.input) === null || _a === void 0 ? void 0 : _a.length) {\n            const focusingInput = typeof index === 'number' && this.refs.input[index]\n                ? this.refs.input[index]\n                : this.refs.input[this.refs.input.length - 1];\n            if (((_b = this.component.widget) === null || _b === void 0 ? void 0 : _b.type) === 'calendar') {\n                const sibling = focusingInput.nextSibling;\n                if (sibling) {\n                    sibling.focus();\n                }\n            }\n            else {\n                focusingInput.focus();\n            }\n        }\n        if (this.refs.openModal) {\n            this.refs.openModal.focus();\n        }\n        if (this.parent.refs.openModal) {\n            this.parent.refs.openModal.focus();\n        }\n    }\n    /**\n     * Get `Formio` instance for working with files\n     */\n    get fileService() {\n        if (this.options.fileService) {\n            return this.options.fileService;\n        }\n        if (this.options.formio) {\n            return this.options.formio;\n        }\n        if (this.root && this.root.formio) {\n            return this.root.formio;\n        }\n        const formio = new Formio_1.Formio();\n        // If a form is loaded, then make sure to set the correct formUrl.\n        if (this.root && this.root._form && this.root._form._id) {\n            formio.formUrl = `${formio.projectUrl}/form/${this.root._form._id}`;\n        }\n        return formio;\n    }\n    resetCaches() { }\n    get previewMode() {\n        return false;\n    }\n}\nexports[\"default\"] = Component;\nComponent.externalLibraries = {};\nComponent.requireLibrary = function (name, property, src, polling) {\n    if (!Component.externalLibraries.hasOwnProperty(name)) {\n        Component.externalLibraries[name] = {};\n        Component.externalLibraries[name].ready = new Promise((resolve, reject) => {\n            Component.externalLibraries[name].resolve = resolve;\n            Component.externalLibraries[name].reject = reject;\n        });\n        const callbackName = `${name}Callback`;\n        if (!polling && !window[callbackName]) {\n            window[callbackName] = function () {\n                this.resolve();\n            }.bind(Component.externalLibraries[name]);\n        }\n        // See if the plugin already exists.\n        const plugin = lodash_1.default.get(window, property);\n        if (plugin) {\n            Component.externalLibraries[name].resolve(plugin);\n        }\n        else {\n            src = Array.isArray(src) ? src : [src];\n            src.forEach((lib) => {\n                let attrs = {};\n                let elementType = '';\n                if (typeof lib === 'string') {\n                    lib = {\n                        type: 'script',\n                        src: lib\n                    };\n                }\n                switch (lib.type) {\n                    case 'script':\n                        elementType = 'script';\n                        attrs = {\n                            src: lib.src,\n                            type: 'text/javascript',\n                            defer: true,\n                            async: true\n                        };\n                        break;\n                    case 'styles':\n                        elementType = 'link';\n                        attrs = {\n                            href: lib.src,\n                            rel: 'stylesheet'\n                        };\n                        break;\n                }\n                // Add the script to the top page.\n                const script = document.createElement(elementType);\n                for (const attr in attrs) {\n                    script.setAttribute(attr, attrs[attr]);\n                }\n                document.getElementsByTagName('head')[0].appendChild(script);\n            });\n            // if no callback is provided, then check periodically for the script.\n            if (polling) {\n                setTimeout(function checkLibrary() {\n                    const plugin = lodash_1.default.get(window, property);\n                    if (plugin) {\n                        Component.externalLibraries[name].resolve(plugin);\n                    }\n                    else {\n                        // check again after 200 ms.\n                        setTimeout(checkLibrary, 200);\n                    }\n                }, 200);\n            }\n        }\n    }\n    return Component.externalLibraries[name].ready;\n};\nComponent.libraryReady = function (name) {\n    if (Component.externalLibraries.hasOwnProperty(name) &&\n        Component.externalLibraries[name].ready) {\n        return Component.externalLibraries[name].ready;\n    }\n    return Promise.reject(`${name} library was not required.`);\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/Component.js?");
 
 /***/ }),
 
@@ -4674,7 +4674,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 utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Component_1 = __importDefault(__webpack_require__(/*! ../component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ../nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nclass NestedArrayComponent extends NestedDataComponent_1.default {\n    static schema(...extend) {\n        return NestedDataComponent_1.default.schema({\n            disableAddingRemovingRows: false\n        }, ...extend);\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.array];\n    }\n    componentContext(component) {\n        return this.iteratableRows[component.rowIndex].data;\n    }\n    get iteratableRows() {\n        throw new Error('Getter #iteratableRows() is not implemented');\n    }\n    get rowIndex() {\n        return super.rowIndex;\n    }\n    set rowIndex(value) {\n        this._rowIndex = value;\n    }\n    init() {\n        super.init();\n        this.prevHasAddButton = this.hasAddButton();\n    }\n    checkAddButtonChanged() {\n        const isAddButton = this.hasAddButton();\n        if (isAddButton !== this.prevHasAddButton) {\n            this.prevHasAddButton = isAddButton;\n            this.redraw();\n        }\n    }\n    checkData(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        this.checkAddButtonChanged();\n        return this.processRows('checkData', data, flags, Component_1.default.prototype.checkData.call(this, data, flags, row));\n    }\n    processRows(method, data, opts, defaultValue, silentCheck) {\n        return this.iteratableRows.reduce((valid, row, rowIndex) => {\n            if (!(opts === null || opts === void 0 ? void 0 : opts.rowIndex) || (opts === null || opts === void 0 ? void 0 : opts.rowIndex) === rowIndex) {\n                return this.processRow(method, data, opts, row.data, row.components, silentCheck) && valid;\n            }\n            else {\n                return valid;\n            }\n        }, defaultValue);\n    }\n    validate(data, flags = {}) {\n        data = data || this.data;\n        return this.validateComponents([this.component], data, flags);\n    }\n    processRow(method, data, opts, row, components, silentCheck) {\n        if (opts === null || opts === void 0 ? void 0 : opts.isolateRow) {\n            silentCheck = true;\n            opts.noRefresh = true;\n        }\n        const valid = lodash_1.default.reduce(components, (valid, component) => component[method](data, opts, row, silentCheck) && valid, true);\n        if (opts === null || opts === void 0 ? void 0 : opts.noRefresh) {\n            delete opts.noRefresh;\n        }\n        return valid;\n    }\n    hasAddButton() {\n        const maxLength = lodash_1.default.get(this.component, 'validate.maxLength');\n        const conditionalAddButton = lodash_1.default.get(this.component, 'conditionalAddButton');\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            !this.options.preview &&\n            (!maxLength || (this.iteratableRows.length < maxLength)) &&\n            (!conditionalAddButton || this.evaluate(conditionalAddButton, {\n                value: this.dataValue,\n            }, 'show'));\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 = Array.isArray(path) ? path : [path];\n        let key = path.shift();\n        const remainingPath = path;\n        let result = [];\n        let possibleComp = null;\n        let comp = null;\n        let rowIndex = null;\n        if (lodash_1.default.isNumber(key)) {\n            rowIndex = key;\n            key = remainingPath.shift();\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                possibleComp = 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                result = rowIndex !== null ? comp : result.concat(comp || possibleComp);\n            }\n        }, rowIndex);\n        if ((!result || result.length === 0) && possibleComp) {\n            result = rowIndex !== null ? possibleComp : [possibleComp];\n        }\n        return result;\n    }\n    everyComponent(fn, rowIndex, options) {\n        if (lodash_1.default.isObject(rowIndex)) {\n            options = rowIndex;\n            rowIndex = null;\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            return;\n        }\n        const components = this.getComponents(rowIndex);\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    getValueAsString(value, options) {\n        var _a;\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <thead>\n            <tr>\n      `);\n            (_a = this.component.components) === null || _a === void 0 ? void 0 : _a.forEach((component) => {\n                const label = component.label || component.key;\n                result += `<th style=\"padding: 5px 10px;\">${label}</th>`;\n            });\n            result += (`\n          </tr>\n        </thead>\n        <tbody>\n      `);\n            this.iteratableRows.forEach(({ components }) => {\n                result += '<tr>';\n                lodash_1.default.each(components, (component) => {\n                    result += '<td style=\"padding:5px 10px;\">';\n                    if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                        result += component.getView(component.dataValue, options);\n                    }\n                    result += '</td>';\n                });\n                result += '</tr>';\n            });\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (!value || !value.length) {\n            return '';\n        }\n        return super.getValueAsString(value, options);\n    }\n    getComponents(rowIndex) {\n        if (rowIndex !== undefined) {\n            if (!this.iteratableRows[rowIndex]) {\n                return [];\n            }\n            return this.iteratableRows[rowIndex].components;\n        }\n        return super.getComponents();\n    }\n}\nexports[\"default\"] = NestedArrayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.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 utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Component_1 = __importDefault(__webpack_require__(/*! ../component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ../nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nclass NestedArrayComponent extends NestedDataComponent_1.default {\n    static schema(...extend) {\n        return NestedDataComponent_1.default.schema({\n            disableAddingRemovingRows: false\n        }, ...extend);\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.array];\n    }\n    componentContext(component) {\n        return this.iteratableRows[component.rowIndex].data;\n    }\n    get iteratableRows() {\n        throw new Error('Getter #iteratableRows() is not implemented');\n    }\n    get rowIndex() {\n        return super.rowIndex;\n    }\n    set rowIndex(value) {\n        this._rowIndex = value;\n    }\n    init() {\n        super.init();\n        this.prevHasAddButton = this.hasAddButton();\n    }\n    checkAddButtonChanged() {\n        const isAddButton = this.hasAddButton();\n        if (isAddButton !== this.prevHasAddButton) {\n            this.prevHasAddButton = isAddButton;\n            this.redraw();\n        }\n    }\n    checkData(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        this.checkAddButtonChanged();\n        return this.processRows('checkData', data, flags, Component_1.default.prototype.checkData.call(this, data, flags, row));\n    }\n    processRows(method, data, opts, defaultValue, silentCheck) {\n        return this.iteratableRows.reduce((valid, row, rowIndex) => {\n            if (!(opts === null || opts === void 0 ? void 0 : opts.rowIndex) || (opts === null || opts === void 0 ? void 0 : opts.rowIndex) === rowIndex) {\n                return this.processRow(method, data, opts, row.data, row.components, silentCheck) && valid;\n            }\n            else {\n                return valid;\n            }\n        }, defaultValue);\n    }\n    validate(data, flags = {}) {\n        data = data || this.data;\n        return this.validateComponents([this.component], data, flags);\n    }\n    checkRow(...args) {\n        console.log('Deprecation Warning: checkRow method has been replaced with processRow');\n        return this.processRow.call(this, ...args);\n    }\n    processRow(method, data, opts, row, components, silentCheck) {\n        if (opts === null || opts === void 0 ? void 0 : opts.isolateRow) {\n            silentCheck = true;\n            opts.noRefresh = true;\n        }\n        const valid = lodash_1.default.reduce(components, (valid, component) => component[method](data, opts, row, silentCheck) && valid, true);\n        if (opts === null || opts === void 0 ? void 0 : opts.noRefresh) {\n            delete opts.noRefresh;\n        }\n        return valid;\n    }\n    hasAddButton() {\n        const maxLength = lodash_1.default.get(this.component, 'validate.maxLength');\n        const conditionalAddButton = lodash_1.default.get(this.component, 'conditionalAddButton');\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            !this.options.preview &&\n            (!maxLength || (this.iteratableRows.length < maxLength)) &&\n            (!conditionalAddButton || this.evaluate(conditionalAddButton, {\n                value: this.dataValue,\n            }, 'show'));\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 = Array.isArray(path) ? path : [path];\n        let key = path.shift();\n        const remainingPath = path;\n        let result = [];\n        let possibleComp = null;\n        let comp = null;\n        let rowIndex = null;\n        if (lodash_1.default.isNumber(key)) {\n            rowIndex = key;\n            key = remainingPath.shift();\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                possibleComp = 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                result = rowIndex !== null ? comp : result.concat(comp || possibleComp);\n            }\n        }, rowIndex);\n        if ((!result || result.length === 0) && possibleComp) {\n            result = rowIndex !== null ? possibleComp : [possibleComp];\n        }\n        return result;\n    }\n    everyComponent(fn, rowIndex, options) {\n        if (lodash_1.default.isObject(rowIndex)) {\n            options = rowIndex;\n            rowIndex = null;\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            return;\n        }\n        const components = this.getComponents(rowIndex);\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    getValueAsString(value, options) {\n        var _a;\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <thead>\n            <tr>\n      `);\n            (_a = this.component.components) === null || _a === void 0 ? void 0 : _a.forEach((component) => {\n                const label = component.label || component.key;\n                result += `<th style=\"padding: 5px 10px;\">${label}</th>`;\n            });\n            result += (`\n          </tr>\n        </thead>\n        <tbody>\n      `);\n            this.iteratableRows.forEach(({ components }) => {\n                result += '<tr>';\n                lodash_1.default.each(components, (component) => {\n                    result += '<td style=\"padding:5px 10px;\">';\n                    if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                        result += component.getView(component.dataValue, options);\n                    }\n                    result += '</td>';\n                });\n                result += '</tr>';\n            });\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (!value || !value.length) {\n            return '';\n        }\n        return super.getValueAsString(value, options);\n    }\n    getComponents(rowIndex) {\n        if (rowIndex !== undefined) {\n            if (!this.iteratableRows[rowIndex]) {\n                return [];\n            }\n            return this.iteratableRows[rowIndex].components;\n        }\n        return super.getComponents();\n    }\n}\nexports[\"default\"] = NestedArrayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js?");
 
 /***/ }),
 
@@ -7809,7 +7809,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
   \**************************************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n\n if (ctx.options.vpat) { ;\n__p += '\\n  <span tabindex=\"-1\" class=\"visually-hidden\" id=\"invisible-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"></span>\\n';\n } ;\n__p += '\\n';\n if (!ctx.self.imageUpload) { ;\n__p += '\\n  ';\n if (ctx.options.vpat) { ;\n__p += '\\n    <div>' +\n((__t = ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern)) == null ? '' : __t) +\n'</div>\\n  ';\n } ;\n__p += '\\n  <ul class=\"list-group list-group-striped\">\\n    <li class=\"list-group-item list-group-header hidden-xs hidden-sm\">\\n      <div class=\"row\">\\n        ';\n if (!ctx.disabled) { ;\n__p += '\\n          <div class=\"col-md-1\"></div>\\n        ';\n } ;\n__p += '\\n        <div class=\"col-md-';\n if (ctx.self.hasTypes) { ;\n__p += '7';\n } else { ;\n__p += '9';\n } ;\n__p += '\"><strong>' +\n((__t = (ctx.t('File Name'))) == null ? '' : __t) +\n'</strong></div>\\n        <div class=\"col-md-2\"><strong>' +\n((__t = (ctx.t('Size'))) == null ? '' : __t) +\n'</strong></div>\\n        ';\n if (ctx.self.hasTypes) { ;\n__p += '\\n          <div class=\"col-md-2\"><strong>' +\n((__t = (ctx.t('Type'))) == null ? '' : __t) +\n'</strong></div>\\n        ';\n } ;\n__p += '\\n      </div>\\n    </li>\\n    ';\n ctx.files.forEach(function(file) { ;\n__p += '\\n      <li class=\"list-group-item\">\\n        <div class=\"row\">\\n          ';\n if (!ctx.disabled) { ;\n__p += '\\n            <div class=\"col-md-1\"><i tabindex=\"0\" class=\"' +\n((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +\n'\" ref=\"removeLink\"></i></div>\\n          ';\n } ;\n__p += '\\n          <div class=\"col-md-';\n if (ctx.self.hasTypes) { ;\n__p += '7';\n } else { ;\n__p += '9';\n } ;\n__p += '\">\\n            ';\n if (ctx.component.uploadOnly) { ;\n__p += '\\n              ' +\n((__t = (file.originalName || file.name)) == null ? '' : __t) +\n'\\n            ';\n } else { ;\n__p += '\\n              <a href=\"' +\n((__t = (file.url || '#')) == null ? '' : __t) +\n'\" target=\"_blank\" ref=\"fileLink\">\\n                <span class=\"visually-hidden\">' +\n((__t = (ctx.t('Press to open '))) == null ? '' : __t) +\n'</span>' +\n((__t = (file.originalName || file.name)) == null ? '' : __t) +\n'\\n              </a>\\n            ';\n } ;\n__p += '\\n          </div>\\n          <div class=\"col-md-2\">' +\n((__t = (ctx.fileSize(file.size))) == null ? '' : __t) +\n'</div>\\n          ';\n if (ctx.self.hasTypes && !ctx.disabled) { ;\n__p += '\\n            <div class=\"col-md-2\">\\n              <select class=\"file-type\" ref=\"fileType\">\\n                ';\n ctx.component.fileTypes.map(function(type) { ;\n__p += '\\n                  <option class=\"test\" value=\"' +\n((__t = ( type.value )) == null ? '' : __t) +\n'\" ';\n if (type.label === file.fileType) { ;\n__p += 'selected=\"selected\"';\n } ;\n__p += '>' +\n((__t = (ctx.t(type.label))) == null ? '' : __t) +\n'</option>\\n                ';\n }); ;\n__p += '\\n              </select>\\n            </div>\\n          ';\n } ;\n__p += '\\n          ';\n if (ctx.self.hasTypes && ctx.disabled) { ;\n__p += '\\n          <div class=\"col-md-2\">' +\n((__t = (file.fileType)) == null ? '' : __t) +\n'</div>\\n          ';\n } ;\n__p += '\\n        </div>\\n      </li>\\n    ';\n }) ;\n__p += '\\n  </ul>\\n';\n } else { ;\n__p += '\\n  <div>\\n    ';\n ctx.files.forEach(function(file) { ;\n__p += '\\n      <div>\\n        <span>\\n          <img ref=\"fileImage\" src=\"\" alt=\"' +\n((__t = (file.originalName || file.name)) == null ? '' : __t) +\n'\" style=\"width:' +\n((__t = (ctx.component.imageSize)) == null ? '' : __t) +\n'px\">\\n          ';\n if (!ctx.disabled) { ;\n__p += '\\n            <i tabindex=\"0\" class=\"' +\n((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +\n'\" ref=\"removeLink\"></i>\\n          ';\n } ;\n__p += '\\n        </span>\\n      </div>\\n    ';\n }) ;\n__p += '\\n  </div>\\n';\n } ;\n__p += '\\n';\n if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { ;\n__p += '\\n  ';\n if (ctx.self.useWebViewCamera) { ;\n__p += '\\n    <div class=\"fileSelector\">\\n      <button class=\"btn btn-primary\" ref=\"galleryButton\"><i class=\"' +\n((__t = (ctx.iconClass('book'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t('Gallery'))) == null ? '' : __t) +\n'</button>\\n      <button class=\"btn btn-primary\" ref=\"cameraButton\"><i class=\"' +\n((__t = (ctx.iconClass('camera'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t('Camera'))) == null ? '' : __t) +\n'</button>\\n    </div>\\n  ';\n } else if (!ctx.self.cameraMode) { ;\n__p += '\\n    <div class=\"fileSelector\" ref=\"fileDrop\" ' +\n((__t = (ctx.fileDropHidden ?'hidden' : '')) == null ? '' : __t) +\n'>\\n      ';\n if (!ctx.self.isMobile.any) { ;\n__p += '\\n        <i class=\"' +\n((__t = (ctx.iconClass('cloud-upload'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t('Drop files to attach,'))) == null ? '' : __t) +\n'\\n      ';\n } ;\n__p += '\\n      ';\n if (ctx.self.imageUpload && ctx.component.webcam) { ;\n__p += '\\n        <a href=\"#\" ref=\"toggleCameraMode\"><i class=\"' +\n((__t = (ctx.iconClass('camera'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t('Use Camera'))) == null ? '' : __t) +\n'</a>\\n        ' +\n((__t = (ctx.t('or'))) == null ? '' : __t) +\n'\\n      ';\n } ;\n__p += '\\n      <a href=\"#\" ref=\"fileBrowse\" class=\"browse\">\\n        ';\n if (ctx.self.isMobile.any && ctx.component.capture) { ;\n__p += '\\n          ';\n if (ctx.component.filePattern && ctx.component.filePattern.includes(\"video\")) { ;\n__p += '\\n            <i class=\"' +\n((__t = (ctx.iconClass('video'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t('Capture Video'))) == null ? '' : __t) +\n'\\n          ';\n } else if (ctx.component.filePattern && ctx.component.filePattern.includes(\"audio\")) { ;\n__p += '\\n            <i class=\"' +\n((__t = (ctx.iconClass('microphone'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t('Capture Audio'))) == null ? '' : __t) +\n'\\n          ';\n } else { ;\n__p += '\\n            <i class=\"' +\n((__t = (ctx.iconClass('camera'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t('Capture Image'))) == null ? '' : __t) +\n'\\n          ';\n } ;\n__p += '    \\n        ';\n } else { ;\n__p += '\\n          <i class=\"' +\n((__t = (ctx.iconClass('folder-open'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t('Browse Files'))) == null ? '' : __t) +\n'\\n        ';\n } ;\n__p += '\\n        <span class=\"visually-hidden\">\\n          ' +\n((__t = (ctx.t('Browse to attach file for ' + ctx.component.label + '. ' + \n          (ctx.component.description ? ctx.component.description + '. ' : '') + \n          ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern)))) == null ? '' : __t) +\n'\\n        </span>\\n      </a>\\n      <div ref=\"fileProcessingLoader\" class=\"loader-wrapper\">\\n        <div class=\"loader text-center\"></div>\\n      </div>\\n    </div>\\n  ';\n } else { ;\n__p += '\\n    <div class=\"video-container\">\\n      <video class=\"video\" autoplay=\"true\" ref=\"videoPlayer\" tabindex=\"-1\"></video>\\n    </div>\\n    <button class=\"btn btn-primary\" ref=\"takePictureButton\"><i class=\"' +\n((__t = (ctx.iconClass('camera'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t('Take Picture'))) == null ? '' : __t) +\n'</button>\\n    <button class=\"btn btn-primary\" ref=\"toggleCameraMode\">' +\n((__t = (ctx.t('Switch to file upload'))) == null ? '' : __t) +\n'</button>\\n  ';\n } ;\n__p += '\\n';\n } ;\n__p += '\\n';\n ctx.statuses.forEach(function(status) { ;\n__p += '\\n  <div class=\"file ' +\n((__t = (ctx.statuses.status === 'error' ? ' has-error' : '')) == null ? '' : __t) +\n'\">\\n    <div class=\"row\">\\n      <div class=\"fileName col-form-label col-sm-10\">' +\n((__t = (status.originalName)) == null ? '' : __t) +\n'\\n        <i class=\"' +\n((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +\n'\" ref=\"fileStatusRemove\">\\n          <span class=\"visually-hidden\">' +\n((__t = (ctx.t('Remove button. Press to remove ' + status.originalName || 0))) == null ? '' : __t) +\n'</span>\\n          <span class=\"visually-hidden\">' +\n((__t = (status.message ? status.message.replace(';', '.') : '')) == null ? '' : __t) +\n'</span>\\n        </i>\\n      </div>\\n      <div class=\"fileSize col-form-label col-sm-2 text-end\">' +\n((__t = (ctx.fileSize(status.size))) == null ? '' : __t) +\n'</div>\\n    </div>\\n    <div class=\"row\">\\n      <div class=\"col-sm-12\">\\n        ';\n if (status.status === 'progress') { ;\n__p += '\\n          <div class=\"progress\">\\n            <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"' +\n((__t = (status.progress)) == null ? '' : __t) +\n'\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: ' +\n((__t = (status.progress)) == null ? '' : __t) +\n'%\">\\n              <span class=\"visually-hidden\">' +\n((__t = (status.progress)) == null ? '' : __t) +\n'% ' +\n((__t = (ctx.t('Complete'))) == null ? '' : __t) +\n'</span>\\n            </div>\\n          </div>\\n        ';\n } else if (status.status === 'error') { ;\n__p += '\\n          <div class=\"alert alert-danger bg-' +\n((__t = (status.status)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(status.message))) == null ? '' : __t) +\n'</div>\\n        ';\n } else { ;\n__p += '\\n          <div class=\"bg-' +\n((__t = (status.status)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(status.message))) == null ? '' : __t) +\n'</div>\\n        ';\n } ;\n__p += '\\n      </div>\\n    </div>\\n  </div>\\n';\n }) ;\n__p += '\\n';\n if (!ctx.component.storage || ctx.support.hasWarning) { ;\n__p += '\\n  <div class=\"alert alert-warning\">\\n    ';\n if (!ctx.component.storage) { ;\n__p += '\\n      <p>' +\n((__t = (ctx.t('No storage has been set for this field. File uploads are disabled until storage is set up.'))) == null ? '' : __t) +\n'</p>\\n    ';\n } ;\n__p += '\\n    ';\n if (!ctx.support.filereader) { ;\n__p += '\\n      <p>' +\n((__t = (ctx.t('File API & FileReader API not supported.'))) == null ? '' : __t) +\n'</p>\\n    ';\n } ;\n__p += '\\n    ';\n if (!ctx.support.formdata) { ;\n__p += '\\n      <p>' +\n((__t = (ctx.t(\"XHR2's FormData is not supported.\"))) == null ? '' : __t) +\n'</p>\\n    ';\n } ;\n__p += '\\n    ';\n if (!ctx.support.progress) { ;\n__p += '\\n      <p>' +\n((__t = (ctx.t(\"XHR2's upload progress isn't supported.\"))) == null ? '' : __t) +\n'</p>\\n    ';\n } ;\n__p += '\\n  </div>\\n';\n } ;\n__p += '\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/bootstrap/lib/cjs/templates/bootstrap5/file/form.ejs.js?");
+eval("Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n\n if (ctx.options.vpat) { ;\n__p += '\\n  <span tabindex=\"-1\" class=\"visually-hidden\" id=\"invisible-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"></span>\\n';\n } ;\n__p += '\\n';\n if (!ctx.self.imageUpload) { ;\n__p += '\\n  ';\n if (ctx.options.vpat) { ;\n__p += '\\n    <div>' +\n((__t = ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern)) == null ? '' : __t) +\n'</div>\\n  ';\n } ;\n__p += '\\n  <ul class=\"list-group list-group-striped\">\\n    <li class=\"list-group-item list-group-header hidden-xs hidden-sm\">\\n      <div class=\"row\">\\n        <div class=\"col-md-' +\n((__t = (ctx.columns.name)) == null ? '' : __t) +\n'\"><strong>' +\n((__t = (ctx.t('File Name'))) == null ? '' : __t) +\n'</strong></div>\\n        <div class=\"col-md-' +\n((__t = (ctx.columns.size)) == null ? '' : __t) +\n'\"><strong>' +\n((__t = (ctx.t('Size'))) == null ? '' : __t) +\n'</strong></div>\\n        ';\n if (ctx.self.hasTypes) { ;\n__p += '\\n          <div class=\"col-md-' +\n((__t = (ctx.columns.type)) == null ? '' : __t) +\n'\"><strong>' +\n((__t = (ctx.t('Type'))) == null ? '' : __t) +\n'</strong></div>\\n        ';\n } ;\n__p += '\\n        <div class=\"col-md-' +\n((__t = (ctx.columns.actions)) == null ? '' : __t) +\n' justify-center\">\\n          ';\n if (ctx.showSyncButton) { ;\n__p += '\\n            <button\\n              class=\"btn btn-primary btn-sm\"\\n              ref=\"syncNow\"\\n              ';\n if (ctx.disabled || ctx.isSyncing) { ;\n__p += 'disabled=true';\n } ;\n__p += '\\n            >' +\n((__t = (ctx.isSyncing ? ctx.t('Syncing...') : ctx.t('Sync Now'))) == null ? '' : __t) +\n'</button>\\n          ';\n } ;\n__p += '\\n        </div>\\n      </div>\\n    </li>\\n    ';\n ctx.files.forEach(function(file) { ;\n__p += '\\n      <li class=\"list-group-item\">\\n        <div class=\"row\">\\n          <div class=\"col-md-' +\n((__t = (ctx.columns.name)) == null ? '' : __t) +\n'\">\\n            ';\n if (ctx.component.uploadOnly) { ;\n__p += '\\n              ' +\n((__t = (file.originalName || file.name)) == null ? '' : __t) +\n'\\n            ';\n } else { ;\n__p += '\\n              <a href=\"' +\n((__t = (file.url || '#')) == null ? '' : __t) +\n'\" target=\"_blank\" ref=\"fileLink\">\\n                <span class=\"visually-hidden\">' +\n((__t = (ctx.t('Press to open '))) == null ? '' : __t) +\n'</span>' +\n((__t = (file.originalName || file.name)) == null ? '' : __t) +\n'\\n              </a>\\n            ';\n } ;\n__p += '\\n          </div>\\n          <div class=\"col-md-' +\n((__t = (ctx.columns.size)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.fileSize(file.size))) == null ? '' : __t) +\n'</div>\\n          ';\n if (ctx.self.hasTypes && !ctx.disabled) { ;\n__p += '\\n            <div class=\"col-md-' +\n((__t = (ctx.columns.type)) == null ? '' : __t) +\n'\">\\n              <select class=\"file-type\" ref=\"fileType\">\\n                ';\n ctx.component.fileTypes.map(function(type) { ;\n__p += '\\n                  <option class=\"test\" value=\"' +\n((__t = ( type.value )) == null ? '' : __t) +\n'\" ';\n if (type.label === file.fileType) { ;\n__p += 'selected=\"selected\"';\n } ;\n__p += '>' +\n((__t = (ctx.t(type.label))) == null ? '' : __t) +\n'</option>\\n                ';\n }); ;\n__p += '\\n              </select>\\n            </div>\\n          ';\n } ;\n__p += '\\n          ';\n if (ctx.self.hasTypes && ctx.disabled) { ;\n__p += '\\n            <div class=\"col-md-' +\n((__t = (ctx.columns.type)) == null ? '' : __t) +\n'\">' +\n((__t = (file.fileType)) == null ? '' : __t) +\n'</div>\\n          ';\n } ;\n__p += '\\n          ';\n if (!ctx.disabled) { ;\n__p += '\\n            <div class=\"col-md-' +\n((__t = (ctx.columns.actions)) == null ? '' : __t) +\n' justify-center\"><i tabindex=\"0\" class=\"' +\n((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +\n'\" ref=\"removeLink\"></i></div>\\n          ';\n } ;\n__p += '\\n        </div>\\n      </li>\\n    ';\n }) ;\n__p += '\\n    ';\n ctx.filesToDelete.forEach(function(file) { ;\n__p += '\\n      <li class=\"list-group-item\">\\n        <div class=\"row align-center\">\\n          <div class=\"col-md-' +\n((__t = (ctx.columns.name)) == null ? '' : __t) +\n'\">\\n            <div>' +\n((__t = (file.originalName || file.name)) == null ? '' : __t) +\n'</div>\\n              <div class=\"status text-' +\n((__t = (file.status === 'error' ? 'danger': file.status)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(file.message))) == null ? '' : __t) +\n'</div>\\n          </div>\\n          <div class=\"col-md-' +\n((__t = (ctx.columns.size)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.fileSize(file.size))) == null ? '' : __t) +\n'</div>\\n          ';\n if (ctx.self.hasTypes) { ;\n__p += '\\n            <div class=\"col-md-' +\n((__t = (ctx.columns.type)) == null ? '' : __t) +\n'\">\\n              <select class=\"file-type\" ref=\"fileType\">\\n                ';\n ctx.component.fileTypes.map(function(type) { ;\n__p += '\\n                  <option class=\"test\" value=\"' +\n((__t = ( type.value )) == null ? '' : __t) +\n'\" ';\n if (type.label === file.fileType) { ;\n__p += 'selected=\"selected\"';\n } ;\n__p += '>' +\n((__t = (ctx.t(type.label))) == null ? '' : __t) +\n'</option>\\n                ';\n }); ;\n__p += '\\n              </select>\\n            </div>\\n          ';\n } ;\n__p += '\\n          ';\n if (!ctx.isSyncing && file.status !== 'success') { ;\n__p += '\\n            <div class=\"col-md-' +\n((__t = (ctx.columns.actions)) == null ? '' : __t) +\n' justify-center\"><i tabindex=\"0\" class=\"' +\n((__t = (ctx.iconClass('arrow-counterclockwise'))) == null ? '' : __t) +\n'\" ref=\"restoreFile\"></i></div>\\n          ';\n } ;\n__p += '\\n        </div>\\n      </li>\\n    ';\n }) ;\n__p += '\\n    ';\n ctx.filesToUpload.forEach(function(file) { ;\n__p += '\\n      <li class=\"list-group-item\">\\n        <div class=\"row align-center\">\\n          <div class=\"col-md-' +\n((__t = (ctx.columns.name)) == null ? '' : __t) +\n'\">\\n            <div>' +\n((__t = (file.originalName || file.name)) == null ? '' : __t) +\n'</div>\\n            ';\n if (file.status === 'progress') { ;\n__p += '\\n              <div class=\"status progress\">\\n                <div id=\"' +\n((__t = (file.id)) == null ? '' : __t) +\n'\" class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"' +\n((__t = (file.progress)) == null ? '' : __t) +\n'\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: ' +\n((__t = (file.progress)) == null ? '' : __t) +\n'%\" ref=\"progress\">\\n                  <span class=\"visually-hidden\">' +\n((__t = (file.progress)) == null ? '' : __t) +\n'% ' +\n((__t = (ctx.t('Complete'))) == null ? '' : __t) +\n'</span>\\n                </div>\\n              </div>\\n            ';\n } else { ;\n__p += '\\n              <div class=\"status text-' +\n((__t = (file.status === 'error' ? 'danger': file.status)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(file.message))) == null ? '' : __t) +\n'</div>\\n            ';\n } ;\n__p += '\\n          </div>\\n          <div class=\"col-md-' +\n((__t = (ctx.columns.size)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.fileSize(file.size))) == null ? '' : __t) +\n'</div>\\n          ';\n if (ctx.self.hasTypes) { ;\n__p += '\\n            <div class=\"col-md-' +\n((__t = (ctx.columns.type)) == null ? '' : __t) +\n'\">\\n              <select class=\"file-type\" ref=\"fileType\">\\n                ';\n ctx.component.fileTypes.map(function(type) { ;\n__p += '\\n                  <option class=\"test\" value=\"' +\n((__t = ( type.value )) == null ? '' : __t) +\n'\" ';\n if (type.label === file.fileType) { ;\n__p += 'selected=\"selected\"';\n } ;\n__p += '>' +\n((__t = (ctx.t(type.label))) == null ? '' : __t) +\n'</option>\\n                ';\n }); ;\n__p += '\\n              </select>\\n            </div>\\n          ';\n } ;\n__p += '\\n          ';\n if (file.status === 'progress') { ;\n__p += '\\n            <div class=\"col-md-' +\n((__t = (ctx.columns.actions)) == null ? '' : __t) +\n' justify-center\"><i id=\"abort-' +\n((__t = (file.id)) == null ? '' : __t) +\n'\" tabindex=\"0\" class=\"' +\n((__t = (ctx.iconClass('ban'))) == null ? '' : __t) +\n'\"></i></div>\\n          ';\n } else if (!ctx.isSyncing && file.status !== 'success') { ;\n__p += '\\n            <div class=\"col-md-' +\n((__t = (ctx.columns.actions)) == null ? '' : __t) +\n' justify-center\"><i tabindex=\"0\" class=\"' +\n((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +\n'\" ref=\"fileToSyncRemove\"></i></div>\\n          ';\n } ;\n__p += '\\n        </div>\\n      </li>\\n    ';\n }) ;\n__p += '\\n  </ul>\\n';\n } else { ;\n__p += '\\n  <div>\\n    ';\n ctx.files.forEach(function(file) { ;\n__p += '\\n      <div>\\n        <span>\\n          <img ref=\"fileImage\" src=\"\" alt=\"' +\n((__t = (file.originalName || file.name)) == null ? '' : __t) +\n'\" style=\"width:' +\n((__t = (ctx.component.imageSize)) == null ? '' : __t) +\n'px\">\\n          ';\n if (!ctx.disabled) { ;\n__p += '\\n            <i tabindex=\"0\" class=\"' +\n((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +\n'\" ref=\"removeLink\"></i>\\n          ';\n } ;\n__p += '\\n        </span>\\n      </div>\\n    ';\n }) ;\n__p += '\\n  </div>\\n';\n } ;\n__p += '\\n';\n if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { ;\n__p += '\\n  ';\n if (ctx.self.useWebViewCamera) { ;\n__p += '\\n    <div class=\"fileSelector\">\\n      <button class=\"btn btn-primary\" ref=\"galleryButton\"><i class=\"' +\n((__t = (ctx.iconClass('book'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t('Gallery'))) == null ? '' : __t) +\n'</button>\\n      <button class=\"btn btn-primary\" ref=\"cameraButton\"><i class=\"' +\n((__t = (ctx.iconClass('camera'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t('Camera'))) == null ? '' : __t) +\n'</button>\\n    </div>\\n  ';\n } else if (!ctx.self.cameraMode) { ;\n__p += '\\n    <div class=\"fileSelector\" ref=\"fileDrop\" ' +\n((__t = (ctx.fileDropHidden ?'hidden' : '')) == null ? '' : __t) +\n'>\\n      ';\n if (!ctx.self.isMobile.any) { ;\n__p += '\\n        <i class=\"' +\n((__t = (ctx.iconClass('cloud-upload'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t('Drop files to attach,'))) == null ? '' : __t) +\n'\\n      ';\n } ;\n__p += '\\n      ';\n if (ctx.self.imageUpload && ctx.component.webcam) { ;\n__p += '\\n        <a href=\"#\" ref=\"toggleCameraMode\"><i class=\"' +\n((__t = (ctx.iconClass('camera'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t('Use Camera'))) == null ? '' : __t) +\n'</a>\\n        ' +\n((__t = (ctx.t('or'))) == null ? '' : __t) +\n'\\n      ';\n } ;\n__p += '\\n      <a href=\"#\" ref=\"fileBrowse\" class=\"browse\">\\n        ';\n if (ctx.self.isMobile.any && ctx.component.capture) { ;\n__p += '\\n          ';\n if (ctx.component.filePattern && ctx.component.filePattern.includes(\"video\")) { ;\n__p += '\\n            <i class=\"' +\n((__t = (ctx.iconClass('video'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t('Capture Video'))) == null ? '' : __t) +\n'\\n          ';\n } else if (ctx.component.filePattern && ctx.component.filePattern.includes(\"audio\")) { ;\n__p += '\\n            <i class=\"' +\n((__t = (ctx.iconClass('microphone'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t('Capture Audio'))) == null ? '' : __t) +\n'\\n          ';\n } else { ;\n__p += '\\n            <i class=\"' +\n((__t = (ctx.iconClass('camera'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t('Capture Image'))) == null ? '' : __t) +\n'\\n          ';\n } ;\n__p += '\\n        ';\n } else { ;\n__p += '\\n          <i class=\"' +\n((__t = (ctx.iconClass('folder-open'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t('Browse Files'))) == null ? '' : __t) +\n'\\n        ';\n } ;\n__p += '\\n        <span class=\"visually-hidden\">\\n          ' +\n((__t = (ctx.t('Browse to attach file for ' + ctx.component.label + '. ' +\n          (ctx.component.description ? ctx.component.description + '. ' : '') +\n          ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern)))) == null ? '' : __t) +\n'\\n        </span>\\n      </a>\\n      <div ref=\"fileProcessingLoader\" class=\"loader-wrapper\">\\n        <div class=\"loader text-center\"></div>\\n      </div>\\n    </div>\\n  ';\n } else { ;\n__p += '\\n    <div class=\"video-container\">\\n      <video class=\"video\" autoplay=\"true\" ref=\"videoPlayer\" tabindex=\"-1\"></video>\\n    </div>\\n    <button class=\"btn btn-primary\" ref=\"takePictureButton\"><i class=\"' +\n((__t = (ctx.iconClass('camera'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t('Take Picture'))) == null ? '' : __t) +\n'</button>\\n    <button class=\"btn btn-primary\" ref=\"toggleCameraMode\">' +\n((__t = (ctx.t('Switch to file upload'))) == null ? '' : __t) +\n'</button>\\n  ';\n } ;\n__p += '\\n';\n } ;\n__p += '\\n';\n if (!ctx.component.storage || ctx.support.hasWarning) { ;\n__p += '\\n  <div class=\"alert alert-warning\">\\n    ';\n if (!ctx.component.storage) { ;\n__p += '\\n      <p>' +\n((__t = (ctx.t('No storage has been set for this field. File uploads are disabled until storage is set up.'))) == null ? '' : __t) +\n'</p>\\n    ';\n } ;\n__p += '\\n    ';\n if (!ctx.support.filereader) { ;\n__p += '\\n      <p>' +\n((__t = (ctx.t('File API & FileReader API not supported.'))) == null ? '' : __t) +\n'</p>\\n    ';\n } ;\n__p += '\\n    ';\n if (!ctx.support.formdata) { ;\n__p += '\\n      <p>' +\n((__t = (ctx.t(\"XHR2's FormData is not supported.\"))) == null ? '' : __t) +\n'</p>\\n    ';\n } ;\n__p += '\\n    ';\n if (!ctx.support.progress) { ;\n__p += '\\n      <p>' +\n((__t = (ctx.t(\"XHR2's upload progress isn't supported.\"))) == null ? '' : __t) +\n'</p>\\n    ';\n } ;\n__p += '\\n  </div>\\n';\n } ;\n__p += '\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/bootstrap/lib/cjs/templates/bootstrap5/file/form.ejs.js?");
 
 /***/ }),
 
@@ -8751,7 +8751,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nvar _a;\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.FormBuilder = exports.Form = exports.Formio = void 0;\nconst CDN_js_1 = __importDefault(__webpack_require__(/*! ./CDN.js */ \"./lib/cjs/CDN.js\"));\nclass Formio {\n    static setLicense(license, norecurse = false) {\n        Formio.license = license;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setLicense(license);\n        }\n    }\n    static setBaseUrl(url, norecurse = false) {\n        Formio.baseUrl = url;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setBaseUrl(url);\n        }\n    }\n    static setApiUrl(url, norecurse = false) {\n        Formio.baseUrl = url;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setApiUrl(url);\n        }\n    }\n    static setProjectUrl(url, norecurse = false) {\n        Formio.projectUrl = url;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setProjectUrl(url);\n        }\n    }\n    static setAppUrl(url, norecurse = false) {\n        Formio.projectUrl = url;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setAppUrl(url);\n        }\n    }\n    static setPathType(type, norecurse = false) {\n        Formio.pathType = type;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setPathType(type);\n        }\n    }\n    static debug(...args) {\n        if (Formio.config.debug) {\n            console.log(...args);\n        }\n    }\n    static clearCache() {\n        if (Formio.FormioClass) {\n            Formio.FormioClass.clearCache();\n        }\n    }\n    static global(prop, flag = '') {\n        const globalValue = window[prop];\n        if (flag && globalValue && !globalValue[flag]) {\n            return null;\n        }\n        Formio.debug(`Getting global ${prop}`, globalValue);\n        return globalValue;\n    }\n    static use(module) {\n        if (Formio.FormioClass && Formio.FormioClass.isRenderer) {\n            Formio.FormioClass.use(module);\n        }\n        else {\n            Formio.modules.push(module);\n        }\n    }\n    static createElement(type, attrs, children) {\n        const element = document.createElement(type);\n        Object.keys(attrs).forEach(key => {\n            element.setAttribute(key, attrs[key]);\n        });\n        (children || []).forEach(child => {\n            element.appendChild(Formio.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    static addScript(wrapper, src, name, flag = '') {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!src) {\n                return Promise.resolve();\n            }\n            if (typeof src !== 'string' && src.length) {\n                return Promise.all(src.map(ref => Formio.addScript(wrapper, ref)));\n            }\n            if (name && Formio.global(name, flag)) {\n                Formio.debug(`${name} already loaded.`);\n                return Promise.resolve(Formio.global(name));\n            }\n            Formio.debug('Adding Script', src);\n            try {\n                wrapper.appendChild(Formio.createElement('script', {\n                    src\n                }));\n            }\n            catch (err) {\n                Formio.debug(err);\n                return Promise.resolve();\n            }\n            if (!name) {\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                Formio.debug(`Waiting to load ${name}`);\n                const wait = setInterval(() => {\n                    if (Formio.global(name, flag)) {\n                        clearInterval(wait);\n                        Formio.debug(`${name} loaded.`);\n                        resolve(Formio.global(name));\n                    }\n                }, 100);\n            });\n        });\n    }\n    static addStyles(wrapper, href) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!href) {\n                return;\n            }\n            if (typeof href !== 'string' && href.length) {\n                href.forEach(ref => Formio.addStyles(wrapper, ref));\n                return;\n            }\n            Formio.debug('Adding Styles', href);\n            wrapper.appendChild(Formio.createElement('link', {\n                rel: 'stylesheet',\n                href\n            }));\n        });\n    }\n    static submitDone(instance, submission) {\n        return __awaiter(this, void 0, void 0, function* () {\n            Formio.debug('Submision Complete', submission);\n            const successMessage = (Formio.config.success || '').toString();\n            if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {\n                instance.element.innerHTML = `<div class=\"alert-success\" role=\"alert\">${successMessage}</div>`;\n            }\n            let returnUrl = Formio.config.redirect;\n            // Allow form based configuration for return url.\n            if (!returnUrl &&\n                (instance._form &&\n                    instance._form.settings &&\n                    (instance._form.settings.returnUrl ||\n                        instance._form.settings.redirect))) {\n                Formio.debug('Return url found in form configuration');\n                returnUrl = instance._form.settings.returnUrl || instance._form.settings.redirect;\n            }\n            if (returnUrl) {\n                const formSrc = instance.formio ? instance.formio.formUrl : '';\n                const hasQuery = !!returnUrl.match(/\\?/);\n                const isOrigin = returnUrl.indexOf(location.origin) === 0;\n                returnUrl += hasQuery ? '&' : '?';\n                returnUrl += `sub=${submission._id}`;\n                if (!isOrigin && formSrc) {\n                    returnUrl += `&form=${encodeURIComponent(formSrc)}`;\n                }\n                Formio.debug('Return URL', returnUrl);\n                window.location.href = returnUrl;\n                if (isOrigin) {\n                    window.location.reload();\n                }\n            }\n        });\n    }\n    // Return the full script if the builder is being used.\n    static formioScript(script, builder) {\n        builder = builder || Formio.config.includeBuilder;\n        if (Formio.fullAdded || builder) {\n            Formio.fullAdded = true;\n            return script.replace('formio.form', 'formio.full');\n        }\n        return script;\n    }\n    static addLibrary(wrapper, lib, name) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!lib) {\n                return;\n            }\n            if (lib.dependencies) {\n                for (let i = 0; i < lib.dependencies.length; i++) {\n                    yield Formio.addLibrary(wrapper, Formio.cdn.libs[lib.dependencies[i]]);\n                }\n            }\n            if (lib.css) {\n                yield Formio.addStyles(wrapper, lib.css);\n            }\n            if (lib.js) {\n                const module = yield Formio.addScript(wrapper, lib.js, lib.use ? name : false);\n                if (lib.use) {\n                    Formio.debug(`Using ${name}`);\n                    const options = lib.options || {};\n                    if (!options.license && Formio.license) {\n                        options.license = Formio.license;\n                    }\n                    Formio.use((typeof lib.use === 'function' ? lib.use(module) : module), options);\n                }\n            }\n        });\n    }\n    // eslint-disable-next-line max-statements\n    static init(element, options = {}, builder = false) {\n        return __awaiter(this, void 0, void 0, function* () {\n            Formio.cdn = new CDN_js_1.default(Formio.config.cdn, Formio.config.cdnUrls || {});\n            Formio.config.libs = Formio.config.libs || {\n                uswds: {\n                    dependencies: ['fontawesome'],\n                    js: `${Formio.cdn.uswds}/uswds.min.js`,\n                    css: `${Formio.cdn.uswds}/uswds.min.css`,\n                    use: true\n                },\n                fontawesome: {\n                    css: `${Formio.cdn['font-awesome']}/css/font-awesome.min.css`\n                },\n                bootstrap4: {\n                    dependencies: ['fontawesome'],\n                    css: `${Formio.cdn.bootstrap4}/css/bootstrap.min.css`\n                },\n                bootstrap: {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${Formio.cdn.bootstrap}/css/bootstrap.min.css`\n                },\n                'bootstrap-icons': {\n                    css: `${Formio.cdn['bootstrap-icons']}/css/bootstrap-icons.css`\n                }\n            };\n            const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;\n            // Create a new wrapper and add the element inside of a new wrapper.\n            let wrapper = Formio.createElement('div', {\n                'id': `${id}-wrapper`\n            });\n            element.parentNode.insertBefore(wrapper, element);\n            // If we include the libraries, then we will attempt to run this in shadow dom.\n            if (Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function') && !Formio.config.premium) {\n                wrapper = wrapper.attachShadow({\n                    mode: 'open'\n                });\n                options.shadowRoot = wrapper;\n            }\n            element.parentNode.removeChild(element);\n            wrapper.appendChild(element);\n            // Load the renderer styles.\n            yield Formio.addStyles(wrapper, Formio.config.embedCSS || `${Formio.cdn.js}/formio.embed.css`);\n            // Add a loader.\n            wrapper.appendChild(Formio.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            const renderer = Formio.config.debug ? 'formio.form' : 'formio.form.min';\n            Formio.FormioClass = yield Formio.addScript(wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');\n            Formio.FormioClass.cdn = Formio.cdn;\n            Formio.FormioClass.setBaseUrl(options.baseUrl || Formio.baseUrl || Formio.config.base);\n            Formio.FormioClass.setProjectUrl(options.projectUrl || Formio.projectUrl || Formio.config.project);\n            Formio.FormioClass.language = Formio.language;\n            Formio.setLicense(Formio.license || Formio.config.license || false);\n            Formio.modules.forEach((module) => {\n                Formio.FormioClass.use(module);\n            });\n            if (Formio.icons) {\n                Formio.FormioClass.icons = Formio.icons;\n            }\n            if (Formio.pathType) {\n                Formio.FormioClass.setPathType(Formio.pathType);\n            }\n            // Add libraries if they wish to include the libs.\n            if (Formio.config.template && Formio.config.includeLibs) {\n                yield Formio.addLibrary(wrapper, Formio.config.libs[Formio.config.template], Formio.config.template);\n            }\n            // Add the premium modules.\n            if (Formio.config.premium) {\n                Formio.config.modules.premium = Formio.config.premium;\n            }\n            // Allow adding dynamic modules.\n            if (Formio.config.modules) {\n                for (const name in Formio.config.modules) {\n                    const lib = Formio.config.modules[name];\n                    lib.use = lib.use || true;\n                    yield Formio.addLibrary(wrapper, lib, name);\n                }\n            }\n            yield Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/${renderer}.css`, builder));\n            if (Formio.config.before) {\n                yield Formio.config.before(Formio.FormioClass, element, Formio.config);\n            }\n            Formio.FormioClass.license = true;\n            Formio._formioReady(Formio.FormioClass);\n            return wrapper;\n        });\n    }\n    // Called after an instance has been created.\n    static afterCreate(instance, wrapper, readyEvent) {\n        return __awaiter(this, void 0, void 0, function* () {\n            wrapper.removeChild(wrapper.querySelector('.formio-loader'));\n            Formio.FormioClass.events.emit(readyEvent, instance);\n            if (Formio.config.after) {\n                Formio.debug('Calling ready callback');\n                Formio.config.after(instance, Formio.config);\n            }\n            return instance;\n        });\n    }\n    // Create a new form.\n    static createForm(element, form, options = {}) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const wrapper = yield Formio.init(element, options);\n            return Formio.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {\n                // Set the default submission data.\n                if (Formio.config.submission) {\n                    Formio.debug('Setting submission', Formio.config.submission);\n                    instance.submission = Formio.config.submission;\n                }\n                // Call the after create method.\n                Formio.afterCreate(instance, wrapper, 'formEmbedded');\n                return instance;\n            });\n        });\n    }\n    // Create a form builder.\n    static builder(element, form, options = {}) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const wrapper = yield Formio.init(element, options, true);\n            return Formio.FormioClass.builder(element, form, options).then((instance) => {\n                Formio.afterCreate(instance, wrapper, 'builderEmbedded');\n                return instance;\n            });\n        });\n    }\n}\n_a = Formio;\nFormio.FormioClass = null;\nFormio.config = {};\nFormio.modules = [];\nFormio.icons = '';\nFormio.license = '';\nFormio.formioReady = new Promise((ready, reject) => {\n    Formio._formioReady = ready;\n    Formio._formioReadyReject = reject;\n});\nFormio.version = '5.0.0-rc.32';\n// Create a report.\nFormio.Report = {\n    create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {\n        const wrapper = yield Formio.init(element, options, true);\n        return Formio.FormioClass.Report.create(element, submission, options).then((instance) => {\n            Formio.afterCreate(instance, wrapper, 'reportEmbedded');\n            return instance;\n        });\n    })\n};\nexports.Formio = Formio;\nCDN_js_1.default.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nclass Form {\n    constructor(element, form, options) {\n        this.form = form;\n        this.element = element;\n        this.options = options || {};\n        this.init();\n        this.instance = {\n            proxy: true,\n            ready: this.ready,\n            destroy: () => { }\n        };\n    }\n    init() {\n        this.element.innerHTML = '';\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.form = instance.form;\n            return instance;\n        });\n    }\n    create() {\n        return Formio.createForm(this.element, this.form, this.options);\n    }\n    setDisplay(display) {\n        if (this.instance.proxy) {\n            return this.ready;\n        }\n        this.form.display = display;\n        this.init();\n        return this.ready;\n    }\n}\nexports.Form = Form;\nclass FormBuilder extends Form {\n    create() {\n        return Formio.builder(this.element, this.form, this.options);\n    }\n}\nexports.FormBuilder = FormBuilder;\nFormio.Form = Form;\nFormio.FormBuilder = FormBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Embed.js?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nvar _a;\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.FormBuilder = exports.Form = exports.Formio = void 0;\nconst CDN_js_1 = __importDefault(__webpack_require__(/*! ./CDN.js */ \"./lib/cjs/CDN.js\"));\nclass Formio {\n    static setLicense(license, norecurse = false) {\n        Formio.license = license;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setLicense(license);\n        }\n    }\n    static setBaseUrl(url, norecurse = false) {\n        Formio.baseUrl = url;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setBaseUrl(url);\n        }\n    }\n    static setApiUrl(url, norecurse = false) {\n        Formio.baseUrl = url;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setApiUrl(url);\n        }\n    }\n    static setProjectUrl(url, norecurse = false) {\n        Formio.projectUrl = url;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setProjectUrl(url);\n        }\n    }\n    static setAppUrl(url, norecurse = false) {\n        Formio.projectUrl = url;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setAppUrl(url);\n        }\n    }\n    static setPathType(type, norecurse = false) {\n        Formio.pathType = type;\n        if (!norecurse && Formio.FormioClass) {\n            Formio.FormioClass.setPathType(type);\n        }\n    }\n    static debug(...args) {\n        if (Formio.config.debug) {\n            console.log(...args);\n        }\n    }\n    static clearCache() {\n        if (Formio.FormioClass) {\n            Formio.FormioClass.clearCache();\n        }\n    }\n    static global(prop, flag = '') {\n        const globalValue = window[prop];\n        if (flag && globalValue && !globalValue[flag]) {\n            return null;\n        }\n        Formio.debug(`Getting global ${prop}`, globalValue);\n        return globalValue;\n    }\n    static use(module) {\n        if (Formio.FormioClass && Formio.FormioClass.isRenderer) {\n            Formio.FormioClass.use(module);\n        }\n        else {\n            Formio.modules.push(module);\n        }\n    }\n    static createElement(type, attrs, children) {\n        const element = document.createElement(type);\n        Object.keys(attrs).forEach(key => {\n            element.setAttribute(key, attrs[key]);\n        });\n        (children || []).forEach(child => {\n            element.appendChild(Formio.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    static addScript(wrapper, src, name, flag = '') {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!src) {\n                return Promise.resolve();\n            }\n            if (typeof src !== 'string' && src.length) {\n                return Promise.all(src.map(ref => Formio.addScript(wrapper, ref)));\n            }\n            if (name && Formio.global(name, flag)) {\n                Formio.debug(`${name} already loaded.`);\n                return Promise.resolve(Formio.global(name));\n            }\n            Formio.debug('Adding Script', src);\n            try {\n                wrapper.appendChild(Formio.createElement('script', {\n                    src\n                }));\n            }\n            catch (err) {\n                Formio.debug(err);\n                return Promise.resolve();\n            }\n            if (!name) {\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                Formio.debug(`Waiting to load ${name}`);\n                const wait = setInterval(() => {\n                    if (Formio.global(name, flag)) {\n                        clearInterval(wait);\n                        Formio.debug(`${name} loaded.`);\n                        resolve(Formio.global(name));\n                    }\n                }, 100);\n            });\n        });\n    }\n    static addStyles(wrapper, href) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!href) {\n                return;\n            }\n            if (typeof href !== 'string' && href.length) {\n                href.forEach(ref => Formio.addStyles(wrapper, ref));\n                return;\n            }\n            Formio.debug('Adding Styles', href);\n            wrapper.appendChild(Formio.createElement('link', {\n                rel: 'stylesheet',\n                href\n            }));\n        });\n    }\n    static submitDone(instance, submission) {\n        return __awaiter(this, void 0, void 0, function* () {\n            Formio.debug('Submision Complete', submission);\n            const successMessage = (Formio.config.success || '').toString();\n            if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {\n                instance.element.innerHTML = `<div class=\"alert-success\" role=\"alert\">${successMessage}</div>`;\n            }\n            let returnUrl = Formio.config.redirect;\n            // Allow form based configuration for return url.\n            if (!returnUrl &&\n                (instance._form &&\n                    instance._form.settings &&\n                    (instance._form.settings.returnUrl ||\n                        instance._form.settings.redirect))) {\n                Formio.debug('Return url found in form configuration');\n                returnUrl = instance._form.settings.returnUrl || instance._form.settings.redirect;\n            }\n            if (returnUrl) {\n                const formSrc = instance.formio ? instance.formio.formUrl : '';\n                const hasQuery = !!returnUrl.match(/\\?/);\n                const isOrigin = returnUrl.indexOf(location.origin) === 0;\n                returnUrl += hasQuery ? '&' : '?';\n                returnUrl += `sub=${submission._id}`;\n                if (!isOrigin && formSrc) {\n                    returnUrl += `&form=${encodeURIComponent(formSrc)}`;\n                }\n                Formio.debug('Return URL', returnUrl);\n                window.location.href = returnUrl;\n                if (isOrigin) {\n                    window.location.reload();\n                }\n            }\n        });\n    }\n    // Return the full script if the builder is being used.\n    static formioScript(script, builder) {\n        builder = builder || Formio.config.includeBuilder;\n        if (Formio.fullAdded || builder) {\n            Formio.fullAdded = true;\n            return script.replace('formio.form', 'formio.full');\n        }\n        return script;\n    }\n    static addLibrary(wrapper, lib, name) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!lib) {\n                return;\n            }\n            if (lib.dependencies) {\n                for (let i = 0; i < lib.dependencies.length; i++) {\n                    yield Formio.addLibrary(wrapper, Formio.cdn.libs[lib.dependencies[i]]);\n                }\n            }\n            if (lib.css) {\n                yield Formio.addStyles(wrapper, lib.css);\n            }\n            if (lib.js) {\n                const module = yield Formio.addScript(wrapper, lib.js, lib.use ? name : false);\n                if (lib.use) {\n                    Formio.debug(`Using ${name}`);\n                    const options = lib.options || {};\n                    if (!options.license && Formio.license) {\n                        options.license = Formio.license;\n                    }\n                    Formio.use((typeof lib.use === 'function' ? lib.use(module) : module), options);\n                }\n            }\n        });\n    }\n    // eslint-disable-next-line max-statements\n    static init(element, options = {}, builder = false) {\n        return __awaiter(this, void 0, void 0, function* () {\n            Formio.cdn = new CDN_js_1.default(Formio.config.cdn, Formio.config.cdnUrls || {});\n            Formio.config.libs = Formio.config.libs || {\n                uswds: {\n                    dependencies: ['fontawesome'],\n                    js: `${Formio.cdn.uswds}/uswds.min.js`,\n                    css: `${Formio.cdn.uswds}/uswds.min.css`,\n                    use: true\n                },\n                fontawesome: {\n                    css: `${Formio.cdn['font-awesome']}/css/font-awesome.min.css`\n                },\n                bootstrap4: {\n                    dependencies: ['fontawesome'],\n                    css: `${Formio.cdn.bootstrap4}/css/bootstrap.min.css`\n                },\n                bootstrap: {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${Formio.cdn.bootstrap}/css/bootstrap.min.css`\n                },\n                'bootstrap-icons': {\n                    css: `${Formio.cdn['bootstrap-icons']}/css/bootstrap-icons.css`\n                }\n            };\n            const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;\n            // Create a new wrapper and add the element inside of a new wrapper.\n            let wrapper = Formio.createElement('div', {\n                'id': `${id}-wrapper`\n            });\n            element.parentNode.insertBefore(wrapper, element);\n            // If we include the libraries, then we will attempt to run this in shadow dom.\n            if (Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function') && !Formio.config.premium) {\n                wrapper = wrapper.attachShadow({\n                    mode: 'open'\n                });\n                options.shadowRoot = wrapper;\n            }\n            element.parentNode.removeChild(element);\n            wrapper.appendChild(element);\n            // Load the renderer styles.\n            yield Formio.addStyles(wrapper, Formio.config.embedCSS || `${Formio.cdn.js}/formio.embed.css`);\n            // Add a loader.\n            wrapper.appendChild(Formio.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            const formioSrc = Formio.config.full ? 'formio.full' : 'formio.form';\n            const renderer = Formio.config.debug ? formioSrc : `${formioSrc}.min`;\n            Formio.FormioClass = yield Formio.addScript(wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');\n            Formio.FormioClass.cdn = Formio.cdn;\n            Formio.FormioClass.setBaseUrl(options.baseUrl || Formio.baseUrl || Formio.config.base);\n            Formio.FormioClass.setProjectUrl(options.projectUrl || Formio.projectUrl || Formio.config.project);\n            Formio.FormioClass.language = Formio.language;\n            Formio.setLicense(Formio.license || Formio.config.license || false);\n            Formio.modules.forEach((module) => {\n                Formio.FormioClass.use(module);\n            });\n            if (Formio.icons) {\n                Formio.FormioClass.icons = Formio.icons;\n            }\n            if (Formio.pathType) {\n                Formio.FormioClass.setPathType(Formio.pathType);\n            }\n            // Add libraries if they wish to include the libs.\n            if (Formio.config.template && Formio.config.includeLibs) {\n                yield Formio.addLibrary(wrapper, Formio.config.libs[Formio.config.template], Formio.config.template);\n            }\n            // Add the premium modules.\n            if (Formio.config.premium) {\n                Formio.config.modules.premium = Formio.config.premium;\n            }\n            // Allow adding dynamic modules.\n            if (Formio.config.modules) {\n                for (const name in Formio.config.modules) {\n                    const lib = Formio.config.modules[name];\n                    lib.use = lib.use || true;\n                    yield Formio.addLibrary(wrapper, lib, name);\n                }\n            }\n            yield Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/${renderer}.css`, builder));\n            if (Formio.config.before) {\n                yield Formio.config.before(Formio.FormioClass, element, Formio.config);\n            }\n            Formio.FormioClass.license = true;\n            Formio._formioReady(Formio.FormioClass);\n            return wrapper;\n        });\n    }\n    // Called after an instance has been created.\n    static afterCreate(instance, wrapper, readyEvent) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const loader = wrapper.querySelector('.formio-loader');\n            if (loader) {\n                wrapper.removeChild(loader);\n            }\n            Formio.FormioClass.events.emit(readyEvent, instance);\n            if (Formio.config.after) {\n                Formio.debug('Calling ready callback');\n                Formio.config.after(instance, Formio.config);\n            }\n            return instance;\n        });\n    }\n    // Create a new form.\n    static createForm(element, form, options = {}) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (Formio.FormioClass) {\n                return Formio.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true }));\n            }\n            const wrapper = yield Formio.init(element, options);\n            return Formio.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {\n                // Set the default submission data.\n                if (Formio.config.submission) {\n                    Formio.debug('Setting submission', Formio.config.submission);\n                    instance.submission = Formio.config.submission;\n                }\n                // Call the after create method.\n                Formio.afterCreate(instance, wrapper, 'formEmbedded');\n                return instance;\n            });\n        });\n    }\n    // Create a form builder.\n    static builder(element, form, options = {}) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            if ((_b = Formio.FormioClass) === null || _b === void 0 ? void 0 : _b.builder) {\n                return Formio.FormioClass.builder(element, form, options);\n            }\n            const wrapper = yield Formio.init(element, options, true);\n            return Formio.FormioClass.builder(element, form, options).then((instance) => {\n                Formio.afterCreate(instance, wrapper, 'builderEmbedded');\n                return instance;\n            });\n        });\n    }\n}\n_a = Formio;\nFormio.FormioClass = null;\nFormio.config = {};\nFormio.modules = [];\nFormio.icons = '';\nFormio.license = '';\nFormio.formioReady = new Promise((ready, reject) => {\n    Formio._formioReady = ready;\n    Formio._formioReadyReject = reject;\n});\nFormio.version = '5.0.0-rc.34';\n// Create a report.\nFormio.Report = {\n    create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {\n        var _b;\n        if ((_b = Formio.FormioClass) === null || _b === void 0 ? void 0 : _b.Report) {\n            return Formio.FormioClass.Report.create(element, submission, options);\n        }\n        const wrapper = yield Formio.init(element, options, true);\n        return Formio.FormioClass.Report.create(element, submission, options).then((instance) => {\n            Formio.afterCreate(instance, wrapper, 'reportEmbedded');\n            return instance;\n        });\n    })\n};\nexports.Formio = Formio;\nCDN_js_1.default.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nclass Form {\n    constructor(element, form, options) {\n        this.form = form;\n        this.element = element;\n        this.options = options || {};\n        this.init();\n        this.instance = {\n            proxy: true,\n            ready: this.ready,\n            destroy: () => { }\n        };\n    }\n    init() {\n        if (this.instance && !this.instance.proxy) {\n            this.instance.destroy();\n        }\n        this.element.innerHTML = '';\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.form = instance.form;\n            return instance;\n        });\n    }\n    create() {\n        return Formio.createForm(this.element, this.form, this.options);\n    }\n    setForm(form) {\n        this.form = form;\n        if (this.instance) {\n            this.instance.setForm(form);\n        }\n    }\n    setDisplay(display) {\n        if (this.instance.proxy) {\n            return this.ready;\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.setForm(this.form);\n        });\n        return this.ready;\n    }\n}\nexports.Form = Form;\nclass FormBuilder extends Form {\n    create() {\n        return Formio.builder(this.element, this.form, this.options);\n    }\n}\nexports.FormBuilder = FormBuilder;\nFormio.Form = Form;\nFormio.FormBuilder = FormBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Embed.js?");
 
 /***/ }),
 
@@ -8762,7 +8762,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Formio = void 0;\nconst sdk_1 = __webpack_require__(/*! @formio/core/sdk */ \"./node_modules/@formio/core/lib/sdk/index.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return sdk_1.Formio; } }));\nconst Embed_1 = __webpack_require__(/*! ./Embed */ \"./lib/cjs/Embed.js\");\nconst CDN_1 = __importDefault(__webpack_require__(/*! ./CDN */ \"./lib/cjs/CDN.js\"));\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nsdk_1.Formio.cdn = new CDN_1.default();\nsdk_1.Formio.Providers = providers_1.default;\nsdk_1.Formio.version = '5.0.0-rc.32';\nCDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nconst isNil = (val) => val === null || val === undefined;\nsdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {\n    const requestArgs = {\n        provider: storage,\n        method: 'upload',\n        file: file,\n        fileName: fileName,\n        dir: dir\n    };\n    fileKey = fileKey || 'file';\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    if (uploadStartCallback) {\n                        uploadStartCallback();\n                    }\n                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.downloadFile = function (file, options) {\n    const requestArgs = {\n        method: 'download',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.downloadFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.deleteFile = function (file, options) {\n    const requestArgs = {\n        method: 'delete',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.deleteFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\n// Esnure we proxy the following methods to the FormioEmbed class.\n['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {\n    const baseFn = sdk_1.Formio[fn];\n    sdk_1.Formio[fn] = function (arg) {\n        const retVal = Embed_1.Formio[fn](arg, true);\n        return baseFn ? baseFn.call(this, arg) : retVal;\n    };\n});\n// For reverse compatability.\nsdk_1.Formio.Promise = Promise;\nsdk_1.Formio.formioReady = Embed_1.Formio.formioReady;\nsdk_1.Formio.config = Embed_1.Formio.config;\nsdk_1.Formio.builder = Embed_1.Formio.builder;\nsdk_1.Formio.Report = Embed_1.Formio.Report;\nsdk_1.Formio.Form = Embed_1.Formio.Form;\nsdk_1.Formio.FormBuilder = Embed_1.Formio.FormBuilder;\nsdk_1.Formio.use = Embed_1.Formio.use;\nsdk_1.Formio.createForm = Embed_1.Formio.createForm;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Formio = void 0;\nconst sdk_1 = __webpack_require__(/*! @formio/core/sdk */ \"./node_modules/@formio/core/lib/sdk/index.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return sdk_1.Formio; } }));\nconst Embed_1 = __webpack_require__(/*! ./Embed */ \"./lib/cjs/Embed.js\");\nconst CDN_1 = __importDefault(__webpack_require__(/*! ./CDN */ \"./lib/cjs/CDN.js\"));\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nsdk_1.Formio.cdn = new CDN_1.default();\nsdk_1.Formio.Providers = providers_1.default;\nsdk_1.Formio.version = '5.0.0-rc.34';\nCDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nconst isNil = (val) => val === null || val === undefined;\nsdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {\n    const requestArgs = {\n        provider: storage,\n        method: 'upload',\n        file: file,\n        fileName: fileName,\n        dir: dir\n    };\n    fileKey = fileKey || 'file';\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    if (uploadStartCallback) {\n                        uploadStartCallback();\n                    }\n                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.downloadFile = function (file, options) {\n    const requestArgs = {\n        method: 'download',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.downloadFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.deleteFile = function (file, options) {\n    const requestArgs = {\n        method: 'delete',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.deleteFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\n// Esnure we proxy the following methods to the FormioEmbed class.\n['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {\n    const baseFn = sdk_1.Formio[fn];\n    sdk_1.Formio[fn] = function (arg) {\n        const retVal = Embed_1.Formio[fn](arg, true);\n        return baseFn ? baseFn.call(this, arg) : retVal;\n    };\n});\n// For reverse compatability.\nsdk_1.Formio.Promise = Promise;\nsdk_1.Formio.formioReady = Embed_1.Formio.formioReady;\nsdk_1.Formio.config = Embed_1.Formio.config;\nsdk_1.Formio.builder = Embed_1.Formio.builder;\nsdk_1.Formio.Report = Embed_1.Formio.Report;\nsdk_1.Formio.Form = Embed_1.Formio.Form;\nsdk_1.Formio.FormBuilder = Embed_1.Formio.FormBuilder;\nsdk_1.Formio.use = Embed_1.Formio.use;\nsdk_1.Formio.createForm = Embed_1.Formio.createForm;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?");
 
 /***/ }),