@formio/js 5.0.0-rc.81 → 5.0.0-rc.83

package/dist/formio.full.js

@@ -5347,7 +5347,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ./components/_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst builder_1 = __importDefault(__webpack_require__(/*! ./utils/builder */ \"./lib/cjs/utils/builder.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst dom_autoscroller_1 = __importDefault(__webpack_require__(/*! dom-autoscroller */ \"./node_modules/dom-autoscroller/dist/bundle.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ./templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\n__webpack_require__(/*! ./components/builder */ \"./lib/cjs/components/builder.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\nclass WebformBuilder extends Component_1.default {\n    // eslint-disable-next-line max-statements\n    constructor() {\n        let element, options;\n        if (arguments[0] instanceof HTMLElement || arguments[1]) {\n            element = arguments[0];\n            options = arguments[1];\n        }\n        else {\n            options = arguments[0];\n        }\n        // Reset skipInit in case PDFBuilder has set it.\n        options.skipInit = false;\n        options.display = options.display || 'form';\n        super(null, options);\n        this.moveHandler = (e) => {\n            if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {\n                e.stopPropagation();\n                e.preventDefault();\n            }\n            if (e.keyCode === 38) {\n                this.updateComponentPlacement(true);\n            }\n            if (e.keyCode === 40) {\n                this.updateComponentPlacement(false);\n            }\n            if (e.keyCode === 13) {\n                this.stopMoving(this.selectedComponent);\n            }\n        };\n        this.setElement(element);\n        this.dragulaLib = dragula_1.default;\n        this.builderHeight = 0;\n        this.schemas = {};\n        this.repeatablePaths = [];\n        this.sideBarScroll = lodash_1.default.get(this.options, 'sideBarScroll', true);\n        this.sideBarScrollOffset = lodash_1.default.get(this.options, 'sideBarScrollOffset', 0);\n        this.dragDropEnabled = true;\n        // Setup the builder options.\n        this.builder = lodash_1.default.defaultsDeep({}, this.options.builder, this.defaultGroups);\n        // Turn off if explicitely said to do so...\n        lodash_1.default.each(this.defaultGroups, (config, key) => {\n            if (config === false) {\n                this.builder[key] = false;\n            }\n        });\n        // Add the groups.////\n        this.groups = {};\n        this.groupOrder = [];\n        for (const group in this.builder) {\n            if (this.builder[group]) {\n                this.builder[group].key = group;\n                this.groups[group] = this.builder[group];\n                this.groups[group].components = this.groups[group].components || {};\n                this.groups[group].componentOrder = this.groups[group].componentOrder || [];\n                this.groups[group].subgroups = Object.keys(this.groups[group].groups || {}).map((groupKey) => {\n                    this.groups[group].groups[groupKey].componentOrder = Object.keys(this.groups[group].groups[groupKey].components).map((key) => key);\n                    return this.groups[group].groups[groupKey];\n                });\n                this.groupOrder.push(this.groups[group]);\n            }\n        }\n        this.groupOrder = this.groupOrder\n            .filter(group => group && !group.ignore)\n            .sort((a, b) => a.weight - b.weight)\n            .map(group => group.key);\n        for (const type in Components_1.default.components) {\n            const component = Components_1.default.components[type];\n            if (component.builderInfo && component.builderInfo.schema) {\n                this.schemas[type] = component.builderInfo.schema;\n                component.type = type;\n                const builderInfo = component.builderInfo;\n                builderInfo.key = component.type;\n                this.addBuilderComponentInfo(builderInfo);\n            }\n        }\n        // Filter out any extra components.\n        // Add the components in each group.\n        for (const group in this.groups) {\n            const info = this.groups[group];\n            for (const key in info.components) {\n                const compKey = group === 'resource' ? `component-${key}` : key;\n                let comp = info.components[compKey];\n                if (comp === true &&\n                    Components_1.default.components[key] &&\n                    Components_1.default.components[key].builderInfo) {\n                    comp = Components_1.default.components[key].builderInfo;\n                }\n                if (comp && comp.schema) {\n                    this.schemas[key] = comp.schema;\n                    info.components[compKey] = comp;\n                    info.components[compKey].key = key;\n                }\n                else {\n                    // Do not include this component in the components array.\n                    delete info.components[compKey];\n                }\n            }\n            // Order the components.\n            this.orderComponents(info);\n        }\n        this.options.hooks = this.options.hooks || {};\n        this.options.hooks.renderComponent = (html, { component, self }) => {\n            var _a, _b;\n            if (self.type === 'form' && !self.key) {\n                const template = this.hook('renderComponentFormTemplate', html.replace('formio-component-form', ''));\n                // The main webform shouldn't have this class as it adds extra styles.\n                return template;\n            }\n            if (this.options.disabled && this.options.disabled.includes(self.key) || self.parent.noDragDrop) {\n                return html;\n            }\n            return this.renderTemplate('builderComponent', {\n                html,\n                disableBuilderActions: (_a = self === null || self === void 0 ? void 0 : self.component) === null || _a === void 0 ? void 0 : _a.disableBuilderActions,\n                childComponent: component,\n                design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design\n            });\n        };\n        this.options.hooks.renderComponents = (html, { components, self }) => {\n            // if Datagrid and already has a component, don't make it droppable.\n            if (self.type === 'datagrid' && components.length > 0 || self.noDragDrop) {\n                return html;\n            }\n            if (!components ||\n                (!components.length && !components.nodrop) ||\n                (self.type === 'form' && components.length <= 1 && (components.length === 0 || components[0].type === 'button'))) {\n                html = this.renderTemplate('builderPlaceholder', {\n                    position: 0\n                }) + html;\n            }\n            return this.renderTemplate('builderComponents', {\n                key: self.key,\n                type: self.type,\n                html,\n            });\n        };\n        this.options.hooks.renderInput = (html, { self }) => {\n            if (self.type === 'hidden') {\n                return html + self.name;\n            }\n            return html;\n        };\n        this.options.hooks.renderLoading = (html, { self }) => {\n            if (self.type === 'form' && self.key) {\n                return self.name;\n            }\n            return html;\n        };\n        this.options.hooks.attachComponents = (element, components, container, component) => {\n            // Don't attach if no element was found or component doesn't participate in drag'n'drop.\n            if (!element) {\n                return;\n            }\n            if (component.noDragDrop) {\n                return element;\n            }\n            // Attach container and component to element for later reference.\n            const containerElement = element.querySelector(`[${this._referenceAttributeName}=\"${component.component.key}-container\"]`) || element;\n            containerElement.formioContainer = container;\n            containerElement.formioComponent = component;\n            // Add container to draggable list.\n            if (this.dragula && this.allowDrop(element)) {\n                this.dragula.containers.push(containerElement);\n            }\n            // If this is an existing datagrid element, don't make it draggable.\n            if ((component.type === 'datagrid' || component.type === 'datamap') && components.length > 0) {\n                return element;\n            }\n            // Since we added a wrapper, need to return the original element so that we can find the components inside it.\n            return element.children[0];\n        };\n        this.options.hooks.attachDatagrid = (element, component) => {\n            component.loadRefs(element, {\n                [`${component.key}-container`]: 'single',\n            });\n            const dataGridContainer = component.refs[`${component.key}-container`];\n            if (dataGridContainer) {\n                component.attachComponents(dataGridContainer.parentNode, [], component.component.components);\n            }\n            // Need to set up horizontal rearrangement of fields.\n        };\n        this.options.hooks.attachComponent = this.attachComponent.bind(this);\n        // Load resources tagged as 'builder'\n        const query = {\n            params: {\n                type: 'resource',\n                limit: 1000000,\n                select: '_id,title,name,components'\n            }\n        };\n        if (this.options && this.options.resourceTag) {\n            query.params.tags = [this.options.resourceTag];\n        }\n        else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {\n            query.params.tags = ['builder'];\n        }\n        const formio = new Formio_1.Formio(Formio_1.Formio.projectUrl);\n        const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;\n        formio.loadProject().then((project) => {\n            if (project && (lodash_1.default.get(project, 'settings.addConfigToForms', false) || lodash_1.default.get(project, 'addConfigToForms', false))) {\n                const config = project.config || {};\n                this.options.formConfig = config;\n                const pathToFormConfig = 'webform._form.config';\n                const webformConfig = lodash_1.default.get(this, pathToFormConfig);\n                if (this.webform && !webformConfig) {\n                    lodash_1.default.set(this, pathToFormConfig, config);\n                }\n            }\n        }).catch((err) => {\n            console.warn(`Could not load project settings: ${err.message || err}`);\n        });\n        if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {\n            const resourceOptions = this.options.builder && this.options.builder.resource;\n            formio.loadForms(query)\n                .then((resources) => {\n                if (resources.length) {\n                    this.builder.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    this.groups.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    if (!this.groupOrder.includes('resource')) {\n                        this.groupOrder.push('resource');\n                    }\n                    this.addExistingResourceFields(resources);\n                }\n            });\n        }\n        // Notify components if they need to modify their render.\n        this.options.attachMode = 'builder';\n        this.webform = this.webform || this.createForm(this.options);\n        this.pathComponentsMapping = {};\n        this.arrayDataComponentPaths = [];\n        this.nestedDataComponents = [];\n        this.arrayDataComponents = [];\n    }\n    allowDrop() {\n        return true;\n    }\n    addExistingResourceFields(resources) {\n        lodash_1.default.each(resources, (resource, index) => {\n            const resourceKey = `resource-${resource.name}`;\n            const subgroup = {\n                key: resourceKey,\n                title: resource.title,\n                components: [],\n                componentOrder: [],\n                default: index === 0,\n            };\n            (0, formUtils_1.eachComponent)(resource.components, (component) => {\n                if (component.type === 'button')\n                    return;\n                if (this.options &&\n                    this.options.resourceFilter &&\n                    (!component.tags || component.tags.indexOf(this.options.resourceFilter) === -1))\n                    return;\n                let componentName = component.label;\n                if (!componentName && component.key) {\n                    componentName = lodash_1.default.upperFirst(component.key);\n                }\n                subgroup.componentOrder.push(`component-${component.key}`);\n                subgroup.components[`component-${component.key}`] = lodash_1.default.merge((0, utils_1.fastCloneDeep)(Components_1.default.components[component.type]\n                    ? Components_1.default.components[component.type].builderInfo\n                    : Components_1.default.components['unknown'].builderInfo), {\n                    key: component.key,\n                    title: componentName,\n                    group: 'resource',\n                    subgroup: resourceKey,\n                }, {\n                    schema: Object.assign(Object.assign({}, component), { label: component.label, key: component.key, lockKey: true, source: (!this.options.noSource ? resource._id : undefined), isNew: true })\n                });\n            }, true);\n            this.groups.resource.subgroups.push(subgroup);\n        });\n        this.triggerRedraw();\n    }\n    attachTooltip(component, title) {\n        return (0, tippy_js_1.default)(component, {\n            allowHTML: true,\n            trigger: 'mouseenter focus',\n            placement: 'top',\n            delay: [200, 0],\n            zIndex: 10000,\n            content: title\n        });\n    }\n    attachComponent(element, component) {\n        if (component instanceof WebformBuilder) {\n            return;\n        }\n        // Add component to element for later reference.\n        element.formioComponent = component;\n        component.loadRefs(element, {\n            removeComponent: 'single',\n            editComponent: 'single',\n            moveComponent: 'single',\n            copyComponent: 'single',\n            pasteComponent: 'single',\n            editJson: 'single'\n        });\n        if (component.refs.copyComponent) {\n            this.attachTooltip(component.refs.copyComponent, this.t('Copy'));\n            component.addEventListener(component.refs.copyComponent, 'click', () => this.copyComponent(component));\n        }\n        if (component.refs.pasteComponent) {\n            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('Paste below'));\n            component.addEventListener(component.refs.pasteComponent, 'click', () => {\n                pasteToolTip.hide();\n                this.pasteComponent(component);\n            });\n        }\n        if (component.refs.moveComponent) {\n            this.attachTooltip(component.refs.moveComponent, this.t('Move'));\n            if (this.keyboardActionsEnabled) {\n                component.addEventListener(component.refs.moveComponent, 'click', () => {\n                    this.moveComponent(component);\n                });\n            }\n        }\n        const parent = this.getParentElement(element);\n        if (component.refs.editComponent) {\n            this.attachTooltip(component.refs.editComponent, this.t('Edit'));\n            component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, { inDataGrid: component.isInDataGrid }));\n        }\n        if (component.refs.editJson) {\n            this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));\n            component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component));\n        }\n        if (component.refs.removeComponent) {\n            this.attachTooltip(component.refs.removeComponent, this.t('Remove'));\n            component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component, component));\n        }\n        return element;\n    }\n    createForm(options) {\n        this.webform = new Webform_1.default(this.element, options);\n        if (this.element) {\n            this.loadRefs(this.element, {\n                form: 'single'\n            });\n            if (this.refs.form) {\n                this.webform.element = this.refs.form;\n            }\n        }\n        return this.webform;\n    }\n    /**\n     * Called when everything is ready.\n     * @returns {Promise} - Wait for webform to be ready.\n     */\n    get ready() {\n        return this.webform.ready;\n    }\n    get defaultGroups() {\n        return {\n            basic: {\n                title: 'Basic',\n                weight: 0,\n                default: true,\n            },\n            advanced: {\n                title: 'Advanced',\n                weight: 10\n            },\n            layout: {\n                title: 'Layout',\n                weight: 20\n            },\n            data: {\n                title: 'Data',\n                weight: 30\n            },\n            premium: {\n                title: 'Premium',\n                weight: 40\n            }\n        };\n    }\n    redraw() {\n        return Webform_1.default.prototype.redraw.call(this);\n    }\n    get form() {\n        return this.webform.form;\n    }\n    get schema() {\n        return this.webform.schema;\n    }\n    set form(value) {\n        this.setForm(value);\n    }\n    get container() {\n        return this.webform.form.components;\n    }\n    /**\n     * When a component sets its api key, we need to check if it is unique within its namespace. Find the namespace root\n     * so we can calculate this correctly.\n     * @param {import('@formio/core').Component} component - The component to find the namespace root for.\n     * @returns {import('@formio/core').Component[]} - The components root for this namespace.\n     */\n    findNamespaceRoot(component) {\n        const path = (0, utils_1.getArrayFromComponentPath)(component.path);\n        // First get the component with nested parents.\n        let comp = this.webform.getComponent(path);\n        comp = Array.isArray(comp) ? comp[0] : comp;\n        const namespaceKey = this.recurseNamespace(comp);\n        // If there is no key, it is the root form.\n        if (!namespaceKey || this.form.key === namespaceKey) {\n            return this.form.components;\n        }\n        const componentSchema = component.component;\n        // If the current component is the namespace, we don't need to find it again.\n        if (namespaceKey === component.key) {\n            return [...componentSchema.components, componentSchema];\n        }\n        // Get the namespace component so we have the original object.\n        const namespaceComponent = (0, formUtils_1.getComponent)(this.form.components, namespaceKey, true);\n        return namespaceComponent ? namespaceComponent.components : comp.components;\n    }\n    recurseNamespace(component) {\n        // If there is no parent, we are at the root level.\n        if (!component) {\n            return null;\n        }\n        // Some components are their own namespace.\n        if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(component.type) || component.tree || component.arrayTree) {\n            return component.key;\n        }\n        // Anything else, keep going up.\n        return this.recurseNamespace(component.parent);\n    }\n    render() {\n        return this.renderTemplate('builder', {\n            sidebar: this.renderTemplate('builderSidebar', {\n                scrollEnabled: this.sideBarScroll,\n                groupOrder: this.groupOrder,\n                groupId: `builder-sidebar-${this.id}`,\n                groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n                    group: this.groups[groupKey],\n                    groupKey,\n                    groupId: `builder-sidebar-${this.id}`,\n                    subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n                        group,\n                        groupKey: group.key,\n                        groupId: `group-container-${groupKey}`,\n                        subgroups: []\n                    })),\n                    keyboardActionsEnabled: this.keyboardActionsEnabled,\n                })),\n            }),\n            form: this.webform.render(),\n        });\n    }\n    attach(element) {\n        this.on('change', (form) => {\n            this.populateCaptchaSettings(form);\n            this.webform.setAlert(false);\n        });\n        return super.attach(element).then(() => {\n            this.loadRefs(element, {\n                form: 'single',\n                sidebar: 'single',\n                'sidebar-search': 'single',\n                'sidebar-groups': 'single',\n                'container': 'multiple',\n                'sidebar-anchor': 'multiple',\n                'sidebar-group': 'multiple',\n                'sidebar-container': 'multiple',\n                'sidebar-component': 'multiple',\n            });\n            if (this.sideBarScroll && Templates_1.default.current.handleBuilderSidebarScroll) {\n                Templates_1.default.current.handleBuilderSidebarScroll.call(this, this);\n            }\n            // Add the paste status in form\n            if (typeof window !== 'undefined' && window.sessionStorage) {\n                const data = window.sessionStorage.getItem('formio.clipboard');\n                if (data) {\n                    this.addClass(this.refs.form, 'builder-paste-mode');\n                }\n            }\n            if (!(0, utils_1.bootstrapVersion)(this.options)) {\n                const getAttribute = (anchor, attribute) => {\n                    let elem = anchor.getAttribute(`data-${attribute}`);\n                    if (!elem) {\n                        elem = anchor.getAttribute(`data-bs-${attribute}`);\n                    }\n                    return elem;\n                };\n                const hideShow = (group, show) => {\n                    if (show) {\n                        group.classList.add(['show']);\n                        group.style.display = 'inherit';\n                    }\n                    else {\n                        group.classList.remove(['show']);\n                        group.style.display = 'none';\n                    }\n                };\n                // Initialize\n                this.refs['sidebar-group'].forEach((group) => {\n                    hideShow(group, getAttribute(group, 'default') === 'true');\n                });\n                // Click event\n                this.refs['sidebar-anchor'].forEach((anchor, index) => {\n                    this.addEventListener(anchor, 'click', () => {\n                        const clickedParentId = getAttribute(anchor, 'parent').slice('#builder-sidebar-'.length);\n                        const clickedId = getAttribute(anchor, 'target').slice('#group-'.length);\n                        this.refs['sidebar-group'].forEach((group, groupIndex) => {\n                            const openByDefault = getAttribute(group, 'default') === 'true';\n                            const groupId = group.getAttribute('id').slice('group-'.length);\n                            const groupParent = getAttribute(group, 'parent').slice('#builder-sidebar-'.length);\n                            hideShow(group, ((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index));\n                        });\n                    }, true);\n                });\n            }\n            if (this.keyboardActionsEnabled) {\n                this.refs['sidebar-component'].forEach((component) => {\n                    this.addEventListener(component, 'keydown', (event) => {\n                        if (event.keyCode === 13) {\n                            this.addNewComponent(component);\n                        }\n                    });\n                });\n            }\n            this.addEventListener(this.refs['sidebar-search'], 'input', lodash_1.default.debounce((e) => {\n                const searchString = e.target.value;\n                this.searchFields(searchString);\n            }, 300));\n            if (this.dragDropEnabled) {\n                this.initDragula();\n            }\n            const drake = this.dragula;\n            if (this.refs.form) {\n                (0, dom_autoscroller_1.default)([window], {\n                    margin: 20,\n                    maxSpeed: 6,\n                    scrollWhenOutside: true,\n                    autoScroll: function () {\n                        return this.down && (drake === null || drake === void 0 ? void 0 : drake.dragging);\n                    }\n                });\n                return this.webform.attach(this.refs.form);\n            }\n        });\n    }\n    searchFields(searchString = '') {\n        const searchValue = searchString.toLowerCase();\n        const sidebar = this.refs['sidebar'];\n        const sidebarGroups = this.refs['sidebar-groups'];\n        if (!sidebar || !sidebarGroups) {\n            return;\n        }\n        const filterGroupBy = (group, searchValue = '') => {\n            const result = lodash_1.default.toPlainObject(group);\n            const { subgroups = [], components } = result;\n            const filteredComponents = [];\n            for (const key in components) {\n                const isMatchedToTitle = this.t(components[key].title).toLowerCase().match(searchValue);\n                const isMatchedToKey = components[key].key.toLowerCase().match(searchValue);\n                if (isMatchedToTitle || isMatchedToKey) {\n                    filteredComponents.push(components[key]);\n                }\n            }\n            this.orderComponents(result, filteredComponents);\n            if (searchValue) {\n                result.default = true;\n            }\n            if (result.componentOrder.length || subgroups.length) {\n                return result;\n            }\n            return null;\n        };\n        const filterGroupOrder = (groupOrder, searchValue) => {\n            const result = lodash_1.default.cloneDeep(groupOrder);\n            return result.filter(key => filterGroupBy(this.groups[key], searchValue));\n        };\n        const filterSubgroups = (groups, searchValue) => {\n            const result = lodash_1.default.clone(groups);\n            return result\n                .map(subgroup => filterGroupBy(subgroup, searchValue))\n                .filter(subgroup => !lodash_1.default.isNull(subgroup));\n        };\n        const toTemplate = groupKey => {\n            return {\n                group: filterGroupBy(this.groups[groupKey], searchValue),\n                groupKey,\n                groupId: sidebar.id || sidebarGroups.id,\n                subgroups: filterSubgroups(this.groups[groupKey].subgroups, searchValue)\n                    .map((group) => this.renderTemplate('builderSidebarGroup', {\n                    group,\n                    groupKey: group.key,\n                    groupId: `group-container-${groupKey}`,\n                    subgroups: []\n                })),\n            };\n        };\n        sidebarGroups.innerHTML = filterGroupOrder(this.groupOrder, searchValue)\n            .map(groupKey => this.renderTemplate('builderSidebarGroup', toTemplate(groupKey)))\n            .join('');\n        this.loadRefs(this.element, {\n            'sidebar-groups': 'single',\n            'sidebar-anchor': 'multiple',\n            'sidebar-group': 'multiple',\n            'sidebar-container': 'multiple',\n        });\n        this.updateDragAndDrop();\n        if (searchValue === '') {\n            this.triggerRedraw();\n        }\n    }\n    orderComponents(groupInfo, foundComponents) {\n        const components = foundComponents || groupInfo.components;\n        const isResource = groupInfo.key.indexOf('resource-') === 0;\n        if (components) {\n            groupInfo.componentOrder = Object.keys(components)\n                .map(key => components[key])\n                .filter(component => component && !component.ignore && !component.ignoreForForm)\n                .sort((a, b) => a.weight - b.weight)\n                .map(component => isResource ? `component-${component.key}` : component.key);\n        }\n    }\n    updateDragAndDrop() {\n        if (this.dragDropEnabled) {\n            this.initDragula();\n        }\n        if (this.refs.form) {\n            return this.webform.attach(this.refs.form);\n        }\n    }\n    initDragula() {\n        const options = this.options;\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        const containersArray = Array.prototype.slice.call(this.refs['sidebar-container']).filter(item => {\n            return item.id !== 'group-container-resource';\n        });\n        if (!dragula_1.default) {\n            return;\n        }\n        this.dragula = (0, dragula_1.default)(containersArray, {\n            moves(el) {\n                let moves = true;\n                const list = Array.from(el.classList).filter(item => item.indexOf('formio-component-') === 0);\n                list.forEach(item => {\n                    const key = item.slice('formio-component-'.length);\n                    if (options.disabled && options.disabled.includes(key)) {\n                        moves = false;\n                    }\n                });\n                if (el.classList.contains('no-drag')) {\n                    moves = false;\n                }\n                return moves;\n            },\n            copy(el) {\n                return el.classList.contains('drag-copy');\n            },\n            accepts(el, target) {\n                return !el.contains(target) && !target.classList.contains('no-drop');\n            }\n        }).on('drop', (element, target, source, sibling) => this.onDrop(element, target, source, sibling));\n    }\n    detach() {\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        this.dragula = null;\n        if (this.sideBarScroll && Templates_1.default.current.clearBuilderSidebarScroll) {\n            Templates_1.default.current.clearBuilderSidebarScroll.call(this, this);\n        }\n        super.detach();\n    }\n    getComponentInfo(key, group) {\n        let info;\n        // Need to check in first order as resource component key can be the same as from webform default components\n        if (group && group.slice(0, group.indexOf('-')) === 'resource') {\n            // This is an existing resource field.\n            const resourceGroups = this.groups.resource.subgroups;\n            const resourceGroup = lodash_1.default.find(resourceGroups, { key: group });\n            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n            }\n        }\n        // This is a new component\n        else if (this.schemas.hasOwnProperty(key)) {\n            info = (0, utils_1.fastCloneDeep)(this.schemas[key]);\n        }\n        else if (this.groups.hasOwnProperty(group)) {\n            const groupComponents = this.groups[group].components;\n            if (groupComponents.hasOwnProperty(key)) {\n                info = (0, utils_1.fastCloneDeep)(groupComponents[key].schema);\n            }\n        }\n        else if (group === 'searchFields') { //Search components go into this group\n            const resourceGroups = this.groups.resource.subgroups;\n            for (let ix = 0; ix < resourceGroups.length; ix++) {\n                const resourceGroup = resourceGroups[ix];\n                if (resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                    info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n                    break;\n                }\n            }\n        }\n        if (info) {\n            //if this is a custom component that was already assigned a key, don't stomp on it\n            if (!Components_1.default.components.hasOwnProperty(info.type) && info.key) {\n                return info;\n            }\n            info.key = this.generateKey(info);\n        }\n        return info;\n    }\n    getComponentsPath(component, parent) {\n        // Get path to the component in the parent component.\n        let path = 'components';\n        let columnIndex = 0;\n        let tableRowIndex = 0;\n        let tableColumnIndex = 0;\n        let tabIndex = 0;\n        switch (parent.type) {\n            case 'table':\n                tableRowIndex = lodash_1.default.findIndex(parent.rows, row => row.some(column => column.components.some(comp => comp.key === component.key)));\n                tableColumnIndex = lodash_1.default.findIndex(parent.rows[tableRowIndex], (column => column.components.some(comp => comp.key === component.key)));\n                path = `rows[${tableRowIndex}][${tableColumnIndex}].components`;\n                break;\n            case 'columns':\n                columnIndex = lodash_1.default.findIndex(parent.columns, column => column.components.some(comp => comp.key === component.key));\n                path = `columns[${columnIndex}].components`;\n                break;\n            case 'tabs':\n                tabIndex = lodash_1.default.findIndex(parent.components, tab => tab.components.some(comp => comp.key === component.key));\n                path = `components[${tabIndex}].components`;\n                break;\n        }\n        return path;\n    }\n    /* eslint-disable max-statements */\n    onDrop(element, target, source, sibling) {\n        var _a;\n        if (!target) {\n            return;\n        }\n        // If you try to drop within itself.\n        if (element.contains(target)) {\n            return;\n        }\n        const key = element.getAttribute('data-key');\n        const type = element.getAttribute('data-type');\n        const group = element.getAttribute('data-group');\n        let info, isNew, path, index;\n        if (key && group) {\n            // This is a new component.\n            info = this.getComponentInfo(key, group);\n            if (!info && type) {\n                info = this.getComponentInfo(type, group);\n            }\n            isNew = true;\n        }\n        else if (source.formioContainer) {\n            index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n            if (index !== -1) {\n                // Grab and remove the component from the source container.\n                info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                // Since splice returns an array of one object, we need to destructure it.\n                info = info[0];\n            }\n        }\n        // If we haven't found the component, stop.\n        if (!info) {\n            return;\n        }\n        // Show an error if siblings are disabled for a component and such a component already exists.\n        const compKey = (group === 'resource') ? `component-${key}` : key;\n        const draggableComponent = ((_a = this.groups[group]) === null || _a === void 0 ? void 0 : _a.components[compKey]) || {};\n        if (draggableComponent.disableSiblings) {\n            let isCompAlreadyExists = false;\n            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.type === draggableComponent.schema.type) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`);\n                return;\n            }\n        }\n        if (draggableComponent.uniqueComponent) {\n            let isCompAlreadyExists = false;\n            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.key === draggableComponent.schema.key) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);\n                return;\n            }\n        }\n        if (target !== source) {\n            // Ensure the key remains unique in its new container.\n            builder_1.default.uniquify(this.findNamespaceRoot(target.formioComponent), info);\n        }\n        const parent = target.formioComponent;\n        // Insert in the new container.\n        if (target.formioContainer) {\n            if (sibling) {\n                if (!sibling.getAttribute('data-noattach')) {\n                    index = lodash_1.default.findIndex(target.formioContainer, { key: lodash_1.default.get(sibling, 'formioComponent.component.key') });\n                    index = (index === -1) ? 0 : index;\n                }\n                else {\n                    index = sibling.getAttribute('data-position');\n                }\n                if (index !== -1) {\n                    target.formioContainer.splice(index, 0, info);\n                }\n            }\n            else {\n                target.formioContainer.push(info);\n            }\n            path = this.getComponentsPath(info, parent.component);\n            index = lodash_1.default.findIndex(lodash_1.default.get(parent.schema, path), { key: info.key });\n            if (index === -1) {\n                index = 0;\n            }\n        }\n        if (parent && parent.addChildComponent) {\n            parent.addChildComponent(info, element, target, source, sibling);\n        }\n        const componentInDataGrid = parent.type === 'datagrid';\n        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {\n            this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });\n        }\n        // Only rebuild the parts needing to be rebuilt.\n        let rebuild;\n        if (target !== source) {\n            if (source.formioContainer && source.contains(target)) {\n                rebuild = source.formioComponent.rebuild();\n            }\n            else if (target.contains(source)) {\n                rebuild = target.formioComponent.rebuild();\n            }\n            else {\n                if (source.formioContainer) {\n                    rebuild = source.formioComponent.rebuild();\n                }\n                rebuild = target.formioComponent.rebuild();\n            }\n        }\n        else {\n            // If they are the same, only rebuild one.\n            rebuild = target.formioComponent.rebuild();\n        }\n        if (!rebuild) {\n            rebuild = Promise.resolve();\n        }\n        return rebuild.then(() => {\n            this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);\n            if (!isNew || this.options.noNewEdit || info.noNewEdit) {\n                this.emit('change', this.form);\n            }\n        });\n    }\n    setForm(form) {\n        var _a;\n        if (!form.components) {\n            form.components = [];\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        let keyboardActionsEnabled = lodash_1.default.get(this.options, 'keyboardBuilder', false) || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.keyboardBuilder);\n        if (typeof keyboardActionsEnabled === 'string') {\n            keyboardActionsEnabled = keyboardActionsEnabled === 'true';\n        }\n        this.keyboardActionsEnabled = keyboardActionsEnabled;\n        const isShowSubmitButton = !this.options.noDefaultSubmitButton\n            && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));\n        // Ensure there is at least a submit button.\n        if (isShowSubmitButton) {\n            form.components.push({\n                type: 'button',\n                label: 'Submit',\n                key: 'submit',\n                size: 'md',\n                block: false,\n                action: 'submit',\n                disableOnInvalid: true,\n                theme: 'primary'\n            });\n        }\n        if (this.webform) {\n            const shouldRebuild = !this.webform.form.components ||\n                (form.components.length !== this.webform.form.components.length);\n            return this.webform.setForm(form, { keepAsReference: true }).then(() => {\n                if (this.refs.form) {\n                    this.builderHeight = this.refs.form.offsetHeight;\n                }\n                if (!shouldRebuild) {\n                    return this.form;\n                }\n                return this.rebuild().then(() => this.form);\n            });\n        }\n        return Promise.resolve(form);\n    }\n    populateCaptchaSettings(form) {\n        //populate isEnabled for captcha form settings\n        let isCaptchaEnabled = false;\n        if (this.form.components) {\n            (0, formUtils_1.eachComponent)(form.components, component => {\n                if (isCaptchaEnabled) {\n                    return;\n                }\n                if (component.type === 'captcha') {\n                    isCaptchaEnabled = true;\n                    return false;\n                }\n            });\n            if (isCaptchaEnabled) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', true);\n            }\n            else if (lodash_1.default.get(form, 'settings.captcha.isEnabled')) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', false);\n            }\n        }\n    }\n    removeComponent(component, parent, original, componentInstance) {\n        if (!parent) {\n            return;\n        }\n        let remove = true;\n        const removingComponentsGroup = !component.skipRemoveConfirm &&\n            ((Array.isArray(component.components) && component.components.length) ||\n                (Array.isArray(component.rows) && component.rows.length) ||\n                (Array.isArray(component.columns) && component.columns.length));\n        if (this.options.alwaysConfirmComponentRemoval || removingComponentsGroup) {\n            const message = removingComponentsGroup ? 'Removing this component will also remove all of its children. Are you sure you want to do this?'\n                : 'Are you sure you want to remove this component?';\n            remove = window.confirm(this.t(message));\n        }\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parent.formioContainer ? parent.formioContainer.indexOf(original) : 0;\n        if (remove && index !== -1) {\n            const path = this.getComponentsPath(component, parent.formioComponent.component);\n            if (parent.formioContainer) {\n                parent.formioContainer.splice(index, 1);\n            }\n            else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {\n                parent.formioComponent.removeChildComponent(component);\n            }\n            if (component.input && componentInstance && parent.formioComponent) {\n                const parentDefaultValue = lodash_1.default.get(parent.formioComponent, 'component.defaultValue', null);\n                if (Array.isArray(parentDefaultValue)) {\n                    parentDefaultValue.forEach(v => lodash_1.default.unset(v, componentInstance.key));\n                }\n                else if (typeof parentDefaultValue === 'object') {\n                    lodash_1.default.unset(parentDefaultValue, componentInstance.key);\n                }\n            }\n            const rebuild = parent.formioComponent.rebuild() || Promise.resolve();\n            rebuild.then(() => {\n                this.emit('removeComponent', component, parent.formioComponent.schema, path, index);\n                this.emit('change', this.form);\n            });\n        }\n        return remove;\n    }\n    replaceDoubleQuotes(data, fieldsToRemoveDoubleQuotes = []) {\n        if (data) {\n            fieldsToRemoveDoubleQuotes.forEach((key) => {\n                if (data[key]) {\n                    data[key] = data[key].replace(/\"/g, \"'\");\n                }\n            });\n            return data;\n        }\n    }\n    updateComponent(component, changed) {\n        const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') || lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');\n        // Update the preview.\n        if (this.preview) {\n            this.preview.form = {\n                components: [lodash_1.default.omit(Object.assign({}, component), [\n                        'hidden',\n                        'conditional',\n                        'calculateValue',\n                        'logic',\n                        'autofocus',\n                        'customConditional',\n                    ])],\n                config: this.options.formConfig || {},\n                sanitizeConfig,\n            };\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));\n            const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"preview\"]`);\n            if (previewElement) {\n                this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);\n                this.preview.attach(previewElement);\n            }\n        }\n        // Change the \"default value\" field to be reflective of this component.\n        const defaultValueComponent = (0, formUtils_1.getComponent)(this.editForm.components, 'defaultValue', true);\n        if (defaultValueComponent && component.type !== 'hidden') {\n            const defaultChanged = changed && ((changed.component && changed.component.key === 'defaultValue')\n                || (changed.instance && defaultValueComponent.hasComponent && defaultValueComponent.hasComponent(changed.instance)));\n            if (!defaultChanged) {\n                lodash_1.default.assign(defaultValueComponent.component, lodash_1.default.omit(Object.assign({}, component), [\n                    'key',\n                    'label',\n                    'labelPosition',\n                    'labelMargin',\n                    'labelWidth',\n                    'placeholder',\n                    'tooltip',\n                    'hidden',\n                    'autofocus',\n                    'validate',\n                    'disabled',\n                    'defaultValue',\n                    'customDefaultValue',\n                    'calculateValue',\n                    'conditional',\n                    'customConditional',\n                    'id',\n                    'fields.day.required',\n                    'fields.month.required',\n                    'fields.year.required',\n                ]));\n                const parentComponent = defaultValueComponent.parent;\n                let tabIndex = -1;\n                let index = -1;\n                parentComponent.tabs.some((tab, tIndex) => {\n                    tab.some((comp, compIndex) => {\n                        if (comp.id === defaultValueComponent.id) {\n                            tabIndex = tIndex;\n                            index = compIndex;\n                            return true;\n                        }\n                        return false;\n                    });\n                });\n                if (tabIndex !== -1 && index !== -1 && changed && !lodash_1.default.isNil(changed.value)) {\n                    const sibling = parentComponent.tabs[tabIndex][index + 1];\n                    parentComponent.removeComponent(defaultValueComponent);\n                    const newComp = parentComponent.addComponent(defaultValueComponent.component, defaultValueComponent.data, sibling);\n                    lodash_1.default.pull(newComp.validators, 'required');\n                    parentComponent.tabs[tabIndex].splice(index, 1, newComp);\n                    newComp.checkValidity = () => true;\n                    newComp.build(defaultValueComponent.element);\n                }\n            }\n            else {\n                let dataPath = changed.instance._data.key;\n                const path = (0, utils_1.getArrayFromComponentPath)(changed.instance.path);\n                path.shift();\n                if (path.length) {\n                    path.unshift(component.key);\n                    dataPath = (0, utils_1.getStringFromComponentPath)(path);\n                }\n                lodash_1.default.set(this.preview._data, dataPath, changed.value);\n                lodash_1.default.set(this.webform._data, dataPath, changed.value);\n            }\n        }\n        // Called when we update a component.\n        this.emit('updateComponent', component);\n    }\n    findRepeatablePaths() {\n        const repeatablePaths = [];\n        const keys = new Map();\n        (0, formUtils_1.eachComponent)(this.form.components, (comp, path) => {\n            if (!comp.key) {\n                return;\n            }\n            if (keys.has(comp.key)) {\n                if (keys.get(comp.key).includes(path)) {\n                    repeatablePaths.push(path);\n                }\n                else {\n                    keys.set(comp.key, [...keys.get(comp.key), path]);\n                }\n            }\n            else {\n                keys.set(comp.key, [path]);\n            }\n        }, true);\n        return repeatablePaths;\n    }\n    highlightInvalidComponents() {\n        const repeatablePaths = this.findRepeatablePaths();\n        let hasInvalidComponents = false;\n        this.webform.everyComponent((comp) => {\n            const path = comp.path;\n            if (repeatablePaths.includes(path)) {\n                comp.setCustomValidity(this.t('apiKey', { key: comp.key }));\n                hasInvalidComponents = true;\n            }\n        });\n        this.emit('builderFormValidityChange', hasInvalidComponents);\n    }\n    /**\n     * Called when a new component is saved.\n     * @param {Component} component - The component instance to save.\n     * @param {Component} parent - The parent component.\n     * @param {boolean} isNew - If this is a new component.\n     * @param {Component} original - The original component.\n     * @returns {boolean} - If the component was saved.\n     */\n    saveComponent(component, parent, isNew, original) {\n        this.editForm.detach();\n        const parentContainer = parent ? parent.formioContainer : this.container;\n        const parentComponent = parent ? parent.formioComponent : this;\n        this.dialog.close();\n        const path = parentContainer ? this.getComponentsPath(component, parentComponent.component) : '';\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parentContainer ? parentContainer.indexOf(original) : 0;\n        if (index !== -1) {\n            let submissionData = this.editForm.submission.data;\n            submissionData = submissionData.componentJson || submissionData;\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);\n            this.hook('beforeSaveComponentSettings', submissionData);\n            let comp = null;\n            parentComponent.getComponents().forEach((component) => {\n                if (component.component.key === original.key) {\n                    comp = component;\n                }\n            });\n            const originalComp = comp === null || comp === void 0 ? void 0 : comp.component;\n            const originalComponentSchema = comp === null || comp === void 0 ? void 0 : comp.schema;\n            const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n            if (parentContainer && !isParentSaveChildMethod) {\n                parentContainer[index] = submissionData;\n                if (comp) {\n                    comp.component = submissionData;\n                }\n            }\n            else if (isParentSaveChildMethod) {\n                parent.formioComponent.saveChildComponent(submissionData);\n            }\n            const rebuild = parentComponent.rebuild() || Promise.resolve();\n            return rebuild.then(() => {\n                const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);\n                this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);\n                this.emit('change', this.form);\n                this.highlightInvalidComponents();\n                if (this.isComponentCreated) {\n                    const component = parent.formioComponent.components[0];\n                    this.moveComponent(component);\n                    this.isComponentCreated = false;\n                }\n            });\n        }\n        this.highlightInvalidComponents();\n        return Promise.resolve();\n    }\n    emitSaveComponentEvent(schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema) {\n        this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);\n    }\n    attachEditComponentControls(component, parent, isNew, original, ComponentClass) {\n        const cancelButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"cancelButton\"]`);\n        cancelButtons.forEach((cancelButton) => {\n            this.editForm.addEventListener(cancelButton, 'click', (event) => {\n                event.preventDefault();\n                this.editForm.detach();\n                this.emit('cancelComponent', component);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const removeButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"removeButton\"]`);\n        removeButtons.forEach((removeButton) => {\n            this.editForm.addEventListener(removeButton, 'click', (event) => {\n                event.preventDefault();\n                // Since we are already removing the component, don't trigger another remove.\n                this.saved = true;\n                this.editForm.detach();\n                this.removeComponent(component, parent, original);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const saveButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"saveButton\"]`);\n        saveButtons.forEach((saveButton) => {\n            this.editForm.addEventListener(saveButton, 'click', (event) => {\n                event.preventDefault();\n                const errors = this.editForm.validate(this.editForm.data, {\n                    dirty: true\n                });\n                if (errors.length) {\n                    this.editForm.setPristine(false);\n                    this.editForm.showErrors(errors);\n                    return false;\n                }\n                this.saved = true;\n                this.saveComponent(component, parent, isNew, original);\n            });\n        });\n        const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"previewButton\"]`);\n        previewButtons.forEach((previewButton) => {\n            this.editForm.addEventListener(previewButton, 'click', (event) => {\n                var _a;\n                event.preventDefault();\n                this.showPreview = !this.showPreview;\n                this.editForm.detach();\n                this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n                    componentInfo: ComponentClass.builderInfo,\n                    editForm: this.editForm.render(),\n                    preview: this.preview ? this.preview.render() : false,\n                    showPreview: this.showPreview,\n                    helplinks: this.helplinks,\n                }));\n                this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n                this.updateComponent((_a = this.editForm.submission.data) !== null && _a !== void 0 ? _a : component);\n                this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n            });\n        });\n    }\n    editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {\n        var _a, _b;\n        if (!component.key) {\n            return;\n        }\n        this.saved = false;\n        const componentCopy = (0, utils_1.fastCloneDeep)(component);\n        let ComponentClass = Components_1.default.components[componentCopy.type];\n        const isCustom = ComponentClass === undefined;\n        isJsonEdit = isJsonEdit || isCustom;\n        ComponentClass = isCustom ? Components_1.default.components.unknown : ComponentClass;\n        // Make sure we only have one dialog open at a time.\n        if (this.dialog) {\n            this.dialog.close();\n            this.highlightInvalidComponents();\n        }\n        // This is the render step.\n        const editFormOptions = lodash_1.default.clone(lodash_1.default.get(this, 'options.editForm', {}));\n        if (this.editForm) {\n            this.editForm.destroy();\n        }\n        // Allow editForm overrides per component.\n        const overrides = lodash_1.default.get(this.options, `editForm.${componentCopy.type}`, {});\n        // Pass along the form being edited.\n        editFormOptions.editForm = this.form;\n        editFormOptions.editComponent = component;\n        editFormOptions.flags = flags;\n        this.hook('editComponentParentInstance', editFormOptions, parent);\n        this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit'])), { language: this.options.language }), editFormOptions), { evalContext: Object.assign(Object.assign({}, ((editFormOptions === null || editFormOptions === void 0 ? void 0 : editFormOptions.evalContext) || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.evalContext) || {})), { buildingForm: this.form }) }));\n        this.hook('editFormProperties', parent);\n        this.editForm.form = (isJsonEdit && !isCustom) ? {\n            components: [\n                {\n                    type: 'textarea',\n                    as: 'json',\n                    editor: 'ace',\n                    weight: 10,\n                    input: true,\n                    key: 'componentJson',\n                    label: 'Component JSON',\n                    tooltip: 'Edit the JSON for this component.'\n                },\n                {\n                    type: 'checkbox',\n                    key: 'showFullSchema',\n                    label: 'Full Schema'\n                }\n            ]\n        } : ComponentClass.editForm(lodash_1.default.cloneDeep(overrides));\n        const instanceOptions = {\n            inFormBuilder: true,\n        };\n        this.hook('instanceOptionsPreview', instanceOptions);\n        const instance = new ComponentClass(componentCopy, instanceOptions);\n        const schema = this.hook('builderComponentSchema', component, instance);\n        this.editForm.submission = isJsonEdit ? {\n            data: {\n                componentJson: schema,\n                showFullSchema: this.options.showFullJsonSchema\n            },\n        } : {\n            data: instance.component,\n        };\n        if (this.preview) {\n            this.preview.destroy();\n        }\n        if (!ComponentClass.builderInfo.hasOwnProperty('preview') || ComponentClass.builderInfo.preview) {\n            this.preview = new Webform_1.default(lodash_1.default.omit(Object.assign(Object.assign({}, this.options), { preview: true }), [\n                'hooks',\n                'builder',\n                'events',\n                'attachMode',\n                'calculateValue'\n            ]));\n            this.hook('previewFormSettitngs', schema, isJsonEdit);\n        }\n        this.showPreview = (_b = ComponentClass.builderInfo.showPreview) !== null && _b !== void 0 ? _b : true;\n        this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });\n        this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n            componentInfo: ComponentClass.builderInfo,\n            editForm: this.editForm.render(),\n            preview: this.preview ? this.preview.render() : false,\n            showPreview: this.showPreview,\n            helplinks: this.helplinks\n        }));\n        this.dialog = this.createModal(this.componentEdit, lodash_1.default.get(this.options, 'dialogAttr', {}));\n        // This is the attach step.\n        this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n        this.hook('editFormWrapper');\n        this.updateComponent(componentCopy);\n        this.editForm.on('change', (event) => {\n            if (event.changed) {\n                if (event.changed.component && event.changed.component.key === 'showFullSchema') {\n                    const { value } = event.changed;\n                    this.editForm.submission = {\n                        data: {\n                            componentJson: value ? instance.component : component,\n                            showFullSchema: value\n                        },\n                    };\n                    return;\n                }\n                // See if this is a manually modified key. Treat custom component keys as manually modified\n                if ((event.changed.component && (event.changed.component.key === 'key')) || isJsonEdit) {\n                    componentCopy.keyModified = true;\n                }\n                let isComponentLabelChanged = false;\n                if (event.changed.instance) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.instance.path);\n                }\n                else if (event.changed.component) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.component.key);\n                }\n                if (isComponentLabelChanged) {\n                    // Ensure this component has a key.\n                    if (isNew) {\n                        if (!event.data.keyModified) {\n                            this.editForm.everyComponent(component => {\n                                if (component.key === 'key' && component.parent.component.key === 'tabs') {\n                                    component.setValue(this.updateComponentKey(event.data));\n                                    return false;\n                                }\n                            });\n                        }\n                        if (this.form) {\n                            let formComponents = this.findNamespaceRoot(parent.formioComponent);\n                            // excluding component which key uniqueness is to be checked to prevent the comparing of the same keys\n                            formComponents = formComponents.filter(comp => editFormOptions.editComponent.id !== comp.id);\n                            // Set a unique key for this component.\n                            builder_1.default.uniquify(formComponents, event.data);\n                        }\n                    }\n                }\n                // If the edit form has any nested form inside, we get a partial data (nested form's data) in the\n                // event.data property\n                let editFormData;\n                if (event.changed.instance && event.changed.instance.root && event.changed.instance.root.id !== this.editForm.id) {\n                    editFormData = this.editForm.data;\n                }\n                // Update the component.\n                this.updateComponent(event.data.componentJson || editFormData || event.data, event.changed);\n            }\n        });\n        this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n        const dialogClose = () => {\n            this.editForm.destroy(true);\n            if (this.preview) {\n                this.preview.destroy(true);\n                this.preview = null;\n            }\n            if (isNew && !this.saved) {\n                this.removeComponent(component, parent, original);\n                this.highlightInvalidComponents();\n            }\n            // Clean up.\n            this.removeEventListener(this.dialog, 'close', dialogClose);\n            this.dialog = null;\n        };\n        this.addEventListener(this.dialog, 'close', dialogClose);\n        // Called when we edit a component.\n        this.emit('editComponent', component);\n    }\n    updateComponentKey(data) {\n        return lodash_1.default.camelCase(data.title ||\n            data.label ||\n            data.placeholder ||\n            data.type).replace(/^[0-9]*/, '');\n    }\n    moveComponent(component) {\n        var _a;\n        if (this.selectedComponent) {\n            const prevSelected = this.selectedComponent;\n            (_a = prevSelected.element) === null || _a === void 0 ? void 0 : _a.classList.remove('builder-component-selected');\n            this.removeEventListener(document, 'keydown');\n        }\n        component.element.focus();\n        component.element.classList.add('builder-component-selected');\n        this.selectedComponent = component;\n        this.addEventListener(document, 'keydown', this.moveHandler.bind(this));\n    }\n    updateComponentPlacement(direction) {\n        const component = this.selectedComponent;\n        let index, info;\n        const step = direction ? -1 : 1;\n        if (component) {\n            const element = component.element;\n            const sibling = direction ? element.previousElementSibling : element.nextElementSibling;\n            const source = element.parentNode;\n            const containerLength = source.formioContainer.length;\n            if (containerLength && containerLength <= 1) {\n                return;\n            }\n            if (source.formioContainer) {\n                index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n                if (index !== -1) {\n                    info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                    info = info[0];\n                    source.removeChild(element);\n                }\n            }\n            const len = source.formioComponent.components.length;\n            index = (index === -1) ? 0 : index + step;\n            if (index === -1) {\n                source.formioContainer.push(info);\n                source.appendChild(element);\n            }\n            else if (index === len) {\n                const key = source.formioContainer[0].key;\n                index = lodash_1.default.findIndex(source.formioComponent.components, { key: key });\n                const firstElement = source.formioComponent.components[index].element;\n                source.formioContainer.splice(0, 0, info);\n                source.insertBefore(element, firstElement);\n            }\n            else if (index !== -1) {\n                source.formioContainer.splice(index, 0, info);\n                direction\n                    ? source.insertBefore(element, sibling)\n                    : source.insertBefore(element, sibling.nextElementSibling);\n            }\n            element.focus();\n        }\n    }\n    stopMoving(comp) {\n        const parent = comp.element.parentNode;\n        this.removeEventListener(document, 'keydown');\n        parent.formioComponent.rebuild();\n        this.selectedComponent = null;\n    }\n    addNewComponent(element) {\n        var _a;\n        const source = document.querySelector('.formio-builder-form');\n        const key = element.getAttribute('data-key');\n        const group = element.getAttribute('data-group');\n        const isNew = true;\n        let info;\n        if (key && group) {\n            info = this.getComponentInfo(key, group);\n        }\n        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {\n            builder_1.default.uniquify(this.findNamespaceRoot(source.formioComponent), info);\n            this.editComponent(info, source, isNew, null, null);\n        }\n        const firstComponent = (_a = source.formioComponent.components[0]) === null || _a === void 0 ? void 0 : _a.element;\n        if (firstComponent) {\n            source.formioContainer.splice(0, 0, info);\n        }\n        else {\n            source.formioContainer.push(info);\n        }\n        source.formioComponent.rebuild().then(() => {\n            this.isComponentCreated = true;\n        });\n    }\n    /**\n     * Creates copy of component schema and stores it under sessionStorage.\n     * @param {Component} component - The component to copy.\n     * @returns {void}\n     */\n    copyComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.addClass(this.refs.form, 'builder-paste-mode');\n        window.sessionStorage.setItem('formio.clipboard', JSON.stringify(component.schema));\n    }\n    /**\n     * Paste copied component after the current component.\n     * @param {Component} component - The component to paste after.\n     * @returns {void}\n     */\n    pasteComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.removeClass(this.refs.form, 'builder-paste-mode');\n        if (window.sessionStorage) {\n            const data = window.sessionStorage.getItem('formio.clipboard');\n            if (data) {\n                const schema = JSON.parse(data);\n                const parent = this.getParentElement(component.element);\n                if (parent) {\n                    builder_1.default.uniquify(this.findNamespaceRoot(parent.formioComponent), schema);\n                    let path = '';\n                    let index = 0;\n                    const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n                    if (parent.formioContainer && !isParentSaveChildMethod) {\n                        index = parent.formioContainer.indexOf(component.component);\n                        path = this.getComponentsPath(schema, parent.formioComponent.component);\n                        parent.formioContainer.splice(index + 1, 0, schema);\n                    }\n                    else if (isParentSaveChildMethod) {\n                        parent.formioComponent.saveChildComponent(schema, false);\n                    }\n                    parent.formioComponent.rebuild();\n                    this.emitSaveComponentEvent(schema, schema, parent.formioComponent.component, path, (index + 1), true, schema);\n                }\n                this.emit('change', this.form);\n            }\n        }\n    }\n    isParentSaveChildMethod(parentComp) {\n        return !!(parentComp && parentComp.saveChildComponent);\n    }\n    getParentElement(element) {\n        let container = element;\n        do {\n            container = container.parentNode;\n        } while (container && !container.formioComponent);\n        return container;\n    }\n    addBuilderComponentInfo(component) {\n        if (!component || !component.group || !this.groups[component.group]) {\n            return;\n        }\n        component = lodash_1.default.clone(component);\n        const groupInfo = this.groups[component.group];\n        if (!groupInfo.components.hasOwnProperty(component.key)) {\n            groupInfo.components[component.key] = component;\n        }\n        return component;\n    }\n    init() {\n        if (this.webform) {\n            this.webform.init();\n        }\n        return super.init();\n    }\n    clear() {\n        if (this.webform.initialized) {\n            this.webform.clear();\n        }\n    }\n    destroy(all = false) {\n        if (this.webform.initialized) {\n            this.webform.destroy(all);\n        }\n        super.destroy(all);\n    }\n    addBuilderGroup(name, group) {\n        if (!this.groups[name]) {\n            this.groups[name] = group;\n            this.groupOrder.push(name);\n            this.triggerRedraw();\n        }\n        else {\n            this.updateBuilderGroup(name, group);\n        }\n    }\n    updateBuilderGroup(name, group) {\n        if (this.groups[name]) {\n            this.groups[name] = group;\n            this.triggerRedraw();\n        }\n    }\n    generateKey(info) {\n        return info.key || lodash_1.default.camelCase(info.title ||\n            info.label ||\n            info.placeholder ||\n            info.type);\n    }\n}\nexports[\"default\"] = WebformBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/WebformBuilder.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ./components/_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst builder_1 = __importDefault(__webpack_require__(/*! ./utils/builder */ \"./lib/cjs/utils/builder.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst dom_autoscroller_1 = __importDefault(__webpack_require__(/*! dom-autoscroller */ \"./node_modules/dom-autoscroller/dist/bundle.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ./templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\n__webpack_require__(/*! ./components/builder */ \"./lib/cjs/components/builder.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\nclass WebformBuilder extends Component_1.default {\n    // eslint-disable-next-line max-statements\n    constructor() {\n        let element, options;\n        if (arguments[0] instanceof HTMLElement || arguments[1]) {\n            element = arguments[0];\n            options = arguments[1];\n        }\n        else {\n            options = arguments[0];\n        }\n        // Reset skipInit in case PDFBuilder has set it.\n        options.skipInit = false;\n        options.display = options.display || 'form';\n        super(null, options);\n        this.moveHandler = (e) => {\n            if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {\n                e.stopPropagation();\n                e.preventDefault();\n            }\n            if (e.keyCode === 38) {\n                this.updateComponentPlacement(true);\n            }\n            if (e.keyCode === 40) {\n                this.updateComponentPlacement(false);\n            }\n            if (e.keyCode === 13) {\n                this.stopMoving(this.selectedComponent);\n            }\n        };\n        this.setElement(element);\n        this.dragulaLib = dragula_1.default;\n        this.builderHeight = 0;\n        this.schemas = {};\n        this.repeatablePaths = [];\n        this.sideBarScroll = lodash_1.default.get(this.options, 'sideBarScroll', true);\n        this.sideBarScrollOffset = lodash_1.default.get(this.options, 'sideBarScrollOffset', 0);\n        this.dragDropEnabled = true;\n        // Setup the builder options.\n        this.builder = lodash_1.default.defaultsDeep({}, this.options.builder, this.defaultGroups);\n        // Turn off if explicitely said to do so...\n        lodash_1.default.each(this.defaultGroups, (config, key) => {\n            if (config === false) {\n                this.builder[key] = false;\n            }\n        });\n        // Add the groups.////\n        this.groups = {};\n        this.groupOrder = [];\n        for (const group in this.builder) {\n            if (this.builder[group]) {\n                this.builder[group].key = group;\n                this.groups[group] = this.builder[group];\n                this.groups[group].components = this.groups[group].components || {};\n                this.groups[group].componentOrder = this.groups[group].componentOrder || [];\n                this.groups[group].subgroups = Object.keys(this.groups[group].groups || {}).map((groupKey) => {\n                    this.groups[group].groups[groupKey].componentOrder = Object.keys(this.groups[group].groups[groupKey].components).map((key) => key);\n                    return this.groups[group].groups[groupKey];\n                });\n                this.groupOrder.push(this.groups[group]);\n            }\n        }\n        this.groupOrder = this.groupOrder\n            .filter(group => group && !group.ignore)\n            .sort((a, b) => a.weight - b.weight)\n            .map(group => group.key);\n        for (const type in Components_1.default.components) {\n            const component = Components_1.default.components[type];\n            if (component.builderInfo && component.builderInfo.schema) {\n                this.schemas[type] = component.builderInfo.schema;\n                component.type = type;\n                const builderInfo = component.builderInfo;\n                builderInfo.key = component.type;\n                this.addBuilderComponentInfo(builderInfo);\n            }\n        }\n        // Filter out any extra components.\n        // Add the components in each group.\n        for (const group in this.groups) {\n            const info = this.groups[group];\n            for (const key in info.components) {\n                const compKey = group === 'resource' ? `component-${key}` : key;\n                let comp = info.components[compKey];\n                if (comp === true &&\n                    Components_1.default.components[key] &&\n                    Components_1.default.components[key].builderInfo) {\n                    comp = Components_1.default.components[key].builderInfo;\n                }\n                if (comp && comp.schema) {\n                    this.schemas[key] = comp.schema;\n                    info.components[compKey] = comp;\n                    info.components[compKey].key = key;\n                }\n                else {\n                    // Do not include this component in the components array.\n                    delete info.components[compKey];\n                }\n            }\n            // Order the components.\n            this.orderComponents(info);\n        }\n        this.options.hooks = this.options.hooks || {};\n        this.options.hooks.renderComponent = (html, { component, self }) => {\n            var _a, _b;\n            if (self.type === 'form' && !self.key) {\n                const template = this.hook('renderComponentFormTemplate', html.replace('formio-component-form', ''));\n                // The main webform shouldn't have this class as it adds extra styles.\n                return template;\n            }\n            if (this.options.disabled && this.options.disabled.includes(self.key) || self.parent.noDragDrop) {\n                return html;\n            }\n            return this.renderTemplate('builderComponent', {\n                html,\n                disableBuilderActions: (_a = self === null || self === void 0 ? void 0 : self.component) === null || _a === void 0 ? void 0 : _a.disableBuilderActions,\n                childComponent: component,\n                design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design\n            });\n        };\n        this.options.hooks.renderComponents = (html, { components, self }) => {\n            // if Datagrid and already has a component, don't make it droppable.\n            if (self.type === 'datagrid' && components.length > 0 || self.noDragDrop) {\n                return html;\n            }\n            if (!components ||\n                (!components.length && !components.nodrop) ||\n                (self.type === 'form' && components.length <= 1 && (components.length === 0 || components[0].type === 'button'))) {\n                html = this.renderTemplate('builderPlaceholder', {\n                    position: 0\n                }) + html;\n            }\n            return this.renderTemplate('builderComponents', {\n                key: self.key,\n                type: self.type,\n                html,\n            });\n        };\n        this.options.hooks.renderInput = (html, { self }) => {\n            if (self.type === 'hidden') {\n                return html + self.name;\n            }\n            return html;\n        };\n        this.options.hooks.renderLoading = (html, { self }) => {\n            if (self.type === 'form' && self.key) {\n                return self.name;\n            }\n            return html;\n        };\n        this.options.hooks.attachComponents = (element, components, container, component) => {\n            // Don't attach if no element was found or component doesn't participate in drag'n'drop.\n            if (!element) {\n                return;\n            }\n            if (component.noDragDrop) {\n                return element;\n            }\n            // Attach container and component to element for later reference.\n            const containerElement = element.querySelector(`[${this._referenceAttributeName}=\"${component.component.key}-container\"]`) || element;\n            containerElement.formioContainer = container;\n            containerElement.formioComponent = component;\n            // Add container to draggable list.\n            if (this.dragula && this.allowDrop(element)) {\n                this.dragula.containers.push(containerElement);\n            }\n            // If this is an existing datagrid element, don't make it draggable.\n            if ((component.type === 'datagrid' || component.type === 'datamap') && components.length > 0) {\n                return element;\n            }\n            // Since we added a wrapper, need to return the original element so that we can find the components inside it.\n            return element.children[0];\n        };\n        this.options.hooks.attachDatagrid = (element, component) => {\n            component.loadRefs(element, {\n                [`${component.key}-container`]: 'single',\n            });\n            const dataGridContainer = component.refs[`${component.key}-container`];\n            if (dataGridContainer) {\n                component.attachComponents(dataGridContainer.parentNode, [], component.component.components);\n            }\n            // Need to set up horizontal rearrangement of fields.\n        };\n        this.options.hooks.attachComponent = this.attachComponent.bind(this);\n        // Load resources tagged as 'builder'\n        const query = {\n            params: {\n                type: 'resource',\n                limit: 1000000,\n                select: '_id,title,name,components'\n            }\n        };\n        if (this.options && this.options.resourceTag) {\n            query.params.tags = [this.options.resourceTag];\n        }\n        else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {\n            query.params.tags = ['builder'];\n        }\n        const formio = new Formio_1.Formio(Formio_1.Formio.projectUrl);\n        const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;\n        formio.loadProject().then((project) => {\n            if (project && (lodash_1.default.get(project, 'settings.addConfigToForms', false) || lodash_1.default.get(project, 'addConfigToForms', false))) {\n                const config = project.config || {};\n                this.options.formConfig = config;\n                const pathToFormConfig = 'webform._form.config';\n                const webformConfig = lodash_1.default.get(this, pathToFormConfig);\n                if (this.webform && !webformConfig) {\n                    lodash_1.default.set(this, pathToFormConfig, config);\n                }\n            }\n        }).catch((err) => {\n            console.warn(`Could not load project settings: ${err.message || err}`);\n        });\n        if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {\n            const resourceOptions = this.options.builder && this.options.builder.resource;\n            formio.loadForms(query)\n                .then((resources) => {\n                if (resources.length) {\n                    this.builder.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    this.groups.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    if (!this.groupOrder.includes('resource')) {\n                        this.groupOrder.push('resource');\n                    }\n                    this.addExistingResourceFields(resources);\n                }\n            });\n        }\n        // Notify components if they need to modify their render.\n        this.options.attachMode = 'builder';\n        this.webform = this.webform || this.createForm(this.options);\n        this.pathComponentsMapping = {};\n        this.arrayDataComponentPaths = [];\n        this.nestedDataComponents = [];\n        this.arrayDataComponents = [];\n    }\n    allowDrop() {\n        return true;\n    }\n    addExistingResourceFields(resources) {\n        lodash_1.default.each(resources, (resource, index) => {\n            const resourceKey = `resource-${resource.name}`;\n            const subgroup = {\n                key: resourceKey,\n                title: resource.title,\n                components: [],\n                componentOrder: [],\n                default: index === 0,\n            };\n            (0, formUtils_1.eachComponent)(resource.components, (component) => {\n                if (component.type === 'button')\n                    return;\n                if (this.options &&\n                    this.options.resourceFilter &&\n                    (!component.tags || component.tags.indexOf(this.options.resourceFilter) === -1))\n                    return;\n                let componentName = component.label;\n                if (!componentName && component.key) {\n                    componentName = lodash_1.default.upperFirst(component.key);\n                }\n                subgroup.componentOrder.push(`component-${component.key}`);\n                subgroup.components[`component-${component.key}`] = lodash_1.default.merge((0, utils_1.fastCloneDeep)(Components_1.default.components[component.type]\n                    ? Components_1.default.components[component.type].builderInfo\n                    : Components_1.default.components['unknown'].builderInfo), {\n                    key: component.key,\n                    title: componentName,\n                    group: 'resource',\n                    subgroup: resourceKey,\n                }, {\n                    schema: Object.assign(Object.assign({}, component), { label: component.label, key: component.key, lockKey: true, source: (!this.options.noSource ? resource._id : undefined), isNew: true })\n                });\n            }, true);\n            this.groups.resource.subgroups.push(subgroup);\n        });\n        this.triggerRedraw();\n    }\n    attachTooltip(component, title) {\n        return (0, tippy_js_1.default)(component, {\n            allowHTML: true,\n            trigger: 'mouseenter focus',\n            placement: 'top',\n            delay: [200, 0],\n            zIndex: 10000,\n            content: title\n        });\n    }\n    attachComponent(element, component) {\n        if (component instanceof WebformBuilder) {\n            return;\n        }\n        // Add component to element for later reference.\n        element.formioComponent = component;\n        component.loadRefs(element, {\n            removeComponent: 'single',\n            editComponent: 'single',\n            moveComponent: 'single',\n            copyComponent: 'single',\n            pasteComponent: 'single',\n            editJson: 'single'\n        });\n        if (component.refs.copyComponent) {\n            this.attachTooltip(component.refs.copyComponent, this.t('Copy'));\n            component.addEventListener(component.refs.copyComponent, 'click', () => this.copyComponent(component));\n        }\n        if (component.refs.pasteComponent) {\n            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('Paste below'));\n            component.addEventListener(component.refs.pasteComponent, 'click', () => {\n                pasteToolTip.hide();\n                this.pasteComponent(component);\n            });\n        }\n        if (component.refs.moveComponent) {\n            this.attachTooltip(component.refs.moveComponent, this.t('Move'));\n            if (this.keyboardActionsEnabled) {\n                component.addEventListener(component.refs.moveComponent, 'click', () => {\n                    this.moveComponent(component);\n                });\n            }\n        }\n        const parent = this.getParentElement(element);\n        if (component.refs.editComponent) {\n            this.attachTooltip(component.refs.editComponent, this.t('Edit'));\n            component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, { inDataGrid: component.isInDataGrid }));\n        }\n        if (component.refs.editJson) {\n            this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));\n            component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component));\n        }\n        if (component.refs.removeComponent) {\n            this.attachTooltip(component.refs.removeComponent, this.t('Remove'));\n            component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component, component));\n        }\n        return element;\n    }\n    createForm(options) {\n        this.webform = new Webform_1.default(this.element, options);\n        if (this.element) {\n            this.loadRefs(this.element, {\n                form: 'single'\n            });\n            if (this.refs.form) {\n                this.webform.element = this.refs.form;\n            }\n        }\n        return this.webform;\n    }\n    /**\n     * Called when everything is ready.\n     * @returns {Promise} - Wait for webform to be ready.\n     */\n    get ready() {\n        return this.webform.ready;\n    }\n    get defaultGroups() {\n        return {\n            basic: {\n                title: 'Basic',\n                weight: 0,\n                default: true,\n            },\n            advanced: {\n                title: 'Advanced',\n                weight: 10\n            },\n            layout: {\n                title: 'Layout',\n                weight: 20\n            },\n            data: {\n                title: 'Data',\n                weight: 30\n            },\n            premium: {\n                title: 'Premium',\n                weight: 40\n            }\n        };\n    }\n    redraw() {\n        return Webform_1.default.prototype.redraw.call(this);\n    }\n    get form() {\n        return this.webform.form;\n    }\n    get schema() {\n        return this.webform.schema;\n    }\n    set form(value) {\n        this.setForm(value);\n    }\n    get container() {\n        return this.webform.form.components;\n    }\n    /**\n     * When a component sets its api key, we need to check if it is unique within its namespace. Find the namespace root\n     * so we can calculate this correctly.\n     * @param {import('@formio/core').Component} component - The component to find the namespace root for.\n     * @returns {import('@formio/core').Component[]} - The components root for this namespace.\n     */\n    findNamespaceRoot(component) {\n        const path = (0, utils_1.getArrayFromComponentPath)(component.path);\n        // First get the component with nested parents.\n        let comp = this.webform.getComponent(path);\n        comp = Array.isArray(comp) ? comp[0] : comp;\n        const namespaceKey = this.recurseNamespace(comp);\n        // If there is no key, it is the root form.\n        if (!namespaceKey || this.form.key === namespaceKey) {\n            return this.form.components;\n        }\n        const componentSchema = component.component;\n        // If the current component is the namespace, we don't need to find it again.\n        if (namespaceKey === component.key) {\n            return [...componentSchema.components, componentSchema];\n        }\n        // Get the namespace component so we have the original object.\n        const namespaceComponent = (0, formUtils_1.getComponent)(this.form.components, namespaceKey, true);\n        return namespaceComponent ? namespaceComponent.components : comp.components;\n    }\n    recurseNamespace(component) {\n        // If there is no parent, we are at the root level.\n        if (!component) {\n            return null;\n        }\n        // Some components are their own namespace.\n        if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(component.type) || component.tree || component.arrayTree) {\n            return component.key;\n        }\n        // Anything else, keep going up.\n        return this.recurseNamespace(component.parent);\n    }\n    render() {\n        return this.renderTemplate('builder', {\n            sidebar: this.renderTemplate('builderSidebar', {\n                scrollEnabled: this.sideBarScroll,\n                groupOrder: this.groupOrder,\n                groupId: `builder-sidebar-${this.id}`,\n                groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n                    group: this.groups[groupKey],\n                    groupKey,\n                    groupId: `builder-sidebar-${this.id}`,\n                    subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n                        group,\n                        groupKey: group.key,\n                        groupId: `group-container-${groupKey}`,\n                        subgroups: []\n                    })),\n                    keyboardActionsEnabled: this.keyboardActionsEnabled,\n                })),\n            }),\n            form: this.webform.render(),\n        });\n    }\n    attach(element) {\n        this.on('change', (form) => {\n            this.populateCaptchaSettings(form);\n            this.webform.setAlert(false);\n        });\n        return super.attach(element).then(() => {\n            this.loadRefs(element, {\n                form: 'single',\n                sidebar: 'single',\n                'sidebar-search': 'single',\n                'sidebar-groups': 'single',\n                'container': 'multiple',\n                'sidebar-anchor': 'multiple',\n                'sidebar-group': 'multiple',\n                'sidebar-container': 'multiple',\n                'sidebar-component': 'multiple',\n            });\n            if (this.sideBarScroll && Templates_1.default.current.handleBuilderSidebarScroll) {\n                Templates_1.default.current.handleBuilderSidebarScroll.call(this, this);\n            }\n            // Add the paste status in form\n            if (typeof window !== 'undefined' && window.sessionStorage) {\n                const data = window.sessionStorage.getItem('formio.clipboard');\n                if (data) {\n                    this.addClass(this.refs.form, 'builder-paste-mode');\n                }\n            }\n            if (!(0, utils_1.bootstrapVersion)(this.options)) {\n                const getAttribute = (anchor, attribute) => {\n                    let elem = anchor.getAttribute(`data-${attribute}`);\n                    if (!elem) {\n                        elem = anchor.getAttribute(`data-bs-${attribute}`);\n                    }\n                    return elem;\n                };\n                const hideShow = (group, show) => {\n                    if (show) {\n                        group.classList.add(['show']);\n                        group.style.display = 'inherit';\n                    }\n                    else {\n                        group.classList.remove(['show']);\n                        group.style.display = 'none';\n                    }\n                };\n                // Initialize\n                this.refs['sidebar-group'].forEach((group) => {\n                    hideShow(group, getAttribute(group, 'default') === 'true');\n                });\n                // Click event\n                this.refs['sidebar-anchor'].forEach((anchor, index) => {\n                    this.addEventListener(anchor, 'click', () => {\n                        const clickedParentId = getAttribute(anchor, 'parent').slice('#builder-sidebar-'.length);\n                        const clickedId = getAttribute(anchor, 'target').slice('#group-'.length);\n                        this.refs['sidebar-group'].forEach((group, groupIndex) => {\n                            const openByDefault = getAttribute(group, 'default') === 'true';\n                            const groupId = group.getAttribute('id').slice('group-'.length);\n                            const groupParent = getAttribute(group, 'parent').slice('#builder-sidebar-'.length);\n                            hideShow(group, ((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index));\n                        });\n                    }, true);\n                });\n            }\n            if (this.keyboardActionsEnabled) {\n                this.refs['sidebar-component'].forEach((component) => {\n                    this.addEventListener(component, 'keydown', (event) => {\n                        if (event.keyCode === 13) {\n                            this.addNewComponent(component);\n                        }\n                    });\n                });\n            }\n            this.addEventListener(this.refs['sidebar-search'], 'input', lodash_1.default.debounce((e) => {\n                const searchString = e.target.value;\n                this.searchFields(searchString);\n            }, 300));\n            if (this.dragDropEnabled) {\n                this.initDragula();\n            }\n            const drake = this.dragula;\n            if (this.refs.form) {\n                (0, dom_autoscroller_1.default)([window], {\n                    margin: 20,\n                    maxSpeed: 6,\n                    scrollWhenOutside: true,\n                    autoScroll: function () {\n                        return this.down && (drake === null || drake === void 0 ? void 0 : drake.dragging);\n                    }\n                });\n                return this.webform.attach(this.refs.form);\n            }\n        });\n    }\n    searchFields(searchString = '') {\n        const searchValue = searchString.toLowerCase();\n        const sidebar = this.refs['sidebar'];\n        const sidebarGroups = this.refs['sidebar-groups'];\n        if (!sidebar || !sidebarGroups) {\n            return;\n        }\n        const filterGroupBy = (group, searchValue = '') => {\n            const result = lodash_1.default.toPlainObject(group);\n            const { subgroups = [], components } = result;\n            const filteredComponents = [];\n            for (const key in components) {\n                const isMatchedToTitle = this.t(components[key].title).toLowerCase().match(searchValue);\n                const isMatchedToKey = components[key].key.toLowerCase().match(searchValue);\n                if (isMatchedToTitle || isMatchedToKey) {\n                    filteredComponents.push(components[key]);\n                }\n            }\n            this.orderComponents(result, filteredComponents);\n            if (searchValue) {\n                result.default = true;\n            }\n            if (result.componentOrder.length || subgroups.length) {\n                return result;\n            }\n            return null;\n        };\n        const filterGroupOrder = (groupOrder, searchValue) => {\n            const result = lodash_1.default.cloneDeep(groupOrder);\n            return result.filter(key => filterGroupBy(this.groups[key], searchValue));\n        };\n        const filterSubgroups = (groups, searchValue) => {\n            const result = lodash_1.default.clone(groups);\n            return result\n                .map(subgroup => filterGroupBy(subgroup, searchValue))\n                .filter(subgroup => !lodash_1.default.isNull(subgroup));\n        };\n        const toTemplate = groupKey => {\n            return {\n                group: filterGroupBy(this.groups[groupKey], searchValue),\n                groupKey,\n                groupId: sidebar.id || sidebarGroups.id,\n                subgroups: filterSubgroups(this.groups[groupKey].subgroups, searchValue)\n                    .map((group) => this.renderTemplate('builderSidebarGroup', {\n                    group,\n                    groupKey: group.key,\n                    groupId: `group-container-${groupKey}`,\n                    subgroups: []\n                })),\n            };\n        };\n        sidebarGroups.innerHTML = filterGroupOrder(this.groupOrder, searchValue)\n            .map(groupKey => this.renderTemplate('builderSidebarGroup', toTemplate(groupKey)))\n            .join('');\n        this.loadRefs(this.element, {\n            'sidebar-groups': 'single',\n            'sidebar-anchor': 'multiple',\n            'sidebar-group': 'multiple',\n            'sidebar-container': 'multiple',\n        });\n        this.updateDragAndDrop();\n        if (searchValue === '') {\n            this.triggerRedraw();\n        }\n    }\n    orderComponents(groupInfo, foundComponents) {\n        const components = foundComponents || groupInfo.components;\n        const isResource = groupInfo.key.indexOf('resource-') === 0;\n        if (components) {\n            groupInfo.componentOrder = Object.keys(components)\n                .map(key => components[key])\n                .filter(component => component && !component.ignore && !component.ignoreForForm)\n                .sort((a, b) => a.weight - b.weight)\n                .map(component => isResource ? `component-${component.key}` : component.key);\n        }\n    }\n    updateDragAndDrop() {\n        if (this.dragDropEnabled) {\n            this.initDragula();\n        }\n        if (this.refs.form) {\n            return this.webform.attach(this.refs.form);\n        }\n    }\n    initDragula() {\n        const options = this.options;\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        const containersArray = Array.prototype.slice.call(this.refs['sidebar-container']).filter(item => {\n            return item.id !== 'group-container-resource';\n        });\n        if (!dragula_1.default) {\n            return;\n        }\n        this.dragula = (0, dragula_1.default)(containersArray, {\n            moves(el) {\n                let moves = true;\n                const list = Array.from(el.classList).filter(item => item.indexOf('formio-component-') === 0);\n                list.forEach(item => {\n                    const key = item.slice('formio-component-'.length);\n                    if (options.disabled && options.disabled.includes(key)) {\n                        moves = false;\n                    }\n                });\n                if (el.classList.contains('no-drag')) {\n                    moves = false;\n                }\n                return moves;\n            },\n            copy(el) {\n                return el.classList.contains('drag-copy');\n            },\n            accepts(el, target) {\n                return !el.contains(target) && !target.classList.contains('no-drop');\n            }\n        }).on('drop', (element, target, source, sibling) => this.onDrop(element, target, source, sibling));\n    }\n    detach() {\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        this.dragula = null;\n        if (this.sideBarScroll && Templates_1.default.current.clearBuilderSidebarScroll) {\n            Templates_1.default.current.clearBuilderSidebarScroll.call(this, this);\n        }\n        super.detach();\n    }\n    getComponentInfo(key, group) {\n        let info;\n        // Need to check in first order as resource component key can be the same as from webform default components\n        if (group && group.slice(0, group.indexOf('-')) === 'resource') {\n            // This is an existing resource field.\n            const resourceGroups = this.groups.resource.subgroups;\n            const resourceGroup = lodash_1.default.find(resourceGroups, { key: group });\n            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n            }\n        }\n        // This is a new component\n        else if (this.schemas.hasOwnProperty(key)) {\n            info = (0, utils_1.fastCloneDeep)(this.schemas[key]);\n        }\n        else if (this.groups.hasOwnProperty(group)) {\n            const groupComponents = this.groups[group].components;\n            if (groupComponents.hasOwnProperty(key)) {\n                info = (0, utils_1.fastCloneDeep)(groupComponents[key].schema);\n            }\n        }\n        else if (group === 'searchFields') { //Search components go into this group\n            const resourceGroups = this.groups.resource.subgroups;\n            for (let ix = 0; ix < resourceGroups.length; ix++) {\n                const resourceGroup = resourceGroups[ix];\n                if (resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                    info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n                    break;\n                }\n            }\n        }\n        if (info) {\n            //if this is a custom component that was already assigned a key, don't stomp on it\n            if (!Components_1.default.components.hasOwnProperty(info.type) && info.key) {\n                return info;\n            }\n            info.key = this.generateKey(info);\n        }\n        return info;\n    }\n    getComponentsPath(component, parent) {\n        // Get path to the component in the parent component.\n        let path = 'components';\n        let columnIndex = 0;\n        let tableRowIndex = 0;\n        let tableColumnIndex = 0;\n        let tabIndex = 0;\n        switch (parent.type) {\n            case 'table':\n                tableRowIndex = lodash_1.default.findIndex(parent.rows, row => row.some(column => column.components.some(comp => comp.key === component.key)));\n                tableColumnIndex = lodash_1.default.findIndex(parent.rows[tableRowIndex], (column => column.components.some(comp => comp.key === component.key)));\n                path = `rows[${tableRowIndex}][${tableColumnIndex}].components`;\n                break;\n            case 'columns':\n                columnIndex = lodash_1.default.findIndex(parent.columns, column => column.components.some(comp => comp.key === component.key));\n                path = `columns[${columnIndex}].components`;\n                break;\n            case 'tabs':\n                tabIndex = lodash_1.default.findIndex(parent.components, tab => tab.components.some(comp => comp.key === component.key));\n                path = `components[${tabIndex}].components`;\n                break;\n        }\n        return path;\n    }\n    /* eslint-disable max-statements */\n    onDrop(element, target, source, sibling) {\n        var _a;\n        if (!target) {\n            return;\n        }\n        // If you try to drop within itself.\n        if (element.contains(target)) {\n            return;\n        }\n        const key = element.getAttribute('data-key');\n        const type = element.getAttribute('data-type');\n        const group = element.getAttribute('data-group');\n        let info, isNew, path, index;\n        if (key && group) {\n            // This is a new component.\n            info = this.getComponentInfo(key, group);\n            if (!info && type) {\n                info = this.getComponentInfo(type, group);\n            }\n            isNew = true;\n        }\n        else if (source.formioContainer) {\n            index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n            if (index !== -1) {\n                // Grab and remove the component from the source container.\n                info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                // Since splice returns an array of one object, we need to destructure it.\n                info = info[0];\n            }\n        }\n        // If we haven't found the component, stop.\n        if (!info) {\n            return;\n        }\n        // Show an error if siblings are disabled for a component and such a component already exists.\n        const compKey = (group === 'resource') ? `component-${key}` : key;\n        const draggableComponent = ((_a = this.groups[group]) === null || _a === void 0 ? void 0 : _a.components[compKey]) || {};\n        if (draggableComponent.disableSiblings) {\n            let isCompAlreadyExists = false;\n            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.type === draggableComponent.schema.type) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`);\n                return;\n            }\n        }\n        if (draggableComponent.uniqueComponent) {\n            let isCompAlreadyExists = false;\n            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.key === draggableComponent.schema.key) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);\n                return;\n            }\n        }\n        if (target !== source) {\n            // Ensure the key remains unique in its new container.\n            builder_1.default.uniquify(this.findNamespaceRoot(target.formioComponent), info);\n        }\n        const parent = target.formioComponent;\n        // Insert in the new container.\n        if (target.formioContainer) {\n            if (sibling) {\n                if (!sibling.getAttribute('data-noattach')) {\n                    index = lodash_1.default.findIndex(target.formioContainer, { key: lodash_1.default.get(sibling, 'formioComponent.component.key') });\n                    index = (index === -1) ? 0 : index;\n                }\n                else {\n                    index = sibling.getAttribute('data-position');\n                }\n                if (index !== -1) {\n                    target.formioContainer.splice(index, 0, info);\n                }\n            }\n            else {\n                target.formioContainer.push(info);\n            }\n            path = this.getComponentsPath(info, parent.component);\n            index = lodash_1.default.findIndex(lodash_1.default.get(parent.schema, path), { key: info.key });\n            if (index === -1) {\n                index = 0;\n            }\n        }\n        if (parent && parent.addChildComponent) {\n            parent.addChildComponent(info, element, target, source, sibling);\n        }\n        const componentInDataGrid = parent.type === 'datagrid';\n        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {\n            this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });\n        }\n        // Only rebuild the parts needing to be rebuilt.\n        let rebuild;\n        if (target !== source) {\n            if (source.formioContainer && source.contains(target)) {\n                rebuild = source.formioComponent.rebuild();\n            }\n            else if (target.contains(source)) {\n                rebuild = target.formioComponent.rebuild();\n            }\n            else {\n                if (source.formioContainer) {\n                    rebuild = source.formioComponent.rebuild();\n                }\n                rebuild = target.formioComponent.rebuild();\n            }\n        }\n        else {\n            // If they are the same, only rebuild one.\n            rebuild = target.formioComponent.rebuild();\n        }\n        if (!rebuild) {\n            rebuild = Promise.resolve();\n        }\n        return rebuild.then(() => {\n            this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);\n            if (!isNew || this.options.noNewEdit || info.noNewEdit) {\n                this.emit('change', this.form);\n            }\n        });\n    }\n    setForm(form) {\n        var _a;\n        if (!form.components) {\n            form.components = [];\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        let keyboardActionsEnabled = lodash_1.default.get(this.options, 'keyboardBuilder', false) || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.keyboardBuilder);\n        if (typeof keyboardActionsEnabled === 'string') {\n            keyboardActionsEnabled = keyboardActionsEnabled === 'true';\n        }\n        this.keyboardActionsEnabled = keyboardActionsEnabled;\n        const isSubmitButton = (comp) => {\n            return (comp.type === 'button') && ((comp.action === 'submit') || !comp.action);\n        };\n        const isShowSubmitButton = !this.options.noDefaultSubmitButton\n            && (!form.components.length || !form.components.find(comp => isSubmitButton(comp)));\n        // Ensure there is at least a submit button.\n        if (isShowSubmitButton) {\n            form.components.push({\n                type: 'button',\n                label: 'Submit',\n                key: 'submit',\n                size: 'md',\n                block: false,\n                action: 'submit',\n                disableOnInvalid: true,\n                theme: 'primary'\n            });\n        }\n        if (this.webform) {\n            const shouldRebuild = !this.webform.form.components ||\n                (form.components.length !== this.webform.form.components.length);\n            return this.webform.setForm(form, { keepAsReference: true }).then(() => {\n                if (this.refs.form) {\n                    this.builderHeight = this.refs.form.offsetHeight;\n                }\n                if (!shouldRebuild) {\n                    return this.form;\n                }\n                return this.rebuild().then(() => this.form);\n            });\n        }\n        return Promise.resolve(form);\n    }\n    populateCaptchaSettings(form) {\n        //populate isEnabled for captcha form settings\n        let isCaptchaEnabled = false;\n        if (this.form.components) {\n            (0, formUtils_1.eachComponent)(form.components, component => {\n                if (isCaptchaEnabled) {\n                    return;\n                }\n                if (component.type === 'captcha') {\n                    isCaptchaEnabled = true;\n                    return false;\n                }\n            });\n            if (isCaptchaEnabled) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', true);\n            }\n            else if (lodash_1.default.get(form, 'settings.captcha.isEnabled')) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', false);\n            }\n        }\n    }\n    removeComponent(component, parent, original, componentInstance) {\n        if (!parent) {\n            return;\n        }\n        let remove = true;\n        const removingComponentsGroup = !component.skipRemoveConfirm &&\n            ((Array.isArray(component.components) && component.components.length) ||\n                (Array.isArray(component.rows) && component.rows.length) ||\n                (Array.isArray(component.columns) && component.columns.length));\n        if (this.options.alwaysConfirmComponentRemoval || removingComponentsGroup) {\n            const message = removingComponentsGroup ? 'Removing this component will also remove all of its children. Are you sure you want to do this?'\n                : 'Are you sure you want to remove this component?';\n            remove = window.confirm(this.t(message));\n        }\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parent.formioContainer ? parent.formioContainer.indexOf(original) : 0;\n        if (remove && index !== -1) {\n            const path = this.getComponentsPath(component, parent.formioComponent.component);\n            if (parent.formioContainer) {\n                parent.formioContainer.splice(index, 1);\n            }\n            else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {\n                parent.formioComponent.removeChildComponent(component);\n            }\n            if (component.input && componentInstance && parent.formioComponent) {\n                const parentDefaultValue = lodash_1.default.get(parent.formioComponent, 'component.defaultValue', null);\n                if (Array.isArray(parentDefaultValue)) {\n                    parentDefaultValue.forEach(v => lodash_1.default.unset(v, componentInstance.key));\n                }\n                else if (typeof parentDefaultValue === 'object') {\n                    lodash_1.default.unset(parentDefaultValue, componentInstance.key);\n                }\n            }\n            const rebuild = parent.formioComponent.rebuild() || Promise.resolve();\n            rebuild.then(() => {\n                this.emit('removeComponent', component, parent.formioComponent.schema, path, index);\n                this.emit('change', this.form);\n            });\n        }\n        return remove;\n    }\n    replaceDoubleQuotes(data, fieldsToRemoveDoubleQuotes = []) {\n        if (data) {\n            fieldsToRemoveDoubleQuotes.forEach((key) => {\n                if (data[key]) {\n                    data[key] = data[key].replace(/\"/g, \"'\");\n                }\n            });\n            return data;\n        }\n    }\n    updateComponent(component, changed) {\n        const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') || lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');\n        // Update the preview.\n        if (this.preview) {\n            this.preview.form = {\n                components: [lodash_1.default.omit(Object.assign({}, component), [\n                        'hidden',\n                        'conditional',\n                        'calculateValue',\n                        'logic',\n                        'autofocus',\n                        'customConditional',\n                    ])],\n                config: this.options.formConfig || {},\n                sanitizeConfig,\n            };\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));\n            const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"preview\"]`);\n            if (previewElement) {\n                this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);\n                this.preview.attach(previewElement);\n            }\n        }\n        // Change the \"default value\" field to be reflective of this component.\n        const defaultValueComponent = (0, formUtils_1.getComponent)(this.editForm.components, 'defaultValue', true);\n        if (defaultValueComponent && component.type !== 'hidden') {\n            const defaultChanged = changed && ((changed.component && changed.component.key === 'defaultValue')\n                || (changed.instance && defaultValueComponent.hasComponent && defaultValueComponent.hasComponent(changed.instance)));\n            if (!defaultChanged) {\n                lodash_1.default.assign(defaultValueComponent.component, lodash_1.default.omit(Object.assign({}, component), [\n                    'key',\n                    'label',\n                    'labelPosition',\n                    'labelMargin',\n                    'labelWidth',\n                    'placeholder',\n                    'tooltip',\n                    'hidden',\n                    'autofocus',\n                    'validate',\n                    'disabled',\n                    'defaultValue',\n                    'customDefaultValue',\n                    'calculateValue',\n                    'conditional',\n                    'customConditional',\n                    'id',\n                    'fields.day.required',\n                    'fields.month.required',\n                    'fields.year.required',\n                ]));\n                const parentComponent = defaultValueComponent.parent;\n                let tabIndex = -1;\n                let index = -1;\n                parentComponent.tabs.some((tab, tIndex) => {\n                    tab.some((comp, compIndex) => {\n                        if (comp.id === defaultValueComponent.id) {\n                            tabIndex = tIndex;\n                            index = compIndex;\n                            return true;\n                        }\n                        return false;\n                    });\n                });\n                if (tabIndex !== -1 && index !== -1 && changed && !lodash_1.default.isNil(changed.value)) {\n                    const sibling = parentComponent.tabs[tabIndex][index + 1];\n                    parentComponent.removeComponent(defaultValueComponent);\n                    const newComp = parentComponent.addComponent(defaultValueComponent.component, defaultValueComponent.data, sibling);\n                    lodash_1.default.pull(newComp.validators, 'required');\n                    parentComponent.tabs[tabIndex].splice(index, 1, newComp);\n                    newComp.checkValidity = () => true;\n                    newComp.build(defaultValueComponent.element);\n                }\n            }\n            else {\n                let dataPath = changed.instance._data.key;\n                const path = (0, utils_1.getArrayFromComponentPath)(changed.instance.path);\n                path.shift();\n                if (path.length) {\n                    path.unshift(component.key);\n                    dataPath = (0, utils_1.getStringFromComponentPath)(path);\n                }\n                lodash_1.default.set(this.preview._data, dataPath, changed.value);\n                lodash_1.default.set(this.webform._data, dataPath, changed.value);\n            }\n        }\n        // Called when we update a component.\n        this.emit('updateComponent', component);\n    }\n    findRepeatablePaths() {\n        const repeatablePaths = [];\n        const keys = new Map();\n        (0, formUtils_1.eachComponent)(this.form.components, (comp, path) => {\n            if (!comp.key) {\n                return;\n            }\n            if (keys.has(comp.key)) {\n                if (keys.get(comp.key).includes(path)) {\n                    repeatablePaths.push(path);\n                }\n                else {\n                    keys.set(comp.key, [...keys.get(comp.key), path]);\n                }\n            }\n            else {\n                keys.set(comp.key, [path]);\n            }\n        }, true);\n        return repeatablePaths;\n    }\n    highlightInvalidComponents() {\n        const repeatablePaths = this.findRepeatablePaths();\n        let hasInvalidComponents = false;\n        this.webform.everyComponent((comp) => {\n            const path = comp.path;\n            if (repeatablePaths.includes(path)) {\n                comp.setCustomValidity(this.t('apiKey', { key: comp.key }));\n                hasInvalidComponents = true;\n            }\n        });\n        this.emit('builderFormValidityChange', hasInvalidComponents);\n    }\n    /**\n     * Called when a new component is saved.\n     * @param {Component} component - The component instance to save.\n     * @param {Component} parent - The parent component.\n     * @param {boolean} isNew - If this is a new component.\n     * @param {Component} original - The original component.\n     * @returns {boolean} - If the component was saved.\n     */\n    saveComponent(component, parent, isNew, original) {\n        this.editForm.detach();\n        const parentContainer = parent ? parent.formioContainer : this.container;\n        const parentComponent = parent ? parent.formioComponent : this;\n        this.dialog.close();\n        const path = parentContainer ? this.getComponentsPath(component, parentComponent.component) : '';\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parentContainer ? parentContainer.indexOf(original) : 0;\n        if (index !== -1) {\n            let submissionData = this.editForm.submission.data;\n            submissionData = submissionData.componentJson || submissionData;\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);\n            this.hook('beforeSaveComponentSettings', submissionData);\n            let comp = null;\n            parentComponent.getComponents().forEach((component) => {\n                if (component.component.key === original.key) {\n                    comp = component;\n                }\n            });\n            const originalComp = comp === null || comp === void 0 ? void 0 : comp.component;\n            const originalComponentSchema = comp === null || comp === void 0 ? void 0 : comp.schema;\n            const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n            if (parentContainer && !isParentSaveChildMethod) {\n                parentContainer[index] = submissionData;\n                if (comp) {\n                    comp.component = submissionData;\n                }\n            }\n            else if (isParentSaveChildMethod) {\n                parent.formioComponent.saveChildComponent(submissionData);\n            }\n            const rebuild = parentComponent.rebuild() || Promise.resolve();\n            return rebuild.then(() => {\n                const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);\n                this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);\n                this.emit('change', this.form);\n                this.highlightInvalidComponents();\n                if (this.isComponentCreated) {\n                    const component = parent.formioComponent.components[0];\n                    this.moveComponent(component);\n                    this.isComponentCreated = false;\n                }\n            });\n        }\n        this.highlightInvalidComponents();\n        return Promise.resolve();\n    }\n    emitSaveComponentEvent(schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema) {\n        this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);\n    }\n    attachEditComponentControls(component, parent, isNew, original, ComponentClass) {\n        const cancelButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"cancelButton\"]`);\n        cancelButtons.forEach((cancelButton) => {\n            this.editForm.addEventListener(cancelButton, 'click', (event) => {\n                event.preventDefault();\n                this.editForm.detach();\n                this.emit('cancelComponent', component);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const removeButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"removeButton\"]`);\n        removeButtons.forEach((removeButton) => {\n            this.editForm.addEventListener(removeButton, 'click', (event) => {\n                event.preventDefault();\n                // Since we are already removing the component, don't trigger another remove.\n                this.saved = true;\n                this.editForm.detach();\n                this.removeComponent(component, parent, original);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const saveButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"saveButton\"]`);\n        saveButtons.forEach((saveButton) => {\n            this.editForm.addEventListener(saveButton, 'click', (event) => {\n                event.preventDefault();\n                const errors = this.editForm.validate(this.editForm.data, {\n                    dirty: true\n                });\n                if (errors.length) {\n                    this.editForm.setPristine(false);\n                    this.editForm.showErrors(errors);\n                    return false;\n                }\n                this.saved = true;\n                this.saveComponent(component, parent, isNew, original);\n            });\n        });\n        const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"previewButton\"]`);\n        previewButtons.forEach((previewButton) => {\n            this.editForm.addEventListener(previewButton, 'click', (event) => {\n                var _a;\n                event.preventDefault();\n                this.showPreview = !this.showPreview;\n                this.editForm.detach();\n                this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n                    componentInfo: ComponentClass.builderInfo,\n                    editForm: this.editForm.render(),\n                    preview: this.preview ? this.preview.render() : false,\n                    showPreview: this.showPreview,\n                    helplinks: this.helplinks,\n                }));\n                this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n                this.updateComponent((_a = this.editForm.submission.data) !== null && _a !== void 0 ? _a : component);\n                this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n            });\n        });\n    }\n    editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {\n        var _a, _b;\n        if (!component.key) {\n            return;\n        }\n        this.saved = false;\n        const componentCopy = (0, utils_1.fastCloneDeep)(component);\n        let ComponentClass = Components_1.default.components[componentCopy.type];\n        const isCustom = ComponentClass === undefined;\n        isJsonEdit = isJsonEdit || isCustom;\n        ComponentClass = isCustom ? Components_1.default.components.unknown : ComponentClass;\n        // Make sure we only have one dialog open at a time.\n        if (this.dialog) {\n            this.dialog.close();\n            this.highlightInvalidComponents();\n        }\n        // This is the render step.\n        const editFormOptions = lodash_1.default.clone(lodash_1.default.get(this, 'options.editForm', {}));\n        if (this.editForm) {\n            this.editForm.destroy();\n        }\n        // Allow editForm overrides per component.\n        const overrides = lodash_1.default.get(this.options, `editForm.${componentCopy.type}`, {});\n        // Pass along the form being edited.\n        editFormOptions.editForm = this.form;\n        editFormOptions.editComponent = component;\n        editFormOptions.flags = flags;\n        this.hook('editComponentParentInstance', editFormOptions, parent);\n        this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit'])), { language: this.options.language }), editFormOptions), { evalContext: Object.assign(Object.assign({}, ((editFormOptions === null || editFormOptions === void 0 ? void 0 : editFormOptions.evalContext) || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.evalContext) || {})), { buildingForm: this.form }) }));\n        this.hook('editFormProperties', parent);\n        this.editForm.form = (isJsonEdit && !isCustom) ? {\n            components: [\n                {\n                    type: 'textarea',\n                    as: 'json',\n                    editor: 'ace',\n                    weight: 10,\n                    input: true,\n                    key: 'componentJson',\n                    label: 'Component JSON',\n                    tooltip: 'Edit the JSON for this component.'\n                },\n                {\n                    type: 'checkbox',\n                    key: 'showFullSchema',\n                    label: 'Full Schema'\n                }\n            ]\n        } : ComponentClass.editForm(lodash_1.default.cloneDeep(overrides));\n        const instanceOptions = {\n            inFormBuilder: true,\n        };\n        this.hook('instanceOptionsPreview', instanceOptions);\n        const instance = new ComponentClass(componentCopy, instanceOptions);\n        const schema = this.hook('builderComponentSchema', component, instance);\n        this.editForm.submission = isJsonEdit ? {\n            data: {\n                componentJson: schema,\n                showFullSchema: this.options.showFullJsonSchema\n            },\n        } : {\n            data: instance.component,\n        };\n        if (this.preview) {\n            this.preview.destroy();\n        }\n        if (!ComponentClass.builderInfo.hasOwnProperty('preview') || ComponentClass.builderInfo.preview) {\n            this.preview = new Webform_1.default(lodash_1.default.omit(Object.assign(Object.assign({}, this.options), { preview: true }), [\n                'hooks',\n                'builder',\n                'events',\n                'attachMode',\n                'calculateValue'\n            ]));\n            this.hook('previewFormSettitngs', schema, isJsonEdit);\n        }\n        this.showPreview = (_b = ComponentClass.builderInfo.showPreview) !== null && _b !== void 0 ? _b : true;\n        this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });\n        this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n            componentInfo: ComponentClass.builderInfo,\n            editForm: this.editForm.render(),\n            preview: this.preview ? this.preview.render() : false,\n            showPreview: this.showPreview,\n            helplinks: this.helplinks\n        }));\n        this.dialog = this.createModal(this.componentEdit, lodash_1.default.get(this.options, 'dialogAttr', {}));\n        // This is the attach step.\n        this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n        this.hook('editFormWrapper');\n        this.updateComponent(componentCopy);\n        this.editForm.on('change', (event) => {\n            if (event.changed) {\n                if (event.changed.component && event.changed.component.key === 'showFullSchema') {\n                    const { value } = event.changed;\n                    this.editForm.submission = {\n                        data: {\n                            componentJson: value ? instance.component : component,\n                            showFullSchema: value\n                        },\n                    };\n                    return;\n                }\n                // See if this is a manually modified key. Treat custom component keys as manually modified\n                if ((event.changed.component && (event.changed.component.key === 'key')) || isJsonEdit) {\n                    componentCopy.keyModified = true;\n                }\n                let isComponentLabelChanged = false;\n                if (event.changed.instance) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.instance.path);\n                }\n                else if (event.changed.component) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.component.key);\n                }\n                if (isComponentLabelChanged) {\n                    // Ensure this component has a key.\n                    if (isNew) {\n                        if (!event.data.keyModified) {\n                            this.editForm.everyComponent(component => {\n                                if (component.key === 'key' && component.parent.component.key === 'tabs') {\n                                    component.setValue(this.updateComponentKey(event.data));\n                                    return false;\n                                }\n                            });\n                        }\n                        if (this.form) {\n                            let formComponents = this.findNamespaceRoot(parent.formioComponent);\n                            // excluding component which key uniqueness is to be checked to prevent the comparing of the same keys\n                            formComponents = formComponents.filter(comp => editFormOptions.editComponent.id !== comp.id);\n                            // Set a unique key for this component.\n                            builder_1.default.uniquify(formComponents, event.data);\n                        }\n                    }\n                }\n                // If the edit form has any nested form inside, we get a partial data (nested form's data) in the\n                // event.data property\n                let editFormData;\n                if (event.changed.instance && event.changed.instance.root && event.changed.instance.root.id !== this.editForm.id) {\n                    editFormData = this.editForm.data;\n                }\n                // Update the component.\n                this.updateComponent(event.data.componentJson || editFormData || event.data, event.changed);\n            }\n        });\n        this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n        const dialogClose = () => {\n            this.editForm.destroy(true);\n            if (this.preview) {\n                this.preview.destroy(true);\n                this.preview = null;\n            }\n            if (isNew && !this.saved) {\n                this.removeComponent(component, parent, original);\n                this.highlightInvalidComponents();\n            }\n            // Clean up.\n            this.removeEventListener(this.dialog, 'close', dialogClose);\n            this.dialog = null;\n        };\n        this.addEventListener(this.dialog, 'close', dialogClose);\n        // Called when we edit a component.\n        this.emit('editComponent', component);\n    }\n    updateComponentKey(data) {\n        return lodash_1.default.camelCase(data.title ||\n            data.label ||\n            data.placeholder ||\n            data.type).replace(/^[0-9]*/, '');\n    }\n    moveComponent(component) {\n        var _a;\n        if (this.selectedComponent) {\n            const prevSelected = this.selectedComponent;\n            (_a = prevSelected.element) === null || _a === void 0 ? void 0 : _a.classList.remove('builder-component-selected');\n            this.removeEventListener(document, 'keydown');\n        }\n        component.element.focus();\n        component.element.classList.add('builder-component-selected');\n        this.selectedComponent = component;\n        this.addEventListener(document, 'keydown', this.moveHandler.bind(this));\n    }\n    updateComponentPlacement(direction) {\n        const component = this.selectedComponent;\n        let index, info;\n        const step = direction ? -1 : 1;\n        if (component) {\n            const element = component.element;\n            const sibling = direction ? element.previousElementSibling : element.nextElementSibling;\n            const source = element.parentNode;\n            const containerLength = source.formioContainer.length;\n            if (containerLength && containerLength <= 1) {\n                return;\n            }\n            if (source.formioContainer) {\n                index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n                if (index !== -1) {\n                    info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                    info = info[0];\n                    source.removeChild(element);\n                }\n            }\n            const len = source.formioComponent.components.length;\n            index = (index === -1) ? 0 : index + step;\n            if (index === -1) {\n                source.formioContainer.push(info);\n                source.appendChild(element);\n            }\n            else if (index === len) {\n                const key = source.formioContainer[0].key;\n                index = lodash_1.default.findIndex(source.formioComponent.components, { key: key });\n                const firstElement = source.formioComponent.components[index].element;\n                source.formioContainer.splice(0, 0, info);\n                source.insertBefore(element, firstElement);\n            }\n            else if (index !== -1) {\n                source.formioContainer.splice(index, 0, info);\n                direction\n                    ? source.insertBefore(element, sibling)\n                    : source.insertBefore(element, sibling.nextElementSibling);\n            }\n            element.focus();\n        }\n    }\n    stopMoving(comp) {\n        const parent = comp.element.parentNode;\n        this.removeEventListener(document, 'keydown');\n        parent.formioComponent.rebuild();\n        this.selectedComponent = null;\n    }\n    addNewComponent(element) {\n        var _a;\n        const source = document.querySelector('.formio-builder-form');\n        const key = element.getAttribute('data-key');\n        const group = element.getAttribute('data-group');\n        const isNew = true;\n        let info;\n        if (key && group) {\n            info = this.getComponentInfo(key, group);\n        }\n        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {\n            builder_1.default.uniquify(this.findNamespaceRoot(source.formioComponent), info);\n            this.editComponent(info, source, isNew, null, null);\n        }\n        const firstComponent = (_a = source.formioComponent.components[0]) === null || _a === void 0 ? void 0 : _a.element;\n        if (firstComponent) {\n            source.formioContainer.splice(0, 0, info);\n        }\n        else {\n            source.formioContainer.push(info);\n        }\n        source.formioComponent.rebuild().then(() => {\n            this.isComponentCreated = true;\n        });\n    }\n    /**\n     * Creates copy of component schema and stores it under sessionStorage.\n     * @param {Component} component - The component to copy.\n     * @returns {void}\n     */\n    copyComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.addClass(this.refs.form, 'builder-paste-mode');\n        window.sessionStorage.setItem('formio.clipboard', JSON.stringify(component.schema));\n    }\n    /**\n     * Paste copied component after the current component.\n     * @param {Component} component - The component to paste after.\n     * @returns {void}\n     */\n    pasteComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.removeClass(this.refs.form, 'builder-paste-mode');\n        if (window.sessionStorage) {\n            const data = window.sessionStorage.getItem('formio.clipboard');\n            if (data) {\n                const schema = JSON.parse(data);\n                const parent = this.getParentElement(component.element);\n                if (parent) {\n                    builder_1.default.uniquify(this.findNamespaceRoot(parent.formioComponent), schema);\n                    let path = '';\n                    let index = 0;\n                    const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n                    if (parent.formioContainer && !isParentSaveChildMethod) {\n                        index = parent.formioContainer.indexOf(component.component);\n                        path = this.getComponentsPath(schema, parent.formioComponent.component);\n                        parent.formioContainer.splice(index + 1, 0, schema);\n                    }\n                    else if (isParentSaveChildMethod) {\n                        parent.formioComponent.saveChildComponent(schema, false);\n                    }\n                    parent.formioComponent.rebuild();\n                    this.emitSaveComponentEvent(schema, schema, parent.formioComponent.component, path, (index + 1), true, schema);\n                }\n                this.emit('change', this.form);\n            }\n        }\n    }\n    isParentSaveChildMethod(parentComp) {\n        return !!(parentComp && parentComp.saveChildComponent);\n    }\n    getParentElement(element) {\n        let container = element;\n        do {\n            container = container.parentNode;\n        } while (container && !container.formioComponent);\n        return container;\n    }\n    addBuilderComponentInfo(component) {\n        if (!component || !component.group || !this.groups[component.group]) {\n            return;\n        }\n        component = lodash_1.default.clone(component);\n        const groupInfo = this.groups[component.group];\n        if (!groupInfo.components.hasOwnProperty(component.key)) {\n            groupInfo.components[component.key] = component;\n        }\n        return component;\n    }\n    init() {\n        if (this.webform) {\n            this.webform.init();\n        }\n        return super.init();\n    }\n    clear() {\n        if (this.webform.initialized) {\n            this.webform.clear();\n        }\n    }\n    destroy(all = false) {\n        if (this.webform.initialized) {\n            this.webform.destroy(all);\n        }\n        super.destroy(all);\n    }\n    addBuilderGroup(name, group) {\n        if (!this.groups[name]) {\n            this.groups[name] = group;\n            this.groupOrder.push(name);\n            this.triggerRedraw();\n        }\n        else {\n            this.updateBuilderGroup(name, group);\n        }\n    }\n    updateBuilderGroup(name, group) {\n        if (this.groups[name]) {\n            this.groups[name] = group;\n            this.triggerRedraw();\n        }\n    }\n    generateKey(info) {\n        return info.key || lodash_1.default.camelCase(info.title ||\n            info.label ||\n            info.placeholder ||\n            info.type);\n    }\n}\nexports[\"default\"] = WebformBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/WebformBuilder.js?");
 
 /***/ }),
 
@@ -5468,7 +5468,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     * @returns {object} - The simple conditional settings.\n     */\n    static get conditionOperatorsSettings() {\n        return {\n            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n            valueComponent() {\n                return {\n                    type: 'textfield',\n                    widget: {\n                        type: 'input'\n                    }\n                };\n            }\n        };\n    }\n    /**\n     * Return the array of possible types of component value absed on its schema.\n     * @param schema\n     * @returns {Array}\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     * @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     * @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         * @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         * @type {object}\n         */\n        this.childComponentsMap = {};\n        /**\n         * Determines if this component is disabled, or not.\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         * @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         * @type {boolean}\n         */\n        this.pristine = true;\n        /**\n         * Points to the parent component.\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         * The reference attribute name for this component\n         */\n        this._referenceAttributeName = 'ref';\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         * @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     * Sets the component visibility.\n     * @param {boolean} value - Whether the component should be visible or not.\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     * Returns the component visibility\n     * @returns {boolean} - Whether the component is visible or not.\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     * @param {object} schema - The \"full\" json schema for the component.\n     * @param {object} defaultSchema - The \"default\" json schema for the component.\n     * @param {boolean} recursion - If we are currently in a recursive loop.\n     * @returns {object} - The minified json schema for this component.\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     * @returns {object} - 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     * @returns {boolean} - 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     * @param {string} text - The i18n identifier.\n     * @param {object} params - The i18n parameters to use for translation.\n     * @param {...any} args - Additional arguments to pass to the translation library.\n     * @returns {string} - The translated text.\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.floatingLabels ||\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 { template: `Unknown template: ${name}` };\n        }\n        const templateByMode = this.checkTemplateMode(templatesByName, modes);\n        if (templateByMode) {\n            return { template: templateByMode };\n        }\n        return { template: templatesByName.form };\n    }\n    checkTemplate(templates, names, modes) {\n        for (const name of names) {\n            const templatesByName = templates[name];\n            if (templatesByName) {\n                const { referenceAttributeName } = templatesByName;\n                const templateByMode = this.checkTemplateMode(templatesByName, modes);\n                if (templateByMode) {\n                    return { template: templateByMode, referenceAttributeName };\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        const { referenceAttributeName, template } = this.getTemplate(names, mode);\n        if (referenceAttributeName) {\n            this._referenceAttributeName = referenceAttributeName;\n        }\n        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If we should force the sanitize to occur.\n     * @param {object} options - The options for the sanitize.\n     * @returns {*} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize = false, 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     * @param {string} template - The template to render.\n     * @param {object} data - The data to provide to the template.\n     * @returns {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    /**\n     * Allows for modification of the component value prior to submission.\n     * @param {*} input - The input to be modified.\n     * @returns {*} - The modified input mapping for the extended component.\n     */\n    performInputMapping(input) {\n        return input;\n    }\n    /**\n     * Returns the component \"widget\" if one is available.\n     * @returns {Widget|null} - The widget instance. null if not available.\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    /**\n     * Returns the native supported browser language.\n     * @returns {string|null} - The native browser language that is supported.\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 to perform special functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.\n     */\n    beforePage() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.\n     */\n    beforeNext() {\n        return this.beforePage(true);\n    }\n    /**\n     * Called before a submission is triggered allowing the components to perform special async functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.\n     */\n    beforeSubmit() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Return the submission timezone.\n     * @returns {string} - The submission timezone.\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    /**\n     * Return the current timezone.\n     * @returns {string} - The current timezone.\n     */\n    get timezone() {\n        return this.getTimezone(this.component);\n    }\n    /**\n     * Return the current timezone.\n     * @param {object} settings - Settings to control how the timezone should be returned.\n     * @returns {string} - The current timezone.\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    /**\n     *\n     * @param {HTMLElement} element - The containing DOM element to query for the ref value.\n     * @param {object} refs - The references to load.\n     * @param {string} [referenceAttributeName] - The attribute name to use for the reference.\n     */\n    loadRefs(element, refs, referenceAttributeName) {\n        if (!element) {\n            return;\n        }\n        for (const ref in refs) {\n            const refType = refs[ref];\n            const isString = typeof refType === 'string';\n            const selector = isString && refType.includes('scope')\n                ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`\n                : `[${referenceAttributeName || this._referenceAttributeName || '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    /**\n     * Opens the modal element.\n     * @param {string} template - The template to use for the modal dialog.\n     */\n    setOpenModalElement(template = null) {\n        this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n    }\n    /**\n     * Returns the modal preview template.\n     * @returns {string} - The modal preview template.\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    /**\n     * Performs a complete build of a component, which empties, renders, sets the content in the DOM, and then finally attaches events.\n     * @param {HTMLElement} element - The element to attach this component to.\n     * @returns {Promise<void>} - A promise that resolves when the component has been built.\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    /**\n     * Renders a component as an HTML string.\n     * @param {string} children - The contents of all the children HTML as a string.\n     * @param {boolean} topLevel - If this is the topmost component that is being rendered.\n     * @returns {string} - The rendered HTML string of a component.\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    /**\n     * Attaches all the tooltips provided the refs object.\n     * @param {object} toolTipsRefs - The refs for the tooltips within your template.\n     * @returns {void}\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    /**\n     * Create a new component modal for this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {boolean} modalShouldBeOpened - TRUE if the modal should open immediately.\n     * @param {any} currentValue - The current value of the component.\n     * @returns {ComponentModal} - The created component modal.\n     */\n    createComponentModal(element, modalShouldBeOpened, currentValue) {\n        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n    }\n    /**\n     * Attaches all event listensers for this component to the DOM elements that were rendered.\n     * @param {HTMLElement} element - The element to attach the listeners to.\n     * @returns {Promise<void>} - Resolves when the component is done attaching to the DOM.\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    /**\n     * Restors the \"focus\" on a component after a redraw event has occured.\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    /**\n     * Adds a keyboard shortcut to this component.\n     * @param {HTMLElement} element - The element to attach the keyboard shortcut to.\n     * @param {string} shortcut - The keyboard shortcut to add.\n     * @returns {void}\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    /**\n     * Removes a keyboard shortcut from this component.\n     * @param {HTMLElement} element - The element to remove the keyboard shortcut from.\n     * @param {string} shortcut - The keyboard shortcut to remove.\n     * @returns {void}\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    /**\n     * Determines if the component should be refreshed based on the path of another component that changed.\n     * @param {string} refreshData - The path of the data that needs to trigger a refresh.\n     * @param {boolean} changed - Flag that is true if the data has been changed.\n     * @param {any} flags - The flags for the checkData procedure.\n     * @returns {void}\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    /**\n     * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.\n     * @param {Array<any>} changes - The list of components that have changed.\n     * @param {any} flags - The checkData flags.\n     * @returns {void}\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     * @param {any} value - The latest value of the component to check if it needs to be refreshed.\n     * @returns {void}\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     * @param {any} component - The component to check if it is in the same context as this component.\n     * @returns {boolean} - TRUE if the component is in the same context as this 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    /**\n     * Determines if we are in \"view\" only mode.\n     * @returns {boolean} - TRUE if we are in \"view\" only mode.\n     */\n    get viewOnly() {\n        return this.options.readOnly && this.options.viewAsHtml;\n    }\n    /**\n     * Sets the HTMLElement for this component.\n     * @param {HTMLElement} element - The element that is attached to this component.\n     * @returns {void}\n     */\n    setElement(element) {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        this.element = element;\n    }\n    /**\n     * Creates an element to hold the \"view only\" version of this component.\n     * @returns {HTMLElement} - The element for this component.\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    /**\n     * The default value for the \"view only\" mode of a component if the value is not provided.\n     * @returns {string} - The default value for this component.\n     */\n    get defaultViewOnlyValue() {\n        return '-';\n    }\n    /**\n     * Uses the widget to determine the output string.\n     * @param {any} value - The current value of the component.\n     * @param {any} options - The options for getValueAsString.\n     * @returns {any|Array<any>} - The value as a string.\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    /**\n     * Returns the value of the component as a string.\n     * @param {any} value - The value for this component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\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    /**\n     * Returns the string representation \"view\" of the component value.\n     * @param {any} value - The value of the component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getView(value, options) {\n        if (this.component.protected) {\n            return '--- PROTECTED ---';\n        }\n        return this.getValueAsString(value, options);\n    }\n    /**\n     * Updates the items list for this component. Useful for Select and other List component types.\n     * @param {...any} args - The arguments to pass to the onChange event.\n     * @returns {void}\n     */\n    updateItems(...args) {\n        this.restoreValue();\n        this.onChange(...args);\n    }\n    /**\n     * Returns the value for a specific item in a List type component.\n     * @param {any} data - The data for this component.\n     * @param {boolean} [forceUseValue] - if true, return 'value' property of the data\n     * @returns {any} - The value of the item.\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    /**\n     * Returns the item value for html mode.\n     * @param {any} value - The value for this component.\n     * @returns {any} - The value of the item for html mode.\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    /**\n     * Creates a modal to input the value of this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {any} attr - A list of attributes to add to the modal.\n     * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.\n     * @returns {HTMLElement} - The created modal element.\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    /**\n     * Uses CSS classes to show or hide an element.\n     * @returns {boolean} - TRUE if the element has been css removed.\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     * @returns {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    /**\n     * Returns the component condition operator settings if available.\n     * @returns {object} - The component condition operator settings.\n     */\n    static get serverConditionSettings() {\n        return Component.conditionOperatorsSettings;\n    }\n    /**\n     * Returns if the application is on a mobile device.\n     * @returns {boolean} - TRUE if the application is on a mobile device.\n     */\n    get isMobile() {\n        return (0, ismobilejs_1.default)();\n    }\n    /**\n     * Returns the outside wrapping element of this component.\n     * @returns {HTMLElement} - The wrapping element of this component.\n     */\n    getElement() {\n        return this.element;\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {any} additional - Additional context to provide.\n     * @returns {any} - The evaluation context.\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     * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.\n     */\n    setPristine(pristine) {\n        this.pristine = pristine;\n    }\n    /**\n     * Returns if the component is pristine.\n     * @returns {boolean} - TRUE if the component is pristine.\n     */\n    get isPristine() {\n        return this.pristine;\n    }\n    /**\n     * Sets the dirty flag for this component.\n     * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.\n     */\n    setDirty(dirty) {\n        this.dirty = dirty;\n    }\n    /**\n     * Returns if the component is dirty.\n     * @returns {boolean} - TRUE if the component is 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    /**\n     * Returns the icon class for a given icon name.\n     * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the \"font awesome\" version of the name of the icon.\n     * @param {boolean} spinning - If the component should be spinning.\n     * @returns {string} - The icon class for the equivalent icon in the iconset we are using.\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    /**\n     * Returns the size css class names for our current template.\n     * @param {string} size - The size class name for the default iconset.\n     * @returns {string} - The size class for our component.\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    /**\n     * Returns the visible errors for this component.\n     * @returns {Array<object>} - The visible errors for this component.\n     */\n    get visibleErrors() {\n        return this._visibleErrors;\n    }\n    /**\n     * Returns all the errors for this component, visible or not.\n     * @returns {Array<object>} - All the errors for this component.\n     */\n    get errors() {\n        return this._errors;\n    }\n    /**\n     * Returns the error label for this component.\n     * @returns {string} - The error label for this component.\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 {string} type - The type of error to fetch the message for.\n     * @returns {string} - The error message configured for this component.\n     */\n    errorMessage(type) {\n        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n    }\n    /**\n     * Sets the content, innerHTML, of an element to the sanitized content.\n     * @param {HTMLElement} element - The element to set the innerHTML to.\n     * @param {string} content - The HTML string content that we wish to set.\n     * @param {boolean} forceSanitize - If we should force the content to be sanitized.\n     * @param {any} sanitizeOptions - The options for the sanitize function.\n     * @returns {boolean} - TRUE if the content was sanitized and set.\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    /**\n     * Restores the caret position in the input element after a refresh occurs.\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    /**\n     * Redraw the component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.\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    /**\n     * Rebuild and redraw a component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.\n     */\n    rebuild() {\n        this.destroy();\n        this.init();\n        this.visible = this.conditionallyVisible(null, null);\n        return this.redraw();\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     */\n    removeEventListeners() {\n        super.removeEventListeners();\n        this.tooltips.forEach(tooltip => tooltip.destroy());\n        this.tooltips = [];\n    }\n    /**\n     * Returns if the dom node has the classes provided.\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The name of the class to check.\n     * @returns {boolean|void} - TRUE if the element has the class.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.hasClass(element, this.transform('class', className));\n    }\n    /**\n     * Adds a class to an HTML element.\n     * @param {HTMLElement} element - The dom element to add the class to.\n     * @param {string} className - The class name you wish to add.\n     * @returns {this|void} - The component instance.\n     */\n    addClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.addClass(element, this.transform('class', className));\n    }\n    /**\n     * Removes a class from an element.\n     * @param {HTMLElement} element - The element to remove the class from.\n     * @param {string} className - The class name to remove.\n     * @returns {this|void} - The component instance.\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     * @returns {boolean} - TRUE if the component has a condition defined.\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     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is conditionally visible.\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     * @param {any} row - The row contextual data.\n     * @param {any} data - The global data object.\n     * @returns {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     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\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 {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\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    /**\n     * Returns the component logic if applicable.\n     * @returns {Array<object>} - The component logic.\n     */\n    get logic() {\n        return this.component.logic || [];\n    }\n    /**\n     * Check all triggers and apply necessary actions.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean|void} - TRUE if the component was altered.\n     */\n    fieldLogic(data = this.rootValue, 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    /**\n     * Retuns if the browser is Internet Explorer.\n     * @returns {boolean} - TRUE if the browser is IE.\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    /**\n     * Defines the logic action value through evaluation.\n     * @param {object} action - The action within the Logic system to perform.\n     * @param {object} argsObject - The arguments to pass to the evaluation.\n     * @returns {any} - The result of the evaluation.\n     */\n    defineActionValue(action, argsObject) {\n        return this.evaluate(action.value, argsObject, 'value');\n    }\n    /**\n     * Apply the actions of Logic for a component once the conditions have been met.\n     * @param {object} newComponent - The new component to apply the actions to.\n     * @param {Array<object>} actions - An array of actions\n     * @param {any} result - The result of the conditional check in order to evaluate the actions.\n     * @param {any} row - The contextual row data for this component.\n     * @param {any} data - The global data object for the submission.\n     * @returns {boolean} - TRUE if the component was altered.\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     * @param {Array<object>|string} messages - An array of messages to add to the element.\n     * @returns {void}\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                return this.renderTemplate('message', Object.assign({}, message));\n            }).join(''));\n        }\n    }\n    /**\n     * Sets the form input widget error classes.\n     * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.\n     * @param {boolean} dirty - If the input is dirty.\n     * @param {boolean} hasErrors - If the input has errors.\n     * @param {boolean} hasMessages - If the input has messages.\n     * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.\n     * @returns {void}\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        // do not set error classes for hidden components\n        if (!this.visible) {\n            return;\n        }\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    /**\n     * Adds the classes necessary to mark an element as invalid.\n     * @param {HTMLElement} element - The element you wish to add the invalid classes to.\n     * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.\n     * @returns {void}\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    /**\n     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.\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    /**\n     * Triggers a debounced onChange event for the root component (usually Webform).\n     * @param {...any} args - The arguments to pass to the onChange event.\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    /**\n     * Called when the component value has been changed. This will then trigger the root level onChange handler which\n     * propagates the checkData methods for the full component tree.\n     * @param {any} flags - The flags for the change event propagation.\n     * @param {boolean} fromRoot - If the change event is from the root component.\n     * @returns {boolean} - TRUE if the component has changed.\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' || this.component.validateOn === 'submit') {\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'] }], // custom dropdown\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     * @returns {null} - The empty value for this component.\n     */\n    get emptyValue() {\n        return null;\n    }\n    /**\n     * Returns if this component has a value set.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - TRUE if a value is set.\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     * @returns {*} - The root value for the component, typically the Webform data object.\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     * @returns {*} - The value for this component.\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     * @param {*} value - The value to set for this component.\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     * @param {number} index - The index to splice for an array component values.\n     * @param {*} flags - The flags to use when splicing the value.\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                if (this.component.type !== 'textfield') {\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            }\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     * @returns {*} - The value for the component.\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     * @param {number} index - For an array component or multiple values, this returns the value at a specific index.\n     * @returns {*} - The value at the specified index.\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     * @param {*} value - The value to set for this component.\n     * @param {*} flags - The flags to use when setting the value.\n     * @returns {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     * @param {number} index - The index to set the value at.\n     * @param {*} value - The value to set at the specified index.\n     * @param {*} flags - The flags to use when setting the 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) && valueMaskInput.mask.textMaskInputElement) {\n            valueMaskInput.mask.textMaskInputElement.update(value);\n        }\n        if (input.mask && input.mask.textMaskInputElement) {\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     * @param {*} value - The value to normalize before setting.\n     * @returns {*} - The normalized value.\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     * @param {*} value - The value to update.\n     * @param {*} flags - The flags to use when updating the value.\n     * @returns {boolean} - If the value changed.\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     * @param {...any} args - The arguments to pass to updateValue.\n     * @returns {boolean} - If the value changed.\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.defaultValue || 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     * @param {*} newValue - The new value to check.\n     * @param {*} oldValue - The existing value of the component.\n     * @returns {boolean} - TRUE if the value has changed.\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     * @param {*} flags - The flags to use when triggering the on change event.\n     * @param {boolean} changed - If the value has changed.\n     * @returns {boolean} - If the value changed.\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    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 or in builder mode\n        if (this.builderMode || 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        if (shouldBeCleared) {\n            // remove calculated value so that the value is recalculated once component becomes visible\n            if (this.hasOwnProperty('calculatedValue') && allowOverride) {\n                lodash_1.default.unset(this, 'calculatedValue');\n            }\n            return false;\n        }\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            (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) || flags.resetValue;\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                this.calculatedValue = null;\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 = (0, utils_1.fastCloneDeep)(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 = (0, utils_1.fastCloneDeep)(calculatedValue);\n        if (changed) {\n            if (!flags.noPristineChangeOnModified && this.root.initialized) {\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     * @param {*} data - The data to perform the calculation with.\n     * @param {*} flags - The flags to use when calculating the value.\n     * @param {*} row - The contextual row data to use when performing the calculation.\n     * @returns {boolean} - TRUE if the value changed.\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     * @returns {string} - The label text for this component.\n     */\n    get label() {\n        return this.component.label;\n    }\n    /**\n     * Set this component's label text and render it.\n     * @param {string} 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     * @returns {*} root - The root component to search from.\n     */\n    getRoot() {\n        return this.root;\n    }\n    /**\n     * Returns the invalid message, or empty string if the component is valid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.\n     * @param {*} row - Contextual row data for this component.\n     * @returns {string} - The message to show when the component is invalid.\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.validateProcessInfo\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     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @returns {boolean} - TRUE if the component is valid.\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 {Array<any>} errors - An array of errors to interpolate.\n     * @returns {Array<any>} - The interpolated errors.\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 {boolean} - TRUE if the component is valid.\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 {Array<any>} - An array of errors if the component is invalid.\n     */\n    validateComponent(data = null, row = null, 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            value: this.validationValue,\n            path: this.path || this.component.key,\n            instance: this,\n            scope: { errors: [] },\n            processors: [\n                process_1.validateProcessInfo\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     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {*} flags - The flags to use when checking the validity.\n     * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkComponentValidity(data = null, dirty = false, row = null, 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                    if (errors.length) {\n                        this.parent.childErrors.push(...errors);\n                    }\n                    else {\n                        lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                    }\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                if (errors.length) {\n                    this.parent.childErrors.push(...errors);\n                }\n                else {\n                    lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                }\n            }\n            return errors.length === 0;\n        }\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\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     * @param {*} data - The root data of the change event.\n     * @param {*} flags - The flags from this change event.\n     * @param {*} row - The contextual row data for this component.\n     * @returns {void|boolean} - TRUE if no check should be performed on the component.\n     */\n    checkData(data = null, flags = null, row = null) {\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     * @returns {boolean} - TRUE if the component is eligible for multiple validation.\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     * @returns {boolean|*} - TRUE if the value is hidden.\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 { validateWhenHidden = false } = this.component || {};\n        const forceValidOnHidden = (!this.visible || !this.checkCondition(row, data)) && !validateWhenHidden;\n        if (forceValidOnHidden) {\n            // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.\n            this._errors = [];\n        }\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            () => forceValidOnHidden\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     * @param {*} value - The value to print out.\n     * @returns {string} - The string representation of the 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     * @returns {boolean} - TRUE if the component is disabled.\n     */\n    get disabled() {\n        return this._disabled || this.parentDisabled;\n    }\n    /**\n     * Disable this component.\n     * @param {boolean} disabled - TRUE to disable the component.\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     * @returns {*} - The components \"input\" DOM 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 = (this.refs.input.length - 1)) {\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 = this.refs.input[index];\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     * @returns {import('@formio/core').Formio} - The Formio instance file service.\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 = (0, utils_1.getScriptPlugin)(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 = (0, utils_1.getScriptPlugin)(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     * @returns {object} - The simple conditional settings.\n     */\n    static get conditionOperatorsSettings() {\n        return {\n            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n            valueComponent() {\n                return {\n                    type: 'textfield',\n                    widget: {\n                        type: 'input'\n                    }\n                };\n            }\n        };\n    }\n    /**\n     * Return the array of possible types of component value absed on its schema.\n     * @param schema\n     * @returns {Array}\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     * @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     * @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         * @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         * @type {object}\n         */\n        this.childComponentsMap = {};\n        /**\n         * Determines if this component is disabled, or not.\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         * @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         * @type {boolean}\n         */\n        this.pristine = true;\n        /**\n         * Points to the parent component.\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         * The reference attribute name for this component\n         */\n        this._referenceAttributeName = 'ref';\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         * @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     * Sets the component visibility.\n     * @param {boolean} value - Whether the component should be visible or not.\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     * Returns the component visibility\n     * @returns {boolean} - Whether the component is visible or not.\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     * @param {object} schema - The \"full\" json schema for the component.\n     * @param {object} defaultSchema - The \"default\" json schema for the component.\n     * @param {boolean} recursion - If we are currently in a recursive loop.\n     * @returns {object} - The minified json schema for this component.\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     * @returns {object} - 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     * @returns {boolean} - 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     * @param {string} text - The i18n identifier.\n     * @param {object} params - The i18n parameters to use for translation.\n     * @param {...any} args - Additional arguments to pass to the translation library.\n     * @returns {string} - The translated text.\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.floatingLabels ||\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 { template: `Unknown template: ${name}` };\n        }\n        const templateByMode = this.checkTemplateMode(templatesByName, modes);\n        if (templateByMode) {\n            return { template: templateByMode };\n        }\n        return { template: templatesByName.form };\n    }\n    checkTemplate(templates, names, modes) {\n        for (const name of names) {\n            const templatesByName = templates[name];\n            if (templatesByName) {\n                const { referenceAttributeName } = templatesByName;\n                const templateByMode = this.checkTemplateMode(templatesByName, modes);\n                if (templateByMode) {\n                    return { template: templateByMode, referenceAttributeName };\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        const { referenceAttributeName, template } = this.getTemplate(names, mode);\n        if (referenceAttributeName) {\n            this._referenceAttributeName = referenceAttributeName;\n        }\n        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If we should force the sanitize to occur.\n     * @param {object} options - The options for the sanitize.\n     * @returns {*} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize = false, 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     * @param {string} template - The template to render.\n     * @param {object} data - The data to provide to the template.\n     * @returns {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    /**\n     * Allows for modification of the component value prior to submission.\n     * @param {*} input - The input to be modified.\n     * @returns {*} - The modified input mapping for the extended component.\n     */\n    performInputMapping(input) {\n        return input;\n    }\n    /**\n     * Returns the component \"widget\" if one is available.\n     * @returns {Widget|null} - The widget instance. null if not available.\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    /**\n     * Returns the native supported browser language.\n     * @returns {string|null} - The native browser language that is supported.\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 to perform special functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.\n     */\n    beforePage() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.\n     */\n    beforeNext() {\n        return this.beforePage(true);\n    }\n    /**\n     * Called before a submission is triggered allowing the components to perform special async functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.\n     */\n    beforeSubmit() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Return the submission timezone.\n     * @returns {string} - The submission timezone.\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    /**\n     * Return the current timezone.\n     * @returns {string} - The current timezone.\n     */\n    get timezone() {\n        return this.getTimezone(this.component);\n    }\n    /**\n     * Return the current timezone.\n     * @param {object} settings - Settings to control how the timezone should be returned.\n     * @returns {string} - The current timezone.\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    /**\n     *\n     * @param {HTMLElement} element - The containing DOM element to query for the ref value.\n     * @param {object} refs - The references to load.\n     * @param {string} [referenceAttributeName] - The attribute name to use for the reference.\n     */\n    loadRefs(element, refs, referenceAttributeName) {\n        if (!element) {\n            return;\n        }\n        for (const ref in refs) {\n            const refType = refs[ref];\n            const isString = typeof refType === 'string';\n            const selector = isString && refType.includes('scope')\n                ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`\n                : `[${referenceAttributeName || this._referenceAttributeName || '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    /**\n     * Opens the modal element.\n     * @param {string} template - The template to use for the modal dialog.\n     */\n    setOpenModalElement(template = null) {\n        this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n    }\n    /**\n     * Returns the modal preview template.\n     * @returns {string} - The modal preview template.\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    /**\n     * Performs a complete build of a component, which empties, renders, sets the content in the DOM, and then finally attaches events.\n     * @param {HTMLElement} element - The element to attach this component to.\n     * @returns {Promise<void>} - A promise that resolves when the component has been built.\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    /**\n     * Renders a component as an HTML string.\n     * @param {string} children - The contents of all the children HTML as a string.\n     * @param {boolean} topLevel - If this is the topmost component that is being rendered.\n     * @returns {string} - The rendered HTML string of a component.\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    /**\n     * Attaches all the tooltips provided the refs object.\n     * @param {object} toolTipsRefs - The refs for the tooltips within your template.\n     * @returns {void}\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    /**\n     * Create a new component modal for this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {boolean} modalShouldBeOpened - TRUE if the modal should open immediately.\n     * @param {any} currentValue - The current value of the component.\n     * @returns {ComponentModal} - The created component modal.\n     */\n    createComponentModal(element, modalShouldBeOpened, currentValue) {\n        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n    }\n    /**\n     * Attaches all event listensers for this component to the DOM elements that were rendered.\n     * @param {HTMLElement} element - The element to attach the listeners to.\n     * @returns {Promise<void>} - Resolves when the component is done attaching to the DOM.\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    /**\n     * Restors the \"focus\" on a component after a redraw event has occured.\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    /**\n     * Adds a keyboard shortcut to this component.\n     * @param {HTMLElement} element - The element to attach the keyboard shortcut to.\n     * @param {string} shortcut - The keyboard shortcut to add.\n     * @returns {void}\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    /**\n     * Removes a keyboard shortcut from this component.\n     * @param {HTMLElement} element - The element to remove the keyboard shortcut from.\n     * @param {string} shortcut - The keyboard shortcut to remove.\n     * @returns {void}\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    /**\n     * Determines if the component should be refreshed based on the path of another component that changed.\n     * @param {string} refreshData - The path of the data that needs to trigger a refresh.\n     * @param {boolean} changed - Flag that is true if the data has been changed.\n     * @param {any} flags - The flags for the checkData procedure.\n     * @returns {void}\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    /**\n     * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.\n     * @param {Array<any>} changes - The list of components that have changed.\n     * @param {any} flags - The checkData flags.\n     * @returns {void}\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     * @param {any} value - The latest value of the component to check if it needs to be refreshed.\n     * @returns {void}\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     * @param {any} component - The component to check if it is in the same context as this component.\n     * @returns {boolean} - TRUE if the component is in the same context as this 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    /**\n     * Determines if we are in \"view\" only mode.\n     * @returns {boolean} - TRUE if we are in \"view\" only mode.\n     */\n    get viewOnly() {\n        return this.options.readOnly && this.options.viewAsHtml;\n    }\n    /**\n     * Sets the HTMLElement for this component.\n     * @param {HTMLElement} element - The element that is attached to this component.\n     * @returns {void}\n     */\n    setElement(element) {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        this.element = element;\n    }\n    /**\n     * Creates an element to hold the \"view only\" version of this component.\n     * @returns {HTMLElement} - The element for this component.\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    /**\n     * The default value for the \"view only\" mode of a component if the value is not provided.\n     * @returns {string} - The default value for this component.\n     */\n    get defaultViewOnlyValue() {\n        return '-';\n    }\n    /**\n     * Uses the widget to determine the output string.\n     * @param {any} value - The current value of the component.\n     * @param {any} options - The options for getValueAsString.\n     * @returns {any|Array<any>} - The value as a string.\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    /**\n     * Returns the value of the component as a string.\n     * @param {any} value - The value for this component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\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    /**\n     * Returns the string representation \"view\" of the component value.\n     * @param {any} value - The value of the component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getView(value, options) {\n        if (this.component.protected) {\n            return '--- PROTECTED ---';\n        }\n        return this.getValueAsString(value, options);\n    }\n    /**\n     * Updates the items list for this component. Useful for Select and other List component types.\n     * @param {...any} args - The arguments to pass to the onChange event.\n     * @returns {void}\n     */\n    updateItems(...args) {\n        this.restoreValue();\n        this.onChange(...args);\n    }\n    /**\n     * Returns the value for a specific item in a List type component.\n     * @param {any} data - The data for this component.\n     * @param {boolean} [forceUseValue] - if true, return 'value' property of the data\n     * @returns {any} - The value of the item.\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    /**\n     * Returns the item value for html mode.\n     * @param {any} value - The value for this component.\n     * @returns {any} - The value of the item for html mode.\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    /**\n     * Creates a modal to input the value of this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {any} attr - A list of attributes to add to the modal.\n     * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.\n     * @returns {HTMLElement} - The created modal element.\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    /**\n     * Uses CSS classes to show or hide an element.\n     * @returns {boolean} - TRUE if the element has been css removed.\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     * @returns {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    /**\n     * Returns the component condition operator settings if available.\n     * @returns {object} - The component condition operator settings.\n     */\n    static get serverConditionSettings() {\n        return Component.conditionOperatorsSettings;\n    }\n    /**\n     * Returns if the application is on a mobile device.\n     * @returns {boolean} - TRUE if the application is on a mobile device.\n     */\n    get isMobile() {\n        return (0, ismobilejs_1.default)();\n    }\n    /**\n     * Returns the outside wrapping element of this component.\n     * @returns {HTMLElement} - The wrapping element of this component.\n     */\n    getElement() {\n        return this.element;\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {any} additional - Additional context to provide.\n     * @returns {any} - The evaluation context.\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     * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.\n     */\n    setPristine(pristine) {\n        this.pristine = pristine;\n    }\n    /**\n     * Returns if the component is pristine.\n     * @returns {boolean} - TRUE if the component is pristine.\n     */\n    get isPristine() {\n        return this.pristine;\n    }\n    /**\n     * Sets the dirty flag for this component.\n     * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.\n     */\n    setDirty(dirty) {\n        this.dirty = dirty;\n    }\n    /**\n     * Returns if the component is dirty.\n     * @returns {boolean} - TRUE if the component is 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    /**\n     * Returns the icon class for a given icon name.\n     * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the \"font awesome\" version of the name of the icon.\n     * @param {boolean} spinning - If the component should be spinning.\n     * @returns {string} - The icon class for the equivalent icon in the iconset we are using.\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    /**\n     * Returns the size css class names for our current template.\n     * @param {string} size - The size class name for the default iconset.\n     * @returns {string} - The size class for our component.\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    /**\n     * Returns the visible errors for this component.\n     * @returns {Array<object>} - The visible errors for this component.\n     */\n    get visibleErrors() {\n        return this._visibleErrors;\n    }\n    /**\n     * Returns all the errors for this component, visible or not.\n     * @returns {Array<object>} - All the errors for this component.\n     */\n    get errors() {\n        return this._errors;\n    }\n    /**\n     * Returns the error label for this component.\n     * @returns {string} - The error label for this component.\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 {string} type - The type of error to fetch the message for.\n     * @returns {string} - The error message configured for this component.\n     */\n    errorMessage(type) {\n        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n    }\n    /**\n     * Sets the content, innerHTML, of an element to the sanitized content.\n     * @param {HTMLElement} element - The element to set the innerHTML to.\n     * @param {string} content - The HTML string content that we wish to set.\n     * @param {boolean} forceSanitize - If we should force the content to be sanitized.\n     * @param {any} sanitizeOptions - The options for the sanitize function.\n     * @returns {boolean} - TRUE if the content was sanitized and set.\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    /**\n     * Restores the caret position in the input element after a refresh occurs.\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    /**\n     * Redraw the component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.\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    /**\n     * Rebuild and redraw a component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.\n     */\n    rebuild() {\n        this.destroy();\n        this.init();\n        this.visible = this.conditionallyVisible(null, null);\n        return this.redraw();\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     */\n    removeEventListeners() {\n        super.removeEventListeners();\n        this.tooltips.forEach(tooltip => tooltip.destroy());\n        this.tooltips = [];\n    }\n    /**\n     * Returns if the dom node has the classes provided.\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The name of the class to check.\n     * @returns {boolean|void} - TRUE if the element has the class.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.hasClass(element, this.transform('class', className));\n    }\n    /**\n     * Adds a class to an HTML element.\n     * @param {HTMLElement} element - The dom element to add the class to.\n     * @param {string} className - The class name you wish to add.\n     * @returns {this|void} - The component instance.\n     */\n    addClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.addClass(element, this.transform('class', className));\n    }\n    /**\n     * Removes a class from an element.\n     * @param {HTMLElement} element - The element to remove the class from.\n     * @param {string} className - The class name to remove.\n     * @returns {this|void} - The component instance.\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     * @returns {boolean} - TRUE if the component has a condition defined.\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     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is conditionally visible.\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     * @param {any} row - The row contextual data.\n     * @param {any} data - The global data object.\n     * @returns {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     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\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 {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\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    /**\n     * Returns the component logic if applicable.\n     * @returns {Array<object>} - The component logic.\n     */\n    get logic() {\n        return this.component.logic || [];\n    }\n    /**\n     * Check all triggers and apply necessary actions.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean|void} - TRUE if the component was altered.\n     */\n    fieldLogic(data = this.rootValue, 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    /**\n     * Retuns if the browser is Internet Explorer.\n     * @returns {boolean} - TRUE if the browser is IE.\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    /**\n     * Defines the logic action value through evaluation.\n     * @param {object} action - The action within the Logic system to perform.\n     * @param {object} argsObject - The arguments to pass to the evaluation.\n     * @returns {any} - The result of the evaluation.\n     */\n    defineActionValue(action, argsObject) {\n        return this.evaluate(action.value, argsObject, 'value');\n    }\n    /**\n     * Apply the actions of Logic for a component once the conditions have been met.\n     * @param {object} newComponent - The new component to apply the actions to.\n     * @param {Array<object>} actions - An array of actions\n     * @param {any} result - The result of the conditional check in order to evaluate the actions.\n     * @param {any} row - The contextual row data for this component.\n     * @param {any} data - The global data object for the submission.\n     * @returns {boolean} - TRUE if the component was altered.\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     * @param {Array<object>|string} messages - An array of messages to add to the element.\n     * @returns {void}\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                return this.renderTemplate('message', Object.assign({}, message));\n            }).join(''));\n        }\n    }\n    /**\n     * Sets the form input widget error classes.\n     * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.\n     * @param {boolean} dirty - If the input is dirty.\n     * @param {boolean} hasErrors - If the input has errors.\n     * @param {boolean} hasMessages - If the input has messages.\n     * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.\n     * @returns {void}\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        // do not set error classes for hidden components\n        if (!this.visible) {\n            return;\n        }\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    /**\n     * Adds the classes necessary to mark an element as invalid.\n     * @param {HTMLElement} element - The element you wish to add the invalid classes to.\n     * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.\n     * @returns {void}\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    /**\n     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.\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    /**\n     * Triggers a debounced onChange event for the root component (usually Webform).\n     * @param {...any} args - The arguments to pass to the onChange event.\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    /**\n     * Called when the component value has been changed. This will then trigger the root level onChange handler which\n     * propagates the checkData methods for the full component tree.\n     * @param {any} flags - The flags for the change event propagation.\n     * @param {boolean} fromRoot - If the change event is from the root component.\n     * @returns {boolean} - TRUE if the component has changed.\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' || this.component.validateOn === 'submit') {\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'] }], // custom dropdown\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     * @returns {null} - The empty value for this component.\n     */\n    get emptyValue() {\n        return null;\n    }\n    /**\n     * Returns if this component has a value set.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - TRUE if a value is set.\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     * @returns {*} - The root value for the component, typically the Webform data object.\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     * @returns {*} - The value for this component.\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     * @param {*} value - The value to set for this component.\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     * @param {number} index - The index to splice for an array component values.\n     * @param {*} flags - The flags to use when splicing the value.\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                if (this.component.type !== 'textfield') {\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            }\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     * @returns {*} - The value for the component.\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     * @param {number} index - For an array component or multiple values, this returns the value at a specific index.\n     * @returns {*} - The value at the specified index.\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     * @param {*} value - The value to set for this component.\n     * @param {*} flags - The flags to use when setting the value.\n     * @returns {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     * @param {number} index - The index to set the value at.\n     * @param {*} value - The value to set at the specified index.\n     * @param {*} flags - The flags to use when setting the 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) && valueMaskInput.mask.textMaskInputElement) {\n            valueMaskInput.mask.textMaskInputElement.update(value);\n        }\n        if (input.mask && input.mask.textMaskInputElement) {\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     * @param {*} value - The value to normalize before setting.\n     * @returns {*} - The normalized value.\n     */\n    normalizeValue(value) {\n        return value;\n    }\n    /**\n     * Update a value of this component.\n     * @param {*} value - The value to update.\n     * @param {*} flags - The flags to use when updating the value.\n     * @returns {boolean} - If the value changed.\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     * @param {...any} args - The arguments to pass to updateValue.\n     * @returns {boolean} - If the value changed.\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.defaultValue || 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     * @param {*} newValue - The new value to check.\n     * @param {*} oldValue - The existing value of the component.\n     * @returns {boolean} - TRUE if the value has changed.\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     * @param {*} flags - The flags to use when triggering the on change event.\n     * @param {boolean} changed - If the value has changed.\n     * @returns {boolean} - If the value changed.\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    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 or in builder mode\n        if (this.builderMode || 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        if (shouldBeCleared) {\n            // remove calculated value so that the value is recalculated once component becomes visible\n            if (this.hasOwnProperty('calculatedValue') && allowOverride) {\n                lodash_1.default.unset(this, 'calculatedValue');\n            }\n            return false;\n        }\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            (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) || flags.resetValue;\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                this.calculatedValue = null;\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 = (0, utils_1.fastCloneDeep)(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 = (0, utils_1.fastCloneDeep)(calculatedValue);\n        if (changed) {\n            if (!flags.noPristineChangeOnModified && this.root.initialized) {\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     * @param {*} data - The data to perform the calculation with.\n     * @param {*} flags - The flags to use when calculating the value.\n     * @param {*} row - The contextual row data to use when performing the calculation.\n     * @returns {boolean} - TRUE if the value changed.\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     * @returns {string} - The label text for this component.\n     */\n    get label() {\n        return this.component.label;\n    }\n    /**\n     * Set this component's label text and render it.\n     * @param {string} 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     * @returns {*} root - The root component to search from.\n     */\n    getRoot() {\n        return this.root;\n    }\n    /**\n     * Returns the invalid message, or empty string if the component is valid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.\n     * @param {*} row - Contextual row data for this component.\n     * @returns {string} - The message to show when the component is invalid.\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.validateProcessInfo\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     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @returns {boolean} - TRUE if the component is valid.\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 {Array<any>} errors - An array of errors to interpolate.\n     * @returns {Array<any>} - The interpolated errors.\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 {boolean} - TRUE if the component is valid.\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 {Array<any>} - An array of errors if the component is invalid.\n     */\n    validateComponent(data = null, row = null, 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            value: this.validationValue,\n            path: this.path || this.component.key,\n            instance: this,\n            scope: { errors: [] },\n            processors: [\n                process_1.validateProcessInfo\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     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {*} flags - The flags to use when checking the validity.\n     * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkComponentValidity(data = null, dirty = false, row = null, 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                    if (errors.length) {\n                        this.parent.childErrors.push(...errors);\n                    }\n                    else {\n                        lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                    }\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                if (errors.length) {\n                    this.parent.childErrors.push(...errors);\n                }\n                else {\n                    lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                }\n            }\n            return errors.length === 0;\n        }\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\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     * @param {*} data - The root data of the change event.\n     * @param {*} flags - The flags from this change event.\n     * @param {*} row - The contextual row data for this component.\n     * @returns {void|boolean} - TRUE if no check should be performed on the component.\n     */\n    checkData(data = null, flags = null, row = null) {\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     * @returns {boolean} - TRUE if the component is eligible for multiple validation.\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     * @returns {boolean|*} - TRUE if the value is hidden.\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 { validateWhenHidden = false } = this.component || {};\n        const forceValidOnHidden = (!this.visible || !this.checkCondition(row, data)) && !validateWhenHidden;\n        if (forceValidOnHidden) {\n            // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.\n            this._errors = [];\n        }\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            () => forceValidOnHidden\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     * @param {*} value - The value to print out.\n     * @returns {string} - The string representation of the 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     * @returns {boolean} - TRUE if the component is disabled.\n     */\n    get disabled() {\n        return this._disabled || this.parentDisabled;\n    }\n    /**\n     * Disable this component.\n     * @param {boolean} disabled - TRUE to disable the component.\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     * @returns {*} - The components \"input\" DOM 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 = (this.refs.input.length - 1)) {\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 = this.refs.input[index];\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     * @returns {import('@formio/core').Formio} - The Formio instance file service.\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 = (0, utils_1.getScriptPlugin)(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 = (0, utils_1.getScriptPlugin)(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?");
 
 /***/ }),
 
@@ -5633,7 +5633,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst core_1 = __webpack_require__(/*! @formio/core */ \"./node_modules/@formio/core/lib/index.js\");\nclass Multivalue extends Field_1.default {\n    /**\n     * Normalize values coming into updateValue.\n     * @param {*} value - The value to normalize before setting.\n     * @param {object} flags - Flags to use when normalizing the value.\n     * @param {*} emptyValue - The empty value for the field.\n     * @returns {*} - The normalized value.\n     */\n    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {\n        const underlyingValueShouldBeArray = core_1.Utils.getModelType(this.component) === 'array' || this.component.storeas === 'array' || Array.isArray(emptyValue);\n        if (this.component.multiple) {\n            if (Array.isArray(value)) {\n                if (underlyingValueShouldBeArray) {\n                    if (value.length === 0 || !Array.isArray(value[0])) {\n                        return [value];\n                    }\n                }\n                if (value.length === 0) {\n                    return [emptyValue];\n                }\n                return super.normalizeValue(value, flags);\n            }\n            else {\n                return super.normalizeValue(value == null ? [emptyValue] : [value], flags);\n            }\n        }\n        else {\n            if (Array.isArray(value) && !underlyingValueShouldBeArray) {\n                if (this.component.storeas === 'string') {\n                    return super.normalizeValue(value.join(this.delimiter || ''), flags);\n                }\n                if (this.component.type === 'hidden' && value.length > 1) {\n                    return super.normalizeValue(value, flags);\n                }\n                return super.normalizeValue(value[0] || emptyValue, flags);\n            }\n            else {\n                return super.normalizeValue(value, flags);\n            }\n        }\n    }\n    get dataValue() {\n        return this.normalizeValue(super.dataValue);\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultValue() {\n        let value = super.defaultValue;\n        if (this.component.multiple) {\n            if (lodash_1.default.isArray(value)) {\n                value = !value.length ? [super.emptyValue] : value;\n            }\n            else {\n                value = [value];\n            }\n        }\n        return value;\n    }\n    get addAnother() {\n        return this.t(this.component.addAnother || 'Add Another');\n    }\n    /**\n     * @returns {Field} - The created field.\n     */\n    render() {\n        let dataValue = this.normalizeValue(this.dataValue);\n        return this.component.hasOwnProperty('multiple') && this.component.multiple\n            ? super.render(this.renderTemplate('multiValueTable', {\n                rows: dataValue.map(this.renderRow.bind(this)).join(''),\n                disabled: this.disabled,\n                addAnother: this.addAnother,\n            }))\n            : super.render(`<div ${this._referenceAttributeName}=\"element\">\n            ${this.renderElement(this.component.type !== 'hidden' ? dataValue : '')}\n          </div>`);\n    }\n    renderElement() {\n        return '';\n    }\n    /**\n     * Renders a single row for multi-value components.\n     * @param {any} value - The value associated with the row to render.\n     * @param {number} index - The index of the row in the multi-value list.\n     * @returns {any} Returns the HTML string representation of the row.\n     */\n    renderRow(value, index) {\n        return this.renderTemplate('multiValueRow', {\n            index,\n            disabled: this.disabled,\n            element: `${this.renderElement(value, index)}`,\n        });\n    }\n    /**\n     * @param {HTMLElement} dom - The DOM element to which the component will attach.\n     * @returns {Promise} - Promise that resolves when all asynchronous tasks that have finished.\n     */\n    attach(dom) {\n        const superAttach = super.attach(dom);\n        this.loadRefs(dom, {\n            addButton: 'multiple',\n            input: 'multiple',\n            removeRow: 'multiple',\n            mask: 'multiple',\n            select: 'multiple',\n        });\n        const promises = [];\n        this.refs.input.forEach((element, index) => {\n            promises.push(this.attachElement.call(this, element, index));\n        });\n        if (!this.component.multiple) {\n            return Promise.all(promises);\n        }\n        this.refs.removeRow.forEach((removeButton, index) => {\n            this.addEventListener(removeButton, 'click', (event) => {\n                event.preventDefault();\n                this.removeValue(index);\n            });\n        });\n        // If single value field.\n        this.refs.addButton.forEach((addButton) => {\n            this.addEventListener(addButton, 'click', (event) => {\n                event.preventDefault();\n                this.addValue();\n            });\n        });\n        return superAttach.then(() => {\n            return Promise.all(promises);\n        });\n    }\n    /**\n     * Remove all event handlers.\n     */\n    detach() {\n        if (this.refs.input && this.refs.input.length) {\n            this.refs.input.forEach((input) => {\n                if (input.mask) {\n                    input.mask.destroy ? input.mask.destroy() : input.mask.remove();\n                }\n                if (input.widget) {\n                    input.widget.destroy();\n                }\n            });\n        }\n        if (this.refs.mask && this.refs.mask.length) {\n            this.refs.mask.forEach((input) => {\n                if (input.mask) {\n                    input.mask.destroy ? input.mask.destroy() : input.mask.remove();\n                }\n            });\n        }\n        super.detach();\n    }\n    /**\n     * Attach inputs to the element.\n     * @param {HTMLElement} element - The element to attach.\n     * @param {number} index - The index of the element to attach.\n     */\n    attachElement(element, index) {\n        this.addEventListener(element, this.inputInfo.changeEvent, () => {\n            // Delay update slightly to give input mask a chance to run.\n            const textCase = lodash_1.default.get(this.component, 'case', 'mixed');\n            if (textCase !== 'mixed') {\n                const { selectionStart, selectionEnd, } = element;\n                if (textCase === 'uppercase' && element.value) {\n                    element.value = element.value.toUpperCase();\n                }\n                if (textCase === 'lowercase' && element.value) {\n                    element.value = element.value.toLowerCase();\n                }\n                if (element.selectionStart && element.selectionEnd) {\n                    element.selectionStart = selectionStart;\n                    element.selectionEnd = selectionEnd;\n                }\n            }\n            try {\n                this.saveCaretPosition(element, index);\n            }\n            catch (err) {\n                console.warn('An error occurred while trying to save caret position', err);\n            }\n            // If a mask is present, delay the update to allow mask to update first.\n            if (element.mask) {\n                setTimeout(() => {\n                    return this.updateValue(null, {\n                        modified: (this.component.type !== 'hidden')\n                    }, index);\n                }, 1);\n            }\n            else {\n                return this.updateValue(null, {\n                    modified: (this.component.type !== 'hidden')\n                }, index);\n            }\n        });\n        if (!this.attachMultiMask(index)) {\n            const applyMask = () => {\n                this.setInputMask(element);\n                const valueMask = this.component.inputMask;\n                const displayMask = this.component.displayMask;\n                if (valueMask && displayMask && displayMask !== valueMask && this.refs.valueMaskInput) {\n                    this.setInputMask(this.refs.valueMaskInput, valueMask);\n                }\n            };\n            if (this.inputInfo.changeEvent === 'blur') {\n                this.addEventListener(element, this.inputInfo.changeEvent, () => {\n                    applyMask();\n                    this.dataValue = this.refs.input[0].value;\n                    if (this.checkComponentValidity()) {\n                        this.updateComponentValue(this.refs.input[0].value);\n                    }\n                });\n            }\n            else {\n                applyMask();\n            }\n        }\n    }\n    /**\n     * Event handler for selecting a mask from a dropdown.\n     * @param {Event} event - Event triggered by changing the selected option in mask.\n     */\n    onSelectMaskHandler(event) {\n        this.updateMask(event.target.maskInput, this.getMaskPattern(event.target.value));\n    }\n    /**\n     * Retrieves the mask pattern for a given mask name\n     * @param {string} maskName - The name of the mask to retrieve.\n     * @returns {any} The mask pattern associated with the given mask name.\n     */\n    getMaskPattern(maskName) {\n        if (!this.multiMasks) {\n            this.multiMasks = {};\n        }\n        if (this.multiMasks[maskName]) {\n            return this.multiMasks[maskName];\n        }\n        const mask = this.component.inputMasks.find(inputMask => inputMask.label === maskName);\n        this.multiMasks[maskName] = mask ? mask.mask : this.component.inputMasks[0].mask;\n        return this.multiMasks[maskName];\n    }\n    /**\n     * Attaches a selectable mask to an input field based on its configuration.\n     * @param {number} index - The index of the select or input in component array.\n     * @returns {boolean} - Returns true if the mask was successfully attached\n     */\n    attachMultiMask(index) {\n        if (!(this.isMultipleMasksField && this.component.inputMasks.length && this.refs.input.length)) {\n            return false;\n        }\n        const maskSelect = this.refs.select[index];\n        maskSelect.onchange = this.onSelectMaskHandler.bind(this);\n        maskSelect.maskInput = this.refs.mask[index];\n        this.setInputMask(maskSelect.maskInput, this.component.inputMasks[0].mask);\n        return true;\n    }\n    /**\n     * @param {any} input - The input element on which the mask is to be applied.\n     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.\n     */\n    updateMask(input, mask) {\n        if (!mask) {\n            return;\n        }\n        this.setInputMask(input, mask, !this.component.placeholder);\n        this.updateValue();\n    }\n    /**\n     * Adds a new empty value to the data array.\n     * @param {any} value -A value to be added to the data array.\n     */\n    addNewValue(value) {\n        if (value === undefined) {\n            value = this.component.defaultValue ?\n                this.component.defaultValue : this.emptyValue;\n            // If default is an empty aray, default back to empty value.\n            if (Array.isArray(value) && value.length === 0) {\n                value = this.emptyValue;\n            }\n        }\n        let dataValue = this.dataValue || [];\n        if (!Array.isArray(dataValue)) {\n            dataValue = [dataValue];\n        }\n        if (Array.isArray(value)) {\n            dataValue = dataValue.concat(value);\n        }\n        else {\n            dataValue.push(value);\n        }\n        this.dataValue = dataValue;\n    }\n    /**\n     * Adds a new empty value to the data array, and add a new row to contain it.\n     */\n    addValue() {\n        this.addNewValue();\n        this.redraw();\n        this.checkConditions();\n        if (!this.isEmpty(this.dataValue)) {\n            this.restoreValue();\n        }\n        if (this.root) {\n            this.root.onChange();\n        }\n    }\n}\nexports[\"default\"] = Multivalue;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/multivalue/Multivalue.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 Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst core_1 = __webpack_require__(/*! @formio/core */ \"./node_modules/@formio/core/lib/index.js\");\nclass Multivalue extends Field_1.default {\n    /**\n     * Normalize values coming into updateValue.\n     * @param {*} value - The value to normalize before setting.\n     * @param {object} flags - Flags to use when normalizing the value.\n     * @param {*} emptyValue - The empty value for the field.\n     * @returns {*} - The normalized value.\n     */\n    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {\n        const underlyingValueShouldBeArray = core_1.Utils.getModelType(this.component) === 'array' || this.component.storeas === 'array' || Array.isArray(emptyValue);\n        if (this.component.multiple) {\n            if (Array.isArray(value)) {\n                if (underlyingValueShouldBeArray) {\n                    if (value.length === 0 || !Array.isArray(value[0])) {\n                        return [value];\n                    }\n                }\n                if (value.length === 0) {\n                    return [emptyValue];\n                }\n                return super.normalizeValue(value, flags);\n            }\n            else {\n                return super.normalizeValue(value == null ? [emptyValue] : [value], flags);\n            }\n        }\n        else {\n            if (Array.isArray(value) && !underlyingValueShouldBeArray) {\n                if (core_1.Utils.getModelType(this.component) === 'any') {\n                    return super.normalizeValue(value, flags);\n                }\n                if (this.component.storeas === 'string') {\n                    return super.normalizeValue(value.join(this.delimiter || ''), flags);\n                }\n                return super.normalizeValue(value[0] || emptyValue, flags);\n            }\n            else {\n                return super.normalizeValue(value, flags);\n            }\n        }\n    }\n    get dataValue() {\n        return this.normalizeValue(super.dataValue);\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultValue() {\n        let value = super.defaultValue;\n        if (this.component.multiple) {\n            if (lodash_1.default.isArray(value)) {\n                value = !value.length ? [super.emptyValue] : value;\n            }\n            else {\n                value = [value];\n            }\n        }\n        return value;\n    }\n    get addAnother() {\n        return this.t(this.component.addAnother || 'Add Another');\n    }\n    /**\n     * @returns {Field} - The created field.\n     */\n    render() {\n        let dataValue = this.normalizeValue(this.dataValue);\n        return this.component.hasOwnProperty('multiple') && this.component.multiple\n            ? super.render(this.renderTemplate('multiValueTable', {\n                rows: dataValue.map(this.renderRow.bind(this)).join(''),\n                disabled: this.disabled,\n                addAnother: this.addAnother,\n            }))\n            : super.render(`<div ${this._referenceAttributeName}=\"element\">\n            ${this.renderElement(this.component.type !== 'hidden' ? dataValue : '')}\n          </div>`);\n    }\n    renderElement() {\n        return '';\n    }\n    /**\n     * Renders a single row for multi-value components.\n     * @param {any} value - The value associated with the row to render.\n     * @param {number} index - The index of the row in the multi-value list.\n     * @returns {any} Returns the HTML string representation of the row.\n     */\n    renderRow(value, index) {\n        return this.renderTemplate('multiValueRow', {\n            index,\n            disabled: this.disabled,\n            element: `${this.renderElement(value, index)}`,\n        });\n    }\n    /**\n     * @param {HTMLElement} dom - The DOM element to which the component will attach.\n     * @returns {Promise} - Promise that resolves when all asynchronous tasks that have finished.\n     */\n    attach(dom) {\n        const superAttach = super.attach(dom);\n        this.loadRefs(dom, {\n            addButton: 'multiple',\n            input: 'multiple',\n            removeRow: 'multiple',\n            mask: 'multiple',\n            select: 'multiple',\n        });\n        const promises = [];\n        this.refs.input.forEach((element, index) => {\n            promises.push(this.attachElement.call(this, element, index));\n        });\n        if (!this.component.multiple) {\n            return Promise.all(promises);\n        }\n        this.refs.removeRow.forEach((removeButton, index) => {\n            this.addEventListener(removeButton, 'click', (event) => {\n                event.preventDefault();\n                this.removeValue(index);\n            });\n        });\n        // If single value field.\n        this.refs.addButton.forEach((addButton) => {\n            this.addEventListener(addButton, 'click', (event) => {\n                event.preventDefault();\n                this.addValue();\n            });\n        });\n        return superAttach.then(() => {\n            return Promise.all(promises);\n        });\n    }\n    /**\n     * Remove all event handlers.\n     */\n    detach() {\n        if (this.refs.input && this.refs.input.length) {\n            this.refs.input.forEach((input) => {\n                if (input.mask) {\n                    input.mask.destroy ? input.mask.destroy() : input.mask.remove();\n                }\n                if (input.widget) {\n                    input.widget.destroy();\n                }\n            });\n        }\n        if (this.refs.mask && this.refs.mask.length) {\n            this.refs.mask.forEach((input) => {\n                if (input.mask) {\n                    input.mask.destroy ? input.mask.destroy() : input.mask.remove();\n                }\n            });\n        }\n        super.detach();\n    }\n    /**\n     * Attach inputs to the element.\n     * @param {HTMLElement} element - The element to attach.\n     * @param {number} index - The index of the element to attach.\n     */\n    attachElement(element, index) {\n        this.addEventListener(element, this.inputInfo.changeEvent, () => {\n            // Delay update slightly to give input mask a chance to run.\n            const textCase = lodash_1.default.get(this.component, 'case', 'mixed');\n            if (textCase !== 'mixed') {\n                const { selectionStart, selectionEnd, } = element;\n                if (textCase === 'uppercase' && element.value) {\n                    element.value = element.value.toUpperCase();\n                }\n                if (textCase === 'lowercase' && element.value) {\n                    element.value = element.value.toLowerCase();\n                }\n                if (element.selectionStart && element.selectionEnd) {\n                    element.selectionStart = selectionStart;\n                    element.selectionEnd = selectionEnd;\n                }\n            }\n            try {\n                this.saveCaretPosition(element, index);\n            }\n            catch (err) {\n                console.warn('An error occurred while trying to save caret position', err);\n            }\n            // If a mask is present, delay the update to allow mask to update first.\n            if (element.mask) {\n                setTimeout(() => {\n                    return this.updateValue(null, {\n                        modified: (this.component.type !== 'hidden')\n                    }, index);\n                }, 1);\n            }\n            else {\n                return this.updateValue(null, {\n                    modified: (this.component.type !== 'hidden')\n                }, index);\n            }\n        });\n        if (!this.attachMultiMask(index)) {\n            const applyMask = () => {\n                this.setInputMask(element);\n                const valueMask = this.component.inputMask;\n                const displayMask = this.component.displayMask;\n                if (valueMask && displayMask && displayMask !== valueMask && this.refs.valueMaskInput) {\n                    this.setInputMask(this.refs.valueMaskInput, valueMask);\n                }\n            };\n            if (this.inputInfo.changeEvent === 'blur') {\n                this.addEventListener(element, this.inputInfo.changeEvent, () => {\n                    applyMask();\n                    this.dataValue = this.refs.input[0].value;\n                    if (this.checkComponentValidity()) {\n                        this.updateComponentValue(this.refs.input[0].value);\n                    }\n                });\n            }\n            else {\n                applyMask();\n            }\n        }\n    }\n    /**\n     * Event handler for selecting a mask from a dropdown.\n     * @param {Event} event - Event triggered by changing the selected option in mask.\n     */\n    onSelectMaskHandler(event) {\n        this.updateMask(event.target.maskInput, this.getMaskPattern(event.target.value));\n    }\n    /**\n     * Retrieves the mask pattern for a given mask name\n     * @param {string} maskName - The name of the mask to retrieve.\n     * @returns {any} The mask pattern associated with the given mask name.\n     */\n    getMaskPattern(maskName) {\n        if (!this.multiMasks) {\n            this.multiMasks = {};\n        }\n        if (this.multiMasks[maskName]) {\n            return this.multiMasks[maskName];\n        }\n        const mask = this.component.inputMasks.find(inputMask => inputMask.label === maskName);\n        this.multiMasks[maskName] = mask ? mask.mask : this.component.inputMasks[0].mask;\n        return this.multiMasks[maskName];\n    }\n    /**\n     * Attaches a selectable mask to an input field based on its configuration.\n     * @param {number} index - The index of the select or input in component array.\n     * @returns {boolean} - Returns true if the mask was successfully attached\n     */\n    attachMultiMask(index) {\n        if (!(this.isMultipleMasksField && this.component.inputMasks.length && this.refs.input.length)) {\n            return false;\n        }\n        const maskSelect = this.refs.select[index];\n        maskSelect.onchange = this.onSelectMaskHandler.bind(this);\n        maskSelect.maskInput = this.refs.mask[index];\n        this.setInputMask(maskSelect.maskInput, this.component.inputMasks[0].mask);\n        return true;\n    }\n    /**\n     * @param {any} input - The input element on which the mask is to be applied.\n     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.\n     */\n    updateMask(input, mask) {\n        if (!mask) {\n            return;\n        }\n        this.setInputMask(input, mask, !this.component.placeholder);\n        this.updateValue();\n    }\n    /**\n     * Adds a new empty value to the data array.\n     * @param {any} value -A value to be added to the data array.\n     */\n    addNewValue(value) {\n        if (value === undefined) {\n            value = this.component.defaultValue ?\n                this.component.defaultValue : this.emptyValue;\n            // If default is an empty aray, default back to empty value.\n            if (Array.isArray(value) && value.length === 0) {\n                value = this.emptyValue;\n            }\n        }\n        let dataValue = this.dataValue || [];\n        if (!Array.isArray(dataValue)) {\n            dataValue = [dataValue];\n        }\n        if (Array.isArray(value)) {\n            dataValue = dataValue.concat(value);\n        }\n        else {\n            dataValue.push(value);\n        }\n        this.dataValue = dataValue;\n    }\n    /**\n     * Adds a new empty value to the data array, and add a new row to contain it.\n     */\n    addValue() {\n        this.addNewValue();\n        this.redraw();\n        this.checkConditions();\n        if (!this.isEmpty(this.dataValue)) {\n            this.restoreValue();\n        }\n        if (this.root) {\n            this.root.onChange();\n        }\n    }\n}\nexports[\"default\"] = Multivalue;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/multivalue/Multivalue.js?");
 
 /***/ }),
 
@@ -6205,7 +6205,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DayComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'day',\n            label: 'Day',\n            key: 'day',\n            fields: {\n                day: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                },\n                month: {\n                    type: 'select',\n                    placeholder: '',\n                    required: false\n                },\n                year: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                }\n            },\n            dayFirst: false,\n            defaultValue: ''\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Day',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#day',\n            weight: 50,\n            schema: DayComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n    }\n    constructor(component, options, data) {\n        if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {\n            component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();\n        }\n        if (component.minDate && component.minDate.indexOf('moment(') === -1) {\n            component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();\n        }\n        super(component, options, data);\n    }\n    static get serverConditionSettings() {\n        return DayComponent.conditionOperatorsSettings;\n    }\n    /**\n     * The empty value for day component.\n     * @returns {''} - The empty value of the day component.\n     */\n    get emptyValue() {\n        return '';\n    }\n    get valueMask() {\n        return /^\\d{2}\\/\\d{2}\\/\\d{4}$/;\n    }\n    get dayRequired() {\n        return this.showDay && lodash_1.default.get(this.component, 'fields.day.required', false);\n    }\n    get showDay() {\n        return !lodash_1.default.get(this.component, 'fields.day.hide', false);\n    }\n    get monthRequired() {\n        return this.showMonth && lodash_1.default.get(this.component, 'fields.month.required', false);\n    }\n    get showMonth() {\n        return !lodash_1.default.get(this.component, 'fields.month.hide', false);\n    }\n    get yearRequired() {\n        return this.showYear && lodash_1.default.get(this.component, 'fields.year.required', false);\n    }\n    get showYear() {\n        return !lodash_1.default.get(this.component, 'fields.year.hide', false);\n    }\n    get defaultSchema() {\n        return DayComponent.schema();\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        info.changeEvent = 'input';\n        return info;\n    }\n    inputDefinition(name) {\n        let min, max;\n        if (name === 'day') {\n            min = 1;\n            max = 31;\n        }\n        if (name === 'month') {\n            min = 1;\n            max = 12;\n        }\n        if (name === 'year') {\n            min = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n            max = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 1900;\n        }\n        return {\n            type: 'input',\n            ref: name,\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: `form-control ${this.transform('class', `formio-day-component-${name}`)}`,\n                type: this.component.fields[name].type === 'select' ? 'select' : 'number',\n                placeholder: this.t(this.component.fields[name].placeholder),\n                step: 1,\n                min,\n                max,\n            }\n        };\n    }\n    selectDefinition(name) {\n        return {\n            multiple: false,\n            ref: name,\n            widget: 'html5',\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: 'form-control',\n                name,\n                lang: this.options.language\n            }\n        };\n    }\n    get days() {\n        if (this._days) {\n            return this._days;\n        }\n        this._days = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.day.placeholder', '') }\n        ];\n        for (let x = 1; x <= 31; x++) {\n            this._days.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._days;\n    }\n    get months() {\n        if (this._months) {\n            return this._months;\n        }\n        this._months = [\n            {\n                value: '',\n                label: lodash_1.default.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('Month') : '')\n            },\n            { value: 1, label: 'January' },\n            { value: 2, label: 'February' },\n            { value: 3, label: 'March' },\n            { value: 4, label: 'April' },\n            { value: 5, label: 'May' },\n            { value: 6, label: 'June' },\n            { value: 7, label: 'July' },\n            { value: 8, label: 'August' },\n            { value: 9, label: 'September' },\n            { value: 10, label: 'October' },\n            { value: 11, label: 'November' },\n            { value: 12, label: 'December' }\n        ];\n        return this._months;\n    }\n    get years() {\n        if (this._years) {\n            return this._years;\n        }\n        this._years = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.year.placeholder', '') }\n        ];\n        const minYears = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n        const maxYears = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 2030;\n        for (let x = minYears; x <= maxYears; x++) {\n            this._years.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._years;\n    }\n    setErrorClasses(elements, dirty, hasError) {\n        super.setErrorClasses(elements, dirty, hasError);\n        super.setErrorClasses([this.refs.day, this.refs.month, this.refs.year], dirty, hasError);\n    }\n    removeInputError(elements) {\n        super.removeInputError([this.refs.day, this.refs.month, this.refs.year]);\n        super.removeInputError(elements);\n    }\n    init() {\n        super.init();\n        const minYear = this.component.fields.year.minYear;\n        const maxYear = this.component.fields.year.maxYear;\n        this.component.maxYear = maxYear;\n        this.component.minYear = minYear;\n        const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.options.language);\n        this.dayFirst = this.component.useLocaleSettings\n            ? dateFormatInfo.dayFirst\n            : this.component.dayFirst;\n    }\n    render() {\n        if (this.isHtmlRenderMode()) {\n            return super.render(this.renderTemplate('input'));\n        }\n        return super.render(this.renderTemplate('day', {\n            dayFirst: this.dayFirst,\n            showDay: this.showDay,\n            showMonth: this.showMonth,\n            showYear: this.showYear,\n            day: this.renderField('day'),\n            month: this.renderField('month'),\n            year: this.renderField('year'),\n        }));\n    }\n    renderField(name) {\n        if (this.component.fields[name].type === 'select') {\n            return this.renderTemplate('select', {\n                input: this.selectDefinition(name),\n                selectOptions: this[`${name}s`].reduce((html, option) => html + this.renderTemplate('selectOption', {\n                    option,\n                    selected: false,\n                    attrs: {}\n                }), ''),\n            });\n        }\n        else {\n            return this.renderTemplate('input', {\n                prefix: this.prefix,\n                suffix: this.suffix,\n                input: this.inputDefinition(name)\n            });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, { day: 'single', month: 'single', year: 'single', input: 'multiple' });\n        const superAttach = super.attach(element);\n        const updateValueAndSaveFocus = (element, name) => () => {\n            try {\n                this.saveCaretPosition(element, name);\n            }\n            catch (err) {\n                console.warn('An error occurred while trying to save caret position', err);\n            }\n            this.updateValue(null, {\n                modified: true,\n            });\n        };\n        if (this.shouldDisabled) {\n            this.setDisabled(this.refs.day, true);\n            this.setDisabled(this.refs.month, true);\n            this.setDisabled(this.refs.year, true);\n            if (this.refs.input) {\n                this.refs.input.forEach((input) => this.setDisabled(input, true));\n            }\n        }\n        else {\n            this.addEventListener(this.refs.day, 'input', updateValueAndSaveFocus(this.refs.day, 'day'));\n            // TODO: Need to rework this to work with day select as well.\n            // Change day max input when month changes.\n            this.addEventListener(this.refs.month, 'input', () => {\n                const maxDay = this.refs.year ? parseInt(new Date(this.refs.year.value, this.refs.month.value, 0).getDate(), 10)\n                    : '';\n                const day = this.getFieldValue('day');\n                if (!this.component.fields.day.hide && maxDay) {\n                    this.refs.day.max = maxDay;\n                }\n                if (maxDay && day > maxDay) {\n                    this.refs.day.value = this.refs.day.max;\n                }\n                updateValueAndSaveFocus(this.refs.month, 'month')();\n            });\n            this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));\n            this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {\n                modified: true\n            }));\n            [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {\n                super.addFocusBlurEvents(element);\n            });\n        }\n        this.setValue(this.dataValue);\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        return superAttach;\n    }\n    validateRequired(setting, value) {\n        const { day, month, year } = this.parts;\n        if (this.dayRequired && !day) {\n            return false;\n        }\n        if (this.monthRequired && !month) {\n            return false;\n        }\n        if (this.yearRequired && !year) {\n            return false;\n        }\n        if (!(0, utils_1.boolValue)(setting)) {\n            return true;\n        }\n        return !this.isEmpty(value);\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.refs.year || !this.refs.month || !this.refs.day) {\n            return;\n        }\n        if (disabled) {\n            this.refs.year.setAttribute('disabled', 'disabled');\n            this.refs.month.setAttribute('disabled', 'disabled');\n            this.refs.day.setAttribute('disabled', 'disabled');\n        }\n        else {\n            this.refs.year.removeAttribute('disabled');\n            this.refs.month.removeAttribute('disabled');\n            this.refs.day.removeAttribute('disabled');\n        }\n    }\n    normalizeValue(value) {\n        if (!value || this.valueMask.test(value)) {\n            return value;\n        }\n        const dateParts = [];\n        const valueParts = value.split('/');\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';\n        let defaultDay = '';\n        let defaultMonth = '';\n        let defaultYear = '';\n        if (defaultValue) {\n            const hasHiddenFields = defaultValue.length !== 3;\n            defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];\n            defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];\n            defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];\n        }\n        if (this.options.building && defaultValue.length === 3) {\n            return this.component.defaultValue;\n        }\n        const getNextPart = (shouldTake, defaultValue) => {\n            // Only push the part if it's not an empty string\n            const part = shouldTake ? valueParts.shift() : defaultValue;\n            if (part !== '') {\n                dateParts.push(part);\n            }\n        };\n        if (this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showMonth, defaultMonth);\n        if (!this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showYear, defaultYear);\n        return dateParts.join('/');\n    }\n    /**\n     * Set the value at a specific index and updates the component's refs.\n     * @param {number} index - The index to set.\n     * @param {any} value - The value to set.\n     * @returns {null|void} - Returns null if the value is invalid, otherwise void.\n     */\n    setValueAt(index, value) {\n        // temporary solution to avoid input reset\n        // on invalid date.\n        if (value === 'Invalid date') {\n            return null;\n        }\n        let day, month, year;\n        const parts = value.split('/');\n        if (parts.length !== 3) {\n            day = this.getDayWithHiddenFields(parts).day;\n            month = this.getDayWithHiddenFields(parts).month;\n            year = this.getDayWithHiddenFields(parts).year;\n        }\n        else {\n            if (this.component.dayFirst) {\n                day = parts.shift();\n            }\n            month = parts.shift();\n            if (!this.component.dayFirst) {\n                day = parts.shift();\n            }\n            year = parts.shift();\n        }\n        if (this.refs.day && this.showDay) {\n            this.refs.day.value = day === '00' ? '' : parseInt(day, 10);\n        }\n        if (this.refs.month && this.showMonth) {\n            this.refs.month.value = month === '00' ? '' : parseInt(month, 10);\n        }\n        if (this.refs.year && this.showYear) {\n            this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);\n        }\n    }\n    getDayWithHiddenFields(parts) {\n        let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        if (!this.showDay) {\n            MONTH = MONTH === 0 ? 0 : MONTH - 1;\n            YEAR = YEAR - 1;\n            DAY = null;\n        }\n        if (!this.showMonth) {\n            DAY = DAY === 0 ? 0 : DAY - 1;\n            YEAR = YEAR - 1;\n            MONTH = null;\n        }\n        if (!this.showYear) {\n            YEAR = null;\n        }\n        return {\n            month: lodash_1.default.isNull(MONTH) ? '' : parts[MONTH],\n            day: lodash_1.default.isNull(DAY) ? '' : parts[DAY],\n            year: lodash_1.default.isNull(YEAR) ? '' : parts[YEAR],\n        };\n    }\n    getFieldValue(name) {\n        const parts = this.dataValue ? this.dataValue.split('/') : [];\n        let val = 0;\n        switch (name) {\n            case 'month':\n                val = parts[this.dayFirst ? 1 : 0];\n                break;\n            case 'day':\n                val = parts[this.dayFirst ? 0 : 1];\n                break;\n            case 'year':\n                val = parts[2];\n                break;\n        }\n        val = parseInt(val, 10);\n        return (!lodash_1.default.isNaN(val) && lodash_1.default.isNumber(val)) ? val : 0;\n    }\n    get parts() {\n        return {\n            day: this.getFieldValue('day'),\n            month: this.getFieldValue('month'),\n            year: this.getFieldValue('year'),\n        };\n    }\n    /**\n     * Get the format for the value string.\n     * @returns {string} - the format for the value string.\n     */\n    get format() {\n        let format = '';\n        if (this.component.dayFirst && this.showDay) {\n            format += 'D/';\n        }\n        if (this.showMonth) {\n            format += 'M/';\n        }\n        if (!this.component.dayFirst && this.showDay) {\n            format += 'D/';\n        }\n        if (this.showYear) {\n            format += 'YYYY';\n            return format;\n        }\n        else {\n            // Trim off the \"/\" from the end of the format string.\n            return format.length ? format.substring(0, format.length - 1) : format;\n        }\n    }\n    /**\n     * Return the date for this component.\n     * @param {any} value - The value to convert to a date.\n     * @returns {null|string} - The date string.\n     */\n    getDate(value) {\n        let defaults = [], day, month, year;\n        // Map positions to identifiers to get default values for each part of day\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = value || this.component.defaultValue;\n        if (defaultValue) {\n            defaults = defaultValue.split('/').map(x => parseInt(x, 10));\n        }\n        if (this.showDay && this.refs.day) {\n            day = parseInt(this.refs.day.value, 10);\n        }\n        if (day === undefined || lodash_1.default.isNaN(day)) {\n            day = defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0;\n        }\n        if (this.showMonth && this.refs.month) {\n            // Months are 0 indexed.\n            month = parseInt(this.refs.month.value, 10);\n        }\n        if (month === undefined || lodash_1.default.isNaN(month)) {\n            month = defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;\n        }\n        if (this.showYear && this.refs.year) {\n            year = parseInt(this.refs.year.value);\n        }\n        if (year === undefined || lodash_1.default.isNaN(year)) {\n            year = defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;\n        }\n        let result;\n        if (!day && !month && !year) {\n            return null;\n        }\n        // add trailing zeros if the data is showed\n        day = this.showDay ? day.toString().padStart(2, 0) : '';\n        month = this.showMonth ? month.toString().padStart(2, 0) : '';\n        year = this.showYear ? year.toString().padStart(4, 0) : '';\n        if (this.component.dayFirst) {\n            result = `${day}${this.showDay && this.showMonth || this.showDay && this.showYear ? '/' : ''}${month}${this.showMonth && this.showYear ? '/' : ''}${year}`;\n        }\n        else {\n            result = `${month}${this.showDay && this.showMonth || this.showMonth && this.showYear ? '/' : ''}${day}${this.showDay && this.showYear ? '/' : ''}${year}`;\n        }\n        return result;\n    }\n    /**\n     * Return the date string for this component.\n     * @returns {string|null} - The date string for this component.\n     */\n    get date() {\n        return this.getDate();\n    }\n    /**\n     * Return the raw value.\n     * @returns {string} - The raw value of the component.\n     */\n    get validationValue() {\n        return this.dataValue;\n    }\n    getValue() {\n        const result = super.getValue();\n        return (!result) ? this.dataValue : result;\n    }\n    /**\n     * Get the value at a specific index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at index.\n     */\n    getValueAt(index) {\n        const date = this.date || this.emptyValue;\n        if (date) {\n            this.refs.input[index].value = date;\n            return this.refs.input[index].value;\n        }\n        else {\n            this.refs.input[index].value = '';\n            return null;\n        }\n    }\n    /**\n     * Get the input value of the date.\n     * @param {any} value - The value to convert to a string.\n     * @returns {string|null} - The string value of the date.\n     */\n    getValueAsString(value) {\n        return this.getDate(value) || '';\n    }\n    focus(field) {\n        var _a, _b, _c;\n        if (field && typeof field === 'string' && this.refs[field]) {\n            this.refs[field].focus();\n        }\n        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {\n            (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();\n        }\n        else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {\n            (_b = this.refs.month) === null || _b === void 0 ? void 0 : _b.focus();\n        }\n        else if (!this.showDay && !this.showDay && this.showYear) {\n            (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();\n        }\n    }\n    restoreCaretPosition() {\n        var _a;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            const { selection, index } = this.root.currentSelection;\n            if (this.refs[index]) {\n                const input = this.refs[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (isInputRangeSelectable(input)) {\n                    input.setSelectionRange(...selection);\n                }\n            }\n        }\n    }\n    isPartialDay(value) {\n        if (!value) {\n            return true;\n        }\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const values = value.split('/');\n        if (values.length < 3) {\n            return true;\n        }\n        return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n    }\n    getValidationFormat() {\n        var _a, _b, _c, _d, _e, _f;\n        let validationFormat = this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n        if ((_b = (_a = this.fields) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.hide) {\n            validationFormat = validationFormat.replace('DD-', '');\n        }\n        if ((_d = (_c = this.fields) === null || _c === void 0 ? void 0 : _c.month) === null || _d === void 0 ? void 0 : _d.hide) {\n            validationFormat = validationFormat.replace('MM-', '');\n        }\n        if ((_f = (_e = this.fields) === null || _e === void 0 ? void 0 : _e.year) === null || _f === void 0 ? void 0 : _f.hide) {\n            validationFormat = validationFormat.replace('-YYYY', '');\n        }\n        return validationFormat;\n    }\n}\nexports[\"default\"] = DayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/Day.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DayComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'day',\n            label: 'Day',\n            key: 'day',\n            fields: {\n                day: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                },\n                month: {\n                    type: 'select',\n                    placeholder: '',\n                    required: false\n                },\n                year: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                }\n            },\n            dayFirst: false,\n            defaultValue: ''\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Day',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#day',\n            weight: 50,\n            schema: DayComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n    }\n    constructor(component, options, data) {\n        if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {\n            component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();\n        }\n        if (component.minDate && component.minDate.indexOf('moment(') === -1) {\n            component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();\n        }\n        super(component, options, data);\n    }\n    static get serverConditionSettings() {\n        return DayComponent.conditionOperatorsSettings;\n    }\n    /**\n     * The empty value for day component.\n     * @returns {''} - The empty value of the day component.\n     */\n    get emptyValue() {\n        return '';\n    }\n    get valueMask() {\n        return /^\\d{2}\\/\\d{2}\\/\\d{4}$/;\n    }\n    get dayRequired() {\n        return this.showDay && lodash_1.default.get(this.component, 'fields.day.required', false);\n    }\n    get showDay() {\n        return !lodash_1.default.get(this.component, 'fields.day.hide', false);\n    }\n    get monthRequired() {\n        return this.showMonth && lodash_1.default.get(this.component, 'fields.month.required', false);\n    }\n    get showMonth() {\n        return !lodash_1.default.get(this.component, 'fields.month.hide', false);\n    }\n    get yearRequired() {\n        return this.showYear && lodash_1.default.get(this.component, 'fields.year.required', false);\n    }\n    get showYear() {\n        return !lodash_1.default.get(this.component, 'fields.year.hide', false);\n    }\n    get defaultSchema() {\n        return DayComponent.schema();\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        info.changeEvent = 'input';\n        return info;\n    }\n    inputDefinition(name) {\n        let min, max;\n        if (name === 'day') {\n            min = 1;\n            max = 31;\n        }\n        if (name === 'month') {\n            min = 1;\n            max = 12;\n        }\n        if (name === 'year') {\n            min = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n            max = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 1900;\n        }\n        return {\n            type: 'input',\n            ref: name,\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: `form-control ${this.transform('class', `formio-day-component-${name}`)}`,\n                type: this.component.fields[name].type === 'select' ? 'select' : 'number',\n                placeholder: this.t(this.component.fields[name].placeholder),\n                step: 1,\n                min,\n                max,\n            }\n        };\n    }\n    selectDefinition(name) {\n        return {\n            multiple: false,\n            ref: name,\n            widget: 'html5',\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: 'form-control',\n                name,\n                lang: this.options.language\n            }\n        };\n    }\n    get days() {\n        if (this._days) {\n            return this._days;\n        }\n        this._days = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.day.placeholder', '') }\n        ];\n        for (let x = 1; x <= 31; x++) {\n            this._days.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._days;\n    }\n    get months() {\n        if (this._months) {\n            return this._months;\n        }\n        this._months = [\n            {\n                value: '',\n                label: lodash_1.default.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('Month') : '')\n            },\n            { value: 1, label: 'January' },\n            { value: 2, label: 'February' },\n            { value: 3, label: 'March' },\n            { value: 4, label: 'April' },\n            { value: 5, label: 'May' },\n            { value: 6, label: 'June' },\n            { value: 7, label: 'July' },\n            { value: 8, label: 'August' },\n            { value: 9, label: 'September' },\n            { value: 10, label: 'October' },\n            { value: 11, label: 'November' },\n            { value: 12, label: 'December' }\n        ];\n        return this._months;\n    }\n    get years() {\n        if (this._years) {\n            return this._years;\n        }\n        this._years = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.year.placeholder', '') }\n        ];\n        const minYears = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n        const maxYears = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 2030;\n        for (let x = minYears; x <= maxYears; x++) {\n            this._years.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._years;\n    }\n    setErrorClasses(elements, dirty, hasError) {\n        super.setErrorClasses(elements, dirty, hasError);\n        super.setErrorClasses([this.refs.day, this.refs.month, this.refs.year], dirty, hasError);\n    }\n    removeInputError(elements) {\n        super.removeInputError([this.refs.day, this.refs.month, this.refs.year]);\n        super.removeInputError(elements);\n    }\n    init() {\n        super.init();\n        const minYear = this.component.fields.year.minYear;\n        const maxYear = this.component.fields.year.maxYear;\n        this.component.maxYear = maxYear;\n        this.component.minYear = minYear;\n        const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.options.language);\n        this.dayFirst = this.component.useLocaleSettings\n            ? dateFormatInfo.dayFirst\n            : this.component.dayFirst;\n    }\n    render() {\n        if (this.isHtmlRenderMode()) {\n            return super.render(this.renderTemplate('input'));\n        }\n        return super.render(this.renderTemplate('day', {\n            dayFirst: this.dayFirst,\n            showDay: this.showDay,\n            showMonth: this.showMonth,\n            showYear: this.showYear,\n            day: this.renderField('day'),\n            month: this.renderField('month'),\n            year: this.renderField('year'),\n        }));\n    }\n    renderField(name) {\n        if (this.component.fields[name].type === 'select') {\n            return this.renderTemplate('select', {\n                input: this.selectDefinition(name),\n                selectOptions: this[`${name}s`].reduce((html, option) => html + this.renderTemplate('selectOption', {\n                    option,\n                    selected: false,\n                    attrs: {}\n                }), ''),\n            });\n        }\n        else {\n            return this.renderTemplate('input', {\n                prefix: this.prefix,\n                suffix: this.suffix,\n                input: this.inputDefinition(name)\n            });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, { day: 'single', month: 'single', year: 'single', input: 'multiple' });\n        const superAttach = super.attach(element);\n        const updateValueAndSaveFocus = (element, name) => () => {\n            try {\n                this.saveCaretPosition(element, name);\n            }\n            catch (err) {\n                console.warn('An error occurred while trying to save caret position', err);\n            }\n            this.updateValue(null, {\n                modified: true,\n            });\n        };\n        if (this.shouldDisabled) {\n            this.setDisabled(this.refs.day, true);\n            this.setDisabled(this.refs.month, true);\n            this.setDisabled(this.refs.year, true);\n            if (this.refs.input) {\n                this.refs.input.forEach((input) => this.setDisabled(input, true));\n            }\n        }\n        else {\n            this.addEventListener(this.refs.day, 'input', updateValueAndSaveFocus(this.refs.day, 'day'));\n            // TODO: Need to rework this to work with day select as well.\n            // Change day max input when month changes.\n            this.addEventListener(this.refs.month, 'input', () => {\n                const maxDay = this.refs.year ? parseInt(new Date(this.refs.year.value, this.refs.month.value, 0).getDate(), 10)\n                    : '';\n                const day = this.getFieldValue('day');\n                if (!this.component.fields.day.hide && maxDay) {\n                    this.refs.day.max = maxDay;\n                }\n                if (maxDay && day > maxDay) {\n                    this.refs.day.value = this.refs.day.max;\n                }\n                updateValueAndSaveFocus(this.refs.month, 'month')();\n            });\n            this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));\n            this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {\n                modified: true\n            }));\n            [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {\n                super.addFocusBlurEvents(element);\n            });\n        }\n        this.setValue(this.dataValue);\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        return superAttach;\n    }\n    validateRequired(setting, value) {\n        const { day, month, year } = this.parts;\n        if (this.dayRequired && !day) {\n            return false;\n        }\n        if (this.monthRequired && !month) {\n            return false;\n        }\n        if (this.yearRequired && !year) {\n            return false;\n        }\n        if (!(0, utils_1.boolValue)(setting)) {\n            return true;\n        }\n        return !this.isEmpty(value);\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.refs.year || !this.refs.month || !this.refs.day) {\n            return;\n        }\n        if (disabled) {\n            this.refs.year.setAttribute('disabled', 'disabled');\n            this.refs.month.setAttribute('disabled', 'disabled');\n            this.refs.day.setAttribute('disabled', 'disabled');\n        }\n        else {\n            this.refs.year.removeAttribute('disabled');\n            this.refs.month.removeAttribute('disabled');\n            this.refs.day.removeAttribute('disabled');\n        }\n    }\n    normalizeValue(value) {\n        if (!value || this.valueMask.test(value)) {\n            return value;\n        }\n        const dateParts = [];\n        const valueParts = value.split('/');\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';\n        let defaultDay = '';\n        let defaultMonth = '';\n        let defaultYear = '';\n        if (defaultValue) {\n            const hasHiddenFields = defaultValue.length !== 3;\n            defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];\n            defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];\n            defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];\n        }\n        if (this.options.building && defaultValue.length === 3) {\n            return this.component.defaultValue;\n        }\n        const getNextPart = (shouldTake, defaultValue) => {\n            // Only push the part if it's not an empty string\n            const part = shouldTake ? valueParts.shift() : defaultValue;\n            if (part !== '') {\n                dateParts.push(part);\n            }\n        };\n        if (this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showMonth, defaultMonth);\n        if (!this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showYear, defaultYear);\n        return dateParts.join('/');\n    }\n    /**\n     * Set the value at a specific index and updates the component's refs.\n     * @param {number} index - The index to set.\n     * @param {any} value - The value to set.\n     * @returns {null|void} - Returns null if the value is invalid, otherwise void.\n     */\n    setValueAt(index, value) {\n        // temporary solution to avoid input reset\n        // on invalid date.\n        if (value === 'Invalid date') {\n            return null;\n        }\n        let day, month, year;\n        const parts = value.split('/');\n        if (parts.length !== 3) {\n            day = this.getDayWithHiddenFields(parts).day;\n            month = this.getDayWithHiddenFields(parts).month;\n            year = this.getDayWithHiddenFields(parts).year;\n        }\n        else {\n            if (this.component.dayFirst) {\n                day = parts.shift();\n            }\n            month = parts.shift();\n            if (!this.component.dayFirst) {\n                day = parts.shift();\n            }\n            year = parts.shift();\n        }\n        if (this.refs.day && this.showDay) {\n            this.refs.day.value = day === '00' ? '' : parseInt(day, 10);\n        }\n        if (this.refs.month && this.showMonth) {\n            this.refs.month.value = month === '00' ? '' : parseInt(month, 10);\n        }\n        if (this.refs.year && this.showYear) {\n            this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);\n        }\n    }\n    getDayWithHiddenFields(parts) {\n        let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        if (!this.showDay) {\n            MONTH = MONTH === 0 ? 0 : MONTH - 1;\n            YEAR = YEAR - 1;\n            DAY = null;\n        }\n        if (!this.showMonth) {\n            if (!lodash_1.default.isNull(DAY)) {\n                DAY = DAY === 0 ? 0 : DAY - 1;\n            }\n            YEAR = YEAR - 1;\n            MONTH = null;\n        }\n        if (!this.showYear) {\n            YEAR = null;\n        }\n        return {\n            month: lodash_1.default.isNull(MONTH) ? '' : parts[MONTH],\n            day: lodash_1.default.isNull(DAY) ? '' : parts[DAY],\n            year: lodash_1.default.isNull(YEAR) ? '' : parts[YEAR],\n        };\n    }\n    getFieldValue(name) {\n        const parts = this.dataValue ? this.dataValue.split('/') : [];\n        let val = 0;\n        switch (name) {\n            case 'month':\n                val = parts[this.dayFirst ? 1 : 0];\n                break;\n            case 'day':\n                val = parts[this.dayFirst ? 0 : 1];\n                break;\n            case 'year':\n                val = parts[2];\n                break;\n        }\n        val = parseInt(val, 10);\n        return (!lodash_1.default.isNaN(val) && lodash_1.default.isNumber(val)) ? val : 0;\n    }\n    get parts() {\n        return {\n            day: this.getFieldValue('day'),\n            month: this.getFieldValue('month'),\n            year: this.getFieldValue('year'),\n        };\n    }\n    /**\n     * Get the format for the value string.\n     * @returns {string} - the format for the value string.\n     */\n    get format() {\n        let format = '';\n        if (this.component.dayFirst && this.showDay) {\n            format += 'D/';\n        }\n        if (this.showMonth) {\n            format += 'M/';\n        }\n        if (!this.component.dayFirst && this.showDay) {\n            format += 'D/';\n        }\n        if (this.showYear) {\n            format += 'YYYY';\n            return format;\n        }\n        else {\n            // Trim off the \"/\" from the end of the format string.\n            return format.length ? format.substring(0, format.length - 1) : format;\n        }\n    }\n    /**\n     * Return the date for this component.\n     * @param {any} value - The value to convert to a date.\n     * @returns {null|string} - The date string.\n     */\n    getDate(value) {\n        let defaults = [], day, month, year;\n        // Map positions to identifiers to get default values for each part of day\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = value || this.component.defaultValue;\n        if (defaultValue) {\n            defaults = defaultValue.split('/').map(x => parseInt(x, 10));\n        }\n        if (this.showDay && this.refs.day) {\n            day = parseInt(this.refs.day.value, 10);\n        }\n        if (day === undefined || lodash_1.default.isNaN(day)) {\n            day = defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0;\n        }\n        if (this.showMonth && this.refs.month) {\n            // Months are 0 indexed.\n            month = parseInt(this.refs.month.value, 10);\n        }\n        if (month === undefined || lodash_1.default.isNaN(month)) {\n            month = defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;\n        }\n        if (this.showYear && this.refs.year) {\n            year = parseInt(this.refs.year.value);\n        }\n        if (year === undefined || lodash_1.default.isNaN(year)) {\n            year = defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;\n        }\n        let result;\n        if (!day && !month && !year) {\n            return null;\n        }\n        // add trailing zeros if the data is showed\n        day = this.showDay ? day.toString().padStart(2, 0) : '';\n        month = this.showMonth ? month.toString().padStart(2, 0) : '';\n        year = this.showYear ? year.toString().padStart(4, 0) : '';\n        if (this.component.dayFirst) {\n            result = `${day}${this.showDay && this.showMonth || this.showDay && this.showYear ? '/' : ''}${month}${this.showMonth && this.showYear ? '/' : ''}${year}`;\n        }\n        else {\n            result = `${month}${this.showDay && this.showMonth || this.showMonth && this.showYear ? '/' : ''}${day}${this.showDay && this.showYear ? '/' : ''}${year}`;\n        }\n        return result;\n    }\n    /**\n     * Return the date string for this component.\n     * @returns {string|null} - The date string for this component.\n     */\n    get date() {\n        return this.getDate();\n    }\n    /**\n     * Return the raw value.\n     * @returns {string} - The raw value of the component.\n     */\n    get validationValue() {\n        return this.dataValue;\n    }\n    getValue() {\n        const result = super.getValue();\n        return (!result) ? this.dataValue : result;\n    }\n    /**\n     * Get the value at a specific index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at index.\n     */\n    getValueAt(index) {\n        const date = this.date || this.emptyValue;\n        if (date) {\n            this.refs.input[index].value = date;\n            return this.refs.input[index].value;\n        }\n        else {\n            this.refs.input[index].value = '';\n            return null;\n        }\n    }\n    /**\n     * Get the input value of the date.\n     * @param {any} value - The value to convert to a string.\n     * @returns {string|null} - The string value of the date.\n     */\n    getValueAsString(value) {\n        return this.getDate(value) || '';\n    }\n    focus(field) {\n        var _a, _b, _c;\n        if (field && typeof field === 'string' && this.refs[field]) {\n            this.refs[field].focus();\n        }\n        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {\n            (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();\n        }\n        else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {\n            (_b = this.refs.month) === null || _b === void 0 ? void 0 : _b.focus();\n        }\n        else if (!this.showDay && !this.showDay && this.showYear) {\n            (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();\n        }\n    }\n    restoreCaretPosition() {\n        var _a;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            const { selection, index } = this.root.currentSelection;\n            if (this.refs[index]) {\n                const input = this.refs[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (isInputRangeSelectable(input)) {\n                    input.setSelectionRange(...selection);\n                }\n            }\n        }\n    }\n    isPartialDay(value) {\n        if (!value) {\n            return true;\n        }\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const values = value.split('/');\n        if (values.length < 3) {\n            return true;\n        }\n        return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n    }\n    getValidationFormat() {\n        var _a, _b, _c, _d, _e, _f;\n        let validationFormat = this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n        if ((_b = (_a = this.fields) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.hide) {\n            validationFormat = validationFormat.replace('DD-', '');\n        }\n        if ((_d = (_c = this.fields) === null || _c === void 0 ? void 0 : _c.month) === null || _d === void 0 ? void 0 : _d.hide) {\n            validationFormat = validationFormat.replace('MM-', '');\n        }\n        if ((_f = (_e = this.fields) === null || _e === void 0 ? void 0 : _e.year) === null || _f === void 0 ? void 0 : _f.hide) {\n            validationFormat = validationFormat.replace('-YYYY', '');\n        }\n        return validationFormat;\n    }\n}\nexports[\"default\"] = DayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/Day.js?");
 
 /***/ }),
 
@@ -6931,7 +6931,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst ChoicesWrapper_1 = __importDefault(__webpack_require__(/*! ../../utils/ChoicesWrapper */ \"./lib/cjs/utils/ChoicesWrapper.js\"));\nclass SelectComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'select',\n            label: 'Select',\n            key: 'select',\n            idPath: 'id',\n            data: {\n                values: [{ label: '', value: '' }],\n                json: '',\n                url: '',\n                resource: '',\n                custom: ''\n            },\n            clearOnRefresh: false,\n            limit: 100,\n            valueProperty: '',\n            lazyLoad: true,\n            filter: '',\n            searchEnabled: true,\n            searchDebounce: 0.3,\n            searchField: '',\n            minSearch: 0,\n            readOnlyValue: false,\n            selectFields: '',\n            selectThreshold: 0.3,\n            uniqueOptions: false,\n            tableView: true,\n            fuseOptions: {\n                include: 'score',\n                threshold: 0.3,\n            },\n            indexeddb: {\n                filter: {}\n            },\n            customOptions: {},\n            useExactSearch: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select',\n            group: 'basic',\n            icon: 'th-list',\n            weight: 70,\n            documentation: '/userguide/form-building/form-components#select',\n            schema: SelectComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        const numberType = () => ({ type: 'number' });\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });\n                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {\n                    valueComp.reference = false;\n                    valueComp.onSetItems = `\n            var templateKeys = utils.getItemTemplateKeys(component.template) || [];\n            items = _.map(items || [], i => {\n              var item = {};\n              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));\n              return item;\n            })\n          `;\n                }\n                return valueComp;\n            }, dataTypeOperators: {\n                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],\n            }, dataTypeValueComponents: {\n                number: {\n                    lessThan: numberType,\n                    greaterThan: numberType,\n                    lessThanOrEqual: numberType,\n                    greaterThanOrEqual: numberType,\n                },\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType, reference } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (reference) {\n            return [object];\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        // Keep track of the select options.\n        this.selectOptions = [];\n        if (this.itemsFromUrl) {\n            this.isFromSearch = false;\n            this.searchServerCount = null;\n            this.defaultServerCount = null;\n            this.isScrollLoading = false;\n            this.searchDownloadedResources = [];\n            this.defaultDownloadedResources = [];\n        }\n        // If this component has been activated.//\n        this.activated = false;\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.shouldPositionDropdown = this.hasDataGridAncestor();\n        if (this.isHtmlRenderMode()) {\n            this.activate();\n        }\n        // Get the template keys for this select component.\n        this.getTemplateKeys();\n    }\n    get dataReady() {\n        // If the root submission has been set, and we are still not attached, then assume\n        // that our data is ready.\n        if (this.root &&\n            this.root.submissionSet &&\n            !this.attached) {\n            return Promise.resolve();\n        }\n        return this.itemsLoaded;\n    }\n    get defaultSchema() {\n        return SelectComponent.schema();\n    }\n    get emptyValue() {\n        if (this.component.multiple) {\n            return [];\n        }\n        // if select has JSON data source type, we are defining if empty value would be an object or a string by checking JSON's first item\n        if (this.component.dataSrc === 'json' && this.component.data.json) {\n            const firstItem = this.component.data.json[0];\n            let firstValue;\n            if (this.valueProperty) {\n                firstValue = lodash_1.default.get(firstItem, this.valueProperty);\n            }\n            else {\n                firstValue = firstItem;\n            }\n            if (firstValue && typeof firstValue === 'string') {\n                return '';\n            }\n            else {\n                return {};\n            }\n        }\n        if (this.valueProperty) {\n            return '';\n        }\n        return {};\n    }\n    get valueProperty() {\n        if (this.component.valueProperty) {\n            return this.component.valueProperty;\n        }\n        // Force values datasource to use values without actually setting it on the component settings.\n        if (this.component.dataSrc === 'values') {\n            return 'value';\n        }\n        return '';\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'select';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get isSelectResource() {\n        return this.component.dataSrc === 'resource';\n    }\n    get itemsFromUrl() {\n        return this.isSelectResource || this.isSelectURL;\n    }\n    get isInfiniteScrollProvided() {\n        return this.itemsFromUrl;\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get shouldInitialLoad() {\n        if (this.component.widget === 'html5' &&\n            this.isEntireObjectDisplay() &&\n            this.component.searchField &&\n            this.dataValue) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\n    }\n    isEntireObjectDisplay() {\n        return this.component.dataSrc === 'resource' && this.valueProperty === 'data';\n    }\n    selectValueAndLabel(data) {\n        const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));\n        const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;\n        return {\n            value,\n            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)\n        };\n    }\n    itemTemplate(data, value) {\n        if (!lodash_1.default.isNumber(data) && lodash_1.default.isEmpty(data)) {\n            return '';\n        }\n        // If they wish to show the value in read only mode, then just return the itemValue here.\n        if (this.options.readOnly && this.component.readOnlyValue) {\n            return this.itemValue(data);\n        }\n        // Perform a fast interpretation if we should not use the template.\n        if (data && !this.component.template) {\n            const itemLabel = data.label || data;\n            const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;\n            return this.sanitize(value, this.shouldSanitizeValue);\n        }\n        if (this.component.multiple\n            && lodash_1.default.isArray(this.dataValue) ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val) : (this.dataValue === value)) {\n            const selectData = this.selectData;\n            if (selectData) {\n                const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n                if (!this.templateData || !this.templateData[templateValue]) {\n                    this.getOptionTemplate(data, value);\n                }\n                if (this.component.multiple) {\n                    if (selectData[templateValue]) {\n                        data = selectData[templateValue];\n                    }\n                }\n                else {\n                    data = selectData;\n                }\n            }\n        }\n        if (typeof data === 'string' || typeof data === 'number') {\n            return this.sanitize(this.t(data, { _userInput: true }), this.shouldSanitizeValue);\n        }\n        if (Array.isArray(data)) {\n            return data.map((val) => {\n                if (typeof val === 'string' || typeof val === 'number') {\n                    return this.sanitize(this.t(val, { _userInput: true }), this.shouldSanitizeValue);\n                }\n                return val;\n            });\n        }\n        if (data.data) {\n            // checking additional fields in the template for the selected Entire Object option\n            const hasNestedFields = /item\\.data\\.\\w*/g.test(this.component.template);\n            data.data = this.isEntireObjectDisplay() && lodash_1.default.isObject(data.data) && !hasNestedFields\n                ? JSON.stringify(data.data)\n                : data.data;\n        }\n        return super.itemTemplate(data, value);\n    }\n    /**\n     * Adds an option to the select dropdown.\n     * @param {*} value - The value of the new option.\n     * @param {string} label - The label of the new option.\n     * @param {object} [attrs] - Additional value attributes. Defaults to {}.\n     * @param {string} [id] - An id. Defaults to a random string.\n     */\n    addOption(value, label, attrs = {}, id = (0, utils_1.getRandomComponentId)()) {\n        if (lodash_1.default.isNil(label))\n            return;\n        const idPath = this.component.idPath\n            ? this.component.idPath.split('.').reduceRight((obj, key) => ({ [key]: obj }), id)\n            : {};\n        const option = Object.assign({ value: this.getOptionValue(value), label }, idPath);\n        const skipOption = this.component.uniqueOptions\n            ? !!this.selectOptions.find((selectOption) => lodash_1.default.isEqual(selectOption.value, option.value))\n            : false;\n        if (skipOption) {\n            return;\n        }\n        if (value) {\n            this.selectOptions.push(option);\n        }\n        if (this.refs.selectContainer && (this.component.widget === 'html5')) {\n            // Replace an empty Object value to an empty String.\n            if (option.value && lodash_1.default.isObject(option.value) && lodash_1.default.isEmpty(option.value)) {\n                option.value = '';\n            }\n            // Add element to option so we can reference it later.\n            const div = document.createElement('div');\n            div.innerHTML = this.sanitize(this.renderTemplate('selectOption', {\n                selected: lodash_1.default.isEqual(this.getOptionValue(this.dataValue), option.value),\n                option,\n                attrs,\n                id,\n                useId: (this.valueProperty === '' || this.isEntireObjectDisplay()) && lodash_1.default.isObject(value) && id,\n            }), this.shouldSanitizeValue).trim();\n            option.element = div.firstChild;\n            this.refs.selectContainer.appendChild(option.element);\n        }\n    }\n    addValueOptions(items) {\n        items = items || [];\n        let added = false;\n        let data = this.dataValue;\n        // preset submission value with value property before request.\n        if (this.options.pdf && !items.length && this.component.dataSrc === 'url' && this.valueProperty) {\n            data = Array.isArray(data)\n                ? data.map(item => lodash_1.default.set({}, this.valueProperty, item))\n                : lodash_1.default.set({}, this.valueProperty, data);\n        }\n        if (!this.selectOptions.length) {\n            // Add the currently selected choices if they don't already exist.\n            const currentChoices = Array.isArray(data) && this.component.multiple ? data : [data];\n            added = this.addCurrentChoices(currentChoices, items);\n            if (!added && !this.component.multiple) {\n                this.addPlaceholder();\n            }\n        }\n        return added;\n    }\n    disableInfiniteScroll() {\n        if (!this.downloadedResources) {\n            return;\n        }\n        this.downloadedResources.serverCount = this.downloadedResources.length;\n        this.serverCount = this.downloadedResources.length;\n    }\n    /* eslint-disable max-statements */\n    setItems(items, fromSearch) {\n        var _a, _b;\n        this.selectItems = items;\n        // If the items is a string, then parse as JSON.\n        if (typeof items == 'string') {\n            try {\n                items = JSON.parse(items);\n            }\n            catch (err) {\n                console.warn(err.message);\n                items = [];\n            }\n        }\n        // Allow js processing (needed for form builder)\n        if (this.component.onSetItems) {\n            const newItems = typeof this.component.onSetItems === 'function'\n                ? this.component.onSetItems(this, items)\n                : this.evaluate(this.component.onSetItems, { items: items }, 'items');\n            if (newItems) {\n                items = newItems;\n            }\n        }\n        if (!this.choices && this.refs.selectContainer) {\n            this.empty(this.refs.selectContainer);\n        }\n        // If they provided select values, then we need to get them instead.\n        if (this.component.selectValues) {\n            items = lodash_1.default.get(items, this.component.selectValues, items) || [];\n        }\n        let areItemsEqual;\n        if (this.itemsFromUrl) {\n            areItemsEqual = this.isSelectURL ? lodash_1.default.isEqual(items, this.downloadedResources) : false;\n            const areItemsEnded = this.component.limit > items.length;\n            const areItemsDownloaded = areItemsEqual\n                && this.downloadedResources\n                && this.downloadedResources.length === items.length;\n            if (areItemsEnded) {\n                this.disableInfiniteScroll();\n            }\n            else if (areItemsDownloaded) {\n                this.selectOptions = [];\n            }\n            else {\n                this.serverCount = items.serverCount;\n            }\n        }\n        if (this.isScrollLoading && items) {\n            if (!areItemsEqual) {\n                this.downloadedResources = this.downloadedResources\n                    ? this.downloadedResources.concat(items)\n                    : items;\n            }\n            this.downloadedResources.serverCount = items.serverCount || this.downloadedResources.serverCount;\n        }\n        else {\n            this.downloadedResources = items || [];\n            this.selectOptions = [];\n            // If there is new select option with same id as already selected, set the new one\n            if (!lodash_1.default.isEmpty(this.dataValue) && this.component.idPath) {\n                const selectedOptionId = lodash_1.default.get(this.dataValue, this.component.idPath, null);\n                const newOptionWithSameId = !lodash_1.default.isNil(selectedOptionId) && items.find(item => {\n                    const itemId = lodash_1.default.get(item, this.component.idPath);\n                    return itemId === selectedOptionId;\n                });\n                if (newOptionWithSameId) {\n                    this.setValue(newOptionWithSameId);\n                }\n            }\n        }\n        // Add the value options.\n        if (!fromSearch) {\n            this.addValueOptions(items);\n        }\n        if (this.component.widget === 'html5' && !this.component.placeholder) {\n            this.addOption(null, '');\n        }\n        // Iterate through each of the items.\n        lodash_1.default.each(items, (item, index) => {\n            // preventing references of the components inside the form to the parent form when building forms\n            if (this.root && this.root.options.editForm && this.root.options.editForm._id && this.root.options.editForm._id === item._id)\n                return;\n            const itemValueAndLabel = this.selectValueAndLabel(item);\n            this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, lodash_1.default.get(item, this.component.idPath, String(index)));\n        });\n        if (this.choices) {\n            this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n        }\n        else if (this.loading) {\n            // Re-attach select input.\n            // this.appendTo(this.refs.input[0], this.selectContainer);\n        }\n        // We are no longer loading.\n        this.isScrollLoading = false;\n        this.loading = false;\n        const searching = fromSearch && ((_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.isFocussed);\n        if (!searching) {\n            // If a value is provided, then select it.\n            if (!this.isEmpty() || this.isRemoveButtonPressed) {\n                this.setValue(this.dataValue, {\n                    noUpdateEvent: true\n                });\n            }\n            else if (this.shouldAddDefaultValue && !this.options.readOnly) {\n                // If a default value is provided then select it.\n                const defaultValue = this.defaultValue;\n                if (!this.isEmpty(defaultValue)) {\n                    this.setValue(defaultValue);\n                }\n            }\n        }\n        // Say we are done loading the items.\n        this.itemsLoadedResolve();\n    }\n    getSingleItemValueForHTMLMode(data) {\n        var _a;\n        const option = (_a = this.selectOptions) === null || _a === void 0 ? void 0 : _a.find(({ value }) => lodash_1.default.isEqual(value, data));\n        if (option) {\n            return option.label || data;\n        }\n        return data;\n    }\n    itemValueForHTMLMode(value) {\n        if (!this.isHtmlRenderMode()) {\n            return super.itemValueForHTMLMode(value);\n        }\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item)\n                ? this.itemValueForHTMLMode(item)\n                : this.getSingleItemValueForHTMLMode(item));\n            return values.join(', ');\n        }\n        return this.getSingleItemValueForHTMLMode(value);\n    }\n    /* eslint-enable max-statements */\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && (this.component.defaultValue === false || this.component.defaultValue === 0)) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get loadingError() {\n        return !this.component.refreshOn && !this.component.refreshOnBlur && this.networkError;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        options = options || {};\n        // See if we should load items or not.\n        if (!this.shouldLoad || (!this.itemsFromUrl && this.options.readOnly)) {\n            this.isScrollLoading = false;\n            this.loading = false;\n            this.itemsLoadedResolve();\n            return;\n        }\n        // See if they have not met the minimum search requirements.\n        const minSearch = parseInt(this.component.minSearch, 10);\n        if (this.component.searchField &&\n            (minSearch > 0) &&\n            (!search || (search.length < minSearch))) {\n            // Set empty items.\n            return this.setItems([]);\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        const query = this.component.disableLimit ? {} : {\n            limit,\n            skip,\n        };\n        // Allow for url interpolation.\n        url = this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        });\n        // Add search capability.\n        if (this.component.searchField && search) {\n            const searchValue = Array.isArray(search)\n                ? search.join(',')\n                : typeof search === 'object'\n                    ? JSON.stringify(search)\n                    : search;\n            query[this.component.searchField] = this.component.searchField.endsWith('__regex')\n                ? lodash_1.default.escapeRegExp(searchValue)\n                : searchValue;\n        }\n        // If they wish to return only some fields.\n        if (this.component.selectFields) {\n            query.select = this.component.selectFields;\n        }\n        // Add sort capability\n        if (this.component.sort) {\n            query.sort = this.component.sort;\n        }\n        if (!lodash_1.default.isEmpty(query)) {\n            // Add the query string.\n            url += (!url.includes('?') ? '?' : '&') + Formio_1.Formio.serialize(query, (item) => this.interpolate(item));\n        }\n        // Add filter capability\n        if (this.component.filter) {\n            url += (!url.includes('?') ? '?' : '&') + this.interpolate(this.component.filter);\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response, !!search);\n        })\n            .catch((err) => {\n            if (this.itemsFromUrl) {\n                this.setItems([]);\n                this.disableInfiniteScroll();\n            }\n            this.isScrollLoading = false;\n            this.handleLoadingError(err);\n        });\n    }\n    handleLoadingError(err) {\n        this.loading = false;\n        if (err.networkError) {\n            this.networkError = true;\n        }\n        this.itemsLoadedResolve();\n        this.emit('componentError', {\n            component: this.component,\n            message: err.toString(),\n        });\n        console.warn(`Unable to load resources for ${this.key}`);\n    }\n    /**\n     * Get the request headers for this select dropdown.\n     * @returns {*} - Returns the request headers for this select dropdown.\n     */\n    get requestHeaders() {\n        // Create the headers object.\n        const headers = new Formio_1.Formio.Headers();\n        // Add custom headers to the url.\n        if (this.component.data && this.component.data.headers) {\n            try {\n                lodash_1.default.each(this.component.data.headers, (header) => {\n                    if (header.key) {\n                        headers.set(header.key, this.interpolate(header.value));\n                    }\n                });\n            }\n            catch (err) {\n                console.warn(err.message);\n            }\n        }\n        return headers;\n    }\n    getCustomItems() {\n        const customItems = this.evaluate(this.component.data.custom, {\n            values: []\n        }, 'values');\n        this.asyncValues = (0, utils_1.isPromise)(customItems);\n        return customItems;\n    }\n    asyncCustomValues() {\n        if (!lodash_1.default.isBoolean(this.asyncValues)) {\n            this.getCustomItems();\n        }\n        return this.asyncValues;\n    }\n    updateCustomItems(forceUpdate) {\n        if (this.asyncCustomValues()) {\n            if (!forceUpdate && !this.active) {\n                this.itemsLoadedResolve();\n                return;\n            }\n            this.loading = true;\n            this.getCustomItems()\n                .then(items => {\n                this.loading = false;\n                this.setItems(items || []);\n            })\n                .catch(err => {\n                this.handleLoadingError(err);\n            });\n        }\n        else {\n            this.setItems(this.getCustomItems() || []);\n        }\n    }\n    isEmpty(value = this.dataValue) {\n        return super.isEmpty(value) || value === undefined;\n    }\n    refresh(value, { instance }) {\n        if (this.component.clearOnRefresh && (instance && !instance.pristine)) {\n            this.setValue(this.emptyValue);\n        }\n        this.updateItems(null, true);\n    }\n    get additionalResourcesAvailable() {\n        return lodash_1.default.isNil(this.serverCount) || (this.serverCount > this.downloadedResources.length);\n    }\n    get serverCount() {\n        if (this.isFromSearch) {\n            return this.searchServerCount;\n        }\n        return this.defaultServerCount;\n    }\n    set serverCount(value) {\n        if (this.isFromSearch) {\n            this.searchServerCount = value;\n        }\n        else {\n            this.defaultServerCount = value;\n        }\n    }\n    get downloadedResources() {\n        if (this.isFromSearch) {\n            return this.searchDownloadedResources;\n        }\n        return this.defaultDownloadedResources;\n    }\n    set downloadedResources(value) {\n        if (this.isFromSearch) {\n            this.searchDownloadedResources = value;\n        }\n        else {\n            this.defaultDownloadedResources = value;\n        }\n    }\n    addPlaceholder() {\n        if (!this.component.placeholder) {\n            return;\n        }\n        this.addOption('', this.component.placeholder, { placeholder: true });\n    }\n    /**\n     * Activate this select control.\n     */\n    activate() {\n        if (this.loading || !this.active) {\n            this.setLoadingItem();\n        }\n        if (this.active) {\n            return;\n        }\n        this.activated = true;\n        this.triggerUpdate();\n    }\n    setLoadingItem(addToCurrentList = false) {\n        if (this.choices) {\n            if (addToCurrentList) {\n                this.choices.setChoices([{\n                        value: `${this.id}-loading`,\n                        label: 'Loading...',\n                        disabled: true,\n                    }], 'value', 'label');\n            }\n            else {\n                this.choices.setChoices([{\n                        value: '',\n                        label: `<i class=\"${this.iconClass('refresh')}\" style=\"font-size:1.3em;\"></i>`,\n                        disabled: true,\n                    }], 'value', 'label', true);\n            }\n        }\n        else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {\n            this.addOption('', this.t('loading...'));\n        }\n    }\n    get active() {\n        return !this.component.lazyLoad || this.activated;\n    }\n    render() {\n        const info = this.inputInfo;\n        info.attr = info.attr || {};\n        info.multiple = this.component.multiple;\n        return super.render(this.wrapElement(this.renderTemplate('select', {\n            input: info,\n            selectOptions: '',\n            index: null,\n        })));\n    }\n    wrapElement(element) {\n        return this.component.addResource && !this.options.readOnly\n            ? (this.renderTemplate('resourceAdd', {\n                element\n            }))\n            : element;\n    }\n    choicesOptions() {\n        const useSearch = this.component.hasOwnProperty('searchEnabled') ? this.component.searchEnabled : true;\n        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions == 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        const commonFuseOptions = {\n            maxPatternLength: 1000,\n            distance: 1000,\n        };\n        return Object.assign({ removeItemButton: this.component.disabled ? false : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {\n                containerOuter: 'choices form-group formio-choices',\n                containerInner: this.transform('class', 'form-control ui fluid selection dropdown')\n            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: (this.component.dropdown || 'auto'), searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch\n                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false }, customOptions);\n    }\n    /* eslint-disable max-statements */\n    attach(element) {\n        var _a, _b, _c;\n        const superAttach = super.attach(element);\n        this.loadRefs(element, {\n            selectContainer: 'single',\n            addResource: 'single',\n            autocompleteInput: 'single'\n        });\n        //enable autocomplete for select\n        const autocompleteInput = this.refs.autocompleteInput;\n        if (autocompleteInput) {\n            this.addEventListener(autocompleteInput, 'change', (event) => {\n                this.setValue(event.target.value);\n            });\n        }\n        const input = this.refs.selectContainer;\n        if (!input) {\n            return;\n        }\n        this.addEventListener(input, this.inputInfo.changeEvent, () => this.updateValue(null, {\n            modified: true\n        }));\n        this.attachRefreshOnBlur();\n        if (this.component.widget === 'html5') {\n            this.addFocusBlurEvents(input);\n            this.triggerUpdate(null, true);\n            if (this.visible) {\n                this.setItems(this.selectItems || []);\n            }\n            this.focusableElement = input;\n            if (this.component.dataSrc === 'custom') {\n                this.addEventListener(input, 'focus', () => this.updateCustomItems());\n            }\n            this.addEventListener(input, 'keydown', (event) => {\n                const { key } = event;\n                if (['Backspace', 'Delete'].includes(key)) {\n                    this.setValue(this.emptyValue);\n                }\n            });\n            return;\n        }\n        const tabIndex = input.tabIndex;\n        this.addPlaceholder();\n        if (this.i18next) {\n            input.setAttribute('dir', this.i18next.dir());\n        }\n        if ((_c = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.containerOuter) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.parentNode) {\n            this.choices.destroy();\n        }\n        const choicesOptions = this.choicesOptions();\n        if (ChoicesWrapper_1.default) {\n            this.choices = new ChoicesWrapper_1.default(input, choicesOptions);\n            if (this.selectOptions && this.selectOptions.length) {\n                this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n            }\n            if (this.component.multiple) {\n                this.focusableElement = this.choices.input.element;\n            }\n            else {\n                this.focusableElement = this.choices.containerInner.element;\n                this.choices.containerOuter.element.setAttribute('tabIndex', '-1');\n                this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());\n            }\n            Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);\n            if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {\n                this.scrollList = this.choices.choiceList.element;\n                this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());\n            }\n            if (choicesOptions.removeItemButton) {\n                this.addEventListener(input, 'removeItem', () => {\n                    this.isRemoveButtonPressed = true;\n                });\n            }\n        }\n        if (window && this.choices && this.shouldPositionDropdown) {\n            this.addEventListener(window.document, 'scroll', () => {\n                this.positionDropdown(true);\n            }, false, true);\n        }\n        this.focusableElement.setAttribute('tabIndex', tabIndex);\n        // If a search field is provided, then add an event listener to update items on search.\n        if (this.component.searchField) {\n            // Make sure to clear the search when no value is provided.\n            if (this.choices && this.choices.input && this.choices.input.element) {\n                this.addEventListener(this.choices.input.element, 'input', (event) => {\n                    this.isFromSearch = !!event.target.value;\n                    if (!event.target.value) {\n                        this.triggerUpdate();\n                    }\n                    else {\n                        this.serverCount = null;\n                        this.downloadedResources = [];\n                    }\n                });\n            }\n            this.addEventListener(input, 'choice', () => {\n                if (this.component.multiple && this.component.dataSrc === 'resource' && this.isFromSearch) {\n                    this.triggerUpdate();\n                }\n                this.isFromSearch = false;\n            });\n            // avoid spamming the resource/url endpoint when we have server side filtering enabled.\n            const debounceTimeout = this.component.searchField && (this.isSelectResource || this.isSelectURL) ?\n                (this.component.searchDebounce === 0 ? 0 : this.component.searchDebounce || this.defaultSchema.searchDebounce) * 1000\n                : 0;\n            const updateComponent = (evt) => {\n                this.triggerUpdate(evt.detail.value);\n            };\n            this.addEventListener(input, 'search', lodash_1.default.debounce((e) => {\n                updateComponent(e);\n                this.positionDropdown();\n            }, debounceTimeout));\n            this.addEventListener(input, 'stopSearch', () => this.triggerUpdate());\n            this.addEventListener(input, 'hideDropdown', () => {\n                if (this.choices && this.choices.input && this.choices.input.element) {\n                    this.choices.input.element.value = '';\n                }\n                this.updateItems(null, true);\n            });\n        }\n        this.addEventListener(input, 'showDropdown', () => {\n            this.update();\n            this.positionDropdown();\n        });\n        if (this.shouldPositionDropdown) {\n            this.addEventListener(input, 'highlightChoice', () => {\n                this.positionDropdown();\n            });\n        }\n        if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {\n            this.addPlaceholderItem(choicesOptions.placeholderValue);\n            this.addEventListener(input, 'removeItem', () => {\n                this.addPlaceholderItem(choicesOptions.placeholderValue);\n            });\n        }\n        // Add value options.\n        this.addValueOptions();\n        this.setChoicesValue(this.dataValue);\n        if (this.isSelectResource && this.refs.addResource) {\n            this.addEventListener(this.refs.addResource, 'click', (event) => {\n                event.preventDefault();\n                const formioForm = this.ce('div');\n                const dialog = this.createModal(formioForm);\n                const projectUrl = lodash_1.default.get(this.root, 'formio.projectUrl', Formio_1.Formio.getProjectUrl());\n                const formUrl = `${projectUrl}/form/${this.component.data.resource}`;\n                new Form_1.default(formioForm, formUrl, {}).ready\n                    .then((form) => {\n                    form.on('submit', (submission) => {\n                        // If valueProperty is set, replace the submission with the corresponding value\n                        let value = this.valueProperty ? lodash_1.default.get(submission, this.valueProperty) : submission;\n                        if (this.component.multiple) {\n                            value = [...this.dataValue, value];\n                        }\n                        this.setValue(value);\n                        this.triggerUpdate();\n                        dialog.close();\n                    });\n                });\n            });\n        }\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        this.triggerUpdate();\n        return superAttach;\n    }\n    setDropdownPosition() {\n        var _a, _b, _c, _d;\n        const dropdown = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.dropdown) === null || _b === void 0 ? void 0 : _b.element;\n        const container = (_d = (_c = this.choices) === null || _c === void 0 ? void 0 : _c.containerOuter) === null || _d === void 0 ? void 0 : _d.element;\n        if (!dropdown || !container) {\n            return;\n        }\n        const containerPosition = container.getBoundingClientRect();\n        const isFlipped = container.classList.contains('is-flipped');\n        lodash_1.default.assign(dropdown.style, {\n            top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,\n            left: `${containerPosition.left}px`,\n            width: `${containerPosition.width}px`,\n            position: 'fixed',\n            bottom: 'unset',\n            right: 'unset',\n        });\n    }\n    hasDataGridAncestor(comp) {\n        comp = comp || this;\n        if (comp.inDataGrid || comp.type === 'datagrid') {\n            return true;\n        }\n        else if (comp.parent) {\n            return this.hasDataGridAncestor(comp.parent);\n        }\n        else {\n            return false;\n        }\n    }\n    positionDropdown(scroll) {\n        var _a;\n        if (!this.shouldPositionDropdown || !this.choices || (!((_a = this.choices.dropdown) === null || _a === void 0 ? void 0 : _a.isActive) && scroll)) {\n            return;\n        }\n        this.setDropdownPosition();\n        this.itemsLoaded.then(() => {\n            this.setDropdownPosition();\n        });\n    }\n    get isLoadingAvailable() {\n        return !this.isScrollLoading && this.additionalResourcesAvailable;\n    }\n    onScroll() {\n        if (this.isLoadingAvailable) {\n            this.isScrollLoading = true;\n            this.setLoadingItem(true);\n            this.triggerUpdate(this.choices.input.element.value);\n        }\n    }\n    attachRefreshOnBlur() {\n        if (this.component.refreshOnBlur) {\n            this.on('blur', (instance) => {\n                this.checkRefreshOn([{ instance, value: instance.dataValue }], { fromBlur: true });\n            });\n        }\n    }\n    addPlaceholderItem(placeholderValue) {\n        const items = this.choices._store.activeItems;\n        if (!items.length) {\n            this.choices._addItem({\n                value: '',\n                label: placeholderValue,\n                choiceId: 0,\n                groupId: -1,\n                customProperties: null,\n                placeholder: true,\n                keyCode: null\n            });\n        }\n    }\n    /* eslint-enable max-statements */\n    update() {\n        if (this.component.dataSrc === 'custom') {\n            this.updateCustomItems();\n        }\n        // Activate the control.\n        this.activate();\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.setDisabled(this.choices.containerInner.element, true);\n            this.focusableElement.removeAttribute('tabIndex');\n            this.choices.disable();\n        }\n        else {\n            this.setDisabled(this.choices.containerInner.element, false);\n            this.focusableElement.setAttribute('tabIndex', this.component.tabindex || 0);\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    set visible(value) {\n        // If we go from hidden to visible, trigger a refresh.\n        if (value && (!this._visible !== !value)) {\n            this.triggerUpdate();\n        }\n        super.visible = value;\n    }\n    get visible() {\n        return super.visible;\n    }\n    addCurrentChoices(values, items, keyValue) {\n        if (!values) {\n            return false;\n        }\n        const notFoundValuesToAdd = [];\n        const added = values.reduce((defaultAdded, value) => {\n            if (!value || lodash_1.default.isEmpty(value)) {\n                return defaultAdded;\n            }\n            let found = false;\n            // Make sure that `items` and `this.selectOptions` points\n            // to the same reference. Because `this.selectOptions` is\n            // internal property and all items are populated by\n            // `this.addOption` method, we assume that items has\n            // 'label' and 'value' properties. This assumption allows\n            // us to read correct value from the item.\n            const isSelectOptions = items === this.selectOptions;\n            if (items && items.length) {\n                lodash_1.default.each(items, (choice) => {\n                    if (choice._id && value._id && (choice._id === value._id)) {\n                        found = true;\n                        return false;\n                    }\n                    const itemValue = keyValue ? choice.value : this.itemValue(choice, isSelectOptions);\n                    found |= lodash_1.default.isEqual(itemValue, value);\n                    return found ? false : true;\n                });\n            }\n            // Add the default option if no item is found.\n            if (!found) {\n                notFoundValuesToAdd.push(this.selectValueAndLabel(value));\n                return true;\n            }\n            return found || defaultAdded;\n        }, false);\n        if (notFoundValuesToAdd.length) {\n            if (this.choices) {\n                this.choices.setChoices(notFoundValuesToAdd, 'value', 'label');\n            }\n            notFoundValuesToAdd.map(notFoundValue => {\n                this.addOption(notFoundValue.value, notFoundValue.label);\n            });\n        }\n        return added;\n    }\n    getValueAsString(data, options) {\n        return (this.component.multiple && Array.isArray(data))\n            ? data.map((v) => this.asString(v, options)).join(', ')\n            : this.asString(data, options);\n    }\n    getValue() {\n        // If the widget isn't active.\n        if (this.viewOnly || this.loading\n            || (!this.component.lazyLoad && !this.selectOptions.length)\n            || !this.element) {\n            return this.dataValue;\n        }\n        let value = this.emptyValue;\n        if (this.choices) {\n            value = this.choices.getValue(true);\n            // Make sure we don't get the placeholder\n            if (!this.component.multiple &&\n                this.component.placeholder &&\n                (value === this.t(this.component.placeholder, { _userInput: true }))) {\n                value = this.emptyValue;\n            }\n        }\n        else if (this.refs.selectContainer) {\n            value = this.refs.selectContainer.value;\n            if (this.valueProperty === '' || this.isEntireObjectDisplay()) {\n                if (value === '') {\n                    return {};\n                }\n                const option = this.selectOptions[value] ||\n                    this.selectOptions.find(option => option.id === value);\n                if (option && lodash_1.default.isObject(option.value)) {\n                    value = option.value;\n                }\n            }\n        }\n        else {\n            value = this.dataValue;\n        }\n        // Choices will return undefined if nothing is selected. We really want '' to be empty.\n        if (value === undefined || value === null) {\n            value = '';\n        }\n        return value;\n    }\n    redraw() {\n        const done = super.redraw();\n        this.triggerUpdate();\n        return done;\n    }\n    normalizeSingleValue(value) {\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        const dataType = this.component.dataType || 'auto';\n        const normalize = {\n            value,\n            number() {\n                const numberValue = Number(this.value);\n                const isEquivalent = value.toString() === numberValue.toString();\n                if (!Number.isNaN(numberValue) && Number.isFinite(numberValue) && value !== '' && isEquivalent) {\n                    this.value = numberValue;\n                }\n                return this;\n            },\n            boolean() {\n                if (lodash_1.default.isString(this.value)\n                    && (this.value.toLowerCase() === 'true'\n                        || this.value.toLowerCase() === 'false')) {\n                    this.value = (this.value.toLowerCase() === 'true');\n                }\n                return this;\n            },\n            string() {\n                this.value = String(this.value);\n                return this;\n            },\n            object() {\n                return this;\n            },\n            auto() {\n                if (lodash_1.default.isObject(this.value)) {\n                    this.value = this.object().value;\n                }\n                else {\n                    this.value = this.string().number().boolean().value;\n                }\n                return this;\n            }\n        };\n        try {\n            return normalize[dataType]().value;\n        }\n        catch (err) {\n            console.warn('Failed to normalize value', err);\n            return value;\n        }\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        if (this.component.multiple && Array.isArray(value)) {\n            return value.map((singleValue) => this.normalizeSingleValue(singleValue));\n        }\n        return super.normalizeValue(this.normalizeSingleValue(value));\n    }\n    setMetadata(value) {\n        var _a;\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        // Check to see if we need to save off the template data into our metadata.\n        const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n        const shouldSaveData = !valueIsObject || this.component.reference;\n        if (templateValue && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            let templateData = this.templateData[templateValue];\n            if (this.component.multiple) {\n                templateData = {};\n                const dataValue = this.dataValue;\n                if (dataValue && lodash_1.default.isArray(dataValue) && dataValue.length) {\n                    dataValue.forEach((dataValueItem) => {\n                        const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;\n                        templateData[dataValueItemValue] = this.templateData[dataValueItemValue];\n                    });\n                }\n                templateData[value] = this.templateData[value];\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, templateData);\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed || !this.selectMetadata) {\n            if (this.component.multiple && Array.isArray(this.dataValue)) {\n                this.dataValue.forEach(singleValue => this.setMetadata(singleValue));\n            }\n            else {\n                this.setMetadata(this.dataValue);\n            }\n        }\n        return changed;\n    }\n    setValue(value, flags = {}) {\n        const previousValue = this.dataValue;\n        const changed = this.updateValue(value, flags);\n        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {})) && !flags.fromSubmission) {\n            return false;\n        }\n        value = this.dataValue;\n        const hasPreviousValue = !this.isEmpty(previousValue);\n        const hasValue = !this.isEmpty(value);\n        // Undo typing when searching to set the value.\n        if (this.component.multiple && Array.isArray(value)) {\n            value = value.map(value => {\n                if (typeof value === 'boolean' || typeof value === 'number') {\n                    return value.toString();\n                }\n                return value;\n            });\n        }\n        else {\n            if (typeof value === 'boolean' || typeof value === 'number') {\n                value = value.toString();\n            }\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.itemsLoaded.then(() => {\n                this.redraw();\n            });\n            return changed;\n        }\n        // Do not set the value if we are loading... that will happen after it is done.\n        if (this.loading) {\n            return changed;\n        }\n        // Determine if we need to perform an initial lazyLoad api call if searchField is provided.\n        if (this.isInitApiCallNeeded(hasValue)) {\n            this.loading = true;\n            this.lazyLoadInit = true;\n            const searchProperty = this.component.searchField || this.component.valueProperty;\n            this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);\n            return changed;\n        }\n        // Add the value options.\n        this.itemsLoaded.then(() => {\n            this.addValueOptions();\n            this.setChoicesValue(value, hasPreviousValue, flags);\n        });\n        return changed;\n    }\n    isInitApiCallNeeded(hasValue) {\n        return this.component.lazyLoad &&\n            !this.lazyLoadInit &&\n            !this.active &&\n            !this.selectOptions.length &&\n            hasValue &&\n            this.shouldInitialLoad &&\n            this.visible && (this.component.searchField || this.component.valueProperty);\n    }\n    setChoicesValue(value, hasPreviousValue, flags = {}) {\n        const hasValue = !this.isEmpty(value) || flags.fromSubmission;\n        hasPreviousValue = (hasPreviousValue === undefined) ? true : hasPreviousValue;\n        if (this.choices) {\n            // Now set the value.\n            if (hasValue) {\n                this.choices.removeActiveItems();\n                // Add the currently selected choices if they don't already exist.\n                const currentChoices = Array.isArray(value) && this.component.multiple ? value : [value];\n                if (!this.addCurrentChoices(currentChoices, this.selectOptions, true)) {\n                    this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n                }\n                this.choices.setChoiceByValue(currentChoices);\n            }\n            else if (hasPreviousValue || flags.resetValue) {\n                this.choices.removeActiveItems();\n            }\n        }\n        else {\n            if (hasValue) {\n                const values = Array.isArray(value) ? value : [value];\n                if (!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2\n                    || (this.selectData && flags.fromSubmission)) {\n                    const { value, label } = this.selectValueAndLabel(this.dataValue);\n                    this.addOption(value, label);\n                }\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    lodash_1.default.each(values, (val) => {\n                        if (selectOption.value === '') {\n                            selectOption.value = {};\n                        }\n                        if (lodash_1.default.isEqual(val, selectOption.value) && selectOption.element) {\n                            selectOption.element.selected = true;\n                            selectOption.element.setAttribute('selected', 'selected');\n                            return false;\n                        }\n                    });\n                });\n            }\n            else {\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    if (selectOption.element) {\n                        selectOption.element.selected = false;\n                        selectOption.element.removeAttribute('selected');\n                    }\n                });\n            }\n        }\n    }\n    get itemsLoaded() {\n        return this._itemsLoaded || Promise.resolve();\n    }\n    set itemsLoaded(promise) {\n        this._itemsLoaded = promise;\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.getOptionsValues();\n        if (values) {\n            if (lodash_1.default.isObject(value)) {\n                const compareComplexValues = (optionValue) => {\n                    const normalizedOptionValue = this.normalizeSingleValue(optionValue);\n                    if (!lodash_1.default.isObject(normalizedOptionValue)) {\n                        return false;\n                    }\n                    try {\n                        return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));\n                    }\n                    catch (err) {\n                        console.warn.error('Error while comparing items', err);\n                        return false;\n                    }\n                };\n                return values.findIndex((optionValue) => compareComplexValues(optionValue)) !== -1;\n            }\n            return values.findIndex((optionValue) => this.normalizeSingleValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    /**\n     * Performs required transformations on the initial value to use in selectOptions\n     * @param {*} value - The value to transform.\n     * @returns {*} - Returns the options value.\n     */\n    getOptionValue(value) {\n        return lodash_1.default.isObject(value) && this.isEntireObjectDisplay()\n            ? this.normalizeSingleValue(value)\n            : lodash_1.default.isObject(value) && (this.valueProperty || this.component.key !== 'resource')\n                ? value\n                : lodash_1.default.isObject(value) && !this.valueProperty\n                    ? this.interpolate(this.component.template, { item: value }).replace(/<\\/?[^>]+(>|$)/g, '')\n                    : lodash_1.default.isNull(value)\n                        ? this.emptyValue\n                        : String(this.normalizeSingleValue(value));\n    }\n    /**\n     * If component has static values (values, json) or custom values, returns an array of them\n     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.\n     */\n    getOptionsValues() {\n        let rawItems = [];\n        switch (this.component.dataSrc) {\n            case 'values':\n                rawItems = this.component.data.values;\n                break;\n            case 'json':\n                rawItems = this.component.data.json;\n                break;\n            case 'custom':\n                rawItems = this.getCustomItems();\n                break;\n            case 'url':\n                rawItems = this.selectItems;\n                break;\n        }\n        if (typeof rawItems === 'string') {\n            try {\n                rawItems = JSON.parse(rawItems);\n            }\n            catch (err) {\n                console.warn(err.message);\n                rawItems = [];\n            }\n        }\n        if (!Array.isArray(rawItems)) {\n            return;\n        }\n        return rawItems.map((item) => this.getOptionValue(this.itemValue(item)));\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue('', {\n            noUpdateEvent: true\n        });\n        this.unset();\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - Returns FALSE for select components.\n     */\n    validateMultiple() {\n        // Select component will contain one input when flagged as multiple.\n        return false;\n    }\n    /**\n     * Output this select dropdown as a string value.\n     * @returns {*}\n     */\n    isBooleanOrNumber(value) {\n        return typeof value === 'number' || typeof value === 'boolean';\n    }\n    getNormalizedValues() {\n        if (!this.component || !this.component.data || !this.component.data.values) {\n            return;\n        }\n        return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));\n    }\n    asString(value, options = {}) {\n        var _a;\n        value = value !== null && value !== void 0 ? value : this.getValue();\n        if (options.modalPreview && this.selectData) {\n            const { label } = this.selectValueAndLabel(value);\n            return label;\n        }\n        //need to convert values to strings to be able to compare values with available options that are strings\n        const convertToString = (data, valueProperty) => {\n            if (valueProperty) {\n                if (Array.isArray(data)) {\n                    data.forEach((item) => item[valueProperty] = item[valueProperty].toString());\n                }\n                else if (lodash_1.default.isObject(data)) {\n                    data[valueProperty] = data[valueProperty].toString();\n                }\n                return data;\n            }\n            if (this.isBooleanOrNumber(data)) {\n                data = data.toString();\n            }\n            if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {\n                data = data.map(item => this.isBooleanOrNumber(item) ? item.toString() : item);\n            }\n            return data;\n        };\n        value = convertToString(value);\n        if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {\n            const { items, valueProperty, } = this.component.dataSrc === 'values'\n                ? {\n                    items: convertToString(this.getNormalizedValues(), 'value'),\n                    valueProperty: 'value',\n                }\n                : {\n                    items: convertToString(this.getCustomItems(), this.valueProperty),\n                    valueProperty: this.valueProperty,\n                };\n            const getFromValues = () => {\n                const initialValue = lodash_1.default.find(items, [valueProperty, value]);\n                const values = this.defaultSchema.data.values || [];\n                return lodash_1.default.isEqual(initialValue, values[0]) ? '-' : initialValue;\n            };\n            value = (this.component.multiple && Array.isArray(value))\n                ? lodash_1.default.filter(items, (item) => value.includes(item.value))\n                : (valueProperty && items)\n                    ? (_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value }\n                    : value;\n        }\n        if (lodash_1.default.isString(value)) {\n            return value;\n        }\n        const getTemplateValue = (v) => {\n            const itemTemplate = this.itemTemplate(v);\n            return options.csv && itemTemplate\n                ? (0, utils_1.removeHTML)(itemTemplate)\n                : itemTemplate;\n        };\n        if (Array.isArray(value)) {\n            const items = [];\n            value.forEach(item => items.push(getTemplateValue(item)));\n            if (this.component.dataSrc === 'resource' && items.length > 0) {\n                return items.join(', ');\n            }\n            else if (items.length > 0) {\n                return items.join('<br />');\n            }\n            else {\n                return '-';\n            }\n        }\n        if (this.isEntireObjectDisplay() && lodash_1.default.isObject(value)) {\n            return JSON.stringify(value);\n        }\n        return !lodash_1.default.isNil(value)\n            ? getTemplateValue(value)\n            : '-';\n    }\n    detach() {\n        var _a, _b;\n        this.off('blur');\n        if (this.choices) {\n            if ((_b = (_a = this.choices.containerOuter) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.parentNode) {\n                this.choices.destroy();\n            }\n            this.choices = null;\n        }\n        super.detach();\n    }\n    focus() {\n        if (this.focusableElement) {\n            super.focus.call(this);\n            this.focusableElement.focus();\n        }\n    }\n    setErrorClasses(elements, dirty, hasError, hasMessages, element = this.element) {\n        super.setErrorClasses(elements, dirty, hasError, hasMessages, element);\n        if (this.choices) {\n            super.setErrorClasses([this.choices.containerInner.element], dirty, hasError, hasMessages, element);\n        }\n        else {\n            super.setErrorClasses([this.refs.selectContainer], dirty, hasError, hasMessages, element);\n        }\n    }\n}\nexports[\"default\"] = SelectComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/Select.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst ChoicesWrapper_1 = __importDefault(__webpack_require__(/*! ../../utils/ChoicesWrapper */ \"./lib/cjs/utils/ChoicesWrapper.js\"));\nclass SelectComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'select',\n            label: 'Select',\n            key: 'select',\n            idPath: 'id',\n            data: {\n                values: [{ label: '', value: '' }],\n                json: '',\n                url: '',\n                resource: '',\n                custom: ''\n            },\n            clearOnRefresh: false,\n            limit: 100,\n            valueProperty: '',\n            lazyLoad: true,\n            filter: '',\n            searchEnabled: true,\n            searchDebounce: 0.3,\n            searchField: '',\n            minSearch: 0,\n            readOnlyValue: false,\n            selectFields: '',\n            selectThreshold: 0.3,\n            uniqueOptions: false,\n            tableView: true,\n            fuseOptions: {\n                include: 'score',\n                threshold: 0.3,\n            },\n            indexeddb: {\n                filter: {}\n            },\n            customOptions: {},\n            useExactSearch: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select',\n            group: 'basic',\n            icon: 'th-list',\n            weight: 70,\n            documentation: '/userguide/form-building/form-components#select',\n            schema: SelectComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        const numberType = () => ({ type: 'number' });\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });\n                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {\n                    valueComp.reference = false;\n                    valueComp.onSetItems = `\n            var templateKeys = utils.getItemTemplateKeys(component.template) || [];\n            items = _.map(items || [], i => {\n              var item = {};\n              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));\n              return item;\n            })\n          `;\n                }\n                return valueComp;\n            }, dataTypeOperators: {\n                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],\n            }, dataTypeValueComponents: {\n                number: {\n                    lessThan: numberType,\n                    greaterThan: numberType,\n                    lessThanOrEqual: numberType,\n                    greaterThanOrEqual: numberType,\n                },\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType, reference } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (reference) {\n            return [object];\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        // Keep track of the select options.\n        this.selectOptions = [];\n        if (this.itemsFromUrl) {\n            this.isFromSearch = false;\n            this.searchServerCount = null;\n            this.defaultServerCount = null;\n            this.isScrollLoading = false;\n            this.searchDownloadedResources = [];\n            this.defaultDownloadedResources = [];\n        }\n        // If this component has been activated.//\n        this.activated = false;\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.shouldPositionDropdown = this.hasDataGridAncestor();\n        if (this.isHtmlRenderMode()) {\n            this.activate();\n        }\n        // Get the template keys for this select component.\n        this.getTemplateKeys();\n    }\n    get dataReady() {\n        // If the root submission has been set, and we are still not attached, then assume\n        // that our data is ready.\n        if (this.root &&\n            this.root.submissionSet &&\n            !this.attached) {\n            return Promise.resolve();\n        }\n        return this.itemsLoaded;\n    }\n    get defaultSchema() {\n        return SelectComponent.schema();\n    }\n    get emptyValue() {\n        if (this.component.multiple) {\n            return [];\n        }\n        // if select has JSON data source type, we are defining if empty value would be an object or a string by checking JSON's first item\n        if (this.component.dataSrc === 'json' && this.component.data.json) {\n            const firstItem = this.component.data.json[0];\n            let firstValue;\n            if (this.valueProperty) {\n                firstValue = lodash_1.default.get(firstItem, this.valueProperty);\n            }\n            else {\n                firstValue = firstItem;\n            }\n            if (firstValue && typeof firstValue === 'string') {\n                return '';\n            }\n            else {\n                return {};\n            }\n        }\n        if (this.valueProperty) {\n            return '';\n        }\n        return {};\n    }\n    get valueProperty() {\n        if (this.component.valueProperty) {\n            return this.component.valueProperty;\n        }\n        // Force values datasource to use values without actually setting it on the component settings.\n        if (this.component.dataSrc === 'values') {\n            return 'value';\n        }\n        return '';\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'select';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get isSelectResource() {\n        return this.component.dataSrc === 'resource';\n    }\n    get itemsFromUrl() {\n        return this.isSelectResource || this.isSelectURL;\n    }\n    get isInfiniteScrollProvided() {\n        return this.itemsFromUrl;\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get shouldInitialLoad() {\n        if (this.component.widget === 'html5' &&\n            this.isEntireObjectDisplay() &&\n            this.component.searchField &&\n            this.dataValue) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\n    }\n    isEntireObjectDisplay() {\n        return this.component.dataSrc === 'resource' && this.valueProperty === 'data';\n    }\n    selectValueAndLabel(data) {\n        const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));\n        return {\n            value,\n            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : data, value)\n        };\n    }\n    itemTemplate(data, value) {\n        if (!lodash_1.default.isNumber(data) && lodash_1.default.isEmpty(data)) {\n            return '';\n        }\n        // If they wish to show the value in read only mode, then just return the itemValue here.\n        if (this.options.readOnly && this.component.readOnlyValue) {\n            return this.itemValue(data);\n        }\n        // Perform a fast interpretation if we should not use the template.\n        if (data && !this.component.template) {\n            const itemLabel = data.label || data;\n            const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;\n            return this.sanitize(value, this.shouldSanitizeValue);\n        }\n        if (this.component.multiple && lodash_1.default.isArray(this.dataValue) ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val) : (this.dataValue === this.normalizeSingleValue(value))) {\n            const selectData = this.selectData;\n            if (selectData) {\n                const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n                if (!this.templateData || !this.templateData[templateValue]) {\n                    this.getOptionTemplate(data, value);\n                }\n                if (this.component.multiple) {\n                    if (selectData[templateValue]) {\n                        data = selectData[templateValue];\n                    }\n                }\n                else {\n                    data = selectData;\n                }\n            }\n        }\n        if (typeof data === 'string' || typeof data === 'number') {\n            return this.sanitize(this.t(data, { _userInput: true }), this.shouldSanitizeValue);\n        }\n        if (Array.isArray(data)) {\n            return data.map((val) => {\n                if (typeof val === 'string' || typeof val === 'number') {\n                    return this.sanitize(this.t(val, { _userInput: true }), this.shouldSanitizeValue);\n                }\n                return val;\n            });\n        }\n        if (data.data) {\n            // checking additional fields in the template for the selected Entire Object option\n            const hasNestedFields = /item\\.data\\.\\w*/g.test(this.component.template);\n            data.data = this.isEntireObjectDisplay() && lodash_1.default.isObject(data.data) && !hasNestedFields\n                ? JSON.stringify(data.data)\n                : data.data;\n        }\n        return super.itemTemplate(data, value);\n    }\n    /**\n     * Adds an option to the select dropdown.\n     * @param {*} value - The value of the new option.\n     * @param {string} label - The label of the new option.\n     * @param {object} [attrs] - Additional value attributes. Defaults to {}.\n     * @param {string} [id] - An id. Defaults to a random string.\n     */\n    addOption(value, label, attrs = {}, id = (0, utils_1.getRandomComponentId)()) {\n        if (lodash_1.default.isNil(label))\n            return;\n        const idPath = this.component.idPath\n            ? this.component.idPath.split('.').reduceRight((obj, key) => ({ [key]: obj }), id)\n            : {};\n        const option = Object.assign({ value: this.getOptionValue(value), label }, idPath);\n        const skipOption = this.component.uniqueOptions\n            ? !!this.selectOptions.find((selectOption) => lodash_1.default.isEqual(selectOption.value, option.value))\n            : false;\n        if (skipOption) {\n            return;\n        }\n        if (value) {\n            this.selectOptions.push(option);\n        }\n        if (this.refs.selectContainer && (this.component.widget === 'html5')) {\n            // Replace an empty Object value to an empty String.\n            if (option.value && lodash_1.default.isObject(option.value) && lodash_1.default.isEmpty(option.value)) {\n                option.value = '';\n            }\n            // Add element to option so we can reference it later.\n            const div = document.createElement('div');\n            div.innerHTML = this.sanitize(this.renderTemplate('selectOption', {\n                selected: lodash_1.default.isEqual(this.getOptionValue(this.dataValue), option.value),\n                option,\n                attrs,\n                id,\n                useId: (this.valueProperty === '' || this.isEntireObjectDisplay()) && lodash_1.default.isObject(value) && id,\n            }), this.shouldSanitizeValue).trim();\n            option.element = div.firstChild;\n            this.refs.selectContainer.appendChild(option.element);\n        }\n    }\n    addValueOptions(items) {\n        items = items || [];\n        let added = false;\n        let data = this.dataValue;\n        // preset submission value with value property before request.\n        if (this.options.pdf && !items.length && this.component.dataSrc === 'url' && this.valueProperty) {\n            data = Array.isArray(data)\n                ? data.map(item => lodash_1.default.set({}, this.valueProperty, item))\n                : lodash_1.default.set({}, this.valueProperty, data);\n        }\n        if (!this.selectOptions.length) {\n            // Add the currently selected choices if they don't already exist.\n            const currentChoices = Array.isArray(data) && this.component.multiple ? data : [data];\n            added = this.addCurrentChoices(currentChoices, items);\n            if (!added && !this.component.multiple) {\n                this.addPlaceholder();\n            }\n        }\n        return added;\n    }\n    disableInfiniteScroll() {\n        if (!this.downloadedResources) {\n            return;\n        }\n        this.downloadedResources.serverCount = this.downloadedResources.length;\n        this.serverCount = this.downloadedResources.length;\n    }\n    /* eslint-disable max-statements */\n    setItems(items, fromSearch) {\n        var _a, _b;\n        this.selectItems = items;\n        // If the items is a string, then parse as JSON.\n        if (typeof items == 'string') {\n            try {\n                items = JSON.parse(items);\n            }\n            catch (err) {\n                console.warn(err.message);\n                items = [];\n            }\n        }\n        // Allow js processing (needed for form builder)\n        if (this.component.onSetItems) {\n            const newItems = typeof this.component.onSetItems === 'function'\n                ? this.component.onSetItems(this, items)\n                : this.evaluate(this.component.onSetItems, { items: items }, 'items');\n            if (newItems) {\n                items = newItems;\n            }\n        }\n        if (!this.choices && this.refs.selectContainer) {\n            this.empty(this.refs.selectContainer);\n        }\n        // If they provided select values, then we need to get them instead.\n        if (this.component.selectValues) {\n            items = lodash_1.default.get(items, this.component.selectValues, items) || [];\n        }\n        let areItemsEqual;\n        if (this.itemsFromUrl) {\n            areItemsEqual = this.isSelectURL ? lodash_1.default.isEqual(items, this.downloadedResources) : false;\n            const areItemsEnded = this.component.limit > items.length;\n            const areItemsDownloaded = areItemsEqual\n                && this.downloadedResources\n                && this.downloadedResources.length === items.length;\n            if (areItemsEnded) {\n                this.disableInfiniteScroll();\n            }\n            else if (areItemsDownloaded) {\n                this.selectOptions = [];\n            }\n            else {\n                this.serverCount = items.serverCount;\n            }\n        }\n        if (this.isScrollLoading && items) {\n            if (!areItemsEqual) {\n                this.downloadedResources = this.downloadedResources\n                    ? this.downloadedResources.concat(items)\n                    : items;\n            }\n            this.downloadedResources.serverCount = items.serverCount || this.downloadedResources.serverCount;\n        }\n        else {\n            this.downloadedResources = items || [];\n            this.selectOptions = [];\n            // If there is new select option with same id as already selected, set the new one\n            if (!lodash_1.default.isEmpty(this.dataValue) && this.component.idPath) {\n                const selectedOptionId = lodash_1.default.get(this.dataValue, this.component.idPath, null);\n                const newOptionWithSameId = !lodash_1.default.isNil(selectedOptionId) && items.find(item => {\n                    const itemId = lodash_1.default.get(item, this.component.idPath);\n                    return itemId === selectedOptionId;\n                });\n                if (newOptionWithSameId) {\n                    this.setValue(newOptionWithSameId);\n                }\n            }\n        }\n        // Add the value options.\n        if (!fromSearch) {\n            this.addValueOptions(items);\n        }\n        if (this.component.widget === 'html5' && !this.component.placeholder) {\n            this.addOption(null, '');\n        }\n        // Iterate through each of the items.\n        lodash_1.default.each(items, (item, index) => {\n            // preventing references of the components inside the form to the parent form when building forms\n            if (this.root && this.root.options.editForm && this.root.options.editForm._id && this.root.options.editForm._id === item._id)\n                return;\n            const itemValueAndLabel = this.selectValueAndLabel(item);\n            this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, lodash_1.default.get(item, this.component.idPath, String(index)));\n        });\n        if (this.choices) {\n            this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n        }\n        else if (this.loading) {\n            // Re-attach select input.\n            // this.appendTo(this.refs.input[0], this.selectContainer);\n        }\n        // We are no longer loading.\n        this.isScrollLoading = false;\n        this.loading = false;\n        const searching = fromSearch && ((_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.isFocussed);\n        if (!searching) {\n            // If a value is provided, then select it.\n            if (!this.isEmpty() || this.isRemoveButtonPressed) {\n                this.setValue(this.dataValue, {\n                    noUpdateEvent: true\n                });\n            }\n            else if (this.shouldAddDefaultValue && !this.options.readOnly) {\n                // If a default value is provided then select it.\n                const defaultValue = this.defaultValue;\n                if (!this.isEmpty(defaultValue)) {\n                    this.setValue(defaultValue);\n                }\n            }\n        }\n        // Say we are done loading the items.\n        this.itemsLoadedResolve();\n    }\n    getSingleItemValueForHTMLMode(data) {\n        var _a;\n        const option = (_a = this.selectOptions) === null || _a === void 0 ? void 0 : _a.find(({ value }) => lodash_1.default.isEqual(value, data));\n        if (option) {\n            return option.label || data;\n        }\n        return data;\n    }\n    itemValueForHTMLMode(value) {\n        if (!this.isHtmlRenderMode()) {\n            return super.itemValueForHTMLMode(value);\n        }\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item)\n                ? this.itemValueForHTMLMode(item)\n                : this.getSingleItemValueForHTMLMode(item));\n            return values.join(', ');\n        }\n        return this.getSingleItemValueForHTMLMode(value);\n    }\n    /* eslint-enable max-statements */\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && (this.component.defaultValue === false || this.component.defaultValue === 0)) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get loadingError() {\n        return !this.component.refreshOn && !this.component.refreshOnBlur && this.networkError;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        options = options || {};\n        // See if we should load items or not.\n        if (!this.shouldLoad || (!this.itemsFromUrl && this.options.readOnly)) {\n            this.isScrollLoading = false;\n            this.loading = false;\n            this.itemsLoadedResolve();\n            return;\n        }\n        // See if they have not met the minimum search requirements.\n        const minSearch = parseInt(this.component.minSearch, 10);\n        if (this.component.searchField &&\n            (minSearch > 0) &&\n            (!search || (search.length < minSearch))) {\n            // Set empty items.\n            return this.setItems([]);\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        const query = this.component.disableLimit ? {} : {\n            limit,\n            skip,\n        };\n        // Allow for url interpolation.\n        url = this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        });\n        // Add search capability.\n        if (this.component.searchField && search) {\n            const searchValue = Array.isArray(search)\n                ? search.join(',')\n                : typeof search === 'object'\n                    ? JSON.stringify(search)\n                    : search;\n            query[this.component.searchField] = this.component.searchField.endsWith('__regex')\n                ? lodash_1.default.escapeRegExp(searchValue)\n                : searchValue;\n        }\n        // If they wish to return only some fields.\n        if (this.component.selectFields) {\n            query.select = this.component.selectFields;\n        }\n        // Add sort capability\n        if (this.component.sort) {\n            query.sort = this.component.sort;\n        }\n        if (!lodash_1.default.isEmpty(query)) {\n            // Add the query string.\n            url += (!url.includes('?') ? '?' : '&') + Formio_1.Formio.serialize(query, (item) => this.interpolate(item));\n        }\n        // Add filter capability\n        if (this.component.filter) {\n            url += (!url.includes('?') ? '?' : '&') + this.interpolate(this.component.filter);\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response, !!search);\n        })\n            .catch((err) => {\n            if (this.itemsFromUrl) {\n                this.setItems([]);\n                this.disableInfiniteScroll();\n            }\n            this.isScrollLoading = false;\n            this.handleLoadingError(err);\n        });\n    }\n    handleLoadingError(err) {\n        this.loading = false;\n        if (err.networkError) {\n            this.networkError = true;\n        }\n        this.itemsLoadedResolve();\n        this.emit('componentError', {\n            component: this.component,\n            message: err.toString(),\n        });\n        console.warn(`Unable to load resources for ${this.key}`);\n    }\n    /**\n     * Get the request headers for this select dropdown.\n     * @returns {*} - Returns the request headers for this select dropdown.\n     */\n    get requestHeaders() {\n        // Create the headers object.\n        const headers = new Formio_1.Formio.Headers();\n        // Add custom headers to the url.\n        if (this.component.data && this.component.data.headers) {\n            try {\n                lodash_1.default.each(this.component.data.headers, (header) => {\n                    if (header.key) {\n                        headers.set(header.key, this.interpolate(header.value));\n                    }\n                });\n            }\n            catch (err) {\n                console.warn(err.message);\n            }\n        }\n        return headers;\n    }\n    getCustomItems() {\n        const customItems = this.evaluate(this.component.data.custom, {\n            values: []\n        }, 'values');\n        this.asyncValues = (0, utils_1.isPromise)(customItems);\n        return customItems;\n    }\n    asyncCustomValues() {\n        if (!lodash_1.default.isBoolean(this.asyncValues)) {\n            this.getCustomItems();\n        }\n        return this.asyncValues;\n    }\n    updateCustomItems(forceUpdate) {\n        if (this.asyncCustomValues()) {\n            if (!forceUpdate && !this.active) {\n                this.itemsLoadedResolve();\n                return;\n            }\n            this.loading = true;\n            this.getCustomItems()\n                .then(items => {\n                this.loading = false;\n                this.setItems(items || []);\n            })\n                .catch(err => {\n                this.handleLoadingError(err);\n            });\n        }\n        else {\n            this.setItems(this.getCustomItems() || []);\n        }\n    }\n    isEmpty(value = this.dataValue) {\n        return super.isEmpty(value) || value === undefined;\n    }\n    refresh(value, { instance }) {\n        if (this.component.clearOnRefresh && (instance && !instance.pristine)) {\n            this.setValue(this.emptyValue);\n        }\n        this.updateItems(null, true);\n    }\n    get additionalResourcesAvailable() {\n        return lodash_1.default.isNil(this.serverCount) || (this.serverCount > this.downloadedResources.length);\n    }\n    get serverCount() {\n        if (this.isFromSearch) {\n            return this.searchServerCount;\n        }\n        return this.defaultServerCount;\n    }\n    set serverCount(value) {\n        if (this.isFromSearch) {\n            this.searchServerCount = value;\n        }\n        else {\n            this.defaultServerCount = value;\n        }\n    }\n    get downloadedResources() {\n        if (this.isFromSearch) {\n            return this.searchDownloadedResources;\n        }\n        return this.defaultDownloadedResources;\n    }\n    set downloadedResources(value) {\n        if (this.isFromSearch) {\n            this.searchDownloadedResources = value;\n        }\n        else {\n            this.defaultDownloadedResources = value;\n        }\n    }\n    addPlaceholder() {\n        if (!this.component.placeholder) {\n            return;\n        }\n        this.addOption('', this.component.placeholder, { placeholder: true });\n    }\n    /**\n     * Activate this select control.\n     */\n    activate() {\n        if (this.loading || !this.active) {\n            this.setLoadingItem();\n        }\n        if (this.active) {\n            return;\n        }\n        this.activated = true;\n        this.triggerUpdate();\n    }\n    setLoadingItem(addToCurrentList = false) {\n        if (this.choices) {\n            if (addToCurrentList) {\n                this.choices.setChoices([{\n                        value: `${this.id}-loading`,\n                        label: 'Loading...',\n                        disabled: true,\n                    }], 'value', 'label');\n            }\n            else {\n                this.choices.setChoices([{\n                        value: '',\n                        label: `<i class=\"${this.iconClass('refresh')}\" style=\"font-size:1.3em;\"></i>`,\n                        disabled: true,\n                    }], 'value', 'label', true);\n            }\n        }\n        else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {\n            this.addOption('', this.t('loading...'));\n        }\n    }\n    get active() {\n        return !this.component.lazyLoad || this.activated;\n    }\n    render() {\n        const info = this.inputInfo;\n        info.attr = info.attr || {};\n        info.multiple = this.component.multiple;\n        return super.render(this.wrapElement(this.renderTemplate('select', {\n            input: info,\n            selectOptions: '',\n            index: null,\n        })));\n    }\n    wrapElement(element) {\n        return this.component.addResource && !this.options.readOnly\n            ? (this.renderTemplate('resourceAdd', {\n                element\n            }))\n            : element;\n    }\n    choicesOptions() {\n        const useSearch = this.component.hasOwnProperty('searchEnabled') ? this.component.searchEnabled : true;\n        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions == 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        const commonFuseOptions = {\n            maxPatternLength: 1000,\n            distance: 1000,\n        };\n        return Object.assign({ removeItemButton: this.component.disabled ? false : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {\n                containerOuter: 'choices form-group formio-choices',\n                containerInner: this.transform('class', 'form-control ui fluid selection dropdown')\n            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: (this.component.dropdown || 'auto'), searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch\n                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false }, customOptions);\n    }\n    /* eslint-disable max-statements */\n    attach(element) {\n        var _a, _b, _c;\n        const superAttach = super.attach(element);\n        this.loadRefs(element, {\n            selectContainer: 'single',\n            addResource: 'single',\n            autocompleteInput: 'single'\n        });\n        //enable autocomplete for select\n        const autocompleteInput = this.refs.autocompleteInput;\n        if (autocompleteInput) {\n            this.addEventListener(autocompleteInput, 'change', (event) => {\n                this.setValue(event.target.value);\n            });\n        }\n        const input = this.refs.selectContainer;\n        if (!input) {\n            return;\n        }\n        this.addEventListener(input, this.inputInfo.changeEvent, () => this.updateValue(null, {\n            modified: true\n        }));\n        this.attachRefreshOnBlur();\n        if (this.component.widget === 'html5') {\n            this.addFocusBlurEvents(input);\n            this.triggerUpdate(null, true);\n            if (this.visible) {\n                this.setItems(this.selectItems || []);\n            }\n            this.focusableElement = input;\n            if (this.component.dataSrc === 'custom') {\n                this.addEventListener(input, 'focus', () => this.updateCustomItems());\n            }\n            this.addEventListener(input, 'keydown', (event) => {\n                const { key } = event;\n                if (['Backspace', 'Delete'].includes(key)) {\n                    this.setValue(this.emptyValue);\n                }\n            });\n            return;\n        }\n        const tabIndex = input.tabIndex;\n        this.addPlaceholder();\n        if (this.i18next) {\n            input.setAttribute('dir', this.i18next.dir());\n        }\n        if ((_c = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.containerOuter) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.parentNode) {\n            this.choices.destroy();\n        }\n        const choicesOptions = this.choicesOptions();\n        if (ChoicesWrapper_1.default) {\n            this.choices = new ChoicesWrapper_1.default(input, choicesOptions);\n            if (this.selectOptions && this.selectOptions.length) {\n                this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n            }\n            if (this.component.multiple) {\n                this.focusableElement = this.choices.input.element;\n            }\n            else {\n                this.focusableElement = this.choices.containerInner.element;\n                this.choices.containerOuter.element.setAttribute('tabIndex', '-1');\n                this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());\n            }\n            Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);\n            if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {\n                this.scrollList = this.choices.choiceList.element;\n                this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());\n            }\n            if (choicesOptions.removeItemButton) {\n                this.addEventListener(input, 'removeItem', () => {\n                    this.isRemoveButtonPressed = true;\n                });\n            }\n        }\n        if (window && this.choices && this.shouldPositionDropdown) {\n            this.addEventListener(window.document, 'scroll', () => {\n                this.positionDropdown(true);\n            }, false, true);\n        }\n        this.focusableElement.setAttribute('tabIndex', tabIndex);\n        // If a search field is provided, then add an event listener to update items on search.\n        if (this.component.searchField) {\n            // Make sure to clear the search when no value is provided.\n            if (this.choices && this.choices.input && this.choices.input.element) {\n                this.addEventListener(this.choices.input.element, 'input', (event) => {\n                    this.isFromSearch = !!event.target.value;\n                    if (!event.target.value) {\n                        this.triggerUpdate();\n                    }\n                    else {\n                        this.serverCount = null;\n                        this.downloadedResources = [];\n                    }\n                });\n            }\n            this.addEventListener(input, 'choice', () => {\n                if (this.component.multiple && this.component.dataSrc === 'resource' && this.isFromSearch) {\n                    this.triggerUpdate();\n                }\n                this.isFromSearch = false;\n            });\n            // avoid spamming the resource/url endpoint when we have server side filtering enabled.\n            const debounceTimeout = this.component.searchField && (this.isSelectResource || this.isSelectURL) ?\n                (this.component.searchDebounce === 0 ? 0 : this.component.searchDebounce || this.defaultSchema.searchDebounce) * 1000\n                : 0;\n            const updateComponent = (evt) => {\n                this.triggerUpdate(evt.detail.value);\n            };\n            this.addEventListener(input, 'search', lodash_1.default.debounce((e) => {\n                updateComponent(e);\n                this.positionDropdown();\n            }, debounceTimeout));\n            this.addEventListener(input, 'stopSearch', () => this.triggerUpdate());\n            this.addEventListener(input, 'hideDropdown', () => {\n                if (this.choices && this.choices.input && this.choices.input.element) {\n                    this.choices.input.element.value = '';\n                }\n                this.updateItems(null, true);\n            });\n        }\n        this.addEventListener(input, 'showDropdown', () => {\n            this.update();\n            this.positionDropdown();\n        });\n        if (this.shouldPositionDropdown) {\n            this.addEventListener(input, 'highlightChoice', () => {\n                this.positionDropdown();\n            });\n        }\n        if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {\n            this.addPlaceholderItem(choicesOptions.placeholderValue);\n            this.addEventListener(input, 'removeItem', () => {\n                this.addPlaceholderItem(choicesOptions.placeholderValue);\n            });\n        }\n        // Add value options.\n        this.addValueOptions();\n        this.setChoicesValue(this.dataValue);\n        if (this.isSelectResource && this.refs.addResource) {\n            this.addEventListener(this.refs.addResource, 'click', (event) => {\n                event.preventDefault();\n                const formioForm = this.ce('div');\n                const dialog = this.createModal(formioForm);\n                const projectUrl = lodash_1.default.get(this.root, 'formio.projectUrl', Formio_1.Formio.getProjectUrl());\n                const formUrl = `${projectUrl}/form/${this.component.data.resource}`;\n                new Form_1.default(formioForm, formUrl, {}).ready\n                    .then((form) => {\n                    form.on('submit', (submission) => {\n                        // If valueProperty is set, replace the submission with the corresponding value\n                        let value = this.valueProperty ? lodash_1.default.get(submission, this.valueProperty) : submission;\n                        if (this.component.multiple) {\n                            value = [...this.dataValue, value];\n                        }\n                        this.setValue(value);\n                        this.triggerUpdate();\n                        dialog.close();\n                    });\n                });\n            });\n        }\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        this.triggerUpdate();\n        return superAttach;\n    }\n    setDropdownPosition() {\n        var _a, _b, _c, _d;\n        const dropdown = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.dropdown) === null || _b === void 0 ? void 0 : _b.element;\n        const container = (_d = (_c = this.choices) === null || _c === void 0 ? void 0 : _c.containerOuter) === null || _d === void 0 ? void 0 : _d.element;\n        if (!dropdown || !container) {\n            return;\n        }\n        const containerPosition = container.getBoundingClientRect();\n        const isFlipped = container.classList.contains('is-flipped');\n        lodash_1.default.assign(dropdown.style, {\n            top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,\n            left: `${containerPosition.left}px`,\n            width: `${containerPosition.width}px`,\n            position: 'fixed',\n            bottom: 'unset',\n            right: 'unset',\n        });\n    }\n    hasDataGridAncestor(comp) {\n        comp = comp || this;\n        if (comp.inDataGrid || comp.type === 'datagrid') {\n            return true;\n        }\n        else if (comp.parent) {\n            return this.hasDataGridAncestor(comp.parent);\n        }\n        else {\n            return false;\n        }\n    }\n    positionDropdown(scroll) {\n        var _a;\n        if (!this.shouldPositionDropdown || !this.choices || (!((_a = this.choices.dropdown) === null || _a === void 0 ? void 0 : _a.isActive) && scroll)) {\n            return;\n        }\n        this.setDropdownPosition();\n        this.itemsLoaded.then(() => {\n            this.setDropdownPosition();\n        });\n    }\n    get isLoadingAvailable() {\n        return !this.isScrollLoading && this.additionalResourcesAvailable;\n    }\n    onScroll() {\n        if (this.isLoadingAvailable) {\n            this.isScrollLoading = true;\n            this.setLoadingItem(true);\n            this.triggerUpdate(this.choices.input.element.value);\n        }\n    }\n    attachRefreshOnBlur() {\n        if (this.component.refreshOnBlur) {\n            this.on('blur', (instance) => {\n                this.checkRefreshOn([{ instance, value: instance.dataValue }], { fromBlur: true });\n            });\n        }\n    }\n    addPlaceholderItem(placeholderValue) {\n        const items = this.choices._store.activeItems;\n        if (!items.length) {\n            this.choices._addItem({\n                value: '',\n                label: placeholderValue,\n                choiceId: 0,\n                groupId: -1,\n                customProperties: null,\n                placeholder: true,\n                keyCode: null\n            });\n        }\n    }\n    /* eslint-enable max-statements */\n    update() {\n        if (this.component.dataSrc === 'custom') {\n            this.updateCustomItems();\n        }\n        // Activate the control.\n        this.activate();\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.setDisabled(this.choices.containerInner.element, true);\n            this.focusableElement.removeAttribute('tabIndex');\n            this.choices.disable();\n        }\n        else {\n            this.setDisabled(this.choices.containerInner.element, false);\n            this.focusableElement.setAttribute('tabIndex', this.component.tabindex || 0);\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    set visible(value) {\n        // If we go from hidden to visible, trigger a refresh.\n        if (value && (!this._visible !== !value)) {\n            this.triggerUpdate();\n        }\n        super.visible = value;\n    }\n    get visible() {\n        return super.visible;\n    }\n    addCurrentChoices(values, items, keyValue) {\n        if (!values) {\n            return false;\n        }\n        const notFoundValuesToAdd = [];\n        const added = values.reduce((defaultAdded, value) => {\n            if (!value || lodash_1.default.isEmpty(value)) {\n                return defaultAdded;\n            }\n            let found = false;\n            // Make sure that `items` and `this.selectOptions` points\n            // to the same reference. Because `this.selectOptions` is\n            // internal property and all items are populated by\n            // `this.addOption` method, we assume that items has\n            // 'label' and 'value' properties. This assumption allows\n            // us to read correct value from the item.\n            const isSelectOptions = items === this.selectOptions;\n            if (items && items.length) {\n                lodash_1.default.each(items, (choice) => {\n                    if (choice._id && value._id && (choice._id === value._id)) {\n                        found = true;\n                        return false;\n                    }\n                    const itemValue = keyValue ? choice.value : this.itemValue(choice, isSelectOptions);\n                    found |= lodash_1.default.isEqual(itemValue, value);\n                    return found ? false : true;\n                });\n            }\n            // Add the default option if no item is found.\n            if (!found) {\n                notFoundValuesToAdd.push(this.selectValueAndLabel(value));\n                return true;\n            }\n            return found || defaultAdded;\n        }, false);\n        if (notFoundValuesToAdd.length) {\n            if (this.choices) {\n                this.choices.setChoices(notFoundValuesToAdd, 'value', 'label');\n            }\n            notFoundValuesToAdd.map(notFoundValue => {\n                this.addOption(notFoundValue.value, notFoundValue.label);\n            });\n        }\n        return added;\n    }\n    getValueAsString(data, options) {\n        return (this.component.multiple && Array.isArray(data))\n            ? data.map((v) => this.asString(v, options)).join(', ')\n            : this.asString(data, options);\n    }\n    getValue() {\n        // If the widget isn't active.\n        if (this.viewOnly || this.loading\n            || (!this.component.lazyLoad && !this.selectOptions.length)\n            || !this.element) {\n            return this.dataValue;\n        }\n        let value = this.emptyValue;\n        if (this.choices) {\n            value = this.choices.getValue(true);\n            // Make sure we don't get the placeholder\n            if (!this.component.multiple &&\n                this.component.placeholder &&\n                (value === this.t(this.component.placeholder, { _userInput: true }))) {\n                value = this.emptyValue;\n            }\n        }\n        else if (this.refs.selectContainer) {\n            value = this.refs.selectContainer.value;\n            if (this.valueProperty === '' || this.isEntireObjectDisplay()) {\n                if (value === '') {\n                    return {};\n                }\n                const option = this.selectOptions[value] ||\n                    this.selectOptions.find(option => option.id === value);\n                if (option && lodash_1.default.isObject(option.value)) {\n                    value = option.value;\n                }\n            }\n        }\n        else {\n            value = this.dataValue;\n        }\n        // Choices will return undefined if nothing is selected. We really want '' to be empty.\n        if (value === undefined || value === null) {\n            value = '';\n        }\n        return value;\n    }\n    redraw() {\n        const done = super.redraw();\n        this.triggerUpdate();\n        return done;\n    }\n    normalizeSingleValue(value) {\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        const dataType = this.component.dataType || 'auto';\n        const normalize = {\n            value,\n            number() {\n                const numberValue = Number(this.value);\n                const isEquivalent = value.toString() === numberValue.toString();\n                if (!Number.isNaN(numberValue) && Number.isFinite(numberValue) && value !== '' && isEquivalent) {\n                    this.value = numberValue;\n                }\n                return this;\n            },\n            boolean() {\n                if (lodash_1.default.isString(this.value)\n                    && (this.value.toLowerCase() === 'true'\n                        || this.value.toLowerCase() === 'false')) {\n                    this.value = (this.value.toLowerCase() === 'true');\n                }\n                return this;\n            },\n            string() {\n                this.value = String(this.value);\n                return this;\n            },\n            object() {\n                return this;\n            },\n            auto() {\n                if (lodash_1.default.isObject(this.value)) {\n                    this.value = this.object().value;\n                }\n                else {\n                    this.value = this.string().number().boolean().value;\n                }\n                return this;\n            }\n        };\n        try {\n            return normalize[dataType]().value;\n        }\n        catch (err) {\n            console.warn('Failed to normalize value', err);\n            return value;\n        }\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        if (this.component.multiple && Array.isArray(value)) {\n            return value.map((singleValue) => this.normalizeSingleValue(singleValue));\n        }\n        return super.normalizeValue(this.normalizeSingleValue(value));\n    }\n    setMetadata(value) {\n        var _a;\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        // Check to see if we need to save off the template data into our metadata.\n        const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n        const shouldSaveData = !valueIsObject || this.component.reference;\n        if (templateValue && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            let templateData = this.templateData[templateValue];\n            if (this.component.multiple) {\n                templateData = {};\n                const dataValue = this.dataValue;\n                if (dataValue && lodash_1.default.isArray(dataValue) && dataValue.length) {\n                    dataValue.forEach((dataValueItem) => {\n                        const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;\n                        templateData[dataValueItemValue] = this.templateData[dataValueItemValue];\n                    });\n                }\n                templateData[value] = this.templateData[value];\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, templateData);\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed || !this.selectMetadata) {\n            if (this.component.multiple && Array.isArray(this.dataValue)) {\n                this.dataValue.forEach(singleValue => this.setMetadata(singleValue));\n            }\n            else {\n                this.setMetadata(this.dataValue);\n            }\n        }\n        return changed;\n    }\n    undoValueTyping(value) {\n        let untypedValue = value;\n        if (this.component.multiple && Array.isArray(value)) {\n            untypedValue = value.map(v => {\n                if (typeof v === 'boolean' || typeof v === 'number') {\n                    return v.toString();\n                }\n                return v;\n            });\n        }\n        else {\n            if (typeof value === 'boolean' || typeof value === 'number') {\n                untypedValue = value.toString();\n            }\n        }\n        return untypedValue;\n    }\n    setValue(value, flags = {}) {\n        const previousValue = this.dataValue;\n        const changed = this.updateValue(value, flags);\n        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {})) && !flags.fromSubmission) {\n            return false;\n        }\n        value = this.dataValue;\n        const hasPreviousValue = !this.isEmpty(previousValue);\n        const hasValue = !this.isEmpty(value);\n        // Undo typing when searching to set the value.\n        value = this.undoValueTyping(value);\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.itemsLoaded.then(() => {\n                this.redraw();\n            });\n            return changed;\n        }\n        // Do not set the value if we are loading... that will happen after it is done.\n        if (this.loading) {\n            return changed;\n        }\n        // Determine if we need to perform an initial lazyLoad api call if searchField is provided.\n        if (this.isInitApiCallNeeded(hasValue)) {\n            this.loading = true;\n            this.lazyLoadInit = true;\n            const searchProperty = this.component.searchField || this.component.valueProperty;\n            this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);\n            return changed;\n        }\n        // Add the value options.\n        this.itemsLoaded.then(() => {\n            this.addValueOptions();\n            this.setChoicesValue(value, hasPreviousValue, flags);\n        });\n        return changed;\n    }\n    isInitApiCallNeeded(hasValue) {\n        return this.component.lazyLoad &&\n            !this.lazyLoadInit &&\n            !this.active &&\n            !this.selectOptions.length &&\n            hasValue &&\n            this.shouldInitialLoad &&\n            this.visible && (this.component.searchField || this.component.valueProperty);\n    }\n    setChoicesValue(value, hasPreviousValue, flags = {}) {\n        const hasValue = !this.isEmpty(value) || flags.fromSubmission;\n        hasPreviousValue = (hasPreviousValue === undefined) ? true : hasPreviousValue;\n        if (this.choices) {\n            // Now set the value.\n            if (hasValue) {\n                this.choices.removeActiveItems();\n                // Add the currently selected choices if they don't already exist.\n                const currentChoices = Array.isArray(value) && this.component.multiple ? value : [value];\n                if (!this.addCurrentChoices(currentChoices, this.selectOptions, true)) {\n                    this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n                }\n                this.choices.setChoiceByValue(currentChoices);\n            }\n            else if (hasPreviousValue || flags.resetValue) {\n                this.choices.removeActiveItems();\n            }\n        }\n        else {\n            if (hasValue) {\n                const values = Array.isArray(value) ? value : [value];\n                if (!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2\n                    || (this.selectData && flags.fromSubmission)) {\n                    const { value, label } = this.selectValueAndLabel(this.dataValue);\n                    this.addOption(value, label);\n                }\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    lodash_1.default.each(values, (val) => {\n                        if (selectOption.value === '') {\n                            selectOption.value = {};\n                        }\n                        if (lodash_1.default.isEqual(val, selectOption.value) && selectOption.element) {\n                            selectOption.element.selected = true;\n                            selectOption.element.setAttribute('selected', 'selected');\n                            return false;\n                        }\n                    });\n                });\n            }\n            else {\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    if (selectOption.element) {\n                        selectOption.element.selected = false;\n                        selectOption.element.removeAttribute('selected');\n                    }\n                });\n            }\n        }\n    }\n    get itemsLoaded() {\n        return this._itemsLoaded || Promise.resolve();\n    }\n    set itemsLoaded(promise) {\n        this._itemsLoaded = promise;\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.getOptionsValues();\n        if (values) {\n            if (lodash_1.default.isObject(value)) {\n                const compareComplexValues = (optionValue) => {\n                    const normalizedOptionValue = this.normalizeSingleValue(optionValue);\n                    if (!lodash_1.default.isObject(normalizedOptionValue)) {\n                        return false;\n                    }\n                    try {\n                        return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));\n                    }\n                    catch (err) {\n                        console.warn.error('Error while comparing items', err);\n                        return false;\n                    }\n                };\n                return values.findIndex((optionValue) => compareComplexValues(optionValue)) !== -1;\n            }\n            return values.findIndex((optionValue) => this.normalizeSingleValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    /**\n     * Performs required transformations on the initial value to use in selectOptions\n     * @param {*} value - The value to transform.\n     * @returns {*} - Returns the options value.\n     */\n    getOptionValue(value) {\n        return lodash_1.default.isObject(value) && this.isEntireObjectDisplay()\n            ? this.normalizeSingleValue(value)\n            : lodash_1.default.isObject(value) && (this.valueProperty || this.component.key !== 'resource')\n                ? value\n                : lodash_1.default.isObject(value) && !this.valueProperty\n                    ? this.interpolate(this.component.template, { item: value }).replace(/<\\/?[^>]+(>|$)/g, '')\n                    : lodash_1.default.isNull(value)\n                        ? this.emptyValue\n                        : String(this.normalizeSingleValue(value));\n    }\n    /**\n     * If component has static values (values, json) or custom values, returns an array of them\n     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.\n     */\n    getOptionsValues() {\n        let rawItems = [];\n        switch (this.component.dataSrc) {\n            case 'values':\n                rawItems = this.component.data.values;\n                break;\n            case 'json':\n                rawItems = this.component.data.json;\n                break;\n            case 'custom':\n                rawItems = this.getCustomItems();\n                break;\n            case 'url':\n                rawItems = this.selectItems;\n                break;\n        }\n        if (typeof rawItems === 'string') {\n            try {\n                rawItems = JSON.parse(rawItems);\n            }\n            catch (err) {\n                console.warn(err.message);\n                rawItems = [];\n            }\n        }\n        if (!Array.isArray(rawItems)) {\n            return;\n        }\n        return rawItems.map((item) => this.getOptionValue(this.itemValue(item)));\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue('', {\n            noUpdateEvent: true\n        });\n        this.unset();\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - Returns FALSE for select components.\n     */\n    validateMultiple() {\n        // Select component will contain one input when flagged as multiple.\n        return false;\n    }\n    /**\n     * Output this select dropdown as a string value.\n     * @returns {*}\n     */\n    isBooleanOrNumber(value) {\n        return typeof value === 'number' || typeof value === 'boolean';\n    }\n    getNormalizedValues() {\n        if (!this.component || !this.component.data || !this.component.data.values) {\n            return;\n        }\n        return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));\n    }\n    asString(value, options = {}) {\n        var _a;\n        value = value !== null && value !== void 0 ? value : this.getValue();\n        if (options.modalPreview) {\n            const template = this.itemTemplate(value, value);\n            return template;\n        }\n        //need to convert values to strings to be able to compare values with available options that are strings\n        const convertToString = (data, valueProperty) => {\n            if (valueProperty) {\n                if (Array.isArray(data)) {\n                    data.forEach((item) => item[valueProperty] = item[valueProperty].toString());\n                }\n                else if (lodash_1.default.isObject(data)) {\n                    data[valueProperty] = data[valueProperty].toString();\n                }\n                return data;\n            }\n            if (this.isBooleanOrNumber(data)) {\n                data = data.toString();\n            }\n            if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {\n                data = data.map(item => this.isBooleanOrNumber(item) ? item.toString() : item);\n            }\n            return data;\n        };\n        value = convertToString(value);\n        if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {\n            const { items, valueProperty, } = this.component.dataSrc === 'values'\n                ? {\n                    items: convertToString(this.getNormalizedValues(), 'value'),\n                    valueProperty: 'value',\n                }\n                : {\n                    items: convertToString(this.getCustomItems(), this.valueProperty),\n                    valueProperty: this.valueProperty,\n                };\n            const getFromValues = () => {\n                const initialValue = lodash_1.default.find(items, [valueProperty, value]);\n                const values = this.defaultSchema.data.values || [];\n                return lodash_1.default.isEqual(initialValue, values[0]) ? '-' : initialValue;\n            };\n            value = (this.component.multiple && Array.isArray(value))\n                ? lodash_1.default.filter(items, (item) => value.includes(item.value))\n                : (valueProperty && items)\n                    ? (_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value }\n                    : value;\n        }\n        if (lodash_1.default.isString(value)) {\n            return value;\n        }\n        const getTemplateValue = (v) => {\n            const itemTemplate = this.itemTemplate(v);\n            return options.csv && itemTemplate\n                ? (0, utils_1.removeHTML)(itemTemplate)\n                : itemTemplate;\n        };\n        if (Array.isArray(value)) {\n            const items = [];\n            value.forEach(item => items.push(getTemplateValue(item)));\n            if (this.component.dataSrc === 'resource' && items.length > 0) {\n                return items.join(', ');\n            }\n            else if (items.length > 0) {\n                return items.join('<br />');\n            }\n            else {\n                return '-';\n            }\n        }\n        if (this.isEntireObjectDisplay() && lodash_1.default.isObject(value)) {\n            return JSON.stringify(value);\n        }\n        return !lodash_1.default.isNil(value)\n            ? getTemplateValue(value)\n            : '-';\n    }\n    detach() {\n        var _a, _b;\n        this.off('blur');\n        if (this.choices) {\n            if ((_b = (_a = this.choices.containerOuter) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.parentNode) {\n                this.choices.destroy();\n            }\n            this.choices = null;\n        }\n        super.detach();\n    }\n    focus() {\n        if (this.focusableElement) {\n            super.focus.call(this);\n            this.focusableElement.focus();\n        }\n    }\n    setErrorClasses(elements, dirty, hasError, hasMessages, element = this.element) {\n        super.setErrorClasses(elements, dirty, hasError, hasMessages, element);\n        if (this.choices) {\n            super.setErrorClasses([this.choices.containerInner.element], dirty, hasError, hasMessages, element);\n        }\n        else {\n            super.setErrorClasses([this.refs.selectContainer], dirty, hasError, hasMessages, element);\n        }\n    }\n}\nexports[\"default\"] = SelectComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/Select.js?");
 
 /***/ }),
 
@@ -8108,7 +8108,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n/* global jQuery */\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 __exportStar = (this && this.__exportStar) || function(m, exports) {\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\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 }));\nexports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;\nexports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nexports._ = lodash_1.default;\nconst json_logic_js_1 = __importDefault(__webpack_require__(/*! json-logic-js */ \"./node_modules/json-logic-js/logic.js\"));\nexports.jsonLogic = json_logic_js_1.default;\nconst moment_timezone_1 = __importDefault(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\nconst jstimezonedetect_1 = __importDefault(__webpack_require__(/*! jstimezonedetect */ \"./node_modules/jstimezonedetect/dist/jstz.min.js\"));\nconst operators_1 = __webpack_require__(/*! ./jsonlogic/operators */ \"./lib/cjs/utils/jsonlogic/operators.js\");\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.js\"));\nconst formUtils_1 = __webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nObject.defineProperty(exports, \"Evaluator\", ({ enumerable: true, get: function () { return Evaluator_1.Evaluator; } }));\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\nexports.ConditionOperators = conditionOperators_1.default;\nconst interpolate = Evaluator_1.Evaluator.interpolate;\nexports.interpolate = interpolate;\n__exportStar(__webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\"), exports);\n// Configure JsonLogic\noperators_1.lodashOperators.forEach((name) => json_logic_js_1.default.add_operation(`_${name}`, lodash_1.default[name]));\n// Retrieve Any Date\njson_logic_js_1.default.add_operation('getDate', (date) => {\n    return (0, moment_timezone_1.default)(date).toISOString();\n});\n// Set Relative Minimum Date\njson_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {\n    return (0, moment_timezone_1.default)().subtract(relativeMinDate, 'days').toISOString();\n});\n// Set Relative Maximum Date\njson_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {\n    return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();\n});\nexports.moment = __importStar(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\n/**\n * Sets the path to the component and parent schema.\n * @param {import('@formio/core').Component} component - The component to set the path for.\n */\nfunction setPathToComponentAndPerentSchema(component) {\n    component.path = getComponentPath(component);\n    const dataParent = getDataParentComponent(component);\n    if (dataParent && typeof dataParent === 'object') {\n        dataParent.path = getComponentPath(dataParent);\n    }\n}\n/**\n * Evaluate a method.\n * @param {Function|string|object} func - The function to evaluate.\n * @param {*} args - A map of arguments to pass to the function.\n * @param {string} ret - The name of the \"return\" variable in the script.\n * @param {boolean} interpolate - True if the script should be interpolated before being executed.\n * @param {import('@formio/core').EvaluatorOptions} options - The evaluator options.\n * @returns {*} - The result of the evaluation.\n */\nfunction evaluate(func, args, ret, interpolate, options = {}) {\n    return Evaluator_1.Evaluator.evaluate(func, args, ret, interpolate, undefined, options);\n}\nexports.evaluate = evaluate;\n/**\n * Returns a random compoennt ID.\n * @returns {string} - A random component ID.\n */\nfunction getRandomComponentId() {\n    return `e${Math.random().toString(36).substring(7)}`;\n}\nexports.getRandomComponentId = getRandomComponentId;\n/**\n * Get a property value of an element.\n * @param {CSSStyleDeclaration} style - The style element to get the property value from.\n * @param {string} prop - The property to get the value for.\n * @returns {number} - The value of the property.\n */\nfunction getPropertyValue(style, prop) {\n    let value = style.getPropertyValue(prop);\n    value = value ? value.replace(/[^0-9.]/g, '') : '0';\n    return parseFloat(value);\n}\nexports.getPropertyValue = getPropertyValue;\n/**\n * Get an elements bounding rectagle.\n * @param {HTMLElement} element - A DOM element to get the bounding rectangle for.\n * @returns {{x: number, y: number, width: number, height: number}} - The bounding rectangle.\n */\nfunction getElementRect(element) {\n    const style = window.getComputedStyle(element, null);\n    return {\n        x: getPropertyValue(style, 'left'),\n        y: getPropertyValue(style, 'top'),\n        width: getPropertyValue(style, 'width'),\n        height: getPropertyValue(style, 'height')\n    };\n}\nexports.getElementRect = getElementRect;\n/**\n * Get non HTMLElement property in the window object\n * @param {string} property - The window property to fetch the script plugin from.\n * @returns {any | undefined} - The HTML Element property on the window object.\n */\nfunction getScriptPlugin(property) {\n    const obj = window[property];\n    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2\n        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {\n        return undefined;\n    }\n    return obj;\n}\nexports.getScriptPlugin = getScriptPlugin;\n/**\n * Determines the boolean value of a setting.\n * @param {string|boolean} value - A string or boolean value to convert to boolean.\n * @returns {boolean} - The boolean value of the setting.\n */\nfunction boolValue(value) {\n    if (lodash_1.default.isBoolean(value)) {\n        return value;\n    }\n    else if (lodash_1.default.isString(value)) {\n        return (value.toLowerCase() === 'true');\n    }\n    else {\n        return !!value;\n    }\n}\nexports.boolValue = boolValue;\n/**\n * Check to see if an ID is a mongoID.\n * @param {string} text - The text to check if it is a mongoID.\n * @returns {boolean} - TRUE if the text is a mongoID; FALSE otherwise.\n */\nfunction isMongoId(text) {\n    return !!text.toString().match(/^[0-9a-fA-F]{24}$/);\n}\nexports.isMongoId = isMongoId;\n/**\n * Checks the calculated value for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the calculated value.\n * @param {import('@formio/core').Submission} submission - A submission object.\n * @param {*} rowData - The contextual row data for the component.\n */\nfunction checkCalculated(component, submission, rowData) {\n    // Process calculated value stuff if present.\n    if (component.calculateValue) {\n        lodash_1.default.set(rowData, component.key, evaluate(component.calculateValue, {\n            value: undefined,\n            data: submission ? submission.data : rowData,\n            row: rowData,\n            util: this,\n            component\n        }, 'value'));\n    }\n}\nexports.checkCalculated = checkCalculated;\n/**\n * Check if a simple conditional evaluates to true.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {import('@formio/core').SimpleConditional} condition - The condition to check.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction getConditionalPathsRecursive(conditionPaths, data) {\n    let currentGlobalIndex = 0;\n    const conditionalPathsArray = [];\n    const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {\n        currentPath = currentPath.replace(/^\\.+|\\.+$/g, '');\n        const currentLocalIndex = localIndex;\n        const currentData = lodash_1.default.get(data, currentPath);\n        if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {\n            if (currentData.some(element => typeof element !== 'object')) {\n                return;\n            }\n            const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));\n            if (hasInnerDataArray) {\n                currentData.forEach((_, indexOutside) => {\n                    const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;\n                    getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);\n                });\n            }\n            else {\n                currentData.forEach((x, index) => {\n                    if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {\n                        const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;\n                        conditionalPathsArray.push(compDataPath);\n                    }\n                });\n            }\n        }\n        else {\n            if (!conditionPaths[currentGlobalIndex]) {\n                return;\n            }\n            currentGlobalIndex = currentGlobalIndex + 1;\n            getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);\n        }\n    };\n    getConditionalPaths(data);\n    return conditionalPathsArray;\n}\nfunction checkSimpleConditional(component, condition, row, data, instance) {\n    if (condition.when) {\n        const value = getComponentActualValue(condition.when, data, row);\n        const eq = String(condition.eq);\n        const show = String(condition.show);\n        // Special check for selectboxes component.\n        if (lodash_1.default.isObject(value) && lodash_1.default.has(value, condition.eq)) {\n            return String(value[condition.eq]) === show;\n        }\n        // FOR-179 - Check for multiple values.\n        if (Array.isArray(value) && value.map(String).includes(eq)) {\n            return show === 'true';\n        }\n        return (String(value) === eq) === (show === 'true');\n    }\n    else {\n        const { conditions = [], conjunction = 'all', show = true } = condition;\n        if (!conditions.length) {\n            return true;\n        }\n        const conditionsResult = lodash_1.default.map(conditions, (cond) => {\n            var _a, _b;\n            const { value: comparedValue, operator, component: conditionComponentPath } = cond;\n            if (!conditionComponentPath) {\n                return true;\n            }\n            const splittedConditionPath = conditionComponentPath.split('.');\n            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);\n            if (conditionalPaths.length > 0) {\n                return conditionalPaths.map((path) => {\n                    const value = getComponentActualValue(path, data, row);\n                    const ConditionOperator = conditionOperators_1.default[operator];\n                    return ConditionOperator\n                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })\n                        : true;\n                });\n            }\n            else {\n                const value = getComponentActualValue(conditionComponentPath, data, row);\n                const СonditionOperator = conditionOperators_1.default[operator];\n                return СonditionOperator\n                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })\n                    : true;\n            }\n        });\n        let result = false;\n        switch (conjunction) {\n            case 'any':\n                result = lodash_1.default.some(conditionsResult.flat(), res => !!res);\n                break;\n            default:\n                result = lodash_1.default.every(conditionsResult.flat(), res => !!res);\n        }\n        return show ? result : !result;\n    }\n}\nexports.checkSimpleConditional = checkSimpleConditional;\n/**\n * Returns a components normalized value.\n * @param {string} compPath - The full path to the component.\n * @param {*} data - The data object to get the value from.\n * @param {*} row - The contextual row data for the component.\n * @returns {*} - The normalized value of the component.\n */\nfunction getComponentActualValue(compPath, data, row) {\n    let value = null;\n    if (row) {\n        value = (0, formUtils_1.getValue)({ data: row }, compPath);\n    }\n    if (data && lodash_1.default.isNil(value)) {\n        value = (0, formUtils_1.getValue)({ data }, compPath);\n    }\n    // FOR-400 - Fix issue where falsey values were being evaluated as show=true\n    if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {\n        value = '';\n    }\n    return value;\n}\nexports.getComponentActualValue = getComponentActualValue;\n/**\n * Check custom javascript conditional.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {string} custom - The custom conditional string to evaluate.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {string} variable - The variable name for the result of the custom conditional.\n * @param {*} onError - A custom return if there is an error or the value is null from the evaluation.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {*} - The result of the evaulation.\n */\nfunction checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {\n    if (typeof custom === 'string') {\n        custom = `var ${variable} = true; ${custom}; return ${variable};`;\n    }\n    const value = (instance && instance.evaluate) ?\n        instance.evaluate(custom, { row, data, form }) :\n        evaluate(custom, { row, data, form });\n    if (value === null) {\n        return onError;\n    }\n    return value;\n}\nexports.checkCustomConditional = checkCustomConditional;\n/**\n * Check a component for JSON conditionals.\n * @param {import('@formio/core').Component} component - The component\n * @param {import('@formio/core').JSONConditional} json - The json conditional to check.\n * @param {*} row - The contextual row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The Form JSON of the form.\n * @param {*} onError - Custom return value if there is an error.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkJsonConditional(component, json, row, data, form, onError) {\n    try {\n        return json_logic_js_1.default.apply(json, {\n            data,\n            row,\n            form,\n            _: lodash_1.default,\n        });\n    }\n    catch (err) {\n        console.warn(`An error occurred in jsonLogic advanced condition for ${component.key}`, err);\n        return onError;\n    }\n}\nexports.checkJsonConditional = checkJsonConditional;\n/**\n * Returns the contextual row data for a component.\n * @param {import('@formio/core').Component} component - The component to get the row data for.\n * @param {*} row - The row data for the component.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @param {*} conditional - The component conditional.\n * @returns {*} - The contextual row data for the component.\n */\nfunction getRow(component, row, instance, conditional) {\n    var _a;\n    const condition = conditional || component.conditional;\n    // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema\n    if (!instance) {\n        instance = lodash_1.default.cloneDeep(component);\n        setPathToComponentAndPerentSchema(instance);\n    }\n    const dataParent = getDataParentComponent(instance);\n    const parentPath = dataParent ? getComponentPath(dataParent) : null;\n    const isTriggerCondtionComponentPath = condition.when || !condition.conditions\n        ? (_a = condition.when) === null || _a === void 0 ? void 0 : _a.startsWith(parentPath)\n        : lodash_1.default.some(condition.conditions, cond => cond.component.startsWith(parentPath));\n    if (dataParent && isTriggerCondtionComponentPath) {\n        const newRow = {};\n        lodash_1.default.set(newRow, parentPath, row);\n        row = newRow;\n    }\n    return row;\n}\n/**\n * Checks the conditions for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the condition.\n * @param {*} row - The data within a row\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkCondition(component, row, data, form, instance) {\n    const { customConditional, conditional } = component;\n    if (customConditional) {\n        return checkCustomConditional(component, customConditional, row, data, form, 'show', true, instance);\n    }\n    else if (conditional && (conditional.when || lodash_1.default.some(conditional.conditions || [], condition => condition.component && condition.operator))) {\n        row = getRow(component, row, instance);\n        return checkSimpleConditional(component, conditional, row, data, instance);\n    }\n    else if (conditional && conditional.json) {\n        return checkJsonConditional(component, conditional.json, row, data, form, true);\n    }\n    // Default to show.\n    return true;\n}\nexports.checkCondition = checkCondition;\n/**\n * Test a trigger on a component.\n * @param {import('@formio/core').Component} component - The component to test the trigger against.\n * @param {import('@formio/core').LogicTrigger} trigger - The trigger configuration.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The root data object.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {any} instance - The component that is performing the trigger.\n * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.\n */\nfunction checkTrigger(component, trigger, row, data, form, instance) {\n    // If trigger is empty, don't fire it\n    if (!trigger || !trigger[trigger.type]) {\n        return false;\n    }\n    switch (trigger.type) {\n        case 'simple':\n            row = getRow(component, row, instance, trigger.simple);\n            return checkSimpleConditional(component, trigger.simple, row, data, instance);\n        case 'javascript':\n            return checkCustomConditional(component, trigger.javascript, row, data, form, 'result', false, instance);\n        case 'json':\n            return checkJsonConditional(component, trigger.json, row, data, form, false);\n    }\n    // If none of the types matched, don't fire the trigger.\n    return false;\n}\nexports.checkTrigger = checkTrigger;\n/**\n * Sets a property on a component via an executed Logic action.\n * @param {import('@formio/core').Component} component - The component to set the property on.\n * @param {import('@formio/core').LogicAction} action - The action to perform on the component.\n * @param {string} result - The name of the variable in the evaulation to use as the result.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The full submission data.\n * @param {any} instance - The component instance.\n * @returns {import('@formio/core').Component} - The modified component.\n */\nfunction setActionProperty(component, action, result, row, data, instance) {\n    const property = action.property.value;\n    switch (action.property.type) {\n        case 'boolean': {\n            const currentValue = lodash_1.default.get(component, property, false).toString();\n            const newValue = action.state.toString();\n            if (currentValue !== newValue) {\n                lodash_1.default.set(component, property, newValue === 'true');\n            }\n            break;\n        }\n        case 'string': {\n            const evalData = {\n                data,\n                row,\n                component,\n                result,\n            };\n            const textValue = action.property.component ? action[action.property.component] : action.text;\n            const currentValue = lodash_1.default.get(component, property, '');\n            const newValue = (instance && instance.interpolate)\n                ? instance.interpolate(textValue, evalData)\n                : Evaluator_1.Evaluator.interpolate(textValue, evalData);\n            if (newValue !== currentValue) {\n                lodash_1.default.set(component, property, newValue);\n            }\n            break;\n        }\n    }\n    return component;\n}\nexports.setActionProperty = setActionProperty;\n/**\n * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World\n * @param {string} str - The string to remove HTML tags from.\n * @returns {string} - The string without HTML tags.\n */\nfunction removeHTML(str) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return (doc.body.textContent || '').trim();\n}\nexports.removeHTML = removeHTML;\n/**\n * Unescape HTML characters like &lt, &gt, &amp and etc.\n * @param {string} str - The string to unescape.\n * @returns {string} - The unescaped string.\n */\nfunction unescapeHTML(str) {\n    if (typeof window === 'undefined' || !('DOMParser' in window)) {\n        return str;\n    }\n    const elem = document.createElement('textarea');\n    elem.innerHTML = str;\n    return elem.value;\n}\nexports.unescapeHTML = unescapeHTML;\n/**\n * Make HTML element from string\n * @param {string} str - The string to convert to an HTML element.\n * @param {string} selector - The selector to use to get the element once it is created.\n * @returns {HTMLElement} - The HTML element that was created.\n */\nfunction convertStringToHTMLElement(str, selector) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return doc.body.querySelector(selector);\n}\nexports.convertStringToHTMLElement = convertStringToHTMLElement;\n/**\n * Make a filename guaranteed to be unique.\n * @param {string} name - The original name of the file.\n * @param {string} template - The template to use for the unique name.\n * @param {object} evalContext - The context to use for the evaluation.\n * @returns {string} - A unique filename.\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1\n        ? `.${lodash_1.default.last(parts)}`\n        : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid()\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Returns a GUID\n * @returns {string} - A GUID.\n */\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = Math.random() * 16 | 0;\n        const v = c === 'x'\n            ? r\n            : (r & 0x3 | 0x8);\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Return a translated date setting.\n * @param {string|Date} date - The date to translate.\n * @returns {(null|Date)} - The translated date.\n */\nfunction getDateSetting(date) {\n    if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {\n        return null;\n    }\n    if (date instanceof Date) {\n        return date;\n    }\n    else if (typeof date.toDate === 'function') {\n        return date.isValid() ? date.toDate() : null;\n    }\n    let dateSetting = ((typeof date !== 'string') || (date.indexOf('moment(') === -1)) ? (0, moment_timezone_1.default)(date) : null;\n    if (dateSetting && dateSetting.isValid()) {\n        return dateSetting.toDate();\n    }\n    dateSetting = null;\n    try {\n        const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);\n        if (typeof value === 'string') {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n        else if (typeof value.toDate === 'function') {\n            dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());\n        }\n        else if (value instanceof Date) {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n    }\n    catch (e) {\n        return null;\n    }\n    if (!dateSetting) {\n        return null;\n    }\n    // Ensure this is a date.\n    if (!dateSetting.isValid()) {\n        return null;\n    }\n    return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\n/**\n * Returns true if the date is a valid date. False otherwise.\n * @param {Date|string} date - The date to check for validity.\n * @returns {boolean} - TRUE if the date is valid; FALSE otherwise.\n */\nfunction isValidDate(date) {\n    return lodash_1.default.isDate(date) && !lodash_1.default.isNaN(date.getDate());\n}\nexports.isValidDate = isValidDate;\n/**\n * Get the current timezone string.\n * @returns {string} - The current timezone.\n */\nfunction currentTimezone() {\n    if (moment_timezone_1.default.currentTimezone) {\n        return moment_timezone_1.default.currentTimezone;\n    }\n    moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();\n    return moment_timezone_1.default.currentTimezone;\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Get an offset date provided a date object and timezone object.\n * @param {Date} date - The date to offset.\n * @param {string} timezone - The timezone to offset the date to.\n * @returns {Date} - The offset date.\n */\nfunction offsetDate(date, timezone) {\n    if (timezone === 'UTC') {\n        return {\n            date: new Date(date.getTime() + (date.getTimezoneOffset() * 60000)),\n            abbr: 'UTC'\n        };\n    }\n    const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);\n    return {\n        date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),\n        abbr: dateMoment.format('z')\n    };\n}\nexports.offsetDate = offsetDate;\n/**\n * Returns if the zones are loaded.\n * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.\n */\nfunction zonesLoaded() {\n    return moment_timezone_1.default.zonesLoaded;\n}\nexports.zonesLoaded = zonesLoaded;\n/**\n * Returns if we should load the zones.\n * @param {string} timezone - The timezone to check if we should load the zones.\n * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.\n */\nfunction shouldLoadZones(timezone) {\n    if (timezone === currentTimezone() || timezone === 'UTC') {\n        return false;\n    }\n    return true;\n}\nexports.shouldLoadZones = shouldLoadZones;\n/**\n * Externally load the timezone data.\n * @param {string} url - The URL to load the timezone data from.\n * @param {string} timezone - The timezone to load.\n * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.\n */\nfunction loadZones(url, timezone) {\n    if (timezone && !shouldLoadZones(timezone)) {\n        // Return non-resolving promise.\n        return new Promise(lodash_1.default.noop);\n    }\n    if (moment_timezone_1.default.zonesPromise) {\n        return moment_timezone_1.default.zonesPromise;\n    }\n    return moment_timezone_1.default.zonesPromise = fetch(url)\n        .then(resp => resp.json().then(zones => {\n        moment_timezone_1.default.tz.load(zones);\n        moment_timezone_1.default.zonesLoaded = true;\n        // Trigger a global event that the timezones have finished loading.\n        if (document && document.createEvent && document.body && document.body.dispatchEvent) {\n            var event = document.createEvent('Event');\n            event.initEvent('zonesLoaded', true, true);\n            document.body.dispatchEvent(event);\n        }\n    }));\n}\nexports.loadZones = loadZones;\n/**\n * Get the moment date object for translating dates with timezones.\n * @param {string|Date} value - The value to convert into a moment date.\n * @param {string} format - The format to convert the date to.\n * @param {string} timezone - The timezone to convert the date to.\n * @returns {Date} - The moment date object.\n */\nfunction momentDate(value, format, timezone) {\n    const momentDate = (0, moment_timezone_1.default)(value);\n    if (!timezone) {\n        return momentDate;\n    }\n    if (timezone === 'UTC') {\n        timezone = 'Etc/UTC';\n    }\n    if ((timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) && moment_timezone_1.default.zonesLoaded) {\n        return momentDate.tz(timezone);\n    }\n    return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {string|Date} value - The value to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @param {string} flatPickrInputFormat - The format to use for flatpickr input.\n * @returns {string} - The formatted date.\n */\nfunction formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {\n    const momentDate = (0, moment_timezone_1.default)(value, flatPickrInputFormat || undefined);\n    if (timezone === currentTimezone()) {\n        // See if our format contains a \"z\" timezone character.\n        if (format.match(/\\s(z$|z\\s)/)) {\n            loadZones(timezonesUrl);\n            if (moment_timezone_1.default.zonesLoaded) {\n                return momentDate.tz(timezone).format(convertFormatToMoment(format));\n            }\n            else {\n                return momentDate.format(convertFormatToMoment(format.replace(/\\s(z$|z\\s)/, '')));\n            }\n        }\n        // Return the standard format.\n        return momentDate.format(convertFormatToMoment(format));\n    }\n    if (timezone === 'UTC') {\n        const offset = offsetDate(momentDate.toDate(), 'UTC');\n        return `${(0, moment_timezone_1.default)(offset.date).format(convertFormatToMoment(format))} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded && timezone) {\n        return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);\n    }\n    else {\n        return momentDate.format(convertFormatToMoment(format));\n    }\n}\nexports.formatDate = formatDate;\n/**\n * Pass a format function to format within a timezone.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {Function} formatFn - The format function to use.\n * @param {Date|string} date - The date to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @returns {string} - The formatted date.\n */\nfunction formatOffset(timezonesUrl, formatFn, date, format, timezone) {\n    if (timezone === currentTimezone()) {\n        return formatFn(date, format);\n    }\n    if (timezone === 'UTC') {\n        return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded) {\n        const offset = offsetDate(date, timezone);\n        return `${formatFn(offset.date, format)} ${offset.abbr}`;\n    }\n    else {\n        return formatFn(date, format);\n    }\n}\nexports.formatOffset = formatOffset;\n/**\n * Returns the local date format information.\n * @param {Intl.LocalesArgument} locale - The locale to get the date format for.\n * @returns {object} - The local date format information.\n */\nfunction getLocaleDateFormatInfo(locale) {\n    const formatInfo = {};\n    const day = 21;\n    const exampleDate = new Date(2017, 11, day);\n    const localDateString = exampleDate.toLocaleDateString(locale);\n    formatInfo.dayFirst = localDateString.slice(0, 2) === day.toString();\n    return formatInfo;\n}\nexports.getLocaleDateFormatInfo = getLocaleDateFormatInfo;\n/**\n * Convert the format from the angular-datepicker module to flatpickr format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToFlatpickr(format) {\n    return format\n        // Remove the Z timezone offset, not supported by flatpickr.\n        .replace(/Z/g, '')\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        .replace('YYYY', 'Y')\n        .replace('YY', 'y')\n        // Month conversion.\n        .replace('MMMM', 'F')\n        .replace(/M/g, 'n')\n        .replace('nnn', 'M')\n        .replace('nn', 'm')\n        // Day in month.\n        .replace(/d/g, 'j')\n        .replace(/jj/g, 'd')\n        // Day in week.\n        .replace('EEEE', 'l')\n        .replace('EEE', 'D')\n        // Hours, minutes, seconds\n        .replace('HH', 'H')\n        .replace('hh', 'G')\n        .replace('mm', 'i')\n        .replace('ss', 'S')\n        .replace(/a/g, 'K');\n}\nexports.convertFormatToFlatpickr = convertFormatToFlatpickr;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMoment(format) {\n    return format\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        // Day in month.\n        .replace(/d/g, 'D')\n        // Day in week.\n        .replace(/E/g, 'd')\n        // AM/PM marker\n        .replace(/a/g, 'A')\n        // Unix Timestamp\n        .replace(/U/g, 'X');\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Convert the format from the angular-datepicker module to mask format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMask(format) {\n    return format\n        // Long month replacement.\n        .replace(/M{4}/g, 'MM')\n        // Initial short month conversion.\n        .replace(/M{3}/g, '***')\n        // Short month conversion if input as text.\n        .replace(/e/g, 'Q')\n        // Month number conversion.\n        .replace(/W/g, '99')\n        // Year conversion.\n        .replace(/[ydhmswHMG]/g, '9')\n        // AM/PM conversion.\n        .replace(/a/g, 'AA');\n}\nexports.convertFormatToMask = convertFormatToMask;\n/**\n * Returns an input mask that is compatible with the input mask library.\n * @param {string} mask - The Form.io input mask.\n * @param {string} placeholderChar - Char which is used as a placeholder.\n * @returns {Array} - The input mask for the mask library.\n */\nfunction getInputMask(mask, placeholderChar) {\n    if (mask instanceof Array) {\n        return mask;\n    }\n    const maskArray = [];\n    maskArray.numeric = true;\n    for (let i = 0; i < mask.length; i++) {\n        switch (mask[i]) {\n            case '9':\n                maskArray.push(/\\d/);\n                break;\n            case 'A':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z]/);\n                break;\n            case 'a':\n                maskArray.numeric = false;\n                maskArray.push(/[a-z]/);\n                break;\n            case '*':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z0-9]/);\n                break;\n            // If char which is used inside mask placeholder was used in the mask, replace it with space to prevent errors\n            case placeholderChar:\n                maskArray.numeric = false;\n                maskArray.push(' ');\n                break;\n            default:\n                maskArray.numeric = false;\n                maskArray.push(mask[i]);\n                break;\n        }\n    }\n    return maskArray;\n}\nexports.getInputMask = getInputMask;\n/**\n * Unmasks a value using the provided mask and placeholder characters.\n * @param {string} value - The value to unmask.\n * @param {string} mask - The mask to use for unmasking.\n * @param {string} placeholderChar - The placeholder character to use for unmasking.\n * @returns {string} - The unmasked value.\n */\nfunction unmaskValue(value, mask, placeholderChar) {\n    if (!mask || !value || value.length > mask.length) {\n        return value;\n    }\n    let unmaskedValue = value.split('');\n    for (let i = 0; i < mask.length; i++) {\n        const char = value[i] || '';\n        const charPart = mask[i];\n        if (!lodash_1.default.isRegExp(charPart) && char === charPart) {\n            unmaskedValue[i] = '';\n        }\n    }\n    unmaskedValue = unmaskedValue.join('').replace(placeholderChar, '');\n    return unmaskedValue;\n}\nexports.unmaskValue = unmaskValue;\n/**\n * Returns true if the value matches the input mask format.\n * @param {string} value - The value to check.\n * @param {string} inputMask - The input mask to check against.\n * @returns {boolean} - TRUE if the value matches the input mask; FALSE otherwise.\n */\nfunction matchInputMask(value, inputMask) {\n    if (!inputMask) {\n        return true;\n    }\n    // If value is longer than mask, it isn't valid.\n    if (value.length > inputMask.length) {\n        return false;\n    }\n    for (let i = 0; i < inputMask.length; i++) {\n        const char = value[i] || '';\n        const charPart = inputMask[i];\n        if (!(lodash_1.default.isRegExp(charPart) && charPart.test(char) || charPart === char)) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.matchInputMask = matchInputMask;\n/**\n * Returns the number separators (i.e. 1,000) for the provided language.\n * @param {string} lang - The language code to get the number separators for.\n * @returns {{delimiter: string, decimalSeparator: string}} - The number separators.\n */\nfunction getNumberSeparators(lang = 'en') {\n    const formattedNumberString = (12345.6789).toLocaleString(lang);\n    const delimeters = formattedNumberString.match(/..(.)...(.)../);\n    if (!delimeters) {\n        return {\n            delimiter: ',',\n            decimalSeparator: '.'\n        };\n    }\n    return {\n        delimiter: (delimeters.length > 1) ? delimeters[1] : ',',\n        decimalSeparator: (delimeters.length > 2) ? delimeters[2] : '.',\n    };\n}\nexports.getNumberSeparators = getNumberSeparators;\n/**\n * Returns the number for the maximum amount of decimal places for a number.\n * @param {import('@formio/core').Component} component - The component to check for decimal limits.\n * @param {number} defaultLimit - The default limit to use if none is provided in the component.\n * @returns {number} - The number of decimal places allowed.\n */\nfunction getNumberDecimalLimit(component, defaultLimit) {\n    if (lodash_1.default.has(component, 'decimalLimit')) {\n        return lodash_1.default.get(component, 'decimalLimit');\n    }\n    // Determine the decimal limit. Defaults to 20 but can be overridden by validate.step or decimalLimit settings.\n    let decimalLimit = defaultLimit || 20;\n    const step = lodash_1.default.get(component, 'validate.step', 'any');\n    if (step !== 'any') {\n        const parts = step.toString().split('.');\n        if (parts.length > 1) {\n            decimalLimit = parts[1].length;\n        }\n    }\n    return decimalLimit;\n}\nexports.getNumberDecimalLimit = getNumberDecimalLimit;\n/**\n * Returns the currency affixes for a specific language.\n * @param {object} arg0 - The arguments object.\n * @param {string} arg0.currency - The currency code to get the affixes for.\n * @param {number} arg0.decimalLimit - The number of decimal places to use.\n * @param {string} arg0.decimalSeparator - The decimal separator to use.\n * @param {string} arg0.lang - The language code to use.\n * @returns {{prefix: string, suffix: string}} - The currency affixes.\n */\nfunction getCurrencyAffixes({ currency, decimalLimit, decimalSeparator, lang, }) {\n    // Get the prefix and suffix from the localized string.\n    let regex = `(.*)?${(100).toLocaleString(lang)}`;\n    if (decimalLimit) {\n        regex += `${decimalSeparator === '.' ? '\\\\.' : decimalSeparator}${(0).toLocaleString(lang)}{${decimalLimit}}`;\n    }\n    regex += '(.*)?';\n    const parts = (100).toLocaleString(lang, {\n        style: 'currency',\n        currency: currency ? currency : 'USD',\n        useGrouping: true,\n        maximumFractionDigits: decimalLimit || 0,\n        minimumFractionDigits: decimalLimit || 0\n    }).replace('.', decimalSeparator).match(new RegExp(regex));\n    return {\n        prefix: (parts === null || parts === void 0 ? void 0 : parts[1]) || '',\n        suffix: (parts === null || parts === void 0 ? void 0 : parts[2]) || ''\n    };\n}\nexports.getCurrencyAffixes = getCurrencyAffixes;\n/**\n * Fetch the field data provided a component.\n * @param {import('@formio/core').DataObject} data - The data object to fetch the field data from.\n * @param {import('@formio/core').Component} component - The component to fetch the field data for.\n * @returns {*} - The field data.\n */\nfunction fieldData(data, component) {\n    if (!data) {\n        return '';\n    }\n    if (!component || !component.key) {\n        return data;\n    }\n    if (component.key.includes('.')) {\n        let value = data;\n        const parts = component.key.split('.');\n        let key = '';\n        for (let i = 0; i < parts.length; i++) {\n            key = parts[i];\n            // Handle nested resources\n            if (value.hasOwnProperty('_id')) {\n                value = value.data;\n            }\n            // Return if the key is not found on the value.\n            if (!value.hasOwnProperty(key)) {\n                return;\n            }\n            // Convert old single field data in submissions to multiple\n            if (key === parts[parts.length - 1] && component.multiple && !Array.isArray(value[key])) {\n                value[key] = [value[key]];\n            }\n            // Set the value of this key.\n            value = value[key];\n        }\n        return value;\n    }\n    else {\n        // Convert old single field data in submissions to multiple\n        if (component.multiple && !Array.isArray(data[component.key])) {\n            data[component.key] = [data[component.key]];\n        }\n        // Fix for checkbox type radio submission values in tableView\n        if (component.type === 'checkbox' && component.inputType === 'radio') {\n            return data[component.name] === component.value;\n        }\n        return data[component.key];\n    }\n}\nexports.fieldData = fieldData;\n/**\n * Delays function execution with possibility to execute function synchronously or cancel it.\n * @param {Function} fn - Function to delay\n * @param {number} delay - Delay time\n * @param {...any} args - Arguments to pass to the function\n * @returns {*} - Function to cancel the delay\n */\nfunction delay(fn, delay = 0, ...args) {\n    const timer = setTimeout(fn, delay, ...args);\n    /**\n     *\n     */\n    function cancel() {\n        clearTimeout(timer);\n    }\n    /**\n     * Execute the function early.\n     * @returns {*} - The result of the function.\n     */\n    function earlyCall() {\n        cancel();\n        return fn(...args);\n    }\n    earlyCall.timer = timer;\n    earlyCall.cancel = cancel;\n    return earlyCall;\n}\nexports.delay = delay;\n/**\n * Iterate the given key to make it unique.\n * @param {string} key\n *   Modify the component key to be unique.\n * @returns {string}\n *   The new component key.\n */\nfunction iterateKey(key) {\n    if (!key.match(/(\\d+)$/)) {\n        return `${key}1`;\n    }\n    return key.replace(/(\\d+)$/, function (suffix) {\n        return Number(suffix) + 1;\n    });\n}\nexports.iterateKey = iterateKey;\n/**\n * Determines a unique key within a map provided the base key.\n * @param {Record<string, string>} map - The map to check for uniqueness.\n * @param {string} base - The base path of the key.\n * @returns {string} - The unique key.\n */\nfunction uniqueKey(map, base) {\n    let newKey = base;\n    while (map.hasOwnProperty(newKey)) {\n        newKey = iterateKey(newKey);\n    }\n    return newKey;\n}\nexports.uniqueKey = uniqueKey;\n/**\n * Determines the major version number of bootstrap.\n * @param {object} options - The options to check for bootstrap version.\n * @param {string} options.bootstrap - The bootstrap version to use.\n * @returns {number} - The bootstrap version.\n */\nfunction bootstrapVersion(options) {\n    if (options.bootstrap) {\n        return options.bootstrap;\n    }\n    if ((typeof jQuery === 'function') && (typeof jQuery().collapse === 'function')) {\n        return parseInt(jQuery.fn.collapse.Constructor.VERSION.split('.')[0], 10);\n    }\n    if (window.bootstrap && window.bootstrap.Collapse) {\n        return parseInt(window.bootstrap.Collapse.VERSION.split('.')[0], 10);\n    }\n    return 0;\n}\nexports.bootstrapVersion = bootstrapVersion;\n/**\n * Retrun provided argument.\n * If argument is a function, returns the result of a function call.\n * @param {Function|any} e - The argument to check if a function and call if so.\n * @returns {any} - Either the result of the function call (e) or e if it is not a function.\n */\nfunction unfold(e) {\n    if (typeof e === 'function') {\n        return e();\n    }\n    return e;\n}\nexports.unfold = unfold;\n/**\n * Map values through unfold and return first non-nil value.\n * @param {Array<T>} collection - The collection to map through unfold.;\n * @returns {T} - The first non-nil value.\n */\nexports.firstNonNil = lodash_1.default.flow([\n    lodash_1.default.partialRight(lodash_1.default.map, unfold),\n    lodash_1.default.partialRight(lodash_1.default.find, v => !lodash_1.default.isUndefined(v))\n]);\n/**\n * Create enclosed state. Returns functions to getting and cycling between states.\n * @param {*} a - initial state.\n * @param {*} b - next state.\n * @returns {Functions[]} -- [get, toggle];\n */\nfunction withSwitch(a, b) {\n    let state = a;\n    let next = b;\n    /**\n     * Returns the state of the switch.\n     * @returns {*} - The current state.\n     */\n    function get() {\n        return state;\n    }\n    /**\n     * Toggles the state of the switch.\n     */\n    function toggle() {\n        const prev = state;\n        state = next;\n        next = prev;\n    }\n    return [get, toggle];\n}\nexports.withSwitch = withSwitch;\n/**\n * Create a function that will call the provided function only the provided limit.\n * @param {Function} callback - The callback to call.\n * @param {object} options - The options to use.\n * @param {number} options.limit - The limit to call the callback.\n * @param {number} options.delay - The delay to wait before resetting the call count.\n * @returns {Function} - The function that will call the callback only the provided limit.\n */\nfunction observeOverload(callback, options = {}) {\n    const { limit = 50, delay = 500 } = options;\n    let callCount = 0;\n    let timeoutID = 0;\n    const reset = () => callCount = 0;\n    return () => {\n        if (timeoutID !== 0) {\n            clearTimeout(timeoutID);\n            timeoutID = 0;\n        }\n        timeoutID = setTimeout(reset, delay);\n        callCount += 1;\n        if (callCount >= limit) {\n            clearTimeout(timeoutID);\n            reset();\n            return callback();\n        }\n    };\n}\nexports.observeOverload = observeOverload;\n/**\n * Returns the components that are provided within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @param {boolean} excludeNested - Exclude nested components.\n * @param {Array<string>} excludedTypes - The types of components to exclude.\n * @returns {Array} - The components within the evaluation context.\n */\nfunction getContextComponents(context, excludeNested, excludedTypes = []) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component, path) => {\n        const addToContextComponents = excludeNested ? !component.tree : true;\n        if (component.key !== context.data.key && addToContextComponents && !lodash_1.default.includes(excludedTypes, component.type)) {\n            values.push({\n                label: `${component.label || component.key} (${path})`,\n                value: path,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextComponents = getContextComponents;\n/**\n * Returns the button components that are within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @returns {Array} - The button components within the evaluation context.\n */\nfunction getContextButtons(context) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component) => {\n        if (component.type === 'button') {\n            values.push({\n                label: `${component.key} (${component.label})`,\n                value: component.key,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextButtons = getContextButtons;\n// Tags that could be in text, that should be ommited or handled in a special way\nconst inTextTags = ['#text', 'A', 'B', 'EM', 'I', 'SMALL', 'STRONG', 'SUB', 'SUP', 'INS', 'DEL', 'MARK', 'CODE'];\n/**\n * Helper function for 'translateHTMLTemplate'. Translates text value of the passed html element.\n * @param {HTMLElement} elem - The element to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Translated element template.\n */\nfunction translateElemValue(elem, translate) {\n    if (!elem.innerText) {\n        return elem.innerHTML;\n    }\n    const elemValue = elem.innerText.replace(Evaluator_1.Evaluator.templateSettings.interpolate, '').replace(/\\s\\s+/g, ' ').trim();\n    const translatedValue = translate(elemValue);\n    if (elemValue !== translatedValue) {\n        const links = elem.innerHTML.match(/<a[^>]*>(.*?)<\\/a>/g);\n        if (links && links.length) {\n            if (links.length === 1 && links[0].length === elem.innerHTML.length) {\n                return elem.innerHTML.replace(elemValue, translatedValue);\n            }\n            const translatedLinks = links.map(link => {\n                const linkElem = document.createElement('a');\n                linkElem.innerHTML = link;\n                return translateElemValue(linkElem, translate);\n            });\n            return `${translatedValue} (${translatedLinks.join(', ')})`;\n        }\n        else {\n            return elem.innerText.replace(elemValue, translatedValue);\n        }\n    }\n    else {\n        return elem.innerHTML;\n    }\n}\n/**\n * Helper function for 'translateHTMLTemplate'. Goes deep through html tag children and calls function to translate their text values.\n * @param {HTMLElement} tag - The tag to translate.\n * @param {Function} translate - The translation function.\n * @returns {void}\n */\nfunction translateDeepTag(tag, translate) {\n    const children = tag.children.length && [...tag.children];\n    const shouldTranslateEntireContent = children && children.every(child => child.children.length === 0\n        && inTextTags.some(tag => child.nodeName === tag));\n    if (!children || shouldTranslateEntireContent) {\n        tag.innerHTML = translateElemValue(tag, translate);\n    }\n    else {\n        children.forEach(child => translateDeepTag(child, translate));\n    }\n}\n/**\n * Translates text values in html template.\n * @param {string} template - The template to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Html template with translated values.\n */\nfunction translateHTMLTemplate(template, translate) {\n    const isHTML = /<[^>]*>/.test(template);\n    if (!isHTML) {\n        return translate(template);\n    }\n    const tempElem = document.createElement('div');\n    tempElem.innerHTML = template;\n    if (tempElem.innerText && tempElem.children.length) {\n        translateDeepTag(tempElem, translate);\n        return tempElem.innerHTML;\n    }\n    return template;\n}\nexports.translateHTMLTemplate = translateHTMLTemplate;\n/**\n * Sanitize an html string.\n * @param {string} string - The string to sanitize.\n * @param {any} options - The options to use for sanitization.\n * @returns {string} - The sanitized html string.\n */\nfunction sanitize(string, options) {\n    if (typeof dompurify_1.default.sanitize !== 'function') {\n        return string;\n    }\n    // Dompurify configuration\n    const sanitizeOptions = {\n        ADD_ATTR: ['ref', 'target'],\n        USE_PROFILES: { html: true }\n    };\n    // Use profiles\n    if (options.sanitizeConfig && options.sanitizeConfig.useProfiles) {\n        Object.keys(options.sanitizeConfig.useProfiles).forEach(key => {\n            sanitizeOptions.USE_PROFILES[key] = options.sanitizeConfig.useProfiles[key];\n        });\n    }\n    // Add attrs\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addAttr) && options.sanitizeConfig.addAttr.length > 0) {\n        options.sanitizeConfig.addAttr.forEach((attr) => {\n            sanitizeOptions.ADD_ATTR.push(attr);\n        });\n    }\n    // Add tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addTags) && options.sanitizeConfig.addTags.length > 0) {\n        sanitizeOptions.ADD_TAGS = options.sanitizeConfig.addTags;\n    }\n    // Allow tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedTags) && options.sanitizeConfig.allowedTags.length > 0) {\n        sanitizeOptions.ALLOWED_TAGS = options.sanitizeConfig.allowedTags;\n    }\n    // Allow attributes\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedAttrs) && options.sanitizeConfig.allowedAttrs.length > 0) {\n        sanitizeOptions.ALLOWED_ATTR = options.sanitizeConfig.allowedAttrs;\n    }\n    // Allowd URI Regex\n    if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {\n        const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;\n        sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;\n    }\n    // Allow to extend the existing array of elements that are safe for URI-like values\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {\n        sanitizeOptions.ADD_URI_SAFE_ATTR = options.sanitizeConfig.addUriSafeAttr;\n    }\n    return dompurify_1.default.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n/**\n * Fast cloneDeep for JSON objects only.\n * @param {any} obj - The object to perform a fast clone deep against.\n * @returns {any} - The cloned object.\n */\nfunction fastCloneDeep(obj) {\n    return obj ? JSON.parse(JSON.stringify(obj)) : obj;\n}\nexports.fastCloneDeep = fastCloneDeep;\n/**\n * Returns if the component is an input component.\n * @param {import('@formio/core').Component} componentJson - The JSON of a component.\n * @returns {bool} - TRUE if the component is an input component; FALSE otherwise.\n */\nfunction isInputComponent(componentJson) {\n    if (componentJson.input === false || componentJson.input === true) {\n        return componentJson.input;\n    }\n    switch (componentJson.type) {\n        case 'htmlelement':\n        case 'content':\n        case 'columns':\n        case 'fieldset':\n        case 'panel':\n        case 'table':\n        case 'tabs':\n        case 'well':\n        case 'button':\n            return false;\n        default:\n            return true;\n    }\n}\nexports.isInputComponent = isInputComponent;\n/**\n * Takes a component path, and returns a component path array.\n * @param {string} pathStr - The path string to convert to an array.\n * @returns {Arryay<number>} - The array of paths.\n */\nfunction getArrayFromComponentPath(pathStr) {\n    if (!pathStr || !lodash_1.default.isString(pathStr)) {\n        if (!lodash_1.default.isArray(pathStr)) {\n            return [pathStr];\n        }\n        return pathStr;\n    }\n    return pathStr.replace(/[[\\]]/g, '.')\n        .replace(/\\.\\./g, '.')\n        .replace(/(^\\.)|(\\.$)/g, '')\n        .split('.')\n        .map(part => lodash_1.default.defaultTo(lodash_1.default.toNumber(part), part));\n}\nexports.getArrayFromComponentPath = getArrayFromComponentPath;\n/**\n * Returns true if the component is a child of the parent.\n * @param {any} child - The child component to check.\n * @param {any} parent - The parent component to check.\n * @returns {boolean} - TRUE if the child is a child of the parent; FALSE otherwise.\n */\nfunction isChildOf(child, parent) {\n    while (child && child.parent) {\n        if (child.parent === parent) {\n            return true;\n        }\n        child = child.parent;\n    }\n    return false;\n}\nexports.isChildOf = isChildOf;\n/**\n * Takes an array of component path indexes, and returns a string version of that array.\n * @param {Array<number>} path - The path array to convert to a string.\n * @returns {string} - The string version of the path.\n */\nfunction getStringFromComponentPath(path) {\n    if (!lodash_1.default.isArray(path)) {\n        return path;\n    }\n    let strPath = '';\n    path.forEach((part, i) => {\n        if (lodash_1.default.isNumber(part)) {\n            strPath += `[${part}]`;\n        }\n        else {\n            strPath += i === 0 ? part : `.${part}`;\n        }\n    });\n    return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Takes a number and rounds it to the provided precision amount.\n * @param {number} number - The number to round.\n * @param {number} precision - The precision to round the number to.\n * @returns {string} - The rounded number.\n */\nfunction round(number, precision) {\n    if (lodash_1.default.isNumber(number)) {\n        return number.toFixed(precision);\n    }\n    return number.toString();\n}\nexports.round = round;\n/**\n * Check for Internet Explorer browser version\n * @returns {(number|null)} - The IE browser version or null if not IE\n */\nfunction getIEBrowserVersion() {\n    const { ie, version } = getBrowserInfo();\n    return ie ? version : null;\n}\nexports.getIEBrowserVersion = getIEBrowserVersion;\n/**\n * Get browser name and version (modified from 'jquery-browser-plugin')\n * @returns {object} -- {{browser name, version, isWebkit?}}\n * Possible browser names: chrome, safari, ie, edge, opera, mozilla, yabrowser\n */\nfunction getBrowserInfo() {\n    const browser = {};\n    if (typeof window === 'undefined') {\n        return browser;\n    }\n    const ua = window.navigator.userAgent.toLowerCase();\n    const match = /(edge|edg)\\/([\\w.]+)/.exec(ua) ||\n        /(opr)[/]([\\w.]+)/.exec(ua) ||\n        /(yabrowser)[ /]([\\w.]+)/.exec(ua) ||\n        /(chrome)[ /]([\\w.]+)/.exec(ua) ||\n        /(iemobile)[/]([\\w.]+)/.exec(ua) ||\n        /(version)(applewebkit)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+).*(version)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+)/.exec(ua) ||\n        /(opera)(?:.*version|)[ /]([\\w.]+)/.exec(ua) ||\n        /(msie) ([\\w.]+)/.exec(ua) ||\n        ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) ||\n        ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) ||\n        [];\n    const matched = {\n        browser: match[5] || match[3] || match[1] || '',\n        version: match[4] || match[2] || '0'\n    };\n    if (matched.browser) {\n        browser[matched.browser] = true;\n        browser.version = parseInt(matched.version, 10);\n    }\n    // Chrome, Opera 15+, Safari and Yandex.Browser are webkit based browsers\n    if (browser.chrome || browser.opr || browser.safari || browser.edg || browser.yabrowser) {\n        browser.isWebkit = true;\n    }\n    // IE11 has a new token so we will assign it ie to avoid breaking changes\n    if (browser.rv || browser.iemobile) {\n        browser.ie = true;\n    }\n    // Edge has a new token since it became webkit based\n    if (browser.edg) {\n        browser.edge = true;\n    }\n    // Opera 15+ are identified as opr\n    if (browser.opr) {\n        browser.opera = true;\n    }\n    return browser;\n}\nexports.getBrowserInfo = getBrowserInfo;\n/**\n * Takes a component path, which may include array indicies (i.e. [0][1]), and returns the compoennt path without the indicies.\n * @param {string} path - The path to remove the indicies from.\n * @returns {string} - The path without the indicies.\n */\nfunction getComponentPathWithoutIndicies(path = '') {\n    return path.replace(/\\[\\d+\\]/, '');\n}\nexports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;\n/**\n * Returns a path to the component which based on its schema\n * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property\n * @param {string} path - Path to the component\n * @returns {string} - Path to the component\n */\nfunction getComponentPath(component, path = '') {\n    var _a;\n    if (!component || !component.key || ((_a = component === null || component === void 0 ? void 0 : component._form) === null || _a === void 0 ? void 0 : _a.display) === 'wizard') { // unlike the Webform, the Wizard has the key and it is a duplicate of the panel key\n        return path;\n    }\n    path = component.isInputComponent || component.input === true ? `${component.key}${path ? '.' : ''}${path}` : path;\n    return getComponentPath(component.parent, path);\n}\nexports.getComponentPath = getComponentPath;\n/**\n * Returns a parent component of the passed component instance skipping all the Layout components\n * @param {Component} componentInstance - The component to check for the parent.\n * @returns {Component|undefined} - The parent data component.\n */\nfunction getDataParentComponent(componentInstance) {\n    if (!componentInstance) {\n        return;\n    }\n    const { parent } = componentInstance;\n    if (parent && (parent.isInputComponent || parent.input)) {\n        return parent;\n    }\n    else {\n        return getDataParentComponent(parent);\n    }\n}\nexports.getDataParentComponent = getDataParentComponent;\n/**\n * Returns whether the value is a promise\n * @param {any} value - The value to check\n * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise\n */\nfunction isPromise(value) {\n    return value\n        && value.then\n        && typeof value.then === 'function'\n        && Object.prototype.toString.call(value) === '[object Promise]';\n}\nexports.isPromise = isPromise;\n/**\n * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its\n * changes by itself, e.g. EditGrid)\n * @param {Component} componentInstance - The component to check for the scoping parent.\n * @param {boolean} firstPass - Whether it is the first pass of the function\n * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise\n */\nfunction isInsideScopingComponent(componentInstance, firstPass = true) {\n    if (!firstPass && (componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.hasScopedChildren)) {\n        return true;\n    }\n    const dataParent = getDataParentComponent(componentInstance);\n    if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.hasScopedChildren) {\n        return true;\n    }\n    else if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.parent) {\n        return isInsideScopingComponent(dataParent.parent, false);\n    }\n    return false;\n}\nexports.isInsideScopingComponent = isInsideScopingComponent;\n/**\n * Returns all the focusable elements within the provided dom element.\n * @param {HTMLElement} element - The element to get the focusable elements from.\n * @returns {NodeList<HTMLElement>} - The focusable elements within the provided element.\n */\nfunction getFocusableElements(element) {\n    const focusableSelector = `button:not([disabled]), input:not([disabled]), select:not([disabled]),\n    textarea:not([disabled]), button:not([disabled]), [href]`;\n    return element.querySelectorAll(focusableSelector);\n}\nexports.getFocusableElements = getFocusableElements;\nexports.componentValueTypes = {\n    number: 'number',\n    string: 'string',\n    boolean: 'boolean',\n    array: 'array',\n    object: 'object',\n    date: 'date',\n    any: 'any',\n};\n/**\n * Returns the saved types for the component\n * @param {import('@formio/core').Component} fullSchema - The component schema\n * @returns {Array<string>|null} - The saved types for the component\n */\nfunction getComponentSavedTypes(fullSchema) {\n    const schema = fullSchema || {};\n    if (schema.persistent !== true) {\n        return [];\n    }\n    if (schema.multiple) {\n        return [exports.componentValueTypes.array];\n    }\n    return null;\n}\nexports.getComponentSavedTypes = getComponentSavedTypes;\n/**\n * Interpolates @formio/core errors so that they are compatible with the renderer\n * @param {Component} component - The component to interpolate the errors for\n * @param {FieldError[]} errors - The errors to interpolate\n * @param {Function} interpolateFn - The interpolation function\n * @returns {[]} - The interpolated errors\n */\nconst interpolateErrors = (component, errors, interpolateFn) => {\n    return errors.map((error) => {\n        error.component = component;\n        const { errorKeyOrMessage, context } = error;\n        const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;\n        return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });\n    });\n};\nexports.interpolateErrors = interpolateErrors;\n/**\n * Returns the template keys inside the template code.\n * @param {string} template - The template to get the keys from.\n * @returns {Array<string>} - The keys inside the template.\n */\nfunction getItemTemplateKeys(template) {\n    const templateKeys = [];\n    if (!template) {\n        return templateKeys;\n    }\n    const keys = template.match(/({{\\s*(.*?)\\s*}})/g);\n    if (keys) {\n        keys.forEach((key) => {\n            const propKey = key.match(/{{\\s*item\\.(.*?)\\s*}}/);\n            if (propKey && propKey.length > 1) {\n                templateKeys.push(propKey[1]);\n            }\n        });\n    }\n    return templateKeys;\n}\nexports.getItemTemplateKeys = getItemTemplateKeys;\n/**\n * Returns if the component is a select resource with an object for its value.\n * @param {import('@formio/core').Component} comp - The component to check.\n * @returns {boolean} - TRUE if the component is a select resource with an object for its value; FALSE otherwise.\n */\nfunction isSelectResourceWithObjectValue(comp = {}) {\n    const { reference, dataSrc, valueProperty } = comp;\n    return reference || (dataSrc === 'resource' && (!valueProperty || valueProperty === 'data'));\n}\nexports.isSelectResourceWithObjectValue = isSelectResourceWithObjectValue;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/utils.js?");
+eval("\n/* global jQuery */\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 __exportStar = (this && this.__exportStar) || function(m, exports) {\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\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 }));\nexports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;\nexports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nexports._ = lodash_1.default;\nconst json_logic_js_1 = __importDefault(__webpack_require__(/*! json-logic-js */ \"./node_modules/json-logic-js/logic.js\"));\nexports.jsonLogic = json_logic_js_1.default;\nconst moment_timezone_1 = __importDefault(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\nconst jstimezonedetect_1 = __importDefault(__webpack_require__(/*! jstimezonedetect */ \"./node_modules/jstimezonedetect/dist/jstz.min.js\"));\nconst operators_1 = __webpack_require__(/*! ./jsonlogic/operators */ \"./lib/cjs/utils/jsonlogic/operators.js\");\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.js\"));\nconst formUtils_1 = __webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nObject.defineProperty(exports, \"Evaluator\", ({ enumerable: true, get: function () { return Evaluator_1.Evaluator; } }));\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\nexports.ConditionOperators = conditionOperators_1.default;\nconst interpolate = Evaluator_1.Evaluator.interpolate;\nexports.interpolate = interpolate;\n__exportStar(__webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\"), exports);\n// Configure JsonLogic\noperators_1.lodashOperators.forEach((name) => json_logic_js_1.default.add_operation(`_${name}`, lodash_1.default[name]));\n// Retrieve Any Date\njson_logic_js_1.default.add_operation('getDate', (date) => {\n    return (0, moment_timezone_1.default)(date).toISOString();\n});\n// Set Relative Minimum Date\njson_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {\n    return (0, moment_timezone_1.default)().subtract(relativeMinDate, 'days').toISOString();\n});\n// Set Relative Maximum Date\njson_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {\n    return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();\n});\nexports.moment = __importStar(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\n/**\n * Sets the path to the component and parent schema.\n * @param {import('@formio/core').Component} component - The component to set the path for.\n */\nfunction setPathToComponentAndPerentSchema(component) {\n    component.path = getComponentPath(component);\n    const dataParent = getDataParentComponent(component);\n    if (dataParent && typeof dataParent === 'object') {\n        dataParent.path = getComponentPath(dataParent);\n    }\n}\n/**\n * Evaluate a method.\n * @param {Function|string|object} func - The function to evaluate.\n * @param {*} args - A map of arguments to pass to the function.\n * @param {string} ret - The name of the \"return\" variable in the script.\n * @param {boolean} interpolate - True if the script should be interpolated before being executed.\n * @param {import('@formio/core').EvaluatorOptions} options - The evaluator options.\n * @returns {*} - The result of the evaluation.\n */\nfunction evaluate(func, args, ret, interpolate, options = {}) {\n    return Evaluator_1.Evaluator.evaluate(func, args, ret, interpolate, undefined, options);\n}\nexports.evaluate = evaluate;\n/**\n * Returns a random compoennt ID.\n * @returns {string} - A random component ID.\n */\nfunction getRandomComponentId() {\n    return `e${Math.random().toString(36).substring(7)}`;\n}\nexports.getRandomComponentId = getRandomComponentId;\n/**\n * Get a property value of an element.\n * @param {CSSStyleDeclaration} style - The style element to get the property value from.\n * @param {string} prop - The property to get the value for.\n * @returns {number} - The value of the property.\n */\nfunction getPropertyValue(style, prop) {\n    let value = style.getPropertyValue(prop);\n    value = value ? value.replace(/[^0-9.]/g, '') : '0';\n    return parseFloat(value);\n}\nexports.getPropertyValue = getPropertyValue;\n/**\n * Get an elements bounding rectagle.\n * @param {HTMLElement} element - A DOM element to get the bounding rectangle for.\n * @returns {{x: number, y: number, width: number, height: number}} - The bounding rectangle.\n */\nfunction getElementRect(element) {\n    const style = window.getComputedStyle(element, null);\n    return {\n        x: getPropertyValue(style, 'left'),\n        y: getPropertyValue(style, 'top'),\n        width: getPropertyValue(style, 'width'),\n        height: getPropertyValue(style, 'height')\n    };\n}\nexports.getElementRect = getElementRect;\n/**\n * Get non HTMLElement property in the window object\n * @param {string} property - The window property to fetch the script plugin from.\n * @returns {any | undefined} - The HTML Element property on the window object.\n */\nfunction getScriptPlugin(property) {\n    const obj = window[property];\n    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2\n        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {\n        return undefined;\n    }\n    return obj;\n}\nexports.getScriptPlugin = getScriptPlugin;\n/**\n * Determines the boolean value of a setting.\n * @param {string|boolean} value - A string or boolean value to convert to boolean.\n * @returns {boolean} - The boolean value of the setting.\n */\nfunction boolValue(value) {\n    if (lodash_1.default.isBoolean(value)) {\n        return value;\n    }\n    else if (lodash_1.default.isString(value)) {\n        return (value.toLowerCase() === 'true');\n    }\n    else {\n        return !!value;\n    }\n}\nexports.boolValue = boolValue;\n/**\n * Check to see if an ID is a mongoID.\n * @param {string} text - The text to check if it is a mongoID.\n * @returns {boolean} - TRUE if the text is a mongoID; FALSE otherwise.\n */\nfunction isMongoId(text) {\n    return !!text.toString().match(/^[0-9a-fA-F]{24}$/);\n}\nexports.isMongoId = isMongoId;\n/**\n * Checks the calculated value for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the calculated value.\n * @param {import('@formio/core').Submission} submission - A submission object.\n * @param {*} rowData - The contextual row data for the component.\n */\nfunction checkCalculated(component, submission, rowData) {\n    // Process calculated value stuff if present.\n    if (component.calculateValue) {\n        lodash_1.default.set(rowData, component.key, evaluate(component.calculateValue, {\n            value: undefined,\n            data: submission ? submission.data : rowData,\n            row: rowData,\n            util: this,\n            component\n        }, 'value'));\n    }\n}\nexports.checkCalculated = checkCalculated;\n/**\n * Check if a simple conditional evaluates to true.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {import('@formio/core').SimpleConditional} condition - The condition to check.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\n/**\n *\n * @param conditionPaths\n * @param data\n */\nfunction getConditionalPathsRecursive(conditionPaths, data) {\n    let currentGlobalIndex = 0;\n    const conditionalPathsArray = [];\n    const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {\n        currentPath = currentPath.replace(/^\\.+|\\.+$/g, '');\n        const currentLocalIndex = localIndex;\n        const currentData = lodash_1.default.get(data, currentPath);\n        if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {\n            if (currentData.some(element => typeof element !== 'object')) {\n                return;\n            }\n            const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));\n            if (hasInnerDataArray) {\n                currentData.forEach((_, indexOutside) => {\n                    const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;\n                    getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);\n                });\n            }\n            else {\n                currentData.forEach((x, index) => {\n                    if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {\n                        const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;\n                        conditionalPathsArray.push(compDataPath);\n                    }\n                });\n            }\n        }\n        else {\n            if (!conditionPaths[currentGlobalIndex]) {\n                return;\n            }\n            currentGlobalIndex = currentGlobalIndex + 1;\n            getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);\n        }\n    };\n    getConditionalPaths(data);\n    return conditionalPathsArray;\n}\n/**\n *\n * @param component\n * @param condition\n * @param row\n * @param data\n * @param instance\n */\nfunction checkSimpleConditional(component, condition, row, data, instance) {\n    if (condition.when) {\n        const value = getComponentActualValue(condition.when, data, row);\n        const eq = String(condition.eq);\n        const show = String(condition.show);\n        // Special check for selectboxes component.\n        if (lodash_1.default.isObject(value) && lodash_1.default.has(value, condition.eq)) {\n            return String(value[condition.eq]) === show;\n        }\n        // FOR-179 - Check for multiple values.\n        if (Array.isArray(value) && value.map(String).includes(eq)) {\n            return show === 'true';\n        }\n        return (String(value) === eq) === (show === 'true');\n    }\n    else {\n        const { conditions = [], conjunction = 'all', show = true } = condition;\n        if (!conditions.length) {\n            return true;\n        }\n        const conditionsResult = lodash_1.default.map(conditions, (cond) => {\n            var _a, _b;\n            const { value: comparedValue, operator, component: conditionComponentPath } = cond;\n            if (!conditionComponentPath) {\n                return true;\n            }\n            const splittedConditionPath = conditionComponentPath.split('.');\n            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);\n            if (conditionalPaths.length > 0) {\n                return conditionalPaths.map((path) => {\n                    const value = getComponentActualValue(path, data, row);\n                    const ConditionOperator = conditionOperators_1.default[operator];\n                    return ConditionOperator\n                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })\n                        : true;\n                });\n            }\n            else {\n                const value = getComponentActualValue(conditionComponentPath, data, row);\n                const СonditionOperator = conditionOperators_1.default[operator];\n                return СonditionOperator\n                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })\n                    : true;\n            }\n        });\n        let result = false;\n        switch (conjunction) {\n            case 'any':\n                result = lodash_1.default.some(conditionsResult.flat(), res => !!res);\n                break;\n            default:\n                result = lodash_1.default.every(conditionsResult.flat(), res => !!res);\n        }\n        return show ? result : !result;\n    }\n}\nexports.checkSimpleConditional = checkSimpleConditional;\n/**\n * Returns a components normalized value.\n * @param {string} compPath - The full path to the component.\n * @param {*} data - The data object to get the value from.\n * @param {*} row - The contextual row data for the component.\n * @returns {*} - The normalized value of the component.\n */\nfunction getComponentActualValue(compPath, data, row) {\n    let value = null;\n    if (row) {\n        value = (0, formUtils_1.getValue)({ data: row }, compPath);\n    }\n    if (data && lodash_1.default.isNil(value)) {\n        value = (0, formUtils_1.getValue)({ data }, compPath);\n    }\n    // FOR-400 - Fix issue where falsey values were being evaluated as show=true\n    if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {\n        value = '';\n    }\n    return value;\n}\nexports.getComponentActualValue = getComponentActualValue;\n/**\n * Check custom javascript conditional.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {string} custom - The custom conditional string to evaluate.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {string} variable - The variable name for the result of the custom conditional.\n * @param {*} onError - A custom return if there is an error or the value is null from the evaluation.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {*} - The result of the evaulation.\n */\nfunction checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {\n    if (typeof custom === 'string') {\n        custom = `var ${variable} = true; ${custom}; return ${variable};`;\n    }\n    const value = (instance && instance.evaluate) ?\n        instance.evaluate(custom, { row, data, form }) :\n        evaluate(custom, { row, data, form });\n    if (value === null) {\n        return onError;\n    }\n    return value;\n}\nexports.checkCustomConditional = checkCustomConditional;\n/**\n * Check a component for JSON conditionals.\n * @param {import('@formio/core').Component} component - The component\n * @param {import('@formio/core').JSONConditional} json - The json conditional to check.\n * @param {*} row - The contextual row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The Form JSON of the form.\n * @param {*} onError - Custom return value if there is an error.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkJsonConditional(component, json, row, data, form, onError) {\n    try {\n        return json_logic_js_1.default.apply(json, {\n            data,\n            row,\n            form,\n            _: lodash_1.default,\n        });\n    }\n    catch (err) {\n        console.warn(`An error occurred in jsonLogic advanced condition for ${component.key}`, err);\n        return onError;\n    }\n}\nexports.checkJsonConditional = checkJsonConditional;\n/**\n * Returns the contextual row data for a component.\n * @param {import('@formio/core').Component} component - The component to get the row data for.\n * @param {*} row - The row data for the component.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @param {*} conditional - The component conditional.\n * @returns {*} - The contextual row data for the component.\n */\nfunction getRow(component, row, instance, conditional) {\n    var _a;\n    const condition = conditional || component.conditional;\n    // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema\n    if (!instance) {\n        instance = lodash_1.default.cloneDeep(component);\n        setPathToComponentAndPerentSchema(instance);\n    }\n    const dataParent = getDataParentComponent(instance);\n    const parentPath = dataParent ? getComponentPath(dataParent) : null;\n    const isTriggerCondtionComponentPath = condition.when || !condition.conditions\n        ? (_a = condition.when) === null || _a === void 0 ? void 0 : _a.startsWith(parentPath)\n        : lodash_1.default.some(condition.conditions, cond => cond.component.startsWith(parentPath));\n    if (dataParent && isTriggerCondtionComponentPath) {\n        const newRow = {};\n        lodash_1.default.set(newRow, parentPath, row);\n        row = newRow;\n    }\n    return row;\n}\n/**\n * Checks the conditions for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the condition.\n * @param {*} row - The data within a row\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkCondition(component, row, data, form, instance) {\n    const { customConditional, conditional } = component;\n    if (customConditional) {\n        return checkCustomConditional(component, customConditional, row, data, form, 'show', true, instance);\n    }\n    else if (conditional && (conditional.when || lodash_1.default.some(conditional.conditions || [], condition => condition.component && condition.operator))) {\n        row = getRow(component, row, instance);\n        return checkSimpleConditional(component, conditional, row, data, instance);\n    }\n    else if (conditional && conditional.json) {\n        return checkJsonConditional(component, conditional.json, row, data, form, true);\n    }\n    // Default to show.\n    return true;\n}\nexports.checkCondition = checkCondition;\n/**\n * Test a trigger on a component.\n * @param {import('@formio/core').Component} component - The component to test the trigger against.\n * @param {import('@formio/core').LogicTrigger} trigger - The trigger configuration.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The root data object.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {any} instance - The component that is performing the trigger.\n * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.\n */\nfunction checkTrigger(component, trigger, row, data, form, instance) {\n    // If trigger is empty, don't fire it\n    if (!trigger || !trigger[trigger.type]) {\n        return false;\n    }\n    switch (trigger.type) {\n        case 'simple':\n            row = getRow(component, row, instance, trigger.simple);\n            return checkSimpleConditional(component, trigger.simple, row, data, instance);\n        case 'javascript':\n            return checkCustomConditional(component, trigger.javascript, row, data, form, 'result', false, instance);\n        case 'json':\n            return checkJsonConditional(component, trigger.json, row, data, form, false);\n    }\n    // If none of the types matched, don't fire the trigger.\n    return false;\n}\nexports.checkTrigger = checkTrigger;\n/**\n * Sets a property on a component via an executed Logic action.\n * @param {import('@formio/core').Component} component - The component to set the property on.\n * @param {import('@formio/core').LogicAction} action - The action to perform on the component.\n * @param {string} result - The name of the variable in the evaulation to use as the result.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The full submission data.\n * @param {any} instance - The component instance.\n * @returns {import('@formio/core').Component} - The modified component.\n */\nfunction setActionProperty(component, action, result, row, data, instance) {\n    const property = action.property.value;\n    switch (action.property.type) {\n        case 'boolean': {\n            const currentValue = lodash_1.default.get(component, property, false).toString();\n            const newValue = action.state.toString();\n            if (currentValue !== newValue) {\n                lodash_1.default.set(component, property, newValue === 'true');\n            }\n            break;\n        }\n        case 'string': {\n            const evalData = {\n                data,\n                row,\n                component,\n                result,\n            };\n            const textValue = action.property.component ? action[action.property.component] : action.text;\n            const currentValue = lodash_1.default.get(component, property, '');\n            const newValue = (instance && instance.interpolate)\n                ? instance.interpolate(textValue, evalData)\n                : Evaluator_1.Evaluator.interpolate(textValue, evalData);\n            if (newValue !== currentValue) {\n                lodash_1.default.set(component, property, newValue);\n            }\n            break;\n        }\n    }\n    return component;\n}\nexports.setActionProperty = setActionProperty;\n/**\n * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World\n * @param {string} str - The string to remove HTML tags from.\n * @returns {string} - The string without HTML tags.\n */\nfunction removeHTML(str) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return (doc.body.textContent || '').trim();\n}\nexports.removeHTML = removeHTML;\n/**\n * Unescape HTML characters like &lt, &gt, &amp and etc.\n * @param {string} str - The string to unescape.\n * @returns {string} - The unescaped string.\n */\nfunction unescapeHTML(str) {\n    if (typeof window === 'undefined' || !('DOMParser' in window)) {\n        return str;\n    }\n    const elem = document.createElement('textarea');\n    elem.innerHTML = str;\n    return elem.value;\n}\nexports.unescapeHTML = unescapeHTML;\n/**\n * Make HTML element from string\n * @param {string} str - The string to convert to an HTML element.\n * @param {string} selector - The selector to use to get the element once it is created.\n * @returns {HTMLElement} - The HTML element that was created.\n */\nfunction convertStringToHTMLElement(str, selector) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return doc.body.querySelector(selector);\n}\nexports.convertStringToHTMLElement = convertStringToHTMLElement;\n/**\n * Make a filename guaranteed to be unique.\n * @param {string} name - The original name of the file.\n * @param {string} template - The template to use for the unique name.\n * @param {object} evalContext - The context to use for the evaluation.\n * @returns {string} - A unique filename.\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1\n        ? `.${lodash_1.default.last(parts)}`\n        : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid()\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Returns a GUID\n * @returns {string} - A GUID.\n */\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = Math.random() * 16 | 0;\n        const v = c === 'x'\n            ? r\n            : (r & 0x3 | 0x8);\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Return a translated date setting.\n * @param {string|Date} date - The date to translate.\n * @returns {(null|Date)} - The translated date.\n */\nfunction getDateSetting(date) {\n    if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {\n        return null;\n    }\n    if (date instanceof Date) {\n        return date;\n    }\n    else if (typeof date.toDate === 'function') {\n        return date.isValid() ? date.toDate() : null;\n    }\n    let dateSetting = ((typeof date !== 'string') || (date.indexOf('moment(') === -1)) ? (0, moment_timezone_1.default)(date) : null;\n    if (dateSetting && dateSetting.isValid()) {\n        return dateSetting.toDate();\n    }\n    dateSetting = null;\n    try {\n        const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);\n        if (typeof value === 'string') {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n        else if (typeof value.toDate === 'function') {\n            dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());\n        }\n        else if (value instanceof Date) {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n    }\n    catch (e) {\n        return null;\n    }\n    if (!dateSetting) {\n        return null;\n    }\n    // Ensure this is a date.\n    if (!dateSetting.isValid()) {\n        return null;\n    }\n    return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\n/**\n * Returns true if the date is a valid date. False otherwise.\n * @param {Date|string} date - The date to check for validity.\n * @returns {boolean} - TRUE if the date is valid; FALSE otherwise.\n */\nfunction isValidDate(date) {\n    return lodash_1.default.isDate(date) && !lodash_1.default.isNaN(date.getDate());\n}\nexports.isValidDate = isValidDate;\n/**\n * Get the current timezone string.\n * @returns {string} - The current timezone.\n */\nfunction currentTimezone() {\n    if (moment_timezone_1.default.currentTimezone) {\n        return moment_timezone_1.default.currentTimezone;\n    }\n    moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();\n    return moment_timezone_1.default.currentTimezone;\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Get an offset date provided a date object and timezone object.\n * @param {Date} date - The date to offset.\n * @param {string} timezone - The timezone to offset the date to.\n * @returns {Date} - The offset date.\n */\nfunction offsetDate(date, timezone) {\n    if (timezone === 'UTC') {\n        return {\n            date: new Date(date.getTime() + (date.getTimezoneOffset() * 60000)),\n            abbr: 'UTC'\n        };\n    }\n    const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);\n    return {\n        date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),\n        abbr: dateMoment.format('z')\n    };\n}\nexports.offsetDate = offsetDate;\n/**\n * Returns if the zones are loaded.\n * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.\n */\nfunction zonesLoaded() {\n    return moment_timezone_1.default.zonesLoaded;\n}\nexports.zonesLoaded = zonesLoaded;\n/**\n * Returns if we should load the zones.\n * @param {string} timezone - The timezone to check if we should load the zones.\n * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.\n */\nfunction shouldLoadZones(timezone) {\n    if (timezone === currentTimezone() || timezone === 'UTC') {\n        return false;\n    }\n    return true;\n}\nexports.shouldLoadZones = shouldLoadZones;\n/**\n * Externally load the timezone data.\n * @param {string} url - The URL to load the timezone data from.\n * @param {string} timezone - The timezone to load.\n * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.\n */\nfunction loadZones(url, timezone) {\n    if (timezone && !shouldLoadZones(timezone)) {\n        // Return non-resolving promise.\n        return new Promise(lodash_1.default.noop);\n    }\n    if (moment_timezone_1.default.zonesPromise) {\n        return moment_timezone_1.default.zonesPromise;\n    }\n    return moment_timezone_1.default.zonesPromise = fetch(url)\n        .then(resp => resp.json().then(zones => {\n        moment_timezone_1.default.tz.load(zones);\n        moment_timezone_1.default.zonesLoaded = true;\n        // Trigger a global event that the timezones have finished loading.\n        if (document && document.createEvent && document.body && document.body.dispatchEvent) {\n            var event = document.createEvent('Event');\n            event.initEvent('zonesLoaded', true, true);\n            document.body.dispatchEvent(event);\n        }\n    }));\n}\nexports.loadZones = loadZones;\n/**\n * Get the moment date object for translating dates with timezones.\n * @param {string|Date} value - The value to convert into a moment date.\n * @param {string} format - The format to convert the date to.\n * @param {string} timezone - The timezone to convert the date to.\n * @returns {Date} - The moment date object.\n */\nfunction momentDate(value, format, timezone) {\n    const momentDate = (0, moment_timezone_1.default)(value);\n    if (!timezone) {\n        return momentDate;\n    }\n    if (timezone === 'UTC') {\n        timezone = 'Etc/UTC';\n    }\n    if ((timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) && moment_timezone_1.default.zonesLoaded) {\n        return momentDate.tz(timezone);\n    }\n    return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {string|Date} value - The value to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @param {string} flatPickrInputFormat - The format to use for flatpickr input.\n * @returns {string} - The formatted date.\n */\nfunction formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {\n    const momentDate = (0, moment_timezone_1.default)(value, flatPickrInputFormat || undefined);\n    if (timezone === currentTimezone()) {\n        // See if our format contains a \"z\" timezone character.\n        if (format.match(/\\s(z$|z\\s)/)) {\n            loadZones(timezonesUrl);\n            if (moment_timezone_1.default.zonesLoaded) {\n                return momentDate.tz(timezone).format(convertFormatToMoment(format));\n            }\n            else {\n                return momentDate.format(convertFormatToMoment(format.replace(/\\s(z$|z\\s)/, '')));\n            }\n        }\n        // Return the standard format.\n        return momentDate.format(convertFormatToMoment(format));\n    }\n    if (timezone === 'UTC') {\n        const offset = offsetDate(momentDate.toDate(), 'UTC');\n        return `${(0, moment_timezone_1.default)(offset.date).format(convertFormatToMoment(format))} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded && timezone) {\n        return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);\n    }\n    else {\n        return momentDate.format(convertFormatToMoment(format));\n    }\n}\nexports.formatDate = formatDate;\n/**\n * Pass a format function to format within a timezone.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {Function} formatFn - The format function to use.\n * @param {Date|string} date - The date to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @returns {string} - The formatted date.\n */\nfunction formatOffset(timezonesUrl, formatFn, date, format, timezone) {\n    if (timezone === currentTimezone()) {\n        return formatFn(date, format);\n    }\n    if (timezone === 'UTC') {\n        return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded) {\n        const offset = offsetDate(date, timezone);\n        return `${formatFn(offset.date, format)} ${offset.abbr}`;\n    }\n    else {\n        return formatFn(date, format);\n    }\n}\nexports.formatOffset = formatOffset;\n/**\n * Returns the local date format information.\n * @param {Intl.LocalesArgument} locale - The locale to get the date format for.\n * @returns {object} - The local date format information.\n */\nfunction getLocaleDateFormatInfo(locale) {\n    const formatInfo = {};\n    const day = 21;\n    const exampleDate = new Date(2017, 11, day);\n    const localDateString = exampleDate.toLocaleDateString(locale);\n    formatInfo.dayFirst = localDateString.slice(0, 2) === day.toString();\n    return formatInfo;\n}\nexports.getLocaleDateFormatInfo = getLocaleDateFormatInfo;\n/**\n * Convert the format from the angular-datepicker module to flatpickr format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToFlatpickr(format) {\n    return format\n        // Remove the Z timezone offset, not supported by flatpickr.\n        .replace(/Z/g, '')\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        .replace('YYYY', 'Y')\n        .replace('YY', 'y')\n        // Month conversion.\n        .replace('MMMM', 'F')\n        .replace(/M/g, 'n')\n        .replace('nnn', 'M')\n        .replace('nn', 'm')\n        // Day in month.\n        .replace(/d/g, 'j')\n        .replace(/jj/g, 'd')\n        // Day in week.\n        .replace('EEEE', 'l')\n        .replace('EEE', 'D')\n        // Hours, minutes, seconds\n        .replace('HH', 'H')\n        .replace('hh', 'G')\n        .replace('mm', 'i')\n        .replace('ss', 'S')\n        .replace(/a/g, 'K');\n}\nexports.convertFormatToFlatpickr = convertFormatToFlatpickr;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMoment(format) {\n    return format\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        // Day in month.\n        .replace(/d/g, 'D')\n        // Day in week.\n        .replace(/E/g, 'd')\n        // AM/PM marker\n        .replace(/a/g, 'A')\n        // Unix Timestamp\n        .replace(/U/g, 'X');\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Convert the format from the angular-datepicker module to mask format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMask(format) {\n    return format\n        // Long month replacement.\n        .replace(/M{4}/g, 'MM')\n        // Initial short month conversion.\n        .replace(/M{3}/g, '***')\n        // Short month conversion if input as text.\n        .replace(/e/g, 'Q')\n        // Month number conversion.\n        .replace(/W/g, '99')\n        // Year conversion.\n        .replace(/[ydhmswHMG]/g, '9')\n        // AM/PM conversion.\n        .replace(/a/g, 'AA');\n}\nexports.convertFormatToMask = convertFormatToMask;\n/**\n * Returns an input mask that is compatible with the input mask library.\n * @param {string} mask - The Form.io input mask.\n * @param {string} placeholderChar - Char which is used as a placeholder.\n * @returns {Array} - The input mask for the mask library.\n */\nfunction getInputMask(mask, placeholderChar) {\n    if (mask instanceof Array) {\n        return mask;\n    }\n    const maskArray = [];\n    maskArray.numeric = true;\n    for (let i = 0; i < mask.length; i++) {\n        switch (mask[i]) {\n            case '9':\n                maskArray.push(/\\d/);\n                break;\n            case 'A':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z]/);\n                break;\n            case 'a':\n                maskArray.numeric = false;\n                maskArray.push(/[a-z]/);\n                break;\n            case '*':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z0-9]/);\n                break;\n            // If char which is used inside mask placeholder was used in the mask, replace it with space to prevent errors\n            case placeholderChar:\n                maskArray.numeric = false;\n                maskArray.push(' ');\n                break;\n            default:\n                maskArray.numeric = false;\n                maskArray.push(mask[i]);\n                break;\n        }\n    }\n    return maskArray;\n}\nexports.getInputMask = getInputMask;\n/**\n * Unmasks a value using the provided mask and placeholder characters.\n * @param {string} value - The value to unmask.\n * @param {string} mask - The mask to use for unmasking.\n * @param {string} placeholderChar - The placeholder character to use for unmasking.\n * @returns {string} - The unmasked value.\n */\nfunction unmaskValue(value, mask, placeholderChar) {\n    if (!mask || !value || value.length > mask.length) {\n        return value;\n    }\n    let unmaskedValue = value.split('');\n    for (let i = 0; i < mask.length; i++) {\n        const char = value[i] || '';\n        const charPart = mask[i];\n        if (!lodash_1.default.isRegExp(charPart) && char === charPart) {\n            unmaskedValue[i] = '';\n        }\n    }\n    unmaskedValue = unmaskedValue.join('').replace(placeholderChar, '');\n    return unmaskedValue;\n}\nexports.unmaskValue = unmaskValue;\n/**\n * Returns true if the value matches the input mask format.\n * @param {string} value - The value to check.\n * @param {string} inputMask - The input mask to check against.\n * @returns {boolean} - TRUE if the value matches the input mask; FALSE otherwise.\n */\nfunction matchInputMask(value, inputMask) {\n    if (!inputMask) {\n        return true;\n    }\n    // If value is longer than mask, it isn't valid.\n    if (value.length > inputMask.length) {\n        return false;\n    }\n    for (let i = 0; i < inputMask.length; i++) {\n        const char = value[i] || '';\n        const charPart = inputMask[i];\n        if (!(lodash_1.default.isRegExp(charPart) && charPart.test(char) || charPart === char)) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.matchInputMask = matchInputMask;\n/**\n * Returns the number separators (i.e. 1,000) for the provided language.\n * @param {string} lang - The language code to get the number separators for.\n * @returns {{delimiter: string, decimalSeparator: string}} - The number separators.\n */\nfunction getNumberSeparators(lang = 'en') {\n    const formattedNumberString = (12345.6789).toLocaleString(lang);\n    const delimeters = formattedNumberString.match(/..(.)...(.)../);\n    if (!delimeters) {\n        return {\n            delimiter: ',',\n            decimalSeparator: '.'\n        };\n    }\n    return {\n        delimiter: (delimeters.length > 1) ? delimeters[1] : ',',\n        decimalSeparator: (delimeters.length > 2) ? delimeters[2] : '.',\n    };\n}\nexports.getNumberSeparators = getNumberSeparators;\n/**\n * Returns the number for the maximum amount of decimal places for a number.\n * @param {import('@formio/core').Component} component - The component to check for decimal limits.\n * @param {number} defaultLimit - The default limit to use if none is provided in the component.\n * @returns {number} - The number of decimal places allowed.\n */\nfunction getNumberDecimalLimit(component, defaultLimit) {\n    if (lodash_1.default.has(component, 'decimalLimit')) {\n        return lodash_1.default.get(component, 'decimalLimit');\n    }\n    // Determine the decimal limit. Defaults to 20 but can be overridden by validate.step or decimalLimit settings.\n    let decimalLimit = defaultLimit || 20;\n    const step = lodash_1.default.get(component, 'validate.step', 'any');\n    if (step !== 'any') {\n        const parts = step.toString().split('.');\n        if (parts.length > 1) {\n            decimalLimit = parts[1].length;\n        }\n    }\n    return decimalLimit;\n}\nexports.getNumberDecimalLimit = getNumberDecimalLimit;\n/**\n * Returns the currency affixes for a specific language.\n * @param {object} arg0 - The arguments object.\n * @param {string} arg0.currency - The currency code to get the affixes for.\n * @param {number} arg0.decimalLimit - The number of decimal places to use.\n * @param {string} arg0.decimalSeparator - The decimal separator to use.\n * @param {string} arg0.lang - The language code to use.\n * @returns {{prefix: string, suffix: string}} - The currency affixes.\n */\nfunction getCurrencyAffixes({ currency, decimalLimit, decimalSeparator, lang, }) {\n    // Get the prefix and suffix from the localized string.\n    let regex = `(.*)?${(100).toLocaleString(lang)}`;\n    if (decimalLimit) {\n        regex += `${decimalSeparator === '.' ? '\\\\.' : decimalSeparator}${(0).toLocaleString(lang)}{${decimalLimit}}`;\n    }\n    regex += '(.*)?';\n    const parts = (100).toLocaleString(lang, {\n        style: 'currency',\n        currency: currency ? currency : 'USD',\n        useGrouping: true,\n        maximumFractionDigits: decimalLimit || 0,\n        minimumFractionDigits: decimalLimit || 0\n    }).replace('.', decimalSeparator).match(new RegExp(regex));\n    return {\n        prefix: (parts === null || parts === void 0 ? void 0 : parts[1]) || '',\n        suffix: (parts === null || parts === void 0 ? void 0 : parts[2]) || ''\n    };\n}\nexports.getCurrencyAffixes = getCurrencyAffixes;\n/**\n * Fetch the field data provided a component.\n * @param {import('@formio/core').DataObject} data - The data object to fetch the field data from.\n * @param {import('@formio/core').Component} component - The component to fetch the field data for.\n * @returns {*} - The field data.\n */\nfunction fieldData(data, component) {\n    if (!data) {\n        return '';\n    }\n    if (!component || !component.key) {\n        return data;\n    }\n    if (component.key.includes('.')) {\n        let value = data;\n        const parts = component.key.split('.');\n        let key = '';\n        for (let i = 0; i < parts.length; i++) {\n            key = parts[i];\n            // Handle nested resources\n            if (value.hasOwnProperty('_id')) {\n                value = value.data;\n            }\n            // Return if the key is not found on the value.\n            if (!value.hasOwnProperty(key)) {\n                return;\n            }\n            // Convert old single field data in submissions to multiple\n            if (key === parts[parts.length - 1] && component.multiple && !Array.isArray(value[key])) {\n                value[key] = [value[key]];\n            }\n            // Set the value of this key.\n            value = value[key];\n        }\n        return value;\n    }\n    else {\n        // Convert old single field data in submissions to multiple\n        if (component.multiple && !Array.isArray(data[component.key])) {\n            data[component.key] = [data[component.key]];\n        }\n        // Fix for checkbox type radio submission values in tableView\n        if (component.type === 'checkbox' && component.inputType === 'radio') {\n            return data[component.name] === component.value;\n        }\n        return data[component.key];\n    }\n}\nexports.fieldData = fieldData;\n/**\n * Delays function execution with possibility to execute function synchronously or cancel it.\n * @param {Function} fn - Function to delay\n * @param {number} delay - Delay time\n * @param {...any} args - Arguments to pass to the function\n * @returns {*} - Function to cancel the delay\n */\nfunction delay(fn, delay = 0, ...args) {\n    const timer = setTimeout(fn, delay, ...args);\n    /**\n     *\n     */\n    function cancel() {\n        clearTimeout(timer);\n    }\n    /**\n     * Execute the function early.\n     * @returns {*} - The result of the function.\n     */\n    function earlyCall() {\n        cancel();\n        return fn(...args);\n    }\n    earlyCall.timer = timer;\n    earlyCall.cancel = cancel;\n    return earlyCall;\n}\nexports.delay = delay;\n/**\n * Iterate the given key to make it unique.\n * @param {string} key\n *   Modify the component key to be unique.\n * @returns {string}\n *   The new component key.\n */\nfunction iterateKey(key) {\n    if (!key.match(/(\\d+)$/)) {\n        return `${key}1`;\n    }\n    return key.replace(/(\\d+)$/, function (suffix) {\n        return Number(suffix) + 1;\n    });\n}\nexports.iterateKey = iterateKey;\n/**\n * Determines a unique key within a map provided the base key.\n * @param {Record<string, string>} map - The map to check for uniqueness.\n * @param {string} base - The base path of the key.\n * @returns {string} - The unique key.\n */\nfunction uniqueKey(map, base) {\n    let newKey = base;\n    while (map.hasOwnProperty(newKey)) {\n        newKey = iterateKey(newKey);\n    }\n    return newKey;\n}\nexports.uniqueKey = uniqueKey;\n/**\n * Determines the major version number of bootstrap.\n * @param {object} options - The options to check for bootstrap version.\n * @param {string} options.bootstrap - The bootstrap version to use.\n * @returns {number} - The bootstrap version.\n */\nfunction bootstrapVersion(options) {\n    if (options.bootstrap) {\n        return options.bootstrap;\n    }\n    if ((typeof jQuery === 'function') && (typeof jQuery().collapse === 'function')) {\n        return parseInt(jQuery.fn.collapse.Constructor.VERSION.split('.')[0], 10);\n    }\n    if (window.bootstrap && window.bootstrap.Collapse) {\n        return parseInt(window.bootstrap.Collapse.VERSION.split('.')[0], 10);\n    }\n    return 0;\n}\nexports.bootstrapVersion = bootstrapVersion;\n/**\n * Retrun provided argument.\n * If argument is a function, returns the result of a function call.\n * @param {Function|any} e - The argument to check if a function and call if so.\n * @returns {any} - Either the result of the function call (e) or e if it is not a function.\n */\nfunction unfold(e) {\n    if (typeof e === 'function') {\n        return e();\n    }\n    return e;\n}\nexports.unfold = unfold;\n/**\n * Map values through unfold and return first non-nil value.\n * @param {Array<T>} collection - The collection to map through unfold.;\n * @returns {T} - The first non-nil value.\n */\nexports.firstNonNil = lodash_1.default.flow([\n    lodash_1.default.partialRight(lodash_1.default.map, unfold),\n    lodash_1.default.partialRight(lodash_1.default.find, v => !lodash_1.default.isUndefined(v))\n]);\n/**\n * Create enclosed state. Returns functions to getting and cycling between states.\n * @param {*} a - initial state.\n * @param {*} b - next state.\n * @returns {Functions[]} -- [get, toggle];\n */\nfunction withSwitch(a, b) {\n    let state = a;\n    let next = b;\n    /**\n     * Returns the state of the switch.\n     * @returns {*} - The current state.\n     */\n    function get() {\n        return state;\n    }\n    /**\n     * Toggles the state of the switch.\n     */\n    function toggle() {\n        const prev = state;\n        state = next;\n        next = prev;\n    }\n    return [get, toggle];\n}\nexports.withSwitch = withSwitch;\n/**\n * Create a function that will call the provided function only the provided limit.\n * @param {Function} callback - The callback to call.\n * @param {object} options - The options to use.\n * @param {number} options.limit - The limit to call the callback.\n * @param {number} options.delay - The delay to wait before resetting the call count.\n * @returns {Function} - The function that will call the callback only the provided limit.\n */\nfunction observeOverload(callback, options = {}) {\n    const { limit = 50, delay = 500 } = options;\n    let callCount = 0;\n    let timeoutID = 0;\n    const reset = () => callCount = 0;\n    return () => {\n        if (timeoutID !== 0) {\n            clearTimeout(timeoutID);\n            timeoutID = 0;\n        }\n        timeoutID = setTimeout(reset, delay);\n        callCount += 1;\n        if (callCount >= limit) {\n            clearTimeout(timeoutID);\n            reset();\n            return callback();\n        }\n    };\n}\nexports.observeOverload = observeOverload;\n/**\n * Returns the components that are provided within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @param {boolean} excludeNested - Exclude nested components.\n * @param {Array<string>} excludedTypes - The types of components to exclude.\n * @returns {Array} - The components within the evaluation context.\n */\nfunction getContextComponents(context, excludeNested, excludedTypes = []) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component, path) => {\n        const addToContextComponents = excludeNested ? !component.tree : true;\n        if (component.key !== context.data.key && addToContextComponents && !lodash_1.default.includes(excludedTypes, component.type)) {\n            values.push({\n                label: `${component.label || component.key} (${path})`,\n                value: path,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextComponents = getContextComponents;\n/**\n * Returns the button components that are within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @returns {Array} - The button components within the evaluation context.\n */\nfunction getContextButtons(context) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component) => {\n        if (component.type === 'button') {\n            values.push({\n                label: `${component.key} (${component.label})`,\n                value: component.key,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextButtons = getContextButtons;\n// Tags that could be in text, that should be ommited or handled in a special way\nconst inTextTags = ['#text', 'A', 'B', 'EM', 'I', 'SMALL', 'STRONG', 'SUB', 'SUP', 'INS', 'DEL', 'MARK', 'CODE'];\n/**\n * Helper function for 'translateHTMLTemplate'. Translates text value of the passed html element.\n * @param {HTMLElement} elem - The element to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Translated element template.\n */\nfunction translateElemValue(elem, translate) {\n    if (!elem.innerText) {\n        return elem.innerHTML;\n    }\n    const elemValue = elem.innerText.replace(Evaluator_1.Evaluator.templateSettings.interpolate, '').replace(/\\s\\s+/g, ' ').trim();\n    const translatedValue = translate(elemValue);\n    if (elemValue !== translatedValue) {\n        const links = elem.innerHTML.match(/<a[^>]*>(.*?)<\\/a>/g);\n        if (links && links.length) {\n            if (links.length === 1 && links[0].length === elem.innerHTML.length) {\n                return elem.innerHTML.replace(elemValue, translatedValue);\n            }\n            const translatedLinks = links.map(link => {\n                const linkElem = document.createElement('a');\n                linkElem.innerHTML = link;\n                return translateElemValue(linkElem, translate);\n            });\n            return `${translatedValue} (${translatedLinks.join(', ')})`;\n        }\n        else {\n            return elem.innerText.replace(elemValue, translatedValue);\n        }\n    }\n    else {\n        return elem.innerHTML;\n    }\n}\n/**\n * Helper function for 'translateHTMLTemplate'. Goes deep through html tag children and calls function to translate their text values.\n * @param {HTMLElement} tag - The tag to translate.\n * @param {Function} translate - The translation function.\n * @returns {void}\n */\nfunction translateDeepTag(tag, translate) {\n    const children = tag.children.length && [...tag.children];\n    const shouldTranslateEntireContent = children && children.every(child => child.children.length === 0\n        && inTextTags.some(tag => child.nodeName === tag));\n    if (!children || shouldTranslateEntireContent) {\n        tag.innerHTML = translateElemValue(tag, translate);\n    }\n    else {\n        children.forEach(child => translateDeepTag(child, translate));\n    }\n}\n/**\n * Translates text values in html template.\n * @param {string} template - The template to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Html template with translated values.\n */\nfunction translateHTMLTemplate(template, translate) {\n    const isHTML = /<[^>]*>/.test(template);\n    if (!isHTML) {\n        return translate(template);\n    }\n    const tempElem = document.createElement('div');\n    tempElem.innerHTML = template;\n    if (tempElem.innerText && tempElem.children.length) {\n        translateDeepTag(tempElem, translate);\n        return tempElem.innerHTML;\n    }\n    return template;\n}\nexports.translateHTMLTemplate = translateHTMLTemplate;\n/**\n * Sanitize an html string.\n * @param {string} string - The string to sanitize.\n * @param {any} options - The options to use for sanitization.\n * @returns {string} - The sanitized html string.\n */\nfunction sanitize(string, options) {\n    if (typeof dompurify_1.default.sanitize !== 'function') {\n        return string;\n    }\n    // Dompurify configuration\n    const sanitizeOptions = {\n        ADD_ATTR: ['ref', 'target'],\n        USE_PROFILES: { html: true }\n    };\n    // Use profiles\n    if (options.sanitizeConfig && options.sanitizeConfig.useProfiles) {\n        Object.keys(options.sanitizeConfig.useProfiles).forEach(key => {\n            sanitizeOptions.USE_PROFILES[key] = options.sanitizeConfig.useProfiles[key];\n        });\n    }\n    // Add attrs\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addAttr) && options.sanitizeConfig.addAttr.length > 0) {\n        options.sanitizeConfig.addAttr.forEach((attr) => {\n            sanitizeOptions.ADD_ATTR.push(attr);\n        });\n    }\n    // Add tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addTags) && options.sanitizeConfig.addTags.length > 0) {\n        sanitizeOptions.ADD_TAGS = options.sanitizeConfig.addTags;\n    }\n    // Allow tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedTags) && options.sanitizeConfig.allowedTags.length > 0) {\n        sanitizeOptions.ALLOWED_TAGS = options.sanitizeConfig.allowedTags;\n    }\n    // Allow attributes\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedAttrs) && options.sanitizeConfig.allowedAttrs.length > 0) {\n        sanitizeOptions.ALLOWED_ATTR = options.sanitizeConfig.allowedAttrs;\n    }\n    // Allowd URI Regex\n    if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {\n        const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;\n        sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;\n    }\n    // Allow to extend the existing array of elements that are safe for URI-like values\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {\n        sanitizeOptions.ADD_URI_SAFE_ATTR = options.sanitizeConfig.addUriSafeAttr;\n    }\n    return dompurify_1.default.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n/**\n * Fast cloneDeep for JSON objects only.\n * @param {any} obj - The object to perform a fast clone deep against.\n * @returns {any} - The cloned object.\n */\nfunction fastCloneDeep(obj) {\n    return obj ? JSON.parse(JSON.stringify(obj)) : obj;\n}\nexports.fastCloneDeep = fastCloneDeep;\n/**\n * Returns if the component is an input component.\n * @param {import('@formio/core').Component} componentJson - The JSON of a component.\n * @returns {bool} - TRUE if the component is an input component; FALSE otherwise.\n */\nfunction isInputComponent(componentJson) {\n    if (componentJson.input === false || componentJson.input === true) {\n        return componentJson.input;\n    }\n    switch (componentJson.type) {\n        case 'htmlelement':\n        case 'content':\n        case 'columns':\n        case 'fieldset':\n        case 'panel':\n        case 'table':\n        case 'tabs':\n        case 'well':\n        case 'button':\n            return false;\n        default:\n            return true;\n    }\n}\nexports.isInputComponent = isInputComponent;\n/**\n * Takes a component path, and returns a component path array.\n * @param {string} pathStr - The path string to convert to an array.\n * @returns {Arryay<number>} - The array of paths.\n */\nfunction getArrayFromComponentPath(pathStr) {\n    if (!pathStr || !lodash_1.default.isString(pathStr)) {\n        if (!lodash_1.default.isArray(pathStr)) {\n            return [pathStr];\n        }\n        return pathStr;\n    }\n    return pathStr.replace(/[[\\]]/g, '.')\n        .replace(/\\.\\./g, '.')\n        .replace(/(^\\.)|(\\.$)/g, '')\n        .split('.')\n        .map(part => lodash_1.default.defaultTo(lodash_1.default.toNumber(part), part));\n}\nexports.getArrayFromComponentPath = getArrayFromComponentPath;\n/**\n * Returns true if the component is a child of the parent.\n * @param {any} child - The child component to check.\n * @param {any} parent - The parent component to check.\n * @returns {boolean} - TRUE if the child is a child of the parent; FALSE otherwise.\n */\nfunction isChildOf(child, parent) {\n    while (child && child.parent) {\n        if (child.parent === parent) {\n            return true;\n        }\n        child = child.parent;\n    }\n    return false;\n}\nexports.isChildOf = isChildOf;\n/**\n * Takes an array of component path indexes, and returns a string version of that array.\n * @param {Array<number>} path - The path array to convert to a string.\n * @returns {string} - The string version of the path.\n */\nfunction getStringFromComponentPath(path) {\n    if (!lodash_1.default.isArray(path)) {\n        return path;\n    }\n    let strPath = '';\n    path.forEach((part, i) => {\n        if (lodash_1.default.isNumber(part)) {\n            strPath += `[${part}]`;\n        }\n        else {\n            strPath += i === 0 ? part : `.${part}`;\n        }\n    });\n    return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Takes a number and rounds it to the provided precision amount.\n * @param {number} number - The number to round.\n * @param {number} precision - The precision to round the number to.\n * @returns {string} - The rounded number.\n */\nfunction round(number, precision) {\n    if (lodash_1.default.isNumber(number)) {\n        return number.toFixed(precision);\n    }\n    return number.toString();\n}\nexports.round = round;\n/**\n * Check for Internet Explorer browser version\n * @returns {(number|null)} - The IE browser version or null if not IE\n */\nfunction getIEBrowserVersion() {\n    const { ie, version } = getBrowserInfo();\n    return ie ? version : null;\n}\nexports.getIEBrowserVersion = getIEBrowserVersion;\n/**\n * Get browser name and version (modified from 'jquery-browser-plugin')\n * @returns {object} -- {{browser name, version, isWebkit?}}\n * Possible browser names: chrome, safari, ie, edge, opera, mozilla, yabrowser\n */\nfunction getBrowserInfo() {\n    const browser = {};\n    if (typeof window === 'undefined') {\n        return browser;\n    }\n    const ua = window.navigator.userAgent.toLowerCase();\n    const match = /(edge|edg)\\/([\\w.]+)/.exec(ua) ||\n        /(opr)[/]([\\w.]+)/.exec(ua) ||\n        /(yabrowser)[ /]([\\w.]+)/.exec(ua) ||\n        /(chrome)[ /]([\\w.]+)/.exec(ua) ||\n        /(iemobile)[/]([\\w.]+)/.exec(ua) ||\n        /(version)(applewebkit)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+).*(version)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+)/.exec(ua) ||\n        /(opera)(?:.*version|)[ /]([\\w.]+)/.exec(ua) ||\n        /(msie) ([\\w.]+)/.exec(ua) ||\n        ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) ||\n        ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) ||\n        [];\n    const matched = {\n        browser: match[5] || match[3] || match[1] || '',\n        version: match[4] || match[2] || '0'\n    };\n    if (matched.browser) {\n        browser[matched.browser] = true;\n        browser.version = parseInt(matched.version, 10);\n    }\n    // Chrome, Opera 15+, Safari and Yandex.Browser are webkit based browsers\n    if (browser.chrome || browser.opr || browser.safari || browser.edg || browser.yabrowser) {\n        browser.isWebkit = true;\n    }\n    // IE11 has a new token so we will assign it ie to avoid breaking changes\n    if (browser.rv || browser.iemobile) {\n        browser.ie = true;\n    }\n    // Edge has a new token since it became webkit based\n    if (browser.edg) {\n        browser.edge = true;\n    }\n    // Opera 15+ are identified as opr\n    if (browser.opr) {\n        browser.opera = true;\n    }\n    return browser;\n}\nexports.getBrowserInfo = getBrowserInfo;\n/**\n * Takes a component path, which may include array indicies (i.e. [0][1]), and returns the compoennt path without the indicies.\n * @param {string} path - The path to remove the indicies from.\n * @returns {string} - The path without the indicies.\n */\nfunction getComponentPathWithoutIndicies(path = '') {\n    return path.replace(/\\[\\d+\\]/, '');\n}\nexports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;\n/**\n * Returns a path to the component which based on its schema\n * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property\n * @param {string} path - Path to the component\n * @returns {string} - Path to the component\n */\nfunction getComponentPath(component, path = '') {\n    var _a;\n    if (!component || !component.key || ((_a = component === null || component === void 0 ? void 0 : component._form) === null || _a === void 0 ? void 0 : _a.display) === 'wizard') { // unlike the Webform, the Wizard has the key and it is a duplicate of the panel key\n        return path;\n    }\n    path = component.isInputComponent || component.input === true ? `${component.key}${path ? '.' : ''}${path}` : path;\n    return getComponentPath(component.parent, path);\n}\nexports.getComponentPath = getComponentPath;\n/**\n * Returns a parent component of the passed component instance skipping all the Layout components\n * @param {Component} componentInstance - The component to check for the parent.\n * @returns {Component|undefined} - The parent data component.\n */\nfunction getDataParentComponent(componentInstance) {\n    if (!componentInstance) {\n        return;\n    }\n    const { parent } = componentInstance;\n    if (parent && (parent.isInputComponent || parent.input)) {\n        return parent;\n    }\n    else {\n        return getDataParentComponent(parent);\n    }\n}\nexports.getDataParentComponent = getDataParentComponent;\n/**\n * Returns whether the value is a promise\n * @param {any} value - The value to check\n * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise\n */\nfunction isPromise(value) {\n    return value\n        && value.then\n        && typeof value.then === 'function'\n        && Object.prototype.toString.call(value) === '[object Promise]';\n}\nexports.isPromise = isPromise;\n/**\n * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its\n * changes by itself, e.g. EditGrid)\n * @param {Component} componentInstance - The component to check for the scoping parent.\n * @param {boolean} firstPass - Whether it is the first pass of the function\n * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise\n */\nfunction isInsideScopingComponent(componentInstance, firstPass = true) {\n    if (!firstPass && (componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.hasScopedChildren)) {\n        return true;\n    }\n    const dataParent = getDataParentComponent(componentInstance);\n    if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.hasScopedChildren) {\n        return true;\n    }\n    else if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.parent) {\n        return isInsideScopingComponent(dataParent.parent, false);\n    }\n    return false;\n}\nexports.isInsideScopingComponent = isInsideScopingComponent;\n/**\n * Returns all the focusable elements within the provided dom element.\n * @param {HTMLElement} element - The element to get the focusable elements from.\n * @returns {NodeList<HTMLElement>} - The focusable elements within the provided element.\n */\nfunction getFocusableElements(element) {\n    const focusableSelector = `button:not([disabled]), input:not([disabled]), select:not([disabled]),\n    textarea:not([disabled]), button:not([disabled]), [href]`;\n    return element.querySelectorAll(focusableSelector);\n}\nexports.getFocusableElements = getFocusableElements;\nexports.componentValueTypes = {\n    number: 'number',\n    string: 'string',\n    boolean: 'boolean',\n    array: 'array',\n    object: 'object',\n    date: 'date',\n    any: 'any',\n};\n/**\n * Returns the saved types for the component\n * @param {import('@formio/core').Component} fullSchema - The component schema\n * @returns {Array<string>|null} - The saved types for the component\n */\nfunction getComponentSavedTypes(fullSchema) {\n    const schema = fullSchema || {};\n    if (schema.persistent !== true) {\n        return [];\n    }\n    if (schema.multiple) {\n        return [exports.componentValueTypes.array];\n    }\n    return null;\n}\nexports.getComponentSavedTypes = getComponentSavedTypes;\n/**\n * Interpolates @formio/core errors so that they are compatible with the renderer\n * @param {Component} component - The component to interpolate the errors for\n * @param {FieldError[]} errors - The errors to interpolate\n * @param {Function} interpolateFn - The interpolation function\n * @returns {[]} - The interpolated errors\n */\nconst interpolateErrors = (component, errors, interpolateFn) => {\n    return errors.map((error) => {\n        error.component = component;\n        const { errorKeyOrMessage, context } = error;\n        const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;\n        return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });\n    });\n};\nexports.interpolateErrors = interpolateErrors;\n/**\n * Returns the template keys inside the template code.\n * @param {string} template - The template to get the keys from.\n * @returns {Array<string>} - The keys inside the template.\n */\nfunction getItemTemplateKeys(template) {\n    const templateKeys = [];\n    if (!template) {\n        return templateKeys;\n    }\n    const keys = template.match(/({{\\s*(.*?)\\s*}})/g);\n    if (keys) {\n        keys.forEach((key) => {\n            const propKey = key.match(/{{\\s*item\\.(.*?)\\s*}}/);\n            if (propKey && propKey.length > 1) {\n                templateKeys.push(propKey[1]);\n            }\n        });\n    }\n    return templateKeys;\n}\nexports.getItemTemplateKeys = getItemTemplateKeys;\n/**\n * Returns if the component is a select resource with an object for its value.\n * @param {import('@formio/core').Component} comp - The component to check.\n * @returns {boolean} - TRUE if the component is a select resource with an object for its value; FALSE otherwise.\n */\nfunction isSelectResourceWithObjectValue(comp = {}) {\n    const { reference, dataSrc, valueProperty } = comp;\n    return reference || (dataSrc === 'resource' && (!valueProperty || valueProperty === 'data'));\n}\nexports.isSelectResourceWithObjectValue = isSelectResourceWithObjectValue;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/utils.js?");
 
 /***/ }),
 
@@ -10843,7 +10843,7 @@ eval("\nvar parent = __webpack_require__(/*! ../../es/object/from-entries */ \".
 /***/ (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        _a.license = license;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setLicense(license);\n        }\n    }\n    static setBaseUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setBaseUrl(url);\n        }\n    }\n    static setApiUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setApiUrl(url);\n        }\n    }\n    static setProjectUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setProjectUrl(url);\n        }\n    }\n    static setAppUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setAppUrl(url);\n        }\n    }\n    static setPathType(type, norecurse = false) {\n        _a.pathType = type;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setPathType(type);\n        }\n    }\n    static debug(...args) {\n        if (_a.config.debug) {\n            console.log(...args);\n        }\n    }\n    static clearCache() {\n        if (_a.FormioClass) {\n            _a.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        _a.debug(`Getting global ${prop}`, globalValue);\n        return globalValue;\n    }\n    static use(module) {\n        if (_a.FormioClass && _a.FormioClass.isRenderer) {\n            _a.FormioClass.use(module);\n        }\n        else {\n            _a.modules.push(module);\n        }\n    }\n    static createElement(type, attrs, children) {\n        const element = document.createElement(type);\n        if (!attrs) {\n            return element;\n        }\n        Object.keys(attrs).forEach(key => {\n            element.setAttribute(key, attrs[key]);\n        });\n        (children || []).forEach(child => {\n            element.appendChild(_a.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 => _a.addScript(wrapper, ref)));\n            }\n            if (name && _a.global(name, flag)) {\n                _a.debug(`${name} already loaded.`);\n                return Promise.resolve(_a.global(name));\n            }\n            _a.debug('Adding Script', src);\n            try {\n                wrapper.appendChild(_a.createElement('script', {\n                    src\n                }));\n            }\n            catch (err) {\n                _a.debug(err);\n                return Promise.resolve();\n            }\n            if (!name) {\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                _a.debug(`Waiting to load ${name}`);\n                const wait = setInterval(() => {\n                    if (_a.global(name, flag)) {\n                        clearInterval(wait);\n                        _a.debug(`${name} loaded.`);\n                        resolve(_a.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 => _a.addStyles(wrapper, ref));\n                return;\n            }\n            _a.debug('Adding Styles', href);\n            wrapper.appendChild(_a.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            _a.debug('Submision Complete', submission);\n            if (_a.config.submitDone) {\n                _a.config.submitDone(submission, instance);\n            }\n            const successMessage = (_a.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 = _a.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                _a.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                _a.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 || _a.config.includeBuilder;\n        if (_a.fullAdded || builder) {\n            _a.fullAdded = true;\n            return script.replace('formio.form', 'formio.full');\n        }\n        return script;\n    }\n    static addLibrary(libWrapper, 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                    const libName = lib.dependencies[i];\n                    yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);\n                }\n            }\n            if (lib.css) {\n                yield _a.addStyles((lib.global ? document.body : libWrapper), lib.css);\n            }\n            if (lib.js) {\n                const module = yield _a.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);\n                if (lib.use) {\n                    _a.debug(`Using ${name}`);\n                    const options = lib.options || {};\n                    if (!options.license && _a.license) {\n                        options.license = _a.license;\n                    }\n                    _a.use((typeof lib.use === 'function' ? lib.use(module) : module), options);\n                }\n            }\n            if (lib.globalStyle) {\n                const style = _a.createElement('style');\n                style.type = 'text/css';\n                style.innerHTML = lib.globalStyle;\n                document.body.appendChild(style);\n            }\n        });\n    }\n    static addLoader(wrapper) {\n        return __awaiter(this, void 0, void 0, function* () {\n            wrapper.appendChild(_a.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        });\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            _a.cdn = new CDN_js_1.default(_a.config.cdn, _a.config.cdnUrls || {});\n            _a.config.libs = _a.config.libs || {\n                uswds: {\n                    dependencies: ['fontawesome'],\n                    js: `${_a.cdn.uswds}/uswds.min.js`,\n                    css: `${_a.cdn.uswds}/uswds.min.css`,\n                    use: true\n                },\n                fontawesome: {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,\n                    globalStyle: `@font-face {\n                    font-family: 'FontAwesome';\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');\n                    font-weight: normal;\n                    font-style: normal;\n                  }`\n                },\n                bootstrap4: {\n                    dependencies: ['fontawesome'],\n                    css: `${_a.cdn.bootstrap4}/css/bootstrap.min.css`\n                },\n                bootstrap: {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`\n                },\n                'bootstrap-icons': {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',\n                    globalStyle: `@font-face {\n                    font-display: block;\n                    font-family: \"bootstrap-icons\";\n                    src: url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6\") format(\"woff2\"),\n                         url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6\") format(\"woff\");\n                }`\n                }\n            };\n            // Add all bootswatch templates.\n            ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {\n                _a.config.libs[template] = {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`\n                };\n            });\n            const id = _a.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 = _a.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            const useShadowDom = _a.config.includeLibs && !_a.config.noshadow && (typeof wrapper.attachShadow === 'function');\n            if (useShadowDom) {\n                wrapper = wrapper.attachShadow({\n                    mode: 'open'\n                });\n                options.shadowRoot = wrapper;\n            }\n            element.parentNode.removeChild(element);\n            wrapper.appendChild(element);\n            // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.\n            const libWrapper = useShadowDom ? wrapper : document.body;\n            // Load the renderer styles.\n            yield _a.addStyles(libWrapper, _a.config.embedCSS || `${_a.cdn.js}/formio.embed.css`);\n            // Add a loader.\n            _a.addLoader(wrapper);\n            const formioSrc = _a.config.full ? 'formio.full' : 'formio.form';\n            const renderer = _a.config.debug ? formioSrc : `${formioSrc}.min`;\n            _a.FormioClass = yield _a.addScript(libWrapper, _a.formioScript(_a.config.script || `${_a.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');\n            _a.FormioClass.cdn = _a.cdn;\n            _a.FormioClass.setBaseUrl(options.baseUrl || _a.baseUrl || _a.config.base);\n            _a.FormioClass.setProjectUrl(options.projectUrl || _a.projectUrl || _a.config.project);\n            _a.FormioClass.language = _a.language;\n            _a.setLicense(_a.license || _a.config.license || false);\n            _a.modules.forEach((module) => {\n                _a.FormioClass.use(module);\n            });\n            if (_a.icons) {\n                _a.FormioClass.icons = _a.icons;\n            }\n            if (_a.pathType) {\n                _a.FormioClass.setPathType(_a.pathType);\n            }\n            // Add libraries if they wish to include the libs.\n            if (_a.config.template && _a.config.includeLibs) {\n                yield _a.addLibrary(libWrapper, _a.config.libs[_a.config.template], _a.config.template);\n            }\n            if (!_a.config.libraries) {\n                _a.config.libraries = _a.config.modules || {};\n            }\n            // Adding premium if it is provided via the config.\n            if (_a.config.premium) {\n                _a.config.libraries.premium = _a.config.premium;\n            }\n            // Allow adding dynamic modules.\n            if (_a.config.libraries) {\n                for (const name in _a.config.libraries) {\n                    const lib = _a.config.libraries[name];\n                    lib.use = lib.use || true;\n                    yield _a.addLibrary(libWrapper, lib, name);\n                }\n            }\n            yield _a.addStyles(libWrapper, _a.formioScript(_a.config.style || `${_a.cdn.js}/${renderer}.css`, builder));\n            if (_a.config.before) {\n                yield _a.config.before(_a.FormioClass, element, _a.config);\n            }\n            _a.FormioClass.license = true;\n            _a._formioReady(_a.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            _a.FormioClass.events.emit(readyEvent, instance);\n            if (_a.config.after) {\n                _a.debug('Calling ready callback');\n                _a.config.after(instance, _a.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 (_a.FormioClass) {\n                return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true }));\n            }\n            const wrapper = yield _a.init(element, options);\n            return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {\n                // Set the default submission data.\n                if (_a.config.submission) {\n                    _a.debug('Setting submission', _a.config.submission);\n                    instance.submission = _a.config.submission;\n                }\n                // Call the after create method.\n                _a.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 = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.builder) {\n                return _a.FormioClass.builder(element, form, options);\n            }\n            const wrapper = yield _a.init(element, options, true);\n            return _a.FormioClass.builder(element, form, options).then((instance) => {\n                _a.afterCreate(instance, wrapper, 'builderEmbedded');\n                return instance;\n            });\n        });\n    }\n}\nexports.Formio = Formio;\n_a = Formio;\nFormio.FormioClass = null;\nFormio.config = {};\nFormio.modules = [];\nFormio.icons = '';\nFormio.license = '';\nFormio.formioReady = new Promise((ready, reject) => {\n    _a._formioReady = ready;\n    _a._formioReadyReject = reject;\n});\nFormio.version = '5.0.0-rc.81';\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 = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.Report) {\n            return _a.FormioClass.Report.create(element, submission, options);\n        }\n        const wrapper = yield _a.init(element, options, true);\n        return _a.FormioClass.Report.create(element, submission, options).then((instance) => {\n            _a.afterCreate(instance, wrapper, 'reportEmbedded');\n            return instance;\n        });\n    })\n};\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?");
+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        _a.license = license;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setLicense(license);\n        }\n    }\n    static setBaseUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setBaseUrl(url);\n        }\n    }\n    static setApiUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setApiUrl(url);\n        }\n    }\n    static setProjectUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setProjectUrl(url);\n        }\n    }\n    static setAppUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setAppUrl(url);\n        }\n    }\n    static setPathType(type, norecurse = false) {\n        _a.pathType = type;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setPathType(type);\n        }\n    }\n    static debug(...args) {\n        if (_a.config.debug) {\n            console.log(...args);\n        }\n    }\n    static clearCache() {\n        if (_a.FormioClass) {\n            _a.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        _a.debug(`Getting global ${prop}`, globalValue);\n        return globalValue;\n    }\n    static use(module) {\n        if (_a.FormioClass && _a.FormioClass.isRenderer) {\n            _a.FormioClass.use(module);\n        }\n        else {\n            _a.modules.push(module);\n        }\n    }\n    static createElement(type, attrs, children) {\n        const element = document.createElement(type);\n        if (!attrs) {\n            return element;\n        }\n        Object.keys(attrs).forEach(key => {\n            element.setAttribute(key, attrs[key]);\n        });\n        (children || []).forEach(child => {\n            element.appendChild(_a.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 => _a.addScript(wrapper, ref)));\n            }\n            if (name && _a.global(name, flag)) {\n                _a.debug(`${name} already loaded.`);\n                return Promise.resolve(_a.global(name));\n            }\n            _a.debug('Adding Script', src);\n            try {\n                wrapper.appendChild(_a.createElement('script', {\n                    src\n                }));\n            }\n            catch (err) {\n                _a.debug(err);\n                return Promise.resolve();\n            }\n            if (!name) {\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                _a.debug(`Waiting to load ${name}`);\n                const wait = setInterval(() => {\n                    if (_a.global(name, flag)) {\n                        clearInterval(wait);\n                        _a.debug(`${name} loaded.`);\n                        resolve(_a.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 => _a.addStyles(wrapper, ref));\n                return;\n            }\n            _a.debug('Adding Styles', href);\n            wrapper.appendChild(_a.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            _a.debug('Submision Complete', submission);\n            if (_a.config.submitDone) {\n                _a.config.submitDone(submission, instance);\n            }\n            const successMessage = (_a.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 = _a.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                _a.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                _a.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 || _a.config.includeBuilder;\n        if (_a.fullAdded || builder) {\n            _a.fullAdded = true;\n            return script.replace('formio.form', 'formio.full');\n        }\n        return script;\n    }\n    static addLibrary(libWrapper, 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                    const libName = lib.dependencies[i];\n                    yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);\n                }\n            }\n            if (lib.css) {\n                yield _a.addStyles((lib.global ? document.body : libWrapper), lib.css);\n            }\n            if (lib.js) {\n                const module = yield _a.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);\n                if (lib.use) {\n                    _a.debug(`Using ${name}`);\n                    const options = lib.options || {};\n                    if (!options.license && _a.license) {\n                        options.license = _a.license;\n                    }\n                    _a.use((typeof lib.use === 'function' ? lib.use(module) : module), options);\n                }\n            }\n            if (lib.globalStyle) {\n                const style = _a.createElement('style');\n                style.type = 'text/css';\n                style.innerHTML = lib.globalStyle;\n                document.body.appendChild(style);\n            }\n        });\n    }\n    static addLoader(wrapper) {\n        return __awaiter(this, void 0, void 0, function* () {\n            wrapper.appendChild(_a.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        });\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            _a.cdn = new CDN_js_1.default(_a.config.cdn, _a.config.cdnUrls || {});\n            _a.config.libs = _a.config.libs || {\n                uswds: {\n                    dependencies: ['fontawesome'],\n                    js: `${_a.cdn.uswds}/uswds.min.js`,\n                    css: `${_a.cdn.uswds}/uswds.min.css`,\n                    use: true\n                },\n                fontawesome: {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,\n                    globalStyle: `@font-face {\n                    font-family: 'FontAwesome';\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');\n                    font-weight: normal;\n                    font-style: normal;\n                  }`\n                },\n                bootstrap4: {\n                    dependencies: ['fontawesome'],\n                    css: `${_a.cdn.bootstrap4}/css/bootstrap.min.css`\n                },\n                bootstrap: {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`\n                },\n                'bootstrap-icons': {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',\n                    globalStyle: `@font-face {\n                    font-display: block;\n                    font-family: \"bootstrap-icons\";\n                    src: url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6\") format(\"woff2\"),\n                         url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6\") format(\"woff\");\n                }`\n                }\n            };\n            // Add all bootswatch templates.\n            ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {\n                _a.config.libs[template] = {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`\n                };\n            });\n            const id = _a.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 = _a.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            const useShadowDom = _a.config.includeLibs && !_a.config.noshadow && (typeof wrapper.attachShadow === 'function');\n            if (useShadowDom) {\n                wrapper = wrapper.attachShadow({\n                    mode: 'open'\n                });\n                options.shadowRoot = wrapper;\n            }\n            element.parentNode.removeChild(element);\n            wrapper.appendChild(element);\n            // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.\n            const libWrapper = useShadowDom ? wrapper : document.body;\n            // Load the renderer styles.\n            yield _a.addStyles(libWrapper, _a.config.embedCSS || `${_a.cdn.js}/formio.embed.css`);\n            // Add a loader.\n            _a.addLoader(wrapper);\n            const formioSrc = _a.config.full ? 'formio.full' : 'formio.form';\n            const renderer = _a.config.debug ? formioSrc : `${formioSrc}.min`;\n            _a.FormioClass = yield _a.addScript(libWrapper, _a.formioScript(_a.config.script || `${_a.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');\n            _a.FormioClass.cdn = _a.cdn;\n            _a.FormioClass.setBaseUrl(options.baseUrl || _a.baseUrl || _a.config.base);\n            _a.FormioClass.setProjectUrl(options.projectUrl || _a.projectUrl || _a.config.project);\n            _a.FormioClass.language = _a.language;\n            _a.setLicense(_a.license || _a.config.license || false);\n            _a.modules.forEach((module) => {\n                _a.FormioClass.use(module);\n            });\n            if (_a.icons) {\n                _a.FormioClass.icons = _a.icons;\n            }\n            if (_a.pathType) {\n                _a.FormioClass.setPathType(_a.pathType);\n            }\n            // Add libraries if they wish to include the libs.\n            if (_a.config.template && _a.config.includeLibs) {\n                yield _a.addLibrary(libWrapper, _a.config.libs[_a.config.template], _a.config.template);\n            }\n            if (!_a.config.libraries) {\n                _a.config.libraries = _a.config.modules || {};\n            }\n            // Adding premium if it is provided via the config.\n            if (_a.config.premium) {\n                _a.config.libraries.premium = _a.config.premium;\n            }\n            // Allow adding dynamic modules.\n            if (_a.config.libraries) {\n                for (const name in _a.config.libraries) {\n                    const lib = _a.config.libraries[name];\n                    lib.use = lib.use || true;\n                    yield _a.addLibrary(libWrapper, lib, name);\n                }\n            }\n            yield _a.addStyles(libWrapper, _a.formioScript(_a.config.style || `${_a.cdn.js}/${renderer}.css`, builder));\n            if (_a.config.before) {\n                yield _a.config.before(_a.FormioClass, element, _a.config);\n            }\n            _a.FormioClass.license = true;\n            _a._formioReady(_a.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            _a.FormioClass.events.emit(readyEvent, instance);\n            if (_a.config.after) {\n                _a.debug('Calling ready callback');\n                _a.config.after(instance, _a.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 (_a.FormioClass) {\n                return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true }));\n            }\n            const wrapper = yield _a.init(element, options);\n            return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {\n                // Set the default submission data.\n                if (_a.config.submission) {\n                    _a.debug('Setting submission', _a.config.submission);\n                    instance.submission = _a.config.submission;\n                }\n                // Call the after create method.\n                _a.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 = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.builder) {\n                return _a.FormioClass.builder(element, form, options);\n            }\n            const wrapper = yield _a.init(element, options, true);\n            return _a.FormioClass.builder(element, form, options).then((instance) => {\n                _a.afterCreate(instance, wrapper, 'builderEmbedded');\n                return instance;\n            });\n        });\n    }\n}\nexports.Formio = Formio;\n_a = Formio;\nFormio.FormioClass = null;\nFormio.config = {};\nFormio.modules = [];\nFormio.icons = '';\nFormio.license = '';\nFormio.formioReady = new Promise((ready, reject) => {\n    _a._formioReady = ready;\n    _a._formioReadyReject = reject;\n});\nFormio.version = '5.0.0-rc.83';\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 = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.Report) {\n            return _a.FormioClass.Report.create(element, submission, options);\n        }\n        const wrapper = yield _a.init(element, options, true);\n        return _a.FormioClass.Report.create(element, submission, options).then((instance) => {\n            _a.afterCreate(instance, wrapper, 'reportEmbedded');\n            return instance;\n        });\n    })\n};\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?");
 
 /***/ }),
 
@@ -10854,7 +10854,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.81';\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;\nsdk_1.Formio.submitDone = Embed_1.Formio.submitDone;\nsdk_1.Formio.addLibrary = Embed_1.Formio.addLibrary;\nsdk_1.Formio.addLoader = Embed_1.Formio.addLoader;\nsdk_1.Formio.addToGlobal = (global) => {\n    if (typeof global === 'object' && !global.Formio) {\n        global.Formio = sdk_1.Formio;\n    }\n};\nif (typeof __webpack_require__.g !== 'undefined') {\n    sdk_1.Formio.addToGlobal(__webpack_require__.g);\n}\nif (typeof window !== 'undefined') {\n    sdk_1.Formio.addToGlobal(window);\n}\nEmbed_1.Formio._formioReady(sdk_1.Formio);\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.83';\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;\nsdk_1.Formio.submitDone = Embed_1.Formio.submitDone;\nsdk_1.Formio.addLibrary = Embed_1.Formio.addLibrary;\nsdk_1.Formio.addLoader = Embed_1.Formio.addLoader;\nsdk_1.Formio.addToGlobal = (global) => {\n    if (typeof global === 'object' && !global.Formio) {\n        global.Formio = sdk_1.Formio;\n    }\n};\nif (typeof __webpack_require__.g !== 'undefined') {\n    sdk_1.Formio.addToGlobal(__webpack_require__.g);\n}\nif (typeof window !== 'undefined') {\n    sdk_1.Formio.addToGlobal(window);\n}\nEmbed_1.Formio._formioReady(sdk_1.Formio);\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?");
 
 /***/ }),