@formio/js 5.0.0-rc.75 → 5.0.0-rc.77

package/dist/formio.form.js

@@ -288,7 +288,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.NestedArrayModel = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst NestedDataModel_1 = __webpack_require__(/*! ./NestedDataModel */ \"./node_modules/@formio/core/lib/experimental/model/NestedDataModel.js\");\nfunction NestedArrayModel(props = {}) {\n    return function (BaseClass) {\n        return class BaseNestedArrayModel extends (0, NestedDataModel_1.NestedDataModel)(props)(BaseClass) {\n            get defaultValue() {\n                return [];\n            }\n            /**\n             * Returns a row of componments at the provided index.\n             * @param index The index of the row to return\n             */\n            row(index) {\n                return (index < this.rows.length) ? this.rows[index] : [];\n            }\n            /**\n             * Removes a row and detatches all components within that row.\n             *\n             * @param index The index of the row to remove.\n             */\n            removeRow(index) {\n                this.row(index).forEach((comp) => this.removeComponent(comp));\n                this.dataValue.splice(index, 1);\n                this.rows.splice(index, 1);\n            }\n            /**\n             * Adds a new row of components.\n             *\n             * @param data The data context to pass to this row of components.\n             */\n            addRow(data = {}, index = 0) {\n                const rowData = data;\n                this.dataValue[index] = rowData;\n                this.createRowComponents(rowData, index);\n            }\n            /**\n             * Sets the data for a specific row of components.\n             * @param rowData The data to set\n             * @param index The index of the rows to set the data within.\n             */\n            setRowData(rowData, index) {\n                var _a;\n                this.dataValue[index] = rowData;\n                (_a = this.row(index)) === null || _a === void 0 ? void 0 : _a.forEach((comp) => (comp.data = rowData));\n            }\n            /**\n             * Determines if the data within a row has changed.\n             *\n             * @param rowData\n             * @param index\n             */\n            rowChanged(rowData, index) {\n                var _a;\n                let changed = false;\n                (_a = this.row(index)) === null || _a === void 0 ? void 0 : _a.forEach((comp) => {\n                    const hasChanged = comp.hasChanged((0, lodash_1.get)(rowData, comp.component.key));\n                    changed = hasChanged || changed;\n                    if (hasChanged) {\n                        comp.bubble('change', comp);\n                    }\n                });\n                return changed;\n            }\n            /**\n             * Creates all components for each row.\n             * @param data\n             * @returns\n             */\n            createComponents(data) {\n                this.rows = [];\n                let added = [];\n                this.eachRowValue(data, (row, index) => {\n                    added = added.concat(this.createRowComponents(row, index));\n                });\n                return added;\n            }\n            /**\n             * Creates a new row of components.\n             *\n             * @param data The data context to pass along to this row of components.\n             */\n            createRowComponents(data, index = 0) {\n                const comps = super.createComponents(data, (comp) => {\n                    comp.rowIndex = index;\n                });\n                this.rows[index] = comps;\n                return comps;\n            }\n            getIndexes(value) {\n                if (super.getIndexes) {\n                    return super.getIndexes(value);\n                }\n                return {\n                    min: 0,\n                    max: (value.length - 1)\n                };\n            }\n            eachRowValue(value, fn) {\n                if (!value || !value.length) {\n                    return;\n                }\n                const indexes = this.getIndexes(value);\n                for (let i = indexes.min; i <= indexes.max; i++) {\n                    fn(value[i], i);\n                }\n            }\n            /**\n             * The empty value for this component.\n             *\n             * @return {array}\n             */\n            get emptyValue() {\n                return [];\n            }\n            /**\n             * Returns the dataValue for this component.\n             */\n            get dataValue() {\n                return this.component.key ? (0, lodash_1.get)(this.data, this.component.key) : this.data;\n            }\n            /**\n             * Set the datavalue of an array component.\n             *\n             * @param value The value to set this component to.\n             */\n            set dataValue(value) {\n                // Only set the value if it is an array.\n                if (Array.isArray(value)) {\n                    // Get the current data value.\n                    const dataValue = this.dataValue;\n                    this.eachRowValue(value, (row, index) => {\n                        if (index >= dataValue.length) {\n                            this.addRow(row, index);\n                        }\n                        this.setRowData(row, index);\n                    });\n                    // Remove superfluous rows.\n                    if (dataValue.length > value.length) {\n                        for (let i = value.length; i < dataValue.length; i++) {\n                            this.removeRow(i);\n                        }\n                    }\n                }\n            }\n            /**\n             * Determine if this array component has changed.\n             *\n             * @param value\n             */\n            hasChanged(value) {\n                const dataValue = this.dataValue;\n                // If the length changes, then this compnent has changed.\n                if (value.length !== dataValue.length) {\n                    this.emit('changed', this);\n                    return true;\n                }\n                let changed = false;\n                this.eachRowValue(value, (rowData, index) => {\n                    changed = this.rowChanged(rowData, index) || changed;\n                });\n                return changed;\n            }\n            /**\n             * Sets the value of an array component.\n             *\n             * @param value\n             */\n            setValue(value) {\n                var changed = false;\n                this.eachComponentValue(value, (comp, val) => {\n                    changed = comp.setValue(val) || changed;\n                });\n                return changed;\n            }\n        };\n    };\n}\nexports.NestedArrayModel = NestedArrayModel;\n;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/experimental/model/NestedArrayModel.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.NestedArrayModel = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst NestedDataModel_1 = __webpack_require__(/*! ./NestedDataModel */ \"./node_modules/@formio/core/lib/experimental/model/NestedDataModel.js\");\nfunction NestedArrayModel(props = {}) {\n    return function (BaseClass) {\n        return class BaseNestedArrayModel extends (0, NestedDataModel_1.NestedDataModel)(props)(BaseClass) {\n            get defaultValue() {\n                return [];\n            }\n            /**\n             * Returns a row of componments at the provided index.\n             * @param index The index of the row to return\n             */\n            row(index) {\n                return (index < this.rows.length) ? this.rows[index] : [];\n            }\n            /**\n             * Removes a row and detatches all components within that row.\n             *\n             * @param index The index of the row to remove.\n             */\n            removeRow(index) {\n                this.row(index).forEach((comp) => this.removeComponent(comp));\n                this.dataValue.splice(index, 1);\n                this.rows.splice(index, 1);\n            }\n            /**\n             * Adds a new row of components.\n             *\n             * @param data The data context to pass to this row of components.\n             */\n            addRow(data = {}, index = 0) {\n                const rowData = data;\n                this.dataValue[index] = rowData;\n                this.createRowComponents(rowData, index);\n            }\n            /**\n             * Sets the data for a specific row of components.\n             * @param rowData The data to set\n             * @param index The index of the rows to set the data within.\n             */\n            setRowData(rowData, index) {\n                var _a;\n                this.dataValue[index] = rowData;\n                (_a = this.row(index)) === null || _a === void 0 ? void 0 : _a.forEach((comp) => (comp.data = rowData));\n            }\n            /**\n             * Determines if the data within a row has changed.\n             *\n             * @param rowData\n             * @param index\n             */\n            rowChanged(rowData, index) {\n                var _a;\n                let changed = false;\n                (_a = this.row(index)) === null || _a === void 0 ? void 0 : _a.forEach((comp) => {\n                    const hasChanged = comp.hasChanged((0, lodash_1.get)(rowData, comp.component.key));\n                    changed = hasChanged || changed;\n                    if (hasChanged) {\n                        comp.bubble('change', comp);\n                    }\n                });\n                return changed;\n            }\n            /**\n             * Creates all components for each row.\n             * @param data\n             * @returns\n             */\n            createComponents(data) {\n                this.rows = [];\n                let added = [];\n                this.eachRowValue(data, (row, index) => {\n                    added = added.concat(this.createRowComponents(row, index));\n                });\n                return added;\n            }\n            /**\n             * Creates a new row of components.\n             *\n             * @param data The data context to pass along to this row of components.\n             */\n            createRowComponents(data, index = 0) {\n                const comps = super.createComponents(data, (comp) => {\n                    comp.rowIndex = index;\n                });\n                this.rows[index] = comps;\n                return comps;\n            }\n            getIndexes(value) {\n                if (super.getIndexes) {\n                    return super.getIndexes(value);\n                }\n                return {\n                    min: 0,\n                    max: (value.length - 1)\n                };\n            }\n            eachRowValue(value, fn) {\n                if (!value || !value.length) {\n                    return;\n                }\n                const indexes = this.getIndexes(value);\n                for (let i = indexes.min; i <= indexes.max; i++) {\n                    fn(value[i], i);\n                }\n            }\n            /**\n             * The empty value for this component.\n             *\n             * @return {array}\n             */\n            get emptyValue() {\n                return [];\n            }\n            /**\n             * Returns the dataValue for this component.\n             */\n            get dataValue() {\n                return this.component.key ? (0, lodash_1.get)(this.data, this.component.key) : this.data;\n            }\n            /**\n             * Set the datavalue of an array component.\n             *\n             * @param value The value to set this component to.\n             */\n            set dataValue(value) {\n                // Only set the value if it is an array.\n                if (Array.isArray(value)) {\n                    // Get the current data value.\n                    const dataValue = this.dataValue;\n                    this.eachRowValue(value, (row, index) => {\n                        if (index >= dataValue.length) {\n                            this.addRow(row, index);\n                        }\n                        this.setRowData(row, index);\n                    });\n                    // Remove superfluous rows.\n                    if (dataValue.length > value.length) {\n                        for (let i = dataValue.length - 1; i >= value.length; i--) {\n                            this.removeRow(i);\n                        }\n                    }\n                }\n            }\n            /**\n             * Determine if this array component has changed.\n             *\n             * @param value\n             */\n            hasChanged(value) {\n                const dataValue = this.dataValue;\n                // If the length changes, then this compnent has changed.\n                if (value.length !== dataValue.length) {\n                    this.emit('changed', this);\n                    return true;\n                }\n                let changed = false;\n                this.eachRowValue(value, (rowData, index) => {\n                    changed = this.rowChanged(rowData, index) || changed;\n                });\n                return changed;\n            }\n            /**\n             * Sets the value of an array component.\n             *\n             * @param value\n             */\n            setValue(value) {\n                var changed = false;\n                this.eachComponentValue(value, (comp, val) => {\n                    changed = comp.setValue(val) || changed;\n                });\n                return changed;\n            }\n        };\n    };\n}\nexports.NestedArrayModel = NestedArrayModel;\n;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/experimental/model/NestedArrayModel.js?");
 
 /***/ }),
 
@@ -420,7 +420,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.clearHiddenProcessInfo = exports.clearHiddenProcess = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst isParentHidden_1 = __webpack_require__(/*! ../utils/isParentHidden */ \"./node_modules/@formio/core/lib/utils/isParentHidden.js\");\n/**\n * This processor function checks components for the `hidden` property and unsets corresponding data\n */\nconst clearHiddenProcess = (context) => {\n    var _a;\n    const { component, data, path, value, scope } = context;\n    // No need to unset the value if it's undefined\n    if (value === undefined) {\n        return;\n    }\n    if (!scope.clearHidden) {\n        scope.clearHidden = {};\n    }\n    // Check if there's a conditional set for the component and if it's marked as conditionally hidden\n    const isConditionallyHidden = (_a = scope.conditionals) === null || _a === void 0 ? void 0 : _a.find((cond) => {\n        return path.includes(cond.path) && cond.conditionallyHidden;\n    });\n    const shouldClearValueWhenHidden = !component.hasOwnProperty('clearOnHide') || component.clearOnHide;\n    if (shouldClearValueWhenHidden && (isConditionallyHidden || (0, isParentHidden_1.isParentHidden)(component))) {\n        (0, lodash_1.unset)(data, path);\n        scope.clearHidden[path] = true;\n    }\n};\nexports.clearHiddenProcess = clearHiddenProcess;\nexports.clearHiddenProcessInfo = {\n    name: 'clearHidden',\n    shouldProcess: () => true,\n    processSync: exports.clearHiddenProcess,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/clearHidden.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.clearHiddenProcessInfo = exports.clearHiddenProcess = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst isParentHidden_1 = __webpack_require__(/*! ../utils/isParentHidden */ \"./node_modules/@formio/core/lib/utils/isParentHidden.js\");\n/**\n * This processor function checks components for the `hidden` property and unsets corresponding data\n */\nconst clearHiddenProcess = (context) => {\n    var _a;\n    const { component, data, path, value, scope } = context;\n    // No need to unset the value if it's undefined\n    if (value === undefined) {\n        return;\n    }\n    if (!scope.clearHidden) {\n        scope.clearHidden = {};\n    }\n    // Check if there's a conditional set for the component and if it's marked as conditionally hidden\n    const isConditionallyHidden = (_a = scope.conditionals) === null || _a === void 0 ? void 0 : _a.find((cond) => {\n        return path === cond.path && cond.conditionallyHidden;\n    });\n    const shouldClearValueWhenHidden = !component.hasOwnProperty('clearOnHide') || component.clearOnHide;\n    if (shouldClearValueWhenHidden && (isConditionallyHidden || (0, isParentHidden_1.isParentHidden)(component))) {\n        (0, lodash_1.unset)(data, path);\n        scope.clearHidden[path] = true;\n    }\n};\nexports.clearHiddenProcess = clearHiddenProcess;\nexports.clearHiddenProcessInfo = {\n    name: 'clearHidden',\n    shouldProcess: () => true,\n    processSync: exports.clearHiddenProcess,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/clearHidden.js?");
 
 /***/ }),
 
@@ -431,7 +431,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.conditionProcessInfo = exports.simpleConditionProcessInfo = exports.customConditionProcessInfo = exports.conditionProcessSync = exports.conditionProcess = exports.simpleConditionProcessSync = exports.simpleConditionProcess = exports.customConditionProcessSync = exports.customConditionProcess = exports.conditionalProcess = exports.isConditionallyHidden = exports.isSimpleConditionallyHidden = exports.isCustomConditionallyHidden = exports.hasConditions = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst conditions_1 = __webpack_require__(/*! ../../utils/conditions */ \"./node_modules/@formio/core/lib/utils/conditions.js\");\nconst hasCustomConditions = (context) => {\n    const { component } = context;\n    return !!component.customConditional;\n};\nconst hasSimpleConditions = (context) => {\n    const { component } = context;\n    const { conditional } = component;\n    if ((0, conditions_1.isLegacyConditional)(conditional) ||\n        (0, conditions_1.isSimpleConditional)(conditional) ||\n        (0, conditions_1.isJSONConditional)(conditional)) {\n        return true;\n    }\n    return false;\n};\nconst hasConditions = (context) => {\n    return hasSimpleConditions(context) || hasCustomConditions(context);\n};\nexports.hasConditions = hasConditions;\nconst isCustomConditionallyHidden = (context) => {\n    if (!hasCustomConditions(context)) {\n        return false;\n    }\n    const { component } = context;\n    const { customConditional } = component;\n    let show = null;\n    if (customConditional) {\n        show = (0, conditions_1.checkCustomConditional)(customConditional, context, 'show');\n    }\n    if (show === null) {\n        return false;\n    }\n    return !show;\n};\nexports.isCustomConditionallyHidden = isCustomConditionallyHidden;\nconst isSimpleConditionallyHidden = (context) => {\n    if (!hasSimpleConditions(context)) {\n        return false;\n    }\n    const { component } = context;\n    const { conditional } = component;\n    let show = null;\n    if ((0, conditions_1.isJSONConditional)(conditional)) {\n        show = (0, conditions_1.checkJsonConditional)(conditional, context);\n    }\n    if ((0, conditions_1.isLegacyConditional)(conditional)) {\n        show = (0, conditions_1.checkLegacyConditional)(conditional, context);\n    }\n    if ((0, conditions_1.isSimpleConditional)(conditional)) {\n        show = (0, conditions_1.checkSimpleConditional)(conditional, context);\n    }\n    if (show === null || show === undefined) {\n        return false;\n    }\n    return !show;\n};\nexports.isSimpleConditionallyHidden = isSimpleConditionallyHidden;\nconst isConditionallyHidden = (context) => {\n    return (0, exports.isCustomConditionallyHidden)(context) || (0, exports.isSimpleConditionallyHidden)(context);\n};\nexports.isConditionallyHidden = isConditionallyHidden;\nconst conditionalProcess = (context, isHidden) => {\n    const { component, row, scope, path } = context;\n    if (!(0, exports.hasConditions)(context)) {\n        return;\n    }\n    if (!scope.conditionals) {\n        scope.conditionals = [];\n    }\n    let conditionalComp = scope.conditionals.find((cond) => (cond.path === path));\n    if (!conditionalComp) {\n        conditionalComp = { path, conditionallyHidden: false };\n        scope.conditionals.push(conditionalComp);\n    }\n    conditionalComp.conditionallyHidden = conditionalComp.conditionallyHidden || isHidden(context);\n    if (conditionalComp.conditionallyHidden) {\n        (0, lodash_1.set)(component, 'hidden', true);\n    }\n};\nexports.conditionalProcess = conditionalProcess;\nconst customConditionProcess = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.customConditionProcessSync)(context);\n});\nexports.customConditionProcess = customConditionProcess;\nconst customConditionProcessSync = (context) => {\n    return (0, exports.conditionalProcess)(context, exports.isCustomConditionallyHidden);\n};\nexports.customConditionProcessSync = customConditionProcessSync;\nconst simpleConditionProcess = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.simpleConditionProcessSync)(context);\n});\nexports.simpleConditionProcess = simpleConditionProcess;\nconst simpleConditionProcessSync = (context) => {\n    return (0, exports.conditionalProcess)(context, exports.isSimpleConditionallyHidden);\n};\nexports.simpleConditionProcessSync = simpleConditionProcessSync;\nconst conditionProcess = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.conditionProcessSync)(context);\n});\nexports.conditionProcess = conditionProcess;\nconst conditionProcessSync = (context) => {\n    return (0, exports.conditionalProcess)(context, exports.isConditionallyHidden);\n};\nexports.conditionProcessSync = conditionProcessSync;\nexports.customConditionProcessInfo = {\n    name: 'customConditions',\n    process: exports.customConditionProcess,\n    processSync: exports.customConditionProcessSync,\n    shouldProcess: hasCustomConditions,\n};\nexports.simpleConditionProcessInfo = {\n    name: 'simpleConditions',\n    process: exports.simpleConditionProcess,\n    processSync: exports.simpleConditionProcessSync,\n    shouldProcess: hasSimpleConditions,\n};\nexports.conditionProcessInfo = {\n    name: 'conditions',\n    process: exports.conditionProcess,\n    processSync: exports.conditionProcessSync,\n    shouldProcess: hasSimpleConditions,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/conditions/index.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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.conditionProcessInfo = exports.simpleConditionProcessInfo = exports.customConditionProcessInfo = exports.conditionProcessSync = exports.conditionProcess = exports.simpleConditionProcessSync = exports.simpleConditionProcess = exports.customConditionProcessSync = exports.customConditionProcess = exports.conditionalProcess = exports.isConditionallyHidden = exports.isSimpleConditionallyHidden = exports.isCustomConditionallyHidden = exports.hasConditions = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst conditions_1 = __webpack_require__(/*! ../../utils/conditions */ \"./node_modules/@formio/core/lib/utils/conditions.js\");\nconst hasCustomConditions = (context) => {\n    const { component } = context;\n    return !!component.customConditional;\n};\nconst hasSimpleConditions = (context) => {\n    const { component } = context;\n    const { conditional } = component;\n    if ((0, conditions_1.isLegacyConditional)(conditional) ||\n        (0, conditions_1.isSimpleConditional)(conditional) ||\n        (0, conditions_1.isJSONConditional)(conditional)) {\n        return true;\n    }\n    return false;\n};\nconst hasConditions = (context) => {\n    return hasSimpleConditions(context) || hasCustomConditions(context);\n};\nexports.hasConditions = hasConditions;\nconst isCustomConditionallyHidden = (context) => {\n    if (!hasCustomConditions(context)) {\n        return false;\n    }\n    const { component } = context;\n    const { customConditional } = component;\n    let show = null;\n    if (customConditional) {\n        show = (0, conditions_1.checkCustomConditional)(customConditional, context, 'show');\n    }\n    if (show === null) {\n        return false;\n    }\n    return !show;\n};\nexports.isCustomConditionallyHidden = isCustomConditionallyHidden;\nconst isSimpleConditionallyHidden = (context) => {\n    if (!hasSimpleConditions(context)) {\n        return false;\n    }\n    const { component } = context;\n    const { conditional } = component;\n    let show = null;\n    if ((0, conditions_1.isJSONConditional)(conditional)) {\n        show = (0, conditions_1.checkJsonConditional)(conditional, context);\n    }\n    if ((0, conditions_1.isLegacyConditional)(conditional)) {\n        show = (0, conditions_1.checkLegacyConditional)(conditional, context);\n    }\n    if ((0, conditions_1.isSimpleConditional)(conditional)) {\n        show = (0, conditions_1.checkSimpleConditional)(conditional, context);\n    }\n    if (show === null || show === undefined) {\n        return false;\n    }\n    return !show;\n};\nexports.isSimpleConditionallyHidden = isSimpleConditionallyHidden;\nconst isConditionallyHidden = (context) => {\n    return (0, exports.isCustomConditionallyHidden)(context) || (0, exports.isSimpleConditionallyHidden)(context);\n};\nexports.isConditionallyHidden = isConditionallyHidden;\nconst conditionalProcess = (context, isHidden) => {\n    const { component, scope, path } = context;\n    if (!(0, exports.hasConditions)(context)) {\n        return;\n    }\n    if (!scope.conditionals) {\n        scope.conditionals = [];\n    }\n    let conditionalComp = scope.conditionals.find((cond) => (cond.path === path));\n    if (!conditionalComp) {\n        conditionalComp = { path, conditionallyHidden: false };\n        scope.conditionals.push(conditionalComp);\n    }\n    conditionalComp.conditionallyHidden = conditionalComp.conditionallyHidden || isHidden(context);\n    if (conditionalComp.conditionallyHidden) {\n        (0, lodash_1.set)(component, 'hidden', true);\n    }\n};\nexports.conditionalProcess = conditionalProcess;\nconst customConditionProcess = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.customConditionProcessSync)(context);\n});\nexports.customConditionProcess = customConditionProcess;\nconst customConditionProcessSync = (context) => {\n    return (0, exports.conditionalProcess)(context, exports.isCustomConditionallyHidden);\n};\nexports.customConditionProcessSync = customConditionProcessSync;\nconst simpleConditionProcess = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.simpleConditionProcessSync)(context);\n});\nexports.simpleConditionProcess = simpleConditionProcess;\nconst simpleConditionProcessSync = (context) => {\n    return (0, exports.conditionalProcess)(context, exports.isSimpleConditionallyHidden);\n};\nexports.simpleConditionProcessSync = simpleConditionProcessSync;\nconst conditionProcess = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.conditionProcessSync)(context);\n});\nexports.conditionProcess = conditionProcess;\nconst conditionProcessSync = (context) => {\n    return (0, exports.conditionalProcess)(context, exports.isConditionallyHidden);\n};\nexports.conditionProcessSync = conditionProcessSync;\nexports.customConditionProcessInfo = {\n    name: 'customConditions',\n    process: exports.customConditionProcess,\n    processSync: exports.customConditionProcessSync,\n    shouldProcess: hasCustomConditions,\n};\nexports.simpleConditionProcessInfo = {\n    name: 'simpleConditions',\n    process: exports.simpleConditionProcess,\n    processSync: exports.simpleConditionProcessSync,\n    shouldProcess: hasSimpleConditions,\n};\nexports.conditionProcessInfo = {\n    name: 'conditions',\n    process: exports.conditionProcess,\n    processSync: exports.conditionProcessSync,\n    shouldProcess: hasSimpleConditions,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/conditions/index.js?");
 
 /***/ }),
 
@@ -486,7 +486,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.hiddenChildrenProcessorInfo = exports.hiddenChildrenProcessorAsync = exports.hiddenChildrenProcessor = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst formUtil_1 = __webpack_require__(/*! ../utils/formUtil */ \"./node_modules/@formio/core/lib/utils/formUtil.js\");\n/**\n * This processor function checks components for the `hidden` property and, if children are present, sets them to hidden as well.\n */\nconst hiddenChildrenProcessor = (context) => {\n    var _a;\n    const { component, path, row, scope } = context;\n    // Check if there's a conditional set for the component and if it's marked as conditionally hidden\n    const isConditionallyHidden = (_a = scope.conditionals) === null || _a === void 0 ? void 0 : _a.find((cond) => {\n        return path.includes(cond.path) && cond.conditionallyHidden;\n    });\n    if (component.hidden && isConditionallyHidden) {\n        const info = (0, formUtil_1.componentInfo)(component);\n        if (info.hasColumns || info.hasComps || info.hasRows) {\n            // If this is a container component, we need to make the mutation to all the child components as well.\n            (0, formUtil_1.eachComponentData)([component], row, (comp, data, compRow, compPath) => {\n                var _a;\n                if (comp !== component) {\n                    // the path set here is not the absolute path, but the path relative to the parent component\n                    (_a = scope.conditionals) === null || _a === void 0 ? void 0 : _a.push({ path: (0, formUtil_1.getComponentPath)(comp, compPath), conditionallyHidden: true });\n                    (0, lodash_1.set)(comp, 'hidden', true);\n                }\n            });\n        }\n    }\n    else if (component.hidden) {\n        const info = (0, formUtil_1.componentInfo)(component);\n        if (info.hasColumns || info.hasComps || info.hasRows) {\n            // If this is a container component, we need to make the mutation to all the child components as well.\n            (0, formUtil_1.eachComponentData)([component], row, (comp, data, compRow, compPath) => {\n                if (comp !== component) {\n                    (0, lodash_1.set)(comp, 'hidden', true);\n                }\n            });\n        }\n    }\n};\nexports.hiddenChildrenProcessor = hiddenChildrenProcessor;\nconst hiddenChildrenProcessorAsync = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.hiddenChildrenProcessor)(context);\n});\nexports.hiddenChildrenProcessorAsync = hiddenChildrenProcessorAsync;\nexports.hiddenChildrenProcessorInfo = {\n    name: 'hiddenChildren',\n    shouldProcess: () => true,\n    processSync: exports.hiddenChildrenProcessor,\n    process: exports.hiddenChildrenProcessorAsync,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/hiddenChildren.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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.hiddenChildrenProcessorInfo = exports.hiddenChildrenProcessorAsync = exports.hiddenChildrenProcessor = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst formUtil_1 = __webpack_require__(/*! ../utils/formUtil */ \"./node_modules/@formio/core/lib/utils/formUtil.js\");\n/**\n * This processor function checks components for the `hidden` property and, if children are present, sets them to hidden as well.\n */\nconst hiddenChildrenProcessor = (context) => {\n    var _a;\n    const { component, path, row, scope } = context;\n    // Check if there's a conditional set for the component and if it's marked as conditionally hidden\n    const isConditionallyHidden = (_a = scope.conditionals) === null || _a === void 0 ? void 0 : _a.find((cond) => {\n        return path === cond.path && cond.conditionallyHidden;\n    });\n    if (component.hidden && isConditionallyHidden) {\n        const info = (0, formUtil_1.componentInfo)(component);\n        if (info.hasColumns || info.hasComps || info.hasRows) {\n            // If this is a container component, we need to make the mutation to all the child components as well.\n            (0, formUtil_1.eachComponentData)([component], row, (comp, data, compRow, compPath) => {\n                var _a;\n                if (comp !== component) {\n                    // the path set here is not the absolute path, but the path relative to the parent component\n                    (_a = scope.conditionals) === null || _a === void 0 ? void 0 : _a.push({ path: (0, formUtil_1.getComponentPath)(comp, compPath), conditionallyHidden: true });\n                    (0, lodash_1.set)(comp, 'hidden', true);\n                }\n            });\n        }\n    }\n    else if (component.hidden) {\n        const info = (0, formUtil_1.componentInfo)(component);\n        if (info.hasColumns || info.hasComps || info.hasRows) {\n            // If this is a container component, we need to make the mutation to all the child components as well.\n            (0, formUtil_1.eachComponentData)([component], row, (comp, data, compRow, compPath) => {\n                if (comp !== component) {\n                    (0, lodash_1.set)(comp, 'hidden', true);\n                }\n            });\n        }\n    }\n};\nexports.hiddenChildrenProcessor = hiddenChildrenProcessor;\nconst hiddenChildrenProcessorAsync = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.hiddenChildrenProcessor)(context);\n});\nexports.hiddenChildrenProcessorAsync = hiddenChildrenProcessorAsync;\nexports.hiddenChildrenProcessorInfo = {\n    name: 'hiddenChildren',\n    shouldProcess: () => true,\n    processSync: exports.hiddenChildrenProcessor,\n    process: exports.hiddenChildrenProcessorAsync,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/hiddenChildren.js?");
 
 /***/ }),
 
@@ -684,7 +684,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.validateDayInfo = exports.validateDaySync = exports.validateDay = exports.shouldValidate = void 0;\nconst error_1 = __webpack_require__(/*! ../../../error */ \"./node_modules/@formio/core/lib/error/index.js\");\nconst isLeapYear = (year) => {\n    // Year is leap if it is evenly divisible by 400 or evenly divisible by 4 and not evenly divisible by 100.\n    return !(year % 400) || (!!(year % 100) && !(year % 4));\n};\nconst getDaysInMonthCount = (month, year) => {\n    switch (month) {\n        case 1: // January\n        case 3: // March\n        case 5: // May\n        case 7: // July\n        case 8: // August\n        case 10: // October\n        case 12: // December\n            return 31;\n        case 4: // April\n        case 6: // June\n        case 9: // September\n        case 11: // November\n            return 30;\n        case 2: // February\n            return isLeapYear(year) ? 29 : 28;\n        default:\n            return 31;\n    }\n};\nconst isDayComponent = (component) => {\n    return component && component.type === 'day';\n};\nconst shouldValidate = (context) => {\n    const { component, value } = context;\n    if (!value) {\n        return false;\n    }\n    if (!isDayComponent(component)) {\n        return false;\n    }\n    return true;\n};\nexports.shouldValidate = shouldValidate;\nconst validateDay = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.validateDaySync)(context);\n});\nexports.validateDay = validateDay;\nconst validateDaySync = (context) => {\n    const { component, value } = context;\n    if (!(0, exports.shouldValidate)(context)) {\n        return null;\n    }\n    const error = new error_1.FieldError('invalidDay', context, 'day');\n    if (typeof value !== 'string') {\n        return error;\n    }\n    const [DAY, MONTH, YEAR] = component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n    const values = value.split('/').map((x) => parseInt(x, 10)), day = values[DAY], month = values[MONTH], year = values[YEAR], maxDay = getDaysInMonthCount(month, year);\n    if (isNaN(day) || day < 0 || day > maxDay) {\n        return error;\n    }\n    if (isNaN(month) || month < 0 || month > 12) {\n        return error;\n    }\n    if (isNaN(year) || year < 0 || year > 9999) {\n        return error;\n    }\n    return null;\n};\nexports.validateDaySync = validateDaySync;\nexports.validateDayInfo = {\n    name: 'validateDay',\n    process: exports.validateDay,\n    processSync: exports.validateDaySync,\n    shouldProcess: exports.shouldValidate\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/validation/rules/validateDay.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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.validateDayInfo = exports.validateDaySync = exports.validateDay = exports.shouldValidate = void 0;\nconst error_1 = __webpack_require__(/*! ../../../error */ \"./node_modules/@formio/core/lib/error/index.js\");\nconst isLeapYear = (year) => {\n    // Year is leap if it is evenly divisible by 400 or evenly divisible by 4 and not evenly divisible by 100.\n    return !(year % 400) || (!!(year % 100) && !(year % 4));\n};\nconst getDaysInMonthCount = (month, year) => {\n    switch (month) {\n        case 1: // January\n        case 3: // March\n        case 5: // May\n        case 7: // July\n        case 8: // August\n        case 10: // October\n        case 12: // December\n            return 31;\n        case 4: // April\n        case 6: // June\n        case 9: // September\n        case 11: // November\n            return 30;\n        case 2: // February\n            return isLeapYear(year) ? 29 : 28;\n        default:\n            return 31;\n    }\n};\nconst isDayComponent = (component) => {\n    return component && component.type === 'day';\n};\nconst shouldValidate = (context) => {\n    const { component, value } = context;\n    if (!value) {\n        return false;\n    }\n    if (!isDayComponent(component)) {\n        return false;\n    }\n    return true;\n};\nexports.shouldValidate = shouldValidate;\nconst validateDay = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.validateDaySync)(context);\n});\nexports.validateDay = validateDay;\nconst validateDaySync = (context) => {\n    const { component, value } = context;\n    if (!(0, exports.shouldValidate)(context) || !isDayComponent(component)) {\n        return null;\n    }\n    const error = new error_1.FieldError('invalidDay', context, 'day');\n    if (typeof value !== 'string') {\n        return error;\n    }\n    let [DAY, MONTH, YEAR] = component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n    const values = value.split('/').map((x) => parseInt(x, 10));\n    let day = values[DAY];\n    let month = values[MONTH];\n    let year = values[YEAR];\n    if (values.length !== 3) {\n        if (component.fields.day.hide) {\n            MONTH = MONTH === 0 ? 0 : MONTH - 1;\n            YEAR = YEAR - 1;\n            day = 0;\n            month = values[MONTH];\n            year = values[YEAR];\n        }\n        ;\n        if (component.fields.month.hide) {\n            DAY = DAY === 0 ? 0 : DAY - 1;\n            YEAR = YEAR - 1;\n            day = values[DAY];\n            month = 0;\n            year = values[YEAR];\n        }\n        ;\n        if (component.fields.year.hide) {\n            day = values[DAY];\n            month = values[MONTH];\n            year = 0;\n        }\n        ;\n    }\n    const maxDay = getDaysInMonthCount(month, year);\n    if (isNaN(day) || day < 0 || day > maxDay) {\n        return error;\n    }\n    if (isNaN(month) || month < 0 || month > 12) {\n        return error;\n    }\n    if (isNaN(year) || year < 0 || year > 9999) {\n        return error;\n    }\n    return null;\n};\nexports.validateDaySync = validateDaySync;\nexports.validateDayInfo = {\n    name: 'validateDay',\n    process: exports.validateDay,\n    processSync: exports.validateDaySync,\n    shouldProcess: exports.shouldValidate\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/validation/rules/validateDay.js?");
 
 /***/ }),
 
@@ -5017,7 +5017,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 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\"));\nclass Multivalue extends Field_1.default {\n    get dataValue() {\n        const parent = super.dataValue;\n        if (!parent && this.component.multiple) {\n            return [];\n        }\n        return parent;\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    useWrapper() {\n        return this.component.hasOwnProperty('multiple') && this.component.multiple;\n    }\n    /**\n     * @returns {Field} - The created field.\n     */\n    render() {\n        // If single value field.\n        if (!this.useWrapper()) {\n            return super.render(`<div ${this._referenceAttributeName}=\"element\">\n          ${this.renderElement(this.component.type !== 'hidden' ? this.dataValue : '')}\n        </div>`);\n        }\n        // Make sure dataValue is in the correct array format.\n        let dataValue = this.dataValue;\n        if (!Array.isArray(dataValue)) {\n            dataValue = dataValue ? [dataValue] : [];\n        }\n        // If multiple value field.\n        return super.render(this.renderTemplate('multiValueTable', {\n            rows: dataValue.map(this.renderRow.bind(this)).join(''),\n            disabled: this.disabled,\n            addAnother: this.addAnother,\n        }));\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\"));\nclass Multivalue extends Field_1.default {\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) {\n            if (Array.isArray(value)) {\n                if (value.length === 0) {\n                    return [this.emptyValue];\n                }\n                if (this.component.storeas === 'array') {\n                    return super.normalizeValue([value]);\n                }\n                return super.normalizeValue(value);\n            }\n            else {\n                return super.normalizeValue(value == null ? [this.emptyValue] : [value]);\n            }\n        }\n        else {\n            if (Array.isArray(value) && this.component.storeas !== 'array') {\n                if (this.component.storeas === 'string') {\n                    return super.normalizeValue(value.join(this.delimiter || ''));\n                }\n                return super.normalizeValue(value[0] || this.emptyValue);\n            }\n            else {\n                return super.normalizeValue(value);\n            }\n        }\n    }\n    get dataValue() {\n        return 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?");
 
 /***/ }),
 
@@ -5039,7 +5039,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Component_1 = __importDefault(__webpack_require__(/*! ../component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ../nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nclass NestedArrayComponent extends NestedDataComponent_1.default {\n    static schema(...extend) {\n        return NestedDataComponent_1.default.schema({\n            disableAddingRemovingRows: false\n        }, ...extend);\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.array];\n    }\n    componentContext(component) {\n        return this.iteratableRows[component.rowIndex].data;\n    }\n    get iteratableRows() {\n        throw new Error('Getter #iteratableRows() is not implemented');\n    }\n    get rowIndex() {\n        return super.rowIndex;\n    }\n    set rowIndex(value) {\n        this._rowIndex = value;\n    }\n    init() {\n        super.init();\n        this.prevHasAddButton = this.hasAddButton();\n    }\n    checkAddButtonChanged() {\n        const isAddButton = this.hasAddButton();\n        if (isAddButton !== this.prevHasAddButton) {\n            this.prevHasAddButton = isAddButton;\n            this.redraw();\n        }\n    }\n    checkData(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        this.checkAddButtonChanged();\n        return this.processRows('checkData', data, flags, Component_1.default.prototype.checkData.call(this, data, flags, row));\n    }\n    processRows(method, data, opts, defaultValue, silentCheck) {\n        return this.iteratableRows.reduce((valid, row, rowIndex) => {\n            if (!(opts === null || opts === void 0 ? void 0 : opts.rowIndex) || (opts === null || opts === void 0 ? void 0 : opts.rowIndex) === rowIndex) {\n                return this.processRow(method, data, opts, row.data, row.components, silentCheck) && valid;\n            }\n            else {\n                return valid;\n            }\n        }, defaultValue);\n    }\n    validate(data, flags = {}) {\n        data = data || this.data;\n        return this.validateComponents([this.component], data, flags);\n    }\n    checkRow(...args) {\n        console.log('Deprecation Warning: checkRow method has been replaced with processRow');\n        return this.processRow.call(this, ...args);\n    }\n    processRow(method, data, opts, row, components, silentCheck) {\n        if (opts === null || opts === void 0 ? void 0 : opts.isolateRow) {\n            silentCheck = true;\n            opts.noRefresh = true;\n        }\n        const valid = lodash_1.default.reduce(components, (valid, component) => component[method](data, opts, row, silentCheck) && valid, true);\n        if (opts === null || opts === void 0 ? void 0 : opts.noRefresh) {\n            delete opts.noRefresh;\n        }\n        return valid;\n    }\n    hasAddButton() {\n        const maxLength = lodash_1.default.get(this.component, 'validate.maxLength');\n        const conditionalAddButton = lodash_1.default.get(this.component, 'conditionalAddButton');\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            !this.options.preview &&\n            (!maxLength || (this.iteratableRows.length < maxLength)) &&\n            (!conditionalAddButton || this.evaluate(conditionalAddButton, {\n                value: this.dataValue,\n            }, 'show'));\n    }\n    getComponent(path, fn, originalPath) {\n        originalPath = originalPath || (0, utils_1.getStringFromComponentPath)(path);\n        if (this.componentsMap.hasOwnProperty(originalPath)) {\n            if (fn) {\n                return fn(this.componentsMap[originalPath]);\n            }\n            else {\n                return this.componentsMap[originalPath];\n            }\n        }\n        path = Array.isArray(path) ? path : [path];\n        let key = path.shift();\n        const remainingPath = path;\n        let result = [];\n        let possibleComp = null;\n        let comp = null;\n        let rowIndex = null;\n        if (lodash_1.default.isNumber(key)) {\n            rowIndex = key;\n            key = remainingPath.shift();\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                possibleComp = component;\n                if (remainingPath.length > 0 && 'getComponent' in component) {\n                    comp = component.getComponent(remainingPath, fn, originalPath);\n                }\n                else if (fn) {\n                    fn(component, components);\n                }\n                result = rowIndex !== null ? comp : result.concat(comp || possibleComp);\n            }\n        }, rowIndex);\n        if ((!result || result.length === 0) && possibleComp) {\n            result = rowIndex !== null ? possibleComp : [possibleComp];\n        }\n        return result;\n    }\n    everyComponent(fn, rowIndex, options = {}) {\n        if (lodash_1.default.isObject(rowIndex)) {\n            options = rowIndex;\n            rowIndex = null;\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            return;\n        }\n        const components = this.getComponents(rowIndex);\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    getValueAsString(value, options) {\n        var _a;\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <thead>\n            <tr>\n      `);\n            (_a = this.component.components) === null || _a === void 0 ? void 0 : _a.forEach((component) => {\n                const label = component.label || component.key;\n                result += `<th style=\"padding: 5px 10px;\">${label}</th>`;\n            });\n            result += (`\n          </tr>\n        </thead>\n        <tbody>\n      `);\n            this.iteratableRows.forEach(({ components }) => {\n                result += '<tr>';\n                lodash_1.default.each(components, (component) => {\n                    result += '<td style=\"padding:5px 10px;\">';\n                    if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                        result += component.getView(component.dataValue, options);\n                    }\n                    result += '</td>';\n                });\n                result += '</tr>';\n            });\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (!value || !value.length) {\n            return '';\n        }\n        return super.getValueAsString(value, options);\n    }\n    getComponents(rowIndex) {\n        if (rowIndex !== undefined && rowIndex !== null) {\n            if (!this.iteratableRows[rowIndex]) {\n                return [];\n            }\n            return this.iteratableRows[rowIndex].components;\n        }\n        return super.getComponents();\n    }\n}\nexports[\"default\"] = NestedArrayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Component_1 = __importDefault(__webpack_require__(/*! ../component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ../nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nclass NestedArrayComponent extends NestedDataComponent_1.default {\n    static schema(...extend) {\n        return NestedDataComponent_1.default.schema({\n            disableAddingRemovingRows: false\n        }, ...extend);\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.array];\n    }\n    componentContext(component) {\n        return this.iteratableRows[component.rowIndex].data;\n    }\n    get iteratableRows() {\n        throw new Error('Getter #iteratableRows() is not implemented');\n    }\n    get rowIndex() {\n        return super.rowIndex;\n    }\n    set rowIndex(value) {\n        this._rowIndex = value;\n    }\n    init() {\n        super.init();\n        this.prevHasAddButton = this.hasAddButton();\n    }\n    checkAddButtonChanged() {\n        const isAddButton = this.hasAddButton();\n        if (isAddButton !== this.prevHasAddButton) {\n            this.prevHasAddButton = isAddButton;\n            this.redraw();\n        }\n    }\n    checkData(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        this.checkAddButtonChanged();\n        return this.processRows('checkData', data, flags, Component_1.default.prototype.checkData.call(this, data, flags, row));\n    }\n    processRows(method, data, opts, defaultValue, silentCheck) {\n        return this.iteratableRows.reduce((valid, row, rowIndex) => {\n            if (!(opts === null || opts === void 0 ? void 0 : opts.rowIndex) || (opts === null || opts === void 0 ? void 0 : opts.rowIndex) === rowIndex) {\n                return this.processRow(method, data, opts, row.data, row.components, silentCheck) && valid;\n            }\n            else {\n                return valid;\n            }\n        }, defaultValue);\n    }\n    validate(data, flags = {}) {\n        data = data || this.data;\n        return this.validateComponents([this.component], data, flags);\n    }\n    checkRow(...args) {\n        console.log('Deprecation Warning: checkRow method has been replaced with processRow');\n        return this.processRow.call(this, ...args);\n    }\n    processRow(method, data, opts, row, components, silentCheck) {\n        if (opts === null || opts === void 0 ? void 0 : opts.isolateRow) {\n            silentCheck = true;\n            opts.noRefresh = true;\n        }\n        const valid = lodash_1.default.reduce(components, (valid, component) => component[method](data, opts, row, silentCheck) && valid, true);\n        if (opts === null || opts === void 0 ? void 0 : opts.noRefresh) {\n            delete opts.noRefresh;\n        }\n        return valid;\n    }\n    hasAddButton() {\n        const maxLength = lodash_1.default.get(this.component, 'validate.maxLength');\n        const conditionalAddButton = lodash_1.default.get(this.component, 'conditionalAddButton');\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            !this.options.preview &&\n            (!maxLength || (this.iteratableRows.length < maxLength)) &&\n            (!conditionalAddButton || this.evaluate(conditionalAddButton, {\n                value: this.dataValue,\n            }, 'show'));\n    }\n    getComponent(path, fn, originalPath) {\n        originalPath = originalPath || (0, utils_1.getStringFromComponentPath)(path);\n        if (this.componentsMap.hasOwnProperty(originalPath)) {\n            if (fn) {\n                return fn(this.componentsMap[originalPath]);\n            }\n            else {\n                return this.componentsMap[originalPath];\n            }\n        }\n        path = Array.isArray(path) ? path : [path];\n        let key = path.shift();\n        const remainingPath = path;\n        let result = [];\n        let possibleComp = null;\n        let comp = null;\n        let rowIndex = null;\n        if (lodash_1.default.isNumber(key)) {\n            rowIndex = key;\n            key = remainingPath.shift();\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                possibleComp = component;\n                if (remainingPath.length > 0 && 'getComponent' in component) {\n                    comp = component.getComponent(remainingPath, fn, originalPath);\n                }\n                else if (fn) {\n                    fn(component, components);\n                }\n                result = rowIndex !== null ? comp : result.concat(comp || possibleComp);\n            }\n        }, rowIndex);\n        if ((!result || result.length === 0) && possibleComp) {\n            result = rowIndex !== null ? possibleComp : [possibleComp];\n        }\n        return result;\n    }\n    everyComponent(fn, rowIndex, options = {}) {\n        if (lodash_1.default.isObject(rowIndex)) {\n            options = rowIndex;\n            rowIndex = null;\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            return;\n        }\n        const components = this.getComponents(rowIndex);\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    getValueAsString(value, options) {\n        var _a;\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <thead>\n            <tr>\n      `);\n            (_a = this.component.components) === null || _a === void 0 ? void 0 : _a.forEach((component) => {\n                const label = component.label || component.key;\n                result += `<th style=\"padding: 5px 10px;\">${label}</th>`;\n            });\n            result += (`\n          </tr>\n        </thead>\n        <tbody>\n      `);\n            this.iteratableRows.forEach(({ components }) => {\n                result += '<tr>';\n                lodash_1.default.each(components, (component) => {\n                    result += '<td style=\"padding:5px 10px;\">';\n                    if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                        result += component.getView(component.dataValue, options);\n                    }\n                    result += '</td>';\n                });\n                result += '</tr>';\n            });\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (!value || !value.length) {\n            return '';\n        }\n        return super.getValueAsString(value, options);\n    }\n    getComponents(rowIndex) {\n        if (rowIndex !== undefined && rowIndex !== null) {\n            if (!this.iteratableRows[rowIndex]) {\n                return [];\n            }\n            return this.iteratableRows[rowIndex].components;\n        }\n        return super.getComponents();\n    }\n    removeSubmissionMetadataRow(index) {\n        const componentMetadata = lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, null);\n        if (lodash_1.default.isArray(componentMetadata)) {\n            componentMetadata.splice(index, 1);\n        }\n    }\n}\nexports[\"default\"] = NestedArrayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js?");
 
 /***/ }),
 
@@ -5061,7 +5061,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 }));\nexports.AddressComponentMode = void 0;\nconst autocompleter_1 = __importDefault(__webpack_require__(/*! autocompleter */ \"./node_modules/autocompleter/autocomplete.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst GoogleAddressProvider_1 = __webpack_require__(/*! ../../providers/address/GoogleAddressProvider */ \"./lib/cjs/providers/address/GoogleAddressProvider.js\");\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst NestedComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst Container_1 = __importDefault(__webpack_require__(/*! ../container/Container */ \"./lib/cjs/components/container/Container.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nexports.AddressComponentMode = {\n    Autocomplete: 'autocomplete',\n    Manual: 'manual',\n};\nconst RemoveValueIconHiddenClass = 'address-autocomplete-remove-value-icon--hidden';\nconst ChildConditional = 'show = _.get(instance, \\'parent.manualMode\\', false);';\nclass AddressComponent extends Container_1.default {\n    static schema(...extend) {\n        return Container_1.default.schema({\n            type: 'address',\n            label: 'Address',\n            key: 'address',\n            switchToManualModeLabel: 'Can\\'t find address? Switch to manual mode.',\n            provider: '',\n            providerOptions: {},\n            manualModeViewString: '',\n            hideLabel: false,\n            disableClearIcon: false,\n            enableManualMode: false,\n            components: [\n                {\n                    label: 'Address 1',\n                    tableView: false,\n                    key: 'address1',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Address 2',\n                    tableView: false,\n                    key: 'address2',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'City',\n                    tableView: false,\n                    key: 'city',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'State',\n                    tableView: false,\n                    key: 'state',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Country',\n                    tableView: false,\n                    key: 'country',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Zip Code',\n                    tableView: false,\n                    key: 'zip',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n            ],\n        }, ...extend);\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    static get builderInfo() {\n        return {\n            title: 'Address',\n            group: 'advanced',\n            icon: 'home',\n            documentation: '/userguide/form-building/advanced-components#address',\n            weight: 35,\n            schema: AddressComponent.schema(),\n        };\n    }\n    mergeSchema(component = {}) {\n        let { defaultSchema } = this;\n        if (component.components) {\n            defaultSchema = lodash_1.default.omit(defaultSchema, 'components');\n        }\n        return lodash_1.default.defaultsDeep(component, defaultSchema);\n    }\n    init() {\n        this.components = this.components || [];\n        if (this.builderMode || this.manualModeEnabled) {\n            NestedComponent_1.default.prototype.addComponents.call(this, this.manualMode ? this.address : {});\n        }\n        Field_1.default.prototype.init.call(this);\n        if (!this.builderMode) {\n            if (this.component.provider) {\n                const { provider, providerOptions, } = this.component;\n                if (lodash_1.default.get(providerOptions, 'params.subscriptionKey')) {\n                    lodash_1.default.set(providerOptions, \"params['subscription-key']\", lodash_1.default.get(providerOptions, 'params.subscriptionKey'));\n                    lodash_1.default.unset(providerOptions, 'params.subscriptionKey');\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n            else if (this.component.map) {\n                // Fallback to legacy version where Google Maps was the only provider.\n                this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;\n                this.component.providerOptions = this.component.providerOptions || {};\n                const { map, provider, providerOptions, } = this.component;\n                const { key, region, } = map;\n                if (key) {\n                    lodash_1.default.set(providerOptions, 'params.key', key);\n                }\n                if (region) {\n                    lodash_1.default.set(providerOptions, 'params.region', region);\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n    }\n    initializeProvider(provider, options = {}) {\n        const url = this.interpolate(options.url);\n        const Provider = Formio_1.Formio.Providers.getProvider('address', provider);\n        return new Provider(Object.assign(Object.assign({}, options), { url }));\n    }\n    get emptyValue() {\n        return this.manualModeEnabled\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: {},\n            }\n            : {};\n    }\n    get mode() {\n        var _a, _b;\n        if (!this.manualModeEnabled) {\n            return exports.AddressComponentMode.Autocomplete;\n        }\n        return (_b = (_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : exports.AddressComponentMode.Autocomplete;\n    }\n    set mode(value) {\n        if (this.manualModeEnabled) {\n            this.dataValue.mode = value;\n        }\n    }\n    get autocompleteMode() {\n        return this.mode === exports.AddressComponentMode.Autocomplete;\n    }\n    get manualMode() {\n        return this.mode === exports.AddressComponentMode.Manual;\n    }\n    get manualModeEnabled() {\n        return !this.isMultiple && Boolean(this.component.enableManualMode);\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            component.data = this.address;\n            component.setValue(component.dataValue, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    get isMultiple() {\n        return Boolean(this.component.multiple);\n    }\n    get address() {\n        if (this.isMultiple) {\n            return lodash_1.default.isArray(this.dataValue) ? this.dataValue : [this.dataValue];\n        }\n        // Manual mode is not implementing for multiple value\n        return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;\n    }\n    set address(value) {\n        if (this.manualModeEnabled && !this.isMultiple) {\n            this.dataValue.address = value;\n        }\n        else {\n            this.dataValue = value;\n        }\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (this.isMultiple) {\n            defaultValue = lodash_1.default.isArray(defaultValue) ? defaultValue : [defaultValue];\n        }\n        return defaultValue;\n    }\n    get defaultSchema() {\n        return AddressComponent.schema();\n    }\n    isValueInLegacyFormat(value) {\n        return value && !value.mode;\n    }\n    normalizeValue(value) {\n        return (this.manualModeEnabled && this.isValueInLegacyFormat(value))\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: value,\n            }\n            : value;\n    }\n    setValue(value, flags = {}) {\n        const changed = Field_1.default.prototype.setValue.call(this, value, flags);\n        if (this.manualMode) {\n            this.restoreComponentsContext();\n        }\n        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission) {\n            this.redraw();\n        }\n        return changed;\n    }\n    static get modeSwitcherRef() {\n        return 'modeSwitcher';\n    }\n    static get removeValueIconRef() {\n        return 'removeValueIcon';\n    }\n    static get searchInputRef() {\n        return 'searchInput';\n    }\n    static get addRowButtonRef() {\n        return 'addButton';\n    }\n    static get removeRowButtonRef() {\n        return 'removeRow';\n    }\n    get modeSwitcher() {\n        return this.refs\n            ? (this.refs[AddressComponent.modeSwitcherRef] || null)\n            : null;\n    }\n    get removeValueIcon() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeValueIconRef] || null)\n            : null;\n    }\n    get searchInput() {\n        return this.refs\n            ? (this.refs[AddressComponent.searchInputRef] || null)\n            : null;\n    }\n    get addRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.addRowButtonRef] || null)\n            : null;\n    }\n    get removeRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeRowButtonRef] || null)\n            : null;\n    }\n    get searchInputAttributes() {\n        const attr = {\n            name: this.options.name,\n            type: 'text',\n            class: 'form-control',\n            lang: this.options.language,\n            tabindex: this.component.tabindex || 0,\n        };\n        if (this.component.placeholder) {\n            attr.placeholder = this.t(this.component.placeholder), { _userInput: true };\n        }\n        if (this.disabled) {\n            attr.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attr, this.component.attributes);\n        return attr;\n    }\n    get templateName() {\n        return 'address';\n    }\n    get gridTemplateName() {\n        return 'multiValueTable';\n    }\n    get rowTemplateName() {\n        return 'multiValueRow';\n    }\n    get hasChildren() {\n        return !this.isMultiple && (this.builderMode || this.manualModeEnabled);\n    }\n    get addAnother() {\n        return this.t(this.component.addAnother || 'Add Another');\n    }\n    renderElement(value) {\n        return this.renderTemplate(this.templateName, {\n            children: this.hasChildren ? this.renderComponents() : '',\n            nestedKey: this.nestedKey,\n            inputAttributes: this.searchInputAttributes,\n            ref: {\n                modeSwitcher: AddressComponent.modeSwitcherRef,\n                removeValueIcon: AddressComponent.removeValueIconRef,\n                searchInput: AddressComponent.searchInputRef,\n            },\n            displayValue: this.getDisplayValue(value),\n            mode: {\n                autocomplete: this.autocompleteMode,\n                manual: this.manualMode,\n            },\n        });\n    }\n    renderRow(value, index) {\n        return this.renderTemplate(this.rowTemplateName, {\n            index,\n            disabled: this.disabled,\n            element: `${this.renderElement(value, index)}`,\n        });\n    }\n    renderGrid() {\n        return this.renderTemplate(this.gridTemplateName, {\n            rows: this.address.map(this.renderRow.bind(this)).join(''),\n            disabled: this.disabled,\n            addAnother: this.addAnother,\n        });\n    }\n    render() {\n        if (this.isMultiple) {\n            return super.render(this.renderGrid());\n        }\n        return super.render(this.renderElement());\n    }\n    onSelectAddress(address, element, index) {\n        if (this.isMultiple) {\n            this.address[index] = address;\n            this.address = [...this.address];\n        }\n        else {\n            this.address = address;\n        }\n        this.triggerChange({\n            modified: true,\n        });\n        if (element) {\n            element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n        }\n        this.updateRemoveIcon(index);\n    }\n    addRow() {\n        this.address = this.address.concat(this.emptyValue);\n        super.redraw();\n    }\n    attach(element) {\n        const result = ((this.builderMode || this.manualMode) ? super.attach : Field_1.default.prototype.attach).call(this, element);\n        if (!this.builderMode) {\n            if (!this.provider && this.component.provider) {\n                const { provider, providerOptions, } = this.component;\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n        this.loadRefs(element, {\n            [AddressComponent.addRowButtonRef]: 'single',\n            [AddressComponent.modeSwitcherRef]: 'single',\n            [AddressComponent.removeRowButtonRef]: 'multiple',\n            [AddressComponent.removeValueIconRef]: 'multiple',\n            [AddressComponent.searchInputRef]: 'multiple',\n        });\n        this.searchInput.forEach((element, index) => {\n            if (!this.builderMode && element && this.provider) {\n                if (this.component.provider === 'google') {\n                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this));\n                }\n                else {\n                    (0, autocompleter_1.default)({\n                        input: element,\n                        debounceWaitMs: 300,\n                        fetch: (text, update) => {\n                            const query = text;\n                            this.provider.search(query).then(update);\n                        },\n                        render: (address) => {\n                            const div = this.ce('div');\n                            div.textContent = this.getDisplayValue(address);\n                            return div;\n                        },\n                        onSelect: (address) => {\n                            this.onSelectAddress(address, element, index);\n                        },\n                    });\n                }\n                this.addEventListener(element, 'blur', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (element.value) {\n                        element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n                    }\n                });\n                this.addEventListener(element, 'keyup', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (!element.value) {\n                        this.clearAddress(element, index);\n                    }\n                });\n            }\n        });\n        if (this.addRowButton) {\n            this.addEventListener(this.addRowButton, 'click', event => {\n                event.preventDefault();\n                this.addRow();\n            });\n        }\n        this.removeRowButton.forEach((removeRowButton, index) => {\n            this.addEventListener(removeRowButton, 'click', event => {\n                event.preventDefault();\n                this.removeValue(index);\n            });\n        });\n        if (this.modeSwitcher) {\n            this.addEventListener(this.modeSwitcher, 'change', () => {\n                if (!this.modeSwitcher) {\n                    return;\n                }\n                this.dataValue = this.emptyValue;\n                this.mode = this.modeSwitcher.checked\n                    ? exports.AddressComponentMode.Manual\n                    : exports.AddressComponentMode.Autocomplete;\n                if (!this.builderMode) {\n                    if (this.manualMode) {\n                        this.restoreComponentsContext();\n                    }\n                    this.triggerChange({\n                        modified: true,\n                    });\n                }\n                this.redraw();\n            });\n        }\n        if (!this.builderMode) {\n            this.removeValueIcon.forEach((removeValueIcon, index) => {\n                this.updateRemoveIcon(index);\n                const removeValueHandler = () => {\n                    var _a;\n                    const searchInput = (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a[index];\n                    this.clearAddress(searchInput, index);\n                    if (searchInput) {\n                        searchInput.focus();\n                    }\n                };\n                this.addEventListener(removeValueIcon, 'click', removeValueHandler);\n                this.addEventListener(removeValueIcon, 'keydown', ({ key }) => {\n                    if (key === 'Enter') {\n                        removeValueHandler();\n                    }\n                });\n            });\n            lodash_1.default.each(this.refs.searchInput || [], el => this.addFocusBlurEvents(el));\n        }\n        return result;\n    }\n    addChildComponent(component) {\n        component.customConditional = ChildConditional;\n    }\n    redraw() {\n        const modeSwitcherInFocus = (this.modeSwitcher && (document.activeElement === this.modeSwitcher));\n        return super.redraw()\n            .then((result) => {\n            if (modeSwitcherInFocus && this.modeSwitcher) {\n                this.modeSwitcher.focus();\n            }\n            return result;\n        });\n    }\n    clearAddress(element, index) {\n        var _a;\n        if (!this.isEmpty()) {\n            this.triggerChange();\n        }\n        if ((_a = this.address) === null || _a === void 0 ? void 0 : _a[index]) {\n            this.address[index] = this.emptyValue;\n        }\n        else {\n            this.address = this.emptyValue;\n        }\n        if (element) {\n            element.value = '';\n        }\n        this.updateRemoveIcon(index);\n    }\n    getDisplayValue(value = this.address) {\n        return (this.provider && !this.manualMode)\n            ? this.provider.getDisplayValue(value)\n            : '';\n    }\n    validateMultiple() {\n        return this.isMultiple;\n    }\n    updateRemoveIcon(index) {\n        var _a;\n        const removeValueIcon = (_a = this.removeValueIcon) === null || _a === void 0 ? void 0 : _a[index];\n        if (removeValueIcon) {\n            const value = this.isMultiple ? this.address[index] : this.address;\n            if (this.isEmpty(value) || this.disabled) {\n                this.addClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n            else {\n                this.removeClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n        }\n    }\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        const normalizedValue = this.normalizeValue(value);\n        const { address, mode, } = (this.manualModeEnabled\n            ? normalizedValue\n            : {\n                address: normalizedValue,\n                mode: exports.AddressComponentMode.Autocomplete,\n            });\n        const valueInManualMode = (mode === exports.AddressComponentMode.Manual);\n        if (this.provider && !valueInManualMode) {\n            return this.getDisplayValue(address);\n        }\n        if (valueInManualMode) {\n            if (this.component.manualModeViewString) {\n                return this.interpolate(this.component.manualModeViewString, {\n                    address,\n                    data: this.data,\n                    component: this.component,\n                });\n            }\n            return this.getComponents()\n                .filter((component) => component.hasValue(address))\n                .map((component) => [component, lodash_1.default.get(address, component.key)])\n                .filter(([component, componentValue]) => !component.isEmpty(componentValue))\n                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))\n                .join(', ');\n        }\n        return super.getValueAsString(address, options);\n    }\n    focus() {\n        if (this.searchInput && this.searchInput[0]) {\n            this.searchInput[0].focus();\n        }\n    }\n}\nexports[\"default\"] = AddressComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/address/Address.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.AddressComponentMode = void 0;\nconst autocompleter_1 = __importDefault(__webpack_require__(/*! autocompleter */ \"./node_modules/autocompleter/autocomplete.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst GoogleAddressProvider_1 = __webpack_require__(/*! ../../providers/address/GoogleAddressProvider */ \"./lib/cjs/providers/address/GoogleAddressProvider.js\");\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst NestedComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst Container_1 = __importDefault(__webpack_require__(/*! ../container/Container */ \"./lib/cjs/components/container/Container.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nexports.AddressComponentMode = {\n    Autocomplete: 'autocomplete',\n    Manual: 'manual',\n};\nconst RemoveValueIconHiddenClass = 'address-autocomplete-remove-value-icon--hidden';\nconst ChildConditional = 'show = _.get(instance, \\'parent.manualMode\\', false);';\nclass AddressComponent extends Container_1.default {\n    static schema(...extend) {\n        return Container_1.default.schema({\n            type: 'address',\n            label: 'Address',\n            key: 'address',\n            switchToManualModeLabel: 'Can\\'t find address? Switch to manual mode.',\n            provider: '',\n            providerOptions: {},\n            manualModeViewString: '',\n            hideLabel: false,\n            disableClearIcon: false,\n            enableManualMode: false,\n            components: [\n                {\n                    label: 'Address 1',\n                    tableView: false,\n                    key: 'address1',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Address 2',\n                    tableView: false,\n                    key: 'address2',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'City',\n                    tableView: false,\n                    key: 'city',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'State',\n                    tableView: false,\n                    key: 'state',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Country',\n                    tableView: false,\n                    key: 'country',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Zip Code',\n                    tableView: false,\n                    key: 'zip',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n            ],\n        }, ...extend);\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    static get builderInfo() {\n        return {\n            title: 'Address',\n            group: 'advanced',\n            icon: 'home',\n            documentation: '/userguide/form-building/advanced-components#address',\n            weight: 35,\n            schema: AddressComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return AddressComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    mergeSchema(component = {}) {\n        let { defaultSchema } = this;\n        if (component.components) {\n            defaultSchema = lodash_1.default.omit(defaultSchema, 'components');\n        }\n        return lodash_1.default.defaultsDeep(component, defaultSchema);\n    }\n    init() {\n        this.components = this.components || [];\n        if (this.builderMode || this.manualModeEnabled) {\n            NestedComponent_1.default.prototype.addComponents.call(this, this.manualMode ? this.address : {});\n        }\n        Field_1.default.prototype.init.call(this);\n        if (!this.builderMode) {\n            if (this.component.provider) {\n                const { provider, providerOptions, } = this.component;\n                if (lodash_1.default.get(providerOptions, 'params.subscriptionKey')) {\n                    lodash_1.default.set(providerOptions, \"params['subscription-key']\", lodash_1.default.get(providerOptions, 'params.subscriptionKey'));\n                    lodash_1.default.unset(providerOptions, 'params.subscriptionKey');\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n            else if (this.component.map) {\n                // Fallback to legacy version where Google Maps was the only provider.\n                this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;\n                this.component.providerOptions = this.component.providerOptions || {};\n                const { map, provider, providerOptions, } = this.component;\n                const { key, region, } = map;\n                if (key) {\n                    lodash_1.default.set(providerOptions, 'params.key', key);\n                }\n                if (region) {\n                    lodash_1.default.set(providerOptions, 'params.region', region);\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n    }\n    initializeProvider(provider, options = {}) {\n        const url = this.interpolate(options.url);\n        const Provider = Formio_1.Formio.Providers.getProvider('address', provider);\n        return new Provider(Object.assign(Object.assign({}, options), { url }));\n    }\n    get emptyValue() {\n        return this.manualModeEnabled\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: {},\n            }\n            : {};\n    }\n    get mode() {\n        var _a, _b;\n        if (!this.manualModeEnabled) {\n            return exports.AddressComponentMode.Autocomplete;\n        }\n        return (_b = (_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : exports.AddressComponentMode.Autocomplete;\n    }\n    set mode(value) {\n        if (this.manualModeEnabled) {\n            this.dataValue.mode = value;\n        }\n    }\n    get autocompleteMode() {\n        return this.mode === exports.AddressComponentMode.Autocomplete;\n    }\n    get manualMode() {\n        return this.mode === exports.AddressComponentMode.Manual;\n    }\n    get manualModeEnabled() {\n        return !this.isMultiple && Boolean(this.component.enableManualMode);\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            component.data = this.address;\n            component.setValue(component.dataValue, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    get isMultiple() {\n        return Boolean(this.component.multiple);\n    }\n    get address() {\n        if (this.isMultiple) {\n            return lodash_1.default.isArray(this.dataValue) ? this.dataValue : [this.dataValue];\n        }\n        // Manual mode is not implementing for multiple value\n        return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;\n    }\n    set address(value) {\n        if (this.manualModeEnabled && !this.isMultiple && !lodash_1.default.isEqual(value, this.emptyValue)) {\n            this.dataValue.address = value;\n        }\n        else {\n            this.dataValue = value;\n        }\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (this.isMultiple) {\n            defaultValue = lodash_1.default.isArray(defaultValue) ? defaultValue : [defaultValue];\n        }\n        return defaultValue;\n    }\n    get defaultSchema() {\n        return AddressComponent.schema();\n    }\n    isValueInLegacyFormat(value) {\n        return value && !value.mode;\n    }\n    normalizeValue(value) {\n        return (this.manualModeEnabled && this.isValueInLegacyFormat(value))\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: value,\n            }\n            : value;\n    }\n    setValue(value, flags = {}) {\n        const changed = Field_1.default.prototype.setValue.call(this, value, flags);\n        if (this.manualMode) {\n            this.restoreComponentsContext();\n        }\n        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission) {\n            this.redraw();\n        }\n        return changed;\n    }\n    static get modeSwitcherRef() {\n        return 'modeSwitcher';\n    }\n    static get removeValueIconRef() {\n        return 'removeValueIcon';\n    }\n    static get searchInputRef() {\n        return 'searchInput';\n    }\n    static get addRowButtonRef() {\n        return 'addButton';\n    }\n    static get removeRowButtonRef() {\n        return 'removeRow';\n    }\n    get modeSwitcher() {\n        return this.refs\n            ? (this.refs[AddressComponent.modeSwitcherRef] || null)\n            : null;\n    }\n    get removeValueIcon() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeValueIconRef] || null)\n            : null;\n    }\n    get searchInput() {\n        return this.refs\n            ? (this.refs[AddressComponent.searchInputRef] || null)\n            : null;\n    }\n    get addRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.addRowButtonRef] || null)\n            : null;\n    }\n    get removeRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeRowButtonRef] || null)\n            : null;\n    }\n    get searchInputAttributes() {\n        const attr = {\n            name: this.options.name,\n            type: 'text',\n            class: 'form-control',\n            lang: this.options.language,\n            tabindex: this.component.tabindex || 0,\n        };\n        if (this.component.placeholder) {\n            attr.placeholder = this.t(this.component.placeholder), { _userInput: true };\n        }\n        if (this.disabled) {\n            attr.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attr, this.component.attributes);\n        return attr;\n    }\n    get templateName() {\n        return 'address';\n    }\n    get gridTemplateName() {\n        return 'multiValueTable';\n    }\n    get rowTemplateName() {\n        return 'multiValueRow';\n    }\n    get hasChildren() {\n        return !this.isMultiple && (this.builderMode || this.manualModeEnabled);\n    }\n    get addAnother() {\n        return this.t(this.component.addAnother || 'Add Another');\n    }\n    renderElement(value) {\n        return this.renderTemplate(this.templateName, {\n            children: this.hasChildren ? this.renderComponents() : '',\n            nestedKey: this.nestedKey,\n            inputAttributes: this.searchInputAttributes,\n            ref: {\n                modeSwitcher: AddressComponent.modeSwitcherRef,\n                removeValueIcon: AddressComponent.removeValueIconRef,\n                searchInput: AddressComponent.searchInputRef,\n            },\n            displayValue: this.getDisplayValue(value),\n            mode: {\n                autocomplete: this.autocompleteMode,\n                manual: this.manualMode,\n            },\n        });\n    }\n    renderRow(value, index) {\n        return this.renderTemplate(this.rowTemplateName, {\n            index,\n            disabled: this.disabled,\n            element: `${this.renderElement(value, index)}`,\n        });\n    }\n    renderGrid() {\n        return this.renderTemplate(this.gridTemplateName, {\n            rows: this.address.map(this.renderRow.bind(this)).join(''),\n            disabled: this.disabled,\n            addAnother: this.addAnother,\n        });\n    }\n    render() {\n        if (this.isMultiple) {\n            return super.render(this.renderGrid());\n        }\n        return super.render(this.renderElement());\n    }\n    onSelectAddress(address, element, index) {\n        if (this.isMultiple) {\n            this.address[index] = address;\n            this.address = [...this.address];\n        }\n        else {\n            this.address = address;\n        }\n        this.triggerChange({\n            modified: true,\n        });\n        if (element) {\n            element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n        }\n        this.updateRemoveIcon(index);\n    }\n    addRow() {\n        this.address = this.address.concat(this.emptyValue);\n        super.redraw();\n    }\n    attach(element) {\n        const result = ((this.builderMode || this.manualMode) ? super.attach : Field_1.default.prototype.attach).call(this, element);\n        if (!this.builderMode) {\n            if (!this.provider && this.component.provider) {\n                const { provider, providerOptions, } = this.component;\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n        this.loadRefs(element, {\n            [AddressComponent.addRowButtonRef]: 'single',\n            [AddressComponent.modeSwitcherRef]: 'single',\n            [AddressComponent.removeRowButtonRef]: 'multiple',\n            [AddressComponent.removeValueIconRef]: 'multiple',\n            [AddressComponent.searchInputRef]: 'multiple',\n        });\n        this.searchInput.forEach((element, index) => {\n            if (!this.builderMode && element && this.provider) {\n                if (this.component.provider === 'google') {\n                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this));\n                }\n                else {\n                    (0, autocompleter_1.default)({\n                        input: element,\n                        debounceWaitMs: 300,\n                        fetch: (text, update) => {\n                            const query = text;\n                            this.provider.search(query).then(update);\n                        },\n                        render: (address) => {\n                            const div = this.ce('div');\n                            div.textContent = this.getDisplayValue(address);\n                            return div;\n                        },\n                        onSelect: (address) => {\n                            this.onSelectAddress(address, element, index);\n                        },\n                    });\n                }\n                this.addEventListener(element, 'blur', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (element.value) {\n                        element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n                    }\n                });\n                this.addEventListener(element, 'keyup', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (!element.value) {\n                        this.clearAddress(element, index);\n                    }\n                });\n            }\n        });\n        if (this.addRowButton) {\n            this.addEventListener(this.addRowButton, 'click', event => {\n                event.preventDefault();\n                this.addRow();\n            });\n        }\n        this.removeRowButton.forEach((removeRowButton, index) => {\n            this.addEventListener(removeRowButton, 'click', event => {\n                event.preventDefault();\n                this.removeValue(index);\n            });\n        });\n        if (this.modeSwitcher) {\n            this.addEventListener(this.modeSwitcher, 'change', () => {\n                if (!this.modeSwitcher) {\n                    return;\n                }\n                this.dataValue = this.emptyValue;\n                this.mode = this.modeSwitcher.checked\n                    ? exports.AddressComponentMode.Manual\n                    : exports.AddressComponentMode.Autocomplete;\n                if (!this.builderMode) {\n                    if (this.manualMode) {\n                        this.restoreComponentsContext();\n                    }\n                    this.triggerChange({\n                        modified: true,\n                    });\n                }\n                this.redraw();\n            });\n        }\n        if (!this.builderMode) {\n            this.removeValueIcon.forEach((removeValueIcon, index) => {\n                this.updateRemoveIcon(index);\n                const removeValueHandler = () => {\n                    var _a;\n                    const searchInput = (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a[index];\n                    this.clearAddress(searchInput, index);\n                    if (searchInput) {\n                        searchInput.focus();\n                    }\n                };\n                this.addEventListener(removeValueIcon, 'click', removeValueHandler);\n                this.addEventListener(removeValueIcon, 'keydown', ({ key }) => {\n                    if (key === 'Enter') {\n                        removeValueHandler();\n                    }\n                });\n            });\n            lodash_1.default.each(this.refs.searchInput || [], el => this.addFocusBlurEvents(el));\n        }\n        return result;\n    }\n    addChildComponent(component) {\n        component.customConditional = ChildConditional;\n    }\n    redraw() {\n        const modeSwitcherInFocus = (this.modeSwitcher && (document.activeElement === this.modeSwitcher));\n        return super.redraw()\n            .then((result) => {\n            if (modeSwitcherInFocus && this.modeSwitcher) {\n                this.modeSwitcher.focus();\n            }\n            return result;\n        });\n    }\n    clearAddress(element, index) {\n        var _a;\n        if (!this.isEmpty()) {\n            this.triggerChange();\n        }\n        if ((_a = this.address) === null || _a === void 0 ? void 0 : _a[index]) {\n            this.address[index] = this.emptyValue;\n        }\n        else {\n            this.address = this.emptyValue;\n        }\n        if (element) {\n            element.value = '';\n        }\n        this.updateRemoveIcon(index);\n    }\n    getDisplayValue(value = this.address) {\n        return (this.provider && !this.manualMode)\n            ? this.provider.getDisplayValue(value)\n            : '';\n    }\n    validateMultiple() {\n        return this.isMultiple;\n    }\n    updateRemoveIcon(index) {\n        var _a;\n        const removeValueIcon = (_a = this.removeValueIcon) === null || _a === void 0 ? void 0 : _a[index];\n        if (removeValueIcon) {\n            const value = this.isMultiple ? this.address[index] : this.address;\n            if (this.isEmpty(value) || this.disabled) {\n                this.addClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n            else {\n                this.removeClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n        }\n    }\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        const normalizedValue = this.normalizeValue(value);\n        const { address, mode, } = (this.manualModeEnabled\n            ? normalizedValue\n            : {\n                address: normalizedValue,\n                mode: exports.AddressComponentMode.Autocomplete,\n            });\n        const valueInManualMode = (mode === exports.AddressComponentMode.Manual);\n        if (this.provider && !valueInManualMode) {\n            return this.getDisplayValue(address);\n        }\n        if (valueInManualMode) {\n            if (this.component.manualModeViewString) {\n                return this.interpolate(this.component.manualModeViewString, {\n                    address,\n                    data: this.data,\n                    component: this.component,\n                });\n            }\n            return this.getComponents()\n                .filter((component) => component.hasValue(address))\n                .map((component) => [component, lodash_1.default.get(address, component.key)])\n                .filter(([component, componentValue]) => !component.isEmpty(componentValue))\n                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))\n                .join(', ');\n        }\n        return super.getValueAsString(address, options);\n    }\n    focus() {\n        if (this.searchInput && this.searchInput[0]) {\n            this.searchInput[0].focus();\n        }\n    }\n}\nexports[\"default\"] = AddressComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/address/Address.js?");
 
 /***/ }),
 
@@ -5149,7 +5149,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ../Components */ \"./lib/cjs/components/Components.js\"));\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\nclass DataGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            label: 'Data Grid',\n            key: 'dataGrid',\n            type: 'datagrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            components: []\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Data Grid',\n            icon: 'th',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#data-grid',\n            showPreview: false,\n            weight: 30,\n            schema: DataGridComponent.schema()\n        };\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'datagrid';\n        this.tabIndex = 0;\n    }\n    init() {\n        this.components = this.components || [];\n        // Add new values based on minLength.\n        this.rows = [];\n        this.columns = [...this.component.components];\n        if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {\n            this.createRows(true);\n        }\n        this.visibleColumns = {};\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkColumns();\n    }\n    get dataValue() {\n        const dataValue = super.dataValue;\n        if (!dataValue || !Array.isArray(dataValue)) {\n            return this.emptyValue;\n        }\n        return dataValue;\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultSchema() {\n        return DataGridComponent.schema();\n    }\n    get initEmpty() {\n        return this.component.initEmpty || this.component.noFirstRow;\n    }\n    get initRows() {\n        return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;\n    }\n    get emptyValue() {\n        return this.initEmpty ? [] : [{}];\n    }\n    get addAnotherPosition() {\n        return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');\n    }\n    get minLength() {\n        if (this.hasRowGroups()) {\n            return lodash_1.default.sum(this.getGroupSizes());\n        }\n        else {\n            return lodash_1.default.get(this.component, 'validate.minLength', 0);\n        }\n    }\n    get defaultValue() {\n        const isBuilderMode = this.builderMode;\n        const isEmptyInit = this.initEmpty;\n        // Ensure we have one and only one row in builder mode.\n        if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {\n            return isEmptyInit && !isBuilderMode ? [] : [{}];\n        }\n        const value = super.defaultValue;\n        let defaultValue;\n        if (Array.isArray(value)) {\n            defaultValue = value;\n        }\n        else if (value && (typeof value === 'object')) {\n            defaultValue = [value];\n        }\n        else {\n            defaultValue = this.emptyValue;\n        }\n        for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {\n            defaultValue.push({});\n        }\n        return defaultValue;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        lodash_1.default.each(this.refs[`${this.datagridKey}-addRow`], (button) => {\n            button.disabled = disabled;\n        });\n        lodash_1.default.each(this.refs[`${this.datagridKey}-removeRow`], (button) => {\n            button.disabled = disabled;\n        });\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    get datagridKey() {\n        return `datagrid-${this.key}`;\n    }\n    get allowReorder() {\n        return !this.options.readOnly && lodash_1.default.get(this.component, 'reorder', false);\n    }\n    get iteratableRows() {\n        return this.rows.map((row, index) => ({\n            components: row,\n            data: this.dataValue[index],\n        }));\n    }\n    isEmpty(value = this.dataValue) {\n        var _a;\n        const isEmpty = super.isEmpty(value);\n        if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {\n            return this.components.reduce((isEmpty, component) => {\n                return isEmpty && component.isEmpty();\n            }, true);\n        }\n        return isEmpty;\n    }\n    /**\n     * Split rows into chunks.\n     * @param {number[]} groups - array of numbers where each item is size of group\n     * @param {Array<T>} rows - rows collection\n     * @returns {Array<T[]>} - The chunked rows\n     */\n    getRowChunks(groups, rows) {\n        const [, chunks] = groups.reduce(([startIndex, acc], size) => {\n            const endIndex = startIndex + size;\n            return [endIndex, [...acc, [startIndex, endIndex]]];\n        }, [0, []]);\n        return chunks.map(range => lodash_1.default.slice(rows, ...range));\n    }\n    /**\n     * Create groups object.\n     * Each key in object represents index of first row in group.\n     * @returns {object} - The groups object.\n     */\n    getGroups() {\n        const groups = lodash_1.default.get(this.component, 'rowGroups', []);\n        const sizes = lodash_1.default.map(groups, 'numberOfRows').slice(0, -1);\n        const indexes = sizes.reduce((groupIndexes, size) => {\n            const last = groupIndexes[groupIndexes.length - 1];\n            return groupIndexes.concat(last + size);\n        }, [0]);\n        return groups.reduce((gidxs, group, idx) => {\n            return Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });\n        }, {});\n    }\n    /**\n     * Get group sizes.\n     * @returns {number[]} - The array of group sizes.\n     */\n    getGroupSizes() {\n        return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');\n    }\n    hasRowGroups() {\n        return lodash_1.default.get(this, 'component.enableRowGroups', false) && !this.builderMode;\n    }\n    totalRowsNumber(groups) {\n        return lodash_1.default.sum(lodash_1.default.map(groups, 'numberOfRows'));\n    }\n    setStaticValue(n) {\n        this.dataValue = lodash_1.default.range(n).map(() => ({}));\n    }\n    hasExtraColumn() {\n        return (this.hasRemoveButtons() || this.canAddColumn);\n    }\n    hasRemoveButtons() {\n        return !this.builderMode && !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    hasTopSubmit() {\n        return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);\n    }\n    hasBottomSubmit() {\n        return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);\n    }\n    get canAddColumn() {\n        return this.builderMode && !this.options.design;\n    }\n    render() {\n        const columns = this.getColumns();\n        let columnExtra = 0;\n        const hasRemoveButtons = this.hasRemoveButtons();\n        if (this.component.reorder) {\n            columnExtra++;\n        }\n        if (hasRemoveButtons) {\n            columnExtra++;\n        }\n        if (this.canAddColumn) {\n            columnExtra++;\n        }\n        const colWidth = Math.floor(12 / (columns.length + columnExtra));\n        return super.render(this.renderTemplate('datagrid', {\n            rows: this.getRows(),\n            columns: columns,\n            groups: this.hasRowGroups() ? this.getGroups() : [],\n            visibleColumns: this.visibleColumns,\n            hasToggle: lodash_1.default.get(this, 'component.groupToggle', false),\n            hasHeader: this.hasHeader(),\n            hasExtraColumn: this.hasExtraColumn(),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons,\n            hasTopSubmit: this.hasTopSubmit(),\n            hasBottomSubmit: this.hasBottomSubmit(),\n            hasGroups: this.hasRowGroups(),\n            numColumns: columns.length + (this.hasExtraColumn() ? 1 : 0),\n            datagridKey: this.datagridKey,\n            allowReorder: this.allowReorder,\n            builder: this.builderMode,\n            canAddColumn: this.canAddColumn,\n            tabIndex: this.tabIndex,\n            placeholder: this.renderTemplate('builderPlaceholder', {\n                position: this.componentComponents.length,\n            }),\n            colWidth: colWidth.toString()\n        }));\n    }\n    getRows() {\n        return this.rows.map(row => {\n            const components = {};\n            lodash_1.default.each(row, (col, key) => {\n                components[key] = col.render();\n            });\n            return components;\n        });\n    }\n    getColumns() {\n        return this.columns.filter((comp) => {\n            return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);\n        });\n    }\n    hasHeader() {\n        return this.component.components.reduce((hasHeader, col) => {\n            // If any of the components has a title and it isn't hidden, display the header.\n            return hasHeader || ((col.label || col.title) && !col.hideLabel);\n        }, false);\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            [`${this.datagridKey}-row`]: 'multiple',\n            [`${this.datagridKey}-tbody`]: 'single',\n            [`${this.datagridKey}-addRow`]: 'multiple',\n            [`${this.datagridKey}-removeRow`]: 'multiple',\n            [`${this.datagridKey}-group-header`]: 'multiple',\n            [this.datagridKey]: 'multiple',\n        });\n        if (this.allowReorder) {\n            this.refs[`${this.datagridKey}-row`].forEach((row, index) => {\n                row.dragInfo = { index };\n            });\n            this.dragula = (0, dragula_1.default)([this.refs[`${this.datagridKey}-tbody`]], {\n                moves: (_draggedElement, _oldParent, clickedElement) => {\n                    const clickedElementKey = clickedElement.getAttribute('data-key');\n                    const oldParentKey = _oldParent.getAttribute('data-key');\n                    //Check if the clicked button belongs to that container, if false, it belongs to the nested container\n                    if (oldParentKey === clickedElementKey) {\n                        return clickedElement.classList.contains('formio-drag-button');\n                    }\n                }\n            }).on('drop', this.onReorder.bind(this));\n            this.dragula.on('cloned', (el, original) => {\n                if (el && el.children && original && original.children) {\n                    lodash_1.default.each(original.children, (child, index) => {\n                        const styles = getComputedStyle(child, null);\n                        if (styles.cssText !== '') {\n                            el.children[index].style.cssText = styles.cssText;\n                        }\n                        else {\n                            const cssText = Object.values(styles).reduce((css, propertyName) => {\n                                return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;\n                            }, '');\n                            el.children[index].style.cssText = cssText;\n                        }\n                    });\n                }\n            });\n        }\n        this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {\n            this.addEventListener(addButton, 'click', this.addRow.bind(this));\n        });\n        this.refs[`${this.datagridKey}-removeRow`].forEach((removeButton, index) => {\n            this.addEventListener(removeButton, 'click', this.removeRow.bind(this, index));\n        });\n        if (this.hasRowGroups()) {\n            this.refs.chunks = this.getRowChunks(this.getGroupSizes(), this.refs[`${this.datagridKey}-row`]);\n            this.refs[`${this.datagridKey}-group-header`].forEach((header, index) => {\n                this.addEventListener(header, 'click', () => this.toggleGroup(header, index));\n            });\n        }\n        const columns = this.getColumns();\n        const rowLength = columns.length;\n        this.rows.forEach((row, rowIndex) => {\n            let columnIndex = 0;\n            columns.forEach((col) => {\n                this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());\n                columnIndex++;\n            });\n        });\n        return super.attach(element);\n    }\n    getComponentsContainer() {\n        return this.component.components;\n    }\n    /**\n     * Reorder values in array based on the old and new position\n     * @param {any} valuesArr - An array of values.\n     * @param {number} oldPosition - The index of the value in array before reordering.\n     * @param {number} newPosition - The index of the value in array after reordering.\n     * @param {boolean|any} movedBelow - Whether or not the value is moved below.\n     * @returns {void}\n     */\n    reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {\n        if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {\n            return;\n        }\n        const draggedRowData = valuesArr[oldPosition];\n        //insert element at new position\n        valuesArr.splice(newPosition, 0, draggedRowData);\n        //remove element from old position (if was moved above, after insertion it's at +1 index)\n        valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n    }\n    onReorder(element, _target, _source, sibling) {\n        if (!element.dragInfo || (sibling && !sibling.dragInfo)) {\n            console.warn('There is no Drag Info available for either dragged or sibling element');\n            return;\n        }\n        const oldPosition = element.dragInfo.index;\n        //should drop at next sibling position; no next sibling means drop to last position\n        const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;\n        const movedBelow = newPosition > oldPosition;\n        const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);\n        this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);\n        //reorder select data\n        this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);\n        //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)\n        this.setValue(dataValue, { isReordered: true });\n        this.rebuild();\n    }\n    focusOnNewRowElement(row) {\n        Object.keys(row).find((key) => {\n            const element = row[key].element;\n            if (element) {\n                const focusableElements = (0, utils_1.getFocusableElements)(element);\n                if (focusableElements && focusableElements[0]) {\n                    focusableElements[0].focus();\n                    return true;\n                }\n            }\n            return false;\n        });\n    }\n    addRow() {\n        const index = this.rows.length;\n        // Handle length mismatch between rows and dataValue\n        if (this.dataValue.length === index) {\n            this.dataValue.push({});\n        }\n        let row;\n        const dataValue = this.dataValue;\n        const defaultValue = this.defaultValue;\n        if (this.initEmpty && defaultValue[index]) {\n            row = defaultValue[index];\n            dataValue[index] = row;\n        }\n        else {\n            row = dataValue[index];\n        }\n        this.rows[index] = this.createRowComponents(row, index);\n        this.emit('dataGridAddRow', {\n            component: this.component,\n            row\n        });\n        this.checkConditions();\n        this.triggerChange();\n        this.redraw().then(() => {\n            this.focusOnNewRowElement(this.rows[index]);\n        });\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            var _a;\n            if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {\n                const newName = `[${this.key}][${rowIndex}]`;\n                component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);\n            }\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n            component.path = Components_1.default.getComponentPath(component);\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.rows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(Object.values(row), rowIndex + index);\n        });\n    }\n    removeRow(index) {\n        const makeEmpty = index === 0 && this.rows.length === 1;\n        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };\n        this.splice(index, flags);\n        this.emit('dataGridDeleteRow', { index });\n        const [row] = this.rows.splice(index, 1);\n        this.removeRowComponents(row);\n        this.updateRowsComponents(index);\n        this.setValue(this.dataValue, flags);\n        this.redraw();\n    }\n    removeRowComponents(row) {\n        lodash_1.default.each(row, (component) => this.removeComponent(component));\n    }\n    getRowValues() {\n        return this.dataValue;\n    }\n    setRowComponentsData(rowIndex, rowData) {\n        lodash_1.default.each(this.rows[rowIndex], (component) => {\n            component.data = rowData;\n        });\n    }\n    createRows(init, rebuild) {\n        let added = false;\n        const rowValues = this.getRowValues();\n        // Create any missing rows.\n        rowValues.forEach((row, index) => {\n            if (!rebuild && this.rows[index]) {\n                this.setRowComponentsData(index, row);\n            }\n            else {\n                if (this.rows[index]) {\n                    this.removeRowComponents(this.rows[index]);\n                }\n                this.rows[index] = this.createRowComponents(row, index);\n                added = true;\n            }\n        });\n        // Delete any extra rows.\n        const removedRows = this.rows.splice(rowValues.length);\n        const removed = !!removedRows.length;\n        // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)\n        if (removed) {\n            removedRows.forEach(row => this.removeRowComponents(row));\n        }\n        if (!init && (added || removed)) {\n            this.redraw();\n        }\n        return added;\n    }\n    createRowComponents(row, rowIndex) {\n        const components = {};\n        this.tabIndex = 0;\n        this.component.components.map((col, colIndex) => {\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            let columnComponent;\n            if (this.builderMode) {\n                col.id = col.id + rowIndex;\n                columnComponent = col;\n            }\n            else {\n                columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });\n            }\n            const component = this.createComponent(columnComponent, options, row);\n            component.parentDisabled = !!this.disabled;\n            component.rowIndex = rowIndex;\n            component.inDataGrid = true;\n            if (columnComponent.tabindex &&\n                parseInt(columnComponent.tabindex) > this.tabIndex) {\n                this.tabIndex = parseInt(columnComponent.tabindex);\n            }\n            components[col.key] = component;\n        });\n        return components;\n    }\n    checkColumns(data, flags = {}) {\n        data = data || this.rootValue;\n        let show = false;\n        if (!this.rows || !this.rows.length) {\n            return { rebuild: false, show: false };\n        }\n        if (this.builderMode) {\n            return { rebuild: false, show: true };\n        }\n        const visibility = {};\n        let logicRebuild = false;\n        const dataValue = this.dataValue;\n        this.rows.forEach((row, rowIndex) => {\n            lodash_1.default.each(row, (col, key) => {\n                if (col && (typeof col.checkConditions === 'function')) {\n                    const firstRowCheck = visibility[key] === undefined;\n                    visibility[key] = !!visibility[key] ||\n                        (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');\n                    if (col.component.logic && firstRowCheck) {\n                        const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);\n                        const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {\n                            // Don't compare columns by their auto-generated ids.\n                            if (key === 'id') {\n                                return true;\n                            }\n                        });\n                        if (!equalColumns) {\n                            logicRebuild = true;\n                            this.columns[compIndex] = col.component;\n                        }\n                    }\n                }\n            });\n        });\n        const rebuild = !lodash_1.default.isEqual(visibility, this.visibleColumns) || logicRebuild;\n        lodash_1.default.each(visibility, (col) => {\n            show |= col;\n        });\n        this.visibleColumns = visibility;\n        return { rebuild, show };\n    }\n    checkComponentConditions(data, flags, row) {\n        const isVisible = this.visible;\n        // If table isn't visible, don't bother calculating columns.\n        if (!super.checkComponentConditions(data, flags, row)) {\n            return false;\n        }\n        const { rebuild, show } = this.checkColumns(data, flags);\n        // Check if a rebuild is needed or the visibility changes.\n        if (rebuild || !isVisible) {\n            this.createRows(false, rebuild);\n        }\n        // Return if this table should show.\n        return show;\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            this.dataValue = this.defaultValue;\n            this.createRows();\n            return false;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                this.createRows();\n                value = [{}];\n            }\n        }\n        // Make sure we always have at least one row.\n        // NOTE: Removing this will break \"Public Configurations\" in portal. ;)\n        if (value && !value.length && !this.initEmpty) {\n            value.push({});\n        }\n        const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);\n        const changed = this.hasChanged(value, this.dataValue);\n        this.dataValue = value;\n        if (this.initRows || isSettingSubmission ||\n            (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {\n            if (!this.createRows() && changed) {\n                this.redraw();\n            }\n        }\n        if (this.componentModal && isSettingSubmission) {\n            this.componentModal.setValue(value);\n        }\n        this.rows.forEach((row, rowIndex) => {\n            if (value.length <= rowIndex) {\n                return;\n            }\n            lodash_1.default.each(row, (col) => {\n                col.rowIndex = rowIndex;\n                this.setNestedValue(col, value[rowIndex], flags);\n            });\n        });\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n    restoreComponentsContext() {\n        this.rows.forEach((row, index) => lodash_1.default.forIn(row, (component) => component.data = this.dataValue[index]));\n    }\n    getComponent(path, fn) {\n        path = Array.isArray(path) ? path : [path];\n        const [key, ...remainingPath] = path;\n        let result = [];\n        if (lodash_1.default.isNumber(key) && remainingPath.length) {\n            const compKey = remainingPath.pop();\n            result = this.rows[key][compKey];\n            // If the component is inside a Layout Component, try to find it among all the row's components\n            if (!result) {\n                Object.entries(this.rows[key]).forEach(([, comp]) => {\n                    if ('getComponent' in comp) {\n                        const possibleResult = comp.getComponent([compKey], fn);\n                        if (possibleResult) {\n                            result = possibleResult;\n                        }\n                    }\n                });\n            }\n            if (result && lodash_1.default.isFunction(fn)) {\n                fn(result, this.getComponents());\n            }\n            if (remainingPath.length && 'getComponent' in result) {\n                return result.getComponent(remainingPath, fn);\n            }\n            return result;\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                let comp = component;\n                if (remainingPath.length > 0 && 'getComponent' in component) {\n                    comp = component.getComponent(remainingPath, fn);\n                }\n                else if (fn) {\n                    fn(component, components);\n                }\n                result = result.concat(comp);\n            }\n        });\n        return result.length > 0 ? result : null;\n    }\n    toggleGroup(element, index) {\n        element.classList.toggle('collapsed');\n        lodash_1.default.each(this.refs.chunks[index], row => {\n            row.classList.toggle('hidden');\n        });\n    }\n}\nexports[\"default\"] = DataGridComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datagrid/DataGrid.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ../Components */ \"./lib/cjs/components/Components.js\"));\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\nclass DataGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            label: 'Data Grid',\n            key: 'dataGrid',\n            type: 'datagrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            components: []\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Data Grid',\n            icon: 'th',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#data-grid',\n            showPreview: false,\n            weight: 30,\n            schema: DataGridComponent.schema()\n        };\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'datagrid';\n        this.tabIndex = 0;\n    }\n    init() {\n        this.components = this.components || [];\n        // Add new values based on minLength.\n        this.rows = [];\n        this.columns = [...this.component.components];\n        if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {\n            this.createRows(true);\n        }\n        this.visibleColumns = {};\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkColumns();\n    }\n    get dataValue() {\n        const dataValue = super.dataValue;\n        if (!dataValue || !Array.isArray(dataValue)) {\n            return this.emptyValue;\n        }\n        return dataValue;\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultSchema() {\n        return DataGridComponent.schema();\n    }\n    get initEmpty() {\n        return this.component.initEmpty || this.component.noFirstRow;\n    }\n    get initRows() {\n        return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;\n    }\n    get emptyValue() {\n        return this.initEmpty ? [] : [{}];\n    }\n    get addAnotherPosition() {\n        return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');\n    }\n    get minLength() {\n        if (this.hasRowGroups()) {\n            return lodash_1.default.sum(this.getGroupSizes());\n        }\n        else {\n            return lodash_1.default.get(this.component, 'validate.minLength', 0);\n        }\n    }\n    get defaultValue() {\n        const isBuilderMode = this.builderMode;\n        const isEmptyInit = this.initEmpty;\n        // Ensure we have one and only one row in builder mode.\n        if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {\n            return isEmptyInit && !isBuilderMode ? [] : [{}];\n        }\n        const value = super.defaultValue;\n        let defaultValue;\n        if (Array.isArray(value)) {\n            defaultValue = value;\n        }\n        else if (value && (typeof value === 'object')) {\n            defaultValue = [value];\n        }\n        else {\n            defaultValue = this.emptyValue;\n        }\n        for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {\n            defaultValue.push({});\n        }\n        return defaultValue;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        lodash_1.default.each(this.refs[`${this.datagridKey}-addRow`], (button) => {\n            button.disabled = disabled;\n        });\n        lodash_1.default.each(this.refs[`${this.datagridKey}-removeRow`], (button) => {\n            button.disabled = disabled;\n        });\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    get datagridKey() {\n        return `datagrid-${this.key}`;\n    }\n    get allowReorder() {\n        return !this.options.readOnly && lodash_1.default.get(this.component, 'reorder', false);\n    }\n    get iteratableRows() {\n        return this.rows.map((row, index) => ({\n            components: row,\n            data: this.dataValue[index],\n        }));\n    }\n    isEmpty(value = this.dataValue) {\n        var _a;\n        const isEmpty = super.isEmpty(value);\n        if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {\n            return this.components.reduce((isEmpty, component) => {\n                return isEmpty && component.isEmpty();\n            }, true);\n        }\n        return isEmpty;\n    }\n    /**\n     * Split rows into chunks.\n     * @param {number[]} groups - array of numbers where each item is size of group\n     * @param {Array<T>} rows - rows collection\n     * @returns {Array<T[]>} - The chunked rows\n     */\n    getRowChunks(groups, rows) {\n        const [, chunks] = groups.reduce(([startIndex, acc], size) => {\n            const endIndex = startIndex + size;\n            return [endIndex, [...acc, [startIndex, endIndex]]];\n        }, [0, []]);\n        return chunks.map(range => lodash_1.default.slice(rows, ...range));\n    }\n    /**\n     * Create groups object.\n     * Each key in object represents index of first row in group.\n     * @returns {object} - The groups object.\n     */\n    getGroups() {\n        const groups = lodash_1.default.get(this.component, 'rowGroups', []);\n        const sizes = lodash_1.default.map(groups, 'numberOfRows').slice(0, -1);\n        const indexes = sizes.reduce((groupIndexes, size) => {\n            const last = groupIndexes[groupIndexes.length - 1];\n            return groupIndexes.concat(last + size);\n        }, [0]);\n        return groups.reduce((gidxs, group, idx) => {\n            return Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });\n        }, {});\n    }\n    /**\n     * Get group sizes.\n     * @returns {number[]} - The array of group sizes.\n     */\n    getGroupSizes() {\n        return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');\n    }\n    hasRowGroups() {\n        return lodash_1.default.get(this, 'component.enableRowGroups', false) && !this.builderMode;\n    }\n    totalRowsNumber(groups) {\n        return lodash_1.default.sum(lodash_1.default.map(groups, 'numberOfRows'));\n    }\n    setStaticValue(n) {\n        this.dataValue = lodash_1.default.range(n).map(() => ({}));\n    }\n    hasExtraColumn() {\n        return (this.hasRemoveButtons() || this.canAddColumn);\n    }\n    hasRemoveButtons() {\n        return !this.builderMode && !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    hasTopSubmit() {\n        return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);\n    }\n    hasBottomSubmit() {\n        return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);\n    }\n    get canAddColumn() {\n        return this.builderMode && !this.options.design;\n    }\n    render() {\n        const columns = this.getColumns();\n        let columnExtra = 0;\n        const hasRemoveButtons = this.hasRemoveButtons();\n        if (this.component.reorder) {\n            columnExtra++;\n        }\n        if (hasRemoveButtons) {\n            columnExtra++;\n        }\n        if (this.canAddColumn) {\n            columnExtra++;\n        }\n        const colWidth = Math.floor(12 / (columns.length + columnExtra));\n        return super.render(this.renderTemplate('datagrid', {\n            rows: this.getRows(),\n            columns: columns,\n            groups: this.hasRowGroups() ? this.getGroups() : [],\n            visibleColumns: this.visibleColumns,\n            hasToggle: lodash_1.default.get(this, 'component.groupToggle', false),\n            hasHeader: this.hasHeader(),\n            hasExtraColumn: this.hasExtraColumn(),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons,\n            hasTopSubmit: this.hasTopSubmit(),\n            hasBottomSubmit: this.hasBottomSubmit(),\n            hasGroups: this.hasRowGroups(),\n            numColumns: columns.length + (this.hasExtraColumn() ? 1 : 0),\n            datagridKey: this.datagridKey,\n            allowReorder: this.allowReorder,\n            builder: this.builderMode,\n            canAddColumn: this.canAddColumn,\n            tabIndex: this.tabIndex,\n            placeholder: this.renderTemplate('builderPlaceholder', {\n                position: this.componentComponents.length,\n            }),\n            colWidth: colWidth.toString()\n        }));\n    }\n    getRows() {\n        return this.rows.map(row => {\n            const components = {};\n            lodash_1.default.each(row, (col, key) => {\n                components[key] = col.render();\n            });\n            return components;\n        });\n    }\n    getColumns() {\n        return this.columns.filter((comp) => {\n            return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);\n        });\n    }\n    hasHeader() {\n        return this.component.components.reduce((hasHeader, col) => {\n            // If any of the components has a title and it isn't hidden, display the header.\n            return hasHeader || ((col.label || col.title) && !col.hideLabel);\n        }, false);\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            [`${this.datagridKey}-row`]: 'multiple',\n            [`${this.datagridKey}-tbody`]: 'single',\n            [`${this.datagridKey}-addRow`]: 'multiple',\n            [`${this.datagridKey}-removeRow`]: 'multiple',\n            [`${this.datagridKey}-group-header`]: 'multiple',\n            [this.datagridKey]: 'multiple',\n        });\n        if (this.allowReorder) {\n            this.refs[`${this.datagridKey}-row`].forEach((row, index) => {\n                row.dragInfo = { index };\n            });\n            this.dragula = (0, dragula_1.default)([this.refs[`${this.datagridKey}-tbody`]], {\n                moves: (_draggedElement, _oldParent, clickedElement) => {\n                    const clickedElementKey = clickedElement.getAttribute('data-key');\n                    const oldParentKey = _oldParent.getAttribute('data-key');\n                    //Check if the clicked button belongs to that container, if false, it belongs to the nested container\n                    if (oldParentKey === clickedElementKey) {\n                        return clickedElement.classList.contains('formio-drag-button');\n                    }\n                }\n            }).on('drop', this.onReorder.bind(this));\n            this.dragula.on('cloned', (el, original) => {\n                if (el && el.children && original && original.children) {\n                    lodash_1.default.each(original.children, (child, index) => {\n                        const styles = getComputedStyle(child, null);\n                        if (styles.cssText !== '') {\n                            el.children[index].style.cssText = styles.cssText;\n                        }\n                        else {\n                            const cssText = Object.values(styles).reduce((css, propertyName) => {\n                                return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;\n                            }, '');\n                            el.children[index].style.cssText = cssText;\n                        }\n                    });\n                }\n            });\n        }\n        this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {\n            this.addEventListener(addButton, 'click', this.addRow.bind(this));\n        });\n        this.refs[`${this.datagridKey}-removeRow`].forEach((removeButton, index) => {\n            this.addEventListener(removeButton, 'click', this.removeRow.bind(this, index));\n        });\n        if (this.hasRowGroups()) {\n            this.refs.chunks = this.getRowChunks(this.getGroupSizes(), this.refs[`${this.datagridKey}-row`]);\n            this.refs[`${this.datagridKey}-group-header`].forEach((header, index) => {\n                this.addEventListener(header, 'click', () => this.toggleGroup(header, index));\n            });\n        }\n        const columns = this.getColumns();\n        const rowLength = columns.length;\n        this.rows.forEach((row, rowIndex) => {\n            let columnIndex = 0;\n            columns.forEach((col) => {\n                this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());\n                columnIndex++;\n            });\n        });\n        return super.attach(element);\n    }\n    getComponentsContainer() {\n        return this.component.components;\n    }\n    /**\n     * Reorder values in array based on the old and new position\n     * @param {any} valuesArr - An array of values.\n     * @param {number} oldPosition - The index of the value in array before reordering.\n     * @param {number} newPosition - The index of the value in array after reordering.\n     * @param {boolean|any} movedBelow - Whether or not the value is moved below.\n     * @returns {void}\n     */\n    reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {\n        if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {\n            return;\n        }\n        const draggedRowData = valuesArr[oldPosition];\n        //insert element at new position\n        valuesArr.splice(newPosition, 0, draggedRowData);\n        //remove element from old position (if was moved above, after insertion it's at +1 index)\n        valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n    }\n    onReorder(element, _target, _source, sibling) {\n        if (!element.dragInfo || (sibling && !sibling.dragInfo)) {\n            console.warn('There is no Drag Info available for either dragged or sibling element');\n            return;\n        }\n        const oldPosition = element.dragInfo.index;\n        //should drop at next sibling position; no next sibling means drop to last position\n        const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;\n        const movedBelow = newPosition > oldPosition;\n        const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);\n        this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);\n        //reorder select data\n        this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);\n        //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)\n        this.setValue(dataValue, { isReordered: true });\n        this.rebuild();\n    }\n    focusOnNewRowElement(row) {\n        Object.keys(row).find((key) => {\n            const element = row[key].element;\n            if (element) {\n                const focusableElements = (0, utils_1.getFocusableElements)(element);\n                if (focusableElements && focusableElements[0]) {\n                    focusableElements[0].focus();\n                    return true;\n                }\n            }\n            return false;\n        });\n    }\n    addRow() {\n        const index = this.rows.length;\n        // Handle length mismatch between rows and dataValue\n        if (this.dataValue.length === index) {\n            this.dataValue.push({});\n        }\n        let row;\n        const dataValue = this.dataValue;\n        const defaultValue = this.defaultValue;\n        if (this.initEmpty && defaultValue[index]) {\n            row = defaultValue[index];\n            dataValue[index] = row;\n        }\n        else {\n            row = dataValue[index];\n        }\n        this.rows[index] = this.createRowComponents(row, index);\n        this.emit('dataGridAddRow', {\n            component: this.component,\n            row\n        });\n        this.checkConditions();\n        this.triggerChange();\n        this.redraw().then(() => {\n            this.focusOnNewRowElement(this.rows[index]);\n        });\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            var _a;\n            if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {\n                const newName = `[${this.key}][${rowIndex}]`;\n                component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);\n            }\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n            component.path = Components_1.default.getComponentPath(component);\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.rows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(Object.values(row), rowIndex + index);\n        });\n    }\n    removeRow(index) {\n        const makeEmpty = index === 0 && this.rows.length === 1;\n        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };\n        this.splice(index, flags);\n        this.emit('dataGridDeleteRow', { index });\n        const [row] = this.rows.splice(index, 1);\n        this.removeSubmissionMetadataRow(index);\n        this.removeRowComponents(row);\n        this.updateRowsComponents(index);\n        this.setValue(this.dataValue, flags);\n        this.redraw();\n    }\n    removeRowComponents(row) {\n        lodash_1.default.each(row, (component) => this.removeComponent(component));\n    }\n    getRowValues() {\n        return this.dataValue;\n    }\n    setRowComponentsData(rowIndex, rowData) {\n        lodash_1.default.each(this.rows[rowIndex], (component) => {\n            component.data = rowData;\n        });\n    }\n    createRows(init, rebuild) {\n        let added = false;\n        const rowValues = this.getRowValues();\n        // Create any missing rows.\n        rowValues.forEach((row, index) => {\n            if (!rebuild && this.rows[index]) {\n                this.setRowComponentsData(index, row);\n            }\n            else {\n                if (this.rows[index]) {\n                    this.removeRowComponents(this.rows[index]);\n                }\n                this.rows[index] = this.createRowComponents(row, index);\n                added = true;\n            }\n        });\n        // Delete any extra rows.\n        const removedRows = this.rows.splice(rowValues.length);\n        const removed = !!removedRows.length;\n        // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)\n        if (removed) {\n            removedRows.forEach(row => this.removeRowComponents(row));\n        }\n        if (!init && (added || removed)) {\n            this.redraw();\n        }\n        return added;\n    }\n    createRowComponents(row, rowIndex) {\n        const components = {};\n        this.tabIndex = 0;\n        this.component.components.map((col, colIndex) => {\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            let columnComponent;\n            if (this.builderMode) {\n                col.id = col.id + rowIndex;\n                columnComponent = col;\n            }\n            else {\n                columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });\n            }\n            const component = this.createComponent(columnComponent, options, row);\n            component.parentDisabled = !!this.disabled;\n            component.rowIndex = rowIndex;\n            component.inDataGrid = true;\n            if (columnComponent.tabindex &&\n                parseInt(columnComponent.tabindex) > this.tabIndex) {\n                this.tabIndex = parseInt(columnComponent.tabindex);\n            }\n            components[col.key] = component;\n        });\n        return components;\n    }\n    checkColumns(data, flags = {}) {\n        data = data || this.rootValue;\n        let show = false;\n        if (!this.rows || !this.rows.length) {\n            return { rebuild: false, show: false };\n        }\n        if (this.builderMode) {\n            return { rebuild: false, show: true };\n        }\n        const visibility = {};\n        let logicRebuild = false;\n        const dataValue = this.dataValue;\n        this.rows.forEach((row, rowIndex) => {\n            lodash_1.default.each(row, (col, key) => {\n                if (col && (typeof col.checkConditions === 'function')) {\n                    const firstRowCheck = visibility[key] === undefined;\n                    visibility[key] = !!visibility[key] ||\n                        (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');\n                    if (col.component.logic && firstRowCheck) {\n                        const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);\n                        const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {\n                            // Don't compare columns by their auto-generated ids.\n                            if (key === 'id') {\n                                return true;\n                            }\n                        });\n                        if (!equalColumns) {\n                            logicRebuild = true;\n                            this.columns[compIndex] = col.component;\n                        }\n                    }\n                }\n            });\n        });\n        const rebuild = !lodash_1.default.isEqual(visibility, this.visibleColumns) || logicRebuild;\n        lodash_1.default.each(visibility, (col) => {\n            show |= col;\n        });\n        this.visibleColumns = visibility;\n        return { rebuild, show };\n    }\n    checkComponentConditions(data, flags, row) {\n        const isVisible = this.visible;\n        // If table isn't visible, don't bother calculating columns.\n        if (!super.checkComponentConditions(data, flags, row)) {\n            return false;\n        }\n        const { rebuild, show } = this.checkColumns(data, flags);\n        // Check if a rebuild is needed or the visibility changes.\n        if (rebuild || !isVisible) {\n            this.createRows(false, rebuild);\n        }\n        // Return if this table should show.\n        return show;\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            this.dataValue = this.defaultValue;\n            this.createRows();\n            return false;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                this.createRows();\n                value = [{}];\n            }\n        }\n        // Make sure we always have at least one row.\n        // NOTE: Removing this will break \"Public Configurations\" in portal. ;)\n        if (value && !value.length && !this.initEmpty) {\n            value.push({});\n        }\n        const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);\n        const changed = this.hasChanged(value, this.dataValue);\n        this.dataValue = value;\n        if (this.initRows || isSettingSubmission ||\n            (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {\n            if (!this.createRows() && changed) {\n                this.redraw();\n            }\n        }\n        if (this.componentModal && isSettingSubmission) {\n            this.componentModal.setValue(value);\n        }\n        this.rows.forEach((row, rowIndex) => {\n            if (value.length <= rowIndex) {\n                return;\n            }\n            lodash_1.default.each(row, (col) => {\n                col.rowIndex = rowIndex;\n                this.setNestedValue(col, value[rowIndex], flags);\n            });\n        });\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n    restoreComponentsContext() {\n        this.rows.forEach((row, index) => lodash_1.default.forIn(row, (component) => component.data = this.dataValue[index]));\n    }\n    getComponent(path, fn) {\n        path = Array.isArray(path) ? path : [path];\n        const [key, ...remainingPath] = path;\n        let result = [];\n        if (lodash_1.default.isNumber(key) && remainingPath.length) {\n            const compKey = remainingPath.pop();\n            result = this.rows[key][compKey];\n            // If the component is inside a Layout Component, try to find it among all the row's components\n            if (!result) {\n                Object.entries(this.rows[key]).forEach(([, comp]) => {\n                    if ('getComponent' in comp) {\n                        const possibleResult = comp.getComponent([compKey], fn);\n                        if (possibleResult) {\n                            result = possibleResult;\n                        }\n                    }\n                });\n            }\n            if (result && lodash_1.default.isFunction(fn)) {\n                fn(result, this.getComponents());\n            }\n            if (remainingPath.length && 'getComponent' in result) {\n                return result.getComponent(remainingPath, fn);\n            }\n            return result;\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                let comp = component;\n                if (remainingPath.length > 0 && 'getComponent' in component) {\n                    comp = component.getComponent(remainingPath, fn);\n                }\n                else if (fn) {\n                    fn(component, components);\n                }\n                result = result.concat(comp);\n            }\n        });\n        return result.length > 0 ? result : null;\n    }\n    toggleGroup(element, index) {\n        element.classList.toggle('collapsed');\n        lodash_1.default.each(this.refs.chunks[index], row => {\n            row.classList.toggle('hidden');\n        });\n    }\n}\nexports[\"default\"] = DataGridComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datagrid/DataGrid.js?");
 
 /***/ }),
 
@@ -5182,7 +5182,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        }, ...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        const getNextPart = (shouldTake, defaultValue) => dateParts.push(shouldTake ? valueParts.shift() : defaultValue);\n        if (this.dayFirst) {\n            getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '00');\n        }\n        getNextPart(this.showMonth, defaultValue ? defaultValue[MONTH] : '00');\n        if (!this.dayFirst) {\n            getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '00');\n        }\n        getNextPart(this.showYear, defaultValue ? defaultValue[YEAR] : '0000');\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        const parts = value.split('/');\n        let day;\n        if (this.component.dayFirst) {\n            day = parts.shift();\n        }\n        const month = parts.shift();\n        if (!this.component.dayFirst) {\n            day = parts.shift();\n        }\n        const year = parts.shift();\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    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 false;\n        }\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const values = value.split('/');\n        return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n    }\n    getValidationFormat() {\n        return this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\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        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, defaultValue ? defaultValue[DAY] : '');\n        }\n        getNextPart(this.showMonth, defaultValue ? defaultValue[MONTH] : '');\n        if (!this.dayFirst) {\n            getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '');\n        }\n        getNextPart(this.showYear, defaultValue ? defaultValue[YEAR] : '');\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        const parts = value.split('/');\n        let day;\n        if (this.component.dayFirst) {\n            day = parts.shift();\n        }\n        const month = parts.shift();\n        if (!this.component.dayFirst) {\n            day = parts.shift();\n        }\n        const year = parts.shift();\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    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 false;\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?");
 
 /***/ }),
 
@@ -5193,7 +5193,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst components_1 = __webpack_require__(/*! @formio/bootstrap/components */ \"./node_modules/@formio/bootstrap/lib/cjs/templates/components/index.js\");\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst Alert_1 = __importDefault(__webpack_require__(/*! ../alert/Alert */ \"./lib/cjs/components/alert/Alert.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst EditRowState = {\n    New: 'new',\n    Editing: 'editing',\n    Saved: 'saved',\n    Viewing: 'viewing',\n    Removed: 'removed',\n    Draft: 'draft',\n};\nclass EditGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            type: 'editgrid',\n            label: 'Edit Grid',\n            key: 'editGrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            removeRow: 'Cancel',\n            defaultOpen: false,\n            openWhenEmpty: false,\n            modal: false,\n            components: [],\n            inlineEdit: false,\n            templates: {\n                header: EditGridComponent.defaultHeaderTemplate,\n                row: EditGridComponent.defaultRowTemplate,\n                tableHeader: EditGridComponent.defaultTableHeaderTemplate,\n                tableRow: EditGridComponent.defaultTableRowTemplate,\n                footer: '',\n            },\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Edit Grid',\n            icon: 'tasks',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#edit-grid',\n            showPreview: false,\n            weight: 30,\n            schema: EditGridComponent.schema(),\n        };\n    }\n    static get defaultHeaderTemplate() {\n        return `<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (displayValue(component)) { %}\n          <div class=\"col-sm-2\">{{ t(component.label) }}</div>\n        {% } %}\n      {% }) %}\n    </div>`;\n    }\n    static get defaultTableHeaderTemplate() {\n        return `\n      <tr>\n        {% util.eachComponent(components, function(component) { %}\n          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n            <td class=\"editgrid-table-column\">{{ component.label }}</td>\n          {% } %}\n        {% }) %}\n        {% if (!instance.options.readOnly && !instance.disabled) { %}\n          <td class=\"editgrid-table-column\">Actions</td>\n        {% } %}\n      </tr>\n    `;\n    }\n    static get defaultRowTemplate() {\n        return `<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (displayValue(component)) { %}\n          <div class=\"col-sm-2\">\n            {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}\n          </div>\n        {% } %}\n      {% }) %}\n      {% if (!instance.options.readOnly && !instance.disabled) { %}\n        <div class=\"col-sm-2\">\n          <div class=\"btn-group pull-right\">\n            <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>`;\n    }\n    static get defaultTableRowTemplate() {\n        return `\n      {% util.eachComponent(components, function(component) { %}\n          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n            <td class=\"editgrid-table-column\">\n              {{ getView(component, row[component.key]) }}\n            </td>\n          {% } %}\n        {% }) %}\n        {% if (!instance.options.readOnly && !instance.disabled) { %}\n          <td class=\"editgrid-table-column\">\n            <div class=\"btn-group\">\n              <button class=\"btn btn-default btn-light btn-sm editRow\" aria-label=\"{{ t('Edit row') }}\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n              {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\" aria-label=\"{{ t('Remove row') }}\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n              {% } %}\n            </div>\n          </td>\n        {% } %}\n    `;\n    }\n    get defaultDialogTemplate() {\n        return `\n    <h3 ${this._referenceAttributeName}=\"dialogHeader\">${this.t('Do you want to clear data?')}</h3>\n    <div style=\"display:flex; justify-content: flex-end;\">\n      <button ${this._referenceAttributeName}=\"dialogCancelButton\" class=\"btn btn-secondary\" aria-label=\"${this.t('Cancel')}\">${this.t('Cancel')}</button>\n      <button ${this._referenceAttributeName}=\"dialogYesButton\" class=\"btn btn-danger\" aria-label=\"${this.t('Yes, delete it')}\">${this.t('Yes, delete it')}</button>\n    </div>\n  `;\n    }\n    get defaultRowTemplate() {\n        return this.displayAsTable\n            ? EditGridComponent.defaultTableRowTemplate\n            : EditGridComponent.defaultRowTemplate;\n    }\n    get defaultHeaderTemplate() {\n        return this.displayAsTable\n            ? EditGridComponent.defaultTableHeaderTemplate\n            : EditGridComponent.defaultHeaderTemplate;\n    }\n    get rowTemplate() {\n        let rowTemplate;\n        if (utils_1.Evaluator.noeval) {\n            rowTemplate = this.displayAsTable ?\n                components_1.editgrid.tableRow\n                : components_1.editgrid.row;\n        }\n        else {\n            rowTemplate = this.displayAsTable ?\n                lodash_1.default.get(this.component, 'templates.tableRow', this.defaultRowTemplate)\n                : lodash_1.default.get(this.component, 'templates.row', this.defaultRowTemplate);\n        }\n        return rowTemplate;\n    }\n    get headerTemplate() {\n        let headerTemplate;\n        if (utils_1.Evaluator.noeval) {\n            headerTemplate = this.displayAsTable ?\n                components_1.editgrid.tableHeader\n                : components_1.editgrid.header;\n        }\n        else {\n            headerTemplate = this.displayAsTable ?\n                lodash_1.default.get(this.component, 'templates.tableHeader', this.defaultHeaderTemplate)\n                : lodash_1.default.get(this.component, 'templates.header', this.defaultHeaderTemplate);\n        }\n        return headerTemplate;\n    }\n    /**\n     * @returns {boolean} - Returns true if the component has nested components which don't trigger changes on the root level\n     */\n    get hasScopedChildren() {\n        return !this.inlineEditMode;\n    }\n    get defaultSchema() {\n        return EditGridComponent.schema();\n    }\n    get emptyValue() {\n        return [];\n    }\n    get editgridKey() {\n        return `editgrid-${this.key}`;\n    }\n    get rowRef() {\n        return `${this.editgridKey}-row`;\n    }\n    get rowElements() {\n        return this.refs[this.rowRef];\n    }\n    get rowRefs() {\n        return this.refs[`editgrid-${this.component.key}-row`];\n    }\n    get addRowRef() {\n        return `${this.editgridKey}-addRow`;\n    }\n    get addRowElements() {\n        return this.refs[this.addRowRef];\n    }\n    get saveRowRef() {\n        return `${this.editgridKey}-saveRow`;\n    }\n    get saveRowElements() {\n        return this.refs[this.saveRowRef];\n    }\n    get cancelRowRef() {\n        return `${this.editgridKey}-cancelRow`;\n    }\n    get cancelRowElements() {\n        return this.refs[this.cancelRowRef];\n    }\n    get inlineEditMode() {\n        return this.component.inlineEdit;\n    }\n    get saveEditMode() {\n        return !this.inlineEditMode;\n    }\n    get minLength() {\n        return this.builderMode ? 0 : lodash_1.default.get(this.component, 'validate.minLength', 0);\n    }\n    get data() {\n        return this._data;\n    }\n    get dataValue() {\n        return super.dataValue || [];\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get displayAsTable() {\n        return this.component.displayAsTable;\n    }\n    set data(value) {\n        this._data = value;\n        const data = this.dataValue;\n        (this.editRows || []).forEach((row, index) => {\n            if (!data[index] && row.state !== EditRowState.New) {\n                data[index] = {};\n            }\n            const rowData = data[index] || {};\n            row.data = rowData;\n            row.components.forEach((component) => {\n                component.data = rowData;\n            });\n        });\n    }\n    get iteratableRows() {\n        return this.editRows;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        const defaultValue = Array.isArray(value) ? value : [];\n        lodash_1.default.times(this.minLength - defaultValue.length, () => defaultValue.push({}));\n        return defaultValue;\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'editgrid';\n    }\n    hasRemoveButtons() {\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    init() {\n        if (this.builderMode) {\n            this.editRows = [];\n            return super.init();\n        }\n        this.components = this.components || [];\n        const dataValue = this.dataValue;\n        const openWhenEmpty = !dataValue.length && this.component.openWhenEmpty;\n        if (openWhenEmpty) {\n            const dataObj = {};\n            this.editRows = [];\n            this.createRow(dataObj, 0);\n        }\n        else {\n            this.editRows = dataValue.map((row, rowIndex) => ({\n                components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                data: row,\n                state: EditRowState.Saved,\n                backup: null,\n                error: null,\n                rowIndex,\n            }));\n        }\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkData();\n        this.setVariableTypeComponents();\n        if (this.variableTypeComponentsIndexes.length) {\n            lodash_1.default.each(this.editRows || [], (editRow, rowIndex) => this.checkRowVariableTypeComponents(editRow, rowIndex));\n        }\n    }\n    checkRowVariableTypeComponents(editRow, rowIndex) {\n        const rowComponents = editRow.components;\n        if (lodash_1.default.some(this.variableTypeComponentsIndexes, (compIndex) => {\n            const variableTypeComp = rowComponents[compIndex];\n            return variableTypeComp.type !== variableTypeComp.component.type;\n        })) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex, true);\n        }\n    }\n    setVariableTypeComponents() {\n        //set components which type is changing within a row (e.g.,by mergeComponentSchema action)\n        this.variableTypeComponentsIndexes = [];\n        lodash_1.default.each(this.component.components, (comp, index) => {\n            if (comp.typeChangeEnabled) {\n                this.variableTypeComponentsIndexes.push(index);\n            }\n        });\n    }\n    isOpen(editRow) {\n        return [EditRowState.New, EditRowState.Editing, EditRowState.Viewing].includes(editRow.state);\n    }\n    isComponentVisibleInSomeRow(component) {\n        const rows = this.editRows;\n        const savedStates = [EditRowState.Saved, EditRowState.Editing, EditRowState.Draft];\n        const savedRows = rows.filter(row => lodash_1.default.includes(savedStates, row.state));\n        this.visibleInHeader = this.visibleInHeader || [];\n        const changeVisibleInHeader = (component, isVisible) => {\n            if (!isVisible) {\n                lodash_1.default.remove(this.visibleInHeader, (key) => key === component.key);\n            }\n            if (isVisible && !lodash_1.default.includes(this.visibleInHeader, component.key)) {\n                this.visibleInHeader.push(component.key);\n            }\n        };\n        if (lodash_1.default.isEmpty(rows)) {\n            const rowComponents = this.createRowComponents({}, 0);\n            let checkComponent;\n            (0, utils_1.eachComponent)(rowComponents, (comp) => {\n                if (comp.component.key === component.key) {\n                    checkComponent = comp;\n                }\n                comp.checkConditions();\n            });\n            const isVisible = checkComponent ? checkComponent.visible : true;\n            [...this.components].forEach((comp) => this.removeComponent(comp, this.components));\n            changeVisibleInHeader(component, isVisible);\n            return isVisible;\n        }\n        const isOpenRowWhenEmpty = lodash_1.default.get(this.component, 'openWhenEmpty') && rows.length === 1 && rows[0].state === EditRowState.New;\n        if (!lodash_1.default.isEmpty(rows) && lodash_1.default.isEmpty(savedRows) && !isOpenRowWhenEmpty) {\n            return lodash_1.default.includes(this.visibleInHeader, component.key);\n        }\n        return lodash_1.default.some(isOpenRowWhenEmpty ? rows : savedRows, (row, index) => {\n            const editingRow = row.state === EditRowState.Editing;\n            let isVisible;\n            if (!editingRow) {\n                const flattenedComponents = this.flattenComponents(index);\n                const instance = flattenedComponents[component.key];\n                isVisible = instance ? instance.visible : true;\n                changeVisibleInHeader(component, isVisible);\n            }\n            else {\n                isVisible = lodash_1.default.includes(this.visibleInHeader, component.key);\n            }\n            return isVisible;\n        });\n    }\n    render(children) {\n        if (this.builderMode) {\n            return super.render();\n        }\n        const dataValue = this.dataValue;\n        const headerTemplate = this.headerTemplate;\n        const t = this.t.bind(this);\n        const templateName = this.displayAsTable ? 'editgridTable' : 'editgrid';\n        return super.render(children || this.renderTemplate(templateName, {\n            ref: {\n                row: this.rowRef,\n                addRow: this.addRowRef,\n                saveRow: this.saveRowRef,\n                cancelRow: this.cancelRowRef,\n            },\n            header: this.renderString(headerTemplate, {\n                displayValue: (component) => this.displayComponentValue(component, true),\n                components: this.component.components,\n                value: dataValue,\n                t\n            }),\n            footer: this.renderString(lodash_1.default.get(this.component, 'templates.footer'), {\n                components: this.component.components,\n                value: dataValue,\n                t\n            }),\n            rows: this.editRows.map(this.renderRow.bind(this)),\n            openRows: this.editRows.map((row) => this.isOpen(row)),\n            errors: this.editRows.map((row) => row.error),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons: this.hasRemoveButtons(),\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        const templateName = this.displayAsTable && this.prevHasAddButton ? 'tableComponents' : 'components';\n        return this.renderTemplate(templateName, {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        this.loadRefs(element, {\n            [this.addRowRef]: 'multiple',\n            [this.saveRowRef]: 'multiple',\n            [this.cancelRowRef]: 'multiple',\n            [this.rowRef]: 'multiple',\n        });\n        this.addRowElements.forEach((addButton) => {\n            this.addEventListener(addButton, 'click', () => this.addRow());\n        });\n        let openRowCount = 0;\n        this.rowElements.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow === null || editRow === void 0 ? void 0 : editRow.isRowSelected) {\n                row.classList.add('selected');\n            }\n            if (this.isOpen(editRow)) {\n                this.attachComponents(row, editRow.components);\n                this.addEventListener(this.saveRowElements[openRowCount], 'click', () => this.saveRow(rowIndex, true));\n                this.addEventListener(this.cancelRowElements[openRowCount], 'click', () => this.cancelRow(rowIndex));\n                openRowCount++;\n            }\n            else {\n                // Attach edit and remove button events.\n                [\n                    {\n                        className: 'removeRow',\n                        event: 'click',\n                        action: () => this.removeRow(rowIndex, true),\n                    },\n                    {\n                        className: 'editRow',\n                        event: 'click',\n                        action: () => {\n                            this.editRow(rowIndex).then(() => {\n                                var _a;\n                                if (this.component.rowDrafts) {\n                                    const errors = this.validateRow(editRow, false);\n                                    const shouldShowRowErrorsAlert = this.component.modal && errors.length && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted);\n                                    if (shouldShowRowErrorsAlert) {\n                                        this.alert.showErrors(errors, false);\n                                        editRow.alerts = true;\n                                    }\n                                }\n                            });\n                        },\n                    },\n                    {\n                        className: 'row',\n                        event: 'click',\n                        action: () => {\n                            row.classList.toggle('selected');\n                            let eventName = 'editGridSelectRow';\n                            if (Array.from(row.classList).includes('selected')) {\n                                editRow.isRowSelected = true;\n                            }\n                            else {\n                                delete editRow.isRowSelected;\n                                eventName = 'editGridUnSelectRow';\n                            }\n                            this.emit(eventName, {\n                                component: this.component,\n                                data: this.dataValue[rowIndex]\n                            });\n                        },\n                    }\n                ].forEach(({ className, event, action, }) => {\n                    const elements = row.getElementsByClassName(className);\n                    Array.prototype.forEach.call(elements, (element) => {\n                        if (this.options.pdf && lodash_1.default.intersection(element.classList, ['editRow', 'removeRow']).length) {\n                            element.style.display = 'none';\n                        }\n                        else {\n                            this.addEventListener(element, event, action);\n                        }\n                    });\n                });\n            }\n        });\n        // Add open class to the element if any edit grid row is open\n        if (openRowCount) {\n            this.addClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n        }\n        else {\n            this.removeClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n        }\n        return super.attach(element);\n    }\n    flattenRowDataValue(dataValue) {\n        const flattened = {};\n        Object.keys(dataValue).forEach((key) => {\n            if (lodash_1.default.isObject(dataValue[key]) && !lodash_1.default.isNil(dataValue[key])) {\n                Object.assign(flattened, this.flattenRowDataValue(dataValue[key]));\n            }\n            else {\n                flattened[key] = dataValue[key];\n            }\n        });\n        return flattened;\n    }\n    isComponentVisibleInRow(component, flattenedComponents) {\n        const instance = flattenedComponents[component.key];\n        return instance ? instance.visible : true;\n    }\n    displayComponentValue(component, header) {\n        return !!((!component.hasOwnProperty('tableView') || component.tableView)\n            && header ? this.isComponentVisibleInSomeRow(component) : lodash_1.default.includes(this.visibleInHeader, component.key));\n    }\n    renderRow(row, rowIndex) {\n        const dataValue = this.dataValue;\n        if (this.isOpen(row)) {\n            return this.renderComponents(row.components);\n        }\n        else {\n            const flattenedComponents = this.flattenComponents(rowIndex);\n            const rowTemplate = this.rowTemplate;\n            return this.renderString(rowTemplate, {\n                row: dataValue[rowIndex] || {},\n                data: this.data,\n                rowIndex,\n                components: this.component.components,\n                flattenedComponents,\n                displayValue: (component) => this.displayComponentValue(component),\n                isVisibleInRow: (component) => this.isComponentVisibleInRow(component, flattenedComponents),\n                getView: (component, data) => {\n                    var _a, _b;\n                    const instance = flattenedComponents[component.key];\n                    const view = instance ? instance.getView(data || instance.dataValue) : '';\n                    // If there is an html tag in view, don't allow it to be injected in template\n                    const htmlTagRegExp = new RegExp('<(.*?)>');\n                    return typeof view === 'string' && view.length && !((_a = instance.component) === null || _a === void 0 ? void 0 : _a.template) && htmlTagRegExp.test(view) && ((_b = instance.component) === null || _b === void 0 ? void 0 : _b.inputFormat) !== 'html'\n                        ? `<input type=\"text\" value=\"${view.replace(/\"/g, '&quot;')}\" readonly/>`\n                        : view;\n                },\n                state: this.editRows[rowIndex].state,\n                t: this.t.bind(this)\n            });\n        }\n    }\n    eachComponent(fn, rowIndex) {\n        lodash_1.default.each(this.getComponents(rowIndex), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            var _a;\n            const rowData = this.dataValue[component.rowIndex];\n            const editRowData = (_a = this.editRows[component.rowIndex]) === null || _a === void 0 ? void 0 : _a.data;\n            component.data = rowData || editRowData;\n        });\n    }\n    flattenComponents(rowIndex) {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        }, rowIndex);\n        return result;\n    }\n    getComponents(rowIndex) {\n        var _a;\n        // Ensure editrows is set.\n        this.editRows = this.editRows || [];\n        return this.builderMode\n            ? super.getComponents()\n            : lodash_1.default.isNumber(rowIndex)\n                ? (((_a = this.editRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.components) || [])\n                : this.editRows.reduce((result, row) => result.concat(row.components || []), []);\n    }\n    destroy(all = false) {\n        this.calculatedValue = undefined;\n        super.destroy(all);\n    }\n    destroyComponents(all = false, rowIndex = 0) {\n        if (this.builderMode) {\n            return super.destroyComponents(all);\n        }\n        const components = this.getComponents(rowIndex).slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n    }\n    createRow(dataObj, rowIndex) {\n        const editRow = {\n            components: this.createRowComponents(dataObj, rowIndex),\n            data: dataObj,\n            state: EditRowState.New,\n            backup: null,\n            error: null,\n            rowIndex,\n        };\n        this.editRows.push(editRow);\n        if (this.inlineEditMode) {\n            this.dataValue.push(dataObj);\n        }\n        return editRow;\n    }\n    addRow() {\n        if (this.options.readOnly) {\n            return;\n        }\n        const dataObj = {};\n        const rowIndex = this.editRows.length;\n        const editRow = this.createRow(dataObj, rowIndex);\n        if (editRow.state === EditRowState.New) {\n            this.emptyRow = (0, utils_1.fastCloneDeep)(editRow.data);\n        }\n        if (this.inlineEditMode) {\n            this.triggerChange();\n        }\n        this.emit('editGridAddRow', {\n            component: this.component,\n            row: editRow,\n        });\n        this.processRow('checkData', null, {}, editRow.data, editRow.components);\n        if (this.component.modal) {\n            this.addRowModal(rowIndex);\n        }\n        else {\n            this.redraw();\n        }\n        return editRow;\n    }\n    addRowModal(rowIndex) {\n        const modalContent = this.ce('div');\n        const editRow = this.editRows[rowIndex];\n        editRow.willBeSaved = false;\n        const { components } = editRow;\n        modalContent.innerHTML = this.renderComponents(components);\n        const dialog = this.component.modal ? this.createModal(modalContent, {}, () => this.showDialog(rowIndex)) : undefined;\n        dialog.classList.add(`editgrid-row-modal-${this.id}`);\n        editRow.dialog = dialog;\n        if (this.alert) {\n            this.alert.clear();\n            this.alert = null;\n        }\n        this.alert = new Alert_1.default(dialog.refs.dialogContents, this);\n        this.addEventListener(dialog, 'close', () => {\n            if (!editRow.willBeSaved) {\n                if (this.editRows[rowIndex] && this.editRows[rowIndex].state !== EditRowState.New) {\n                    this.editRows[rowIndex].components.forEach((comp) => {\n                        comp.setPristine(true);\n                    });\n                }\n                this.cancelRow(rowIndex);\n            }\n            if (this.alert) {\n                this.alert.clear();\n                this.alert = null;\n            }\n            // Remove references to dialog elements to prevent possible in some cases memory leaks\n            delete editRow.confirmationDialog;\n            delete editRow.dialog;\n        });\n        dialog.refs.dialogContents.appendChild(this.ce('button', {\n            class: 'btn btn-primary',\n            onClick: () => {\n                // After an attempt to save, all the components inside the row should become not pristine\n                if (!this.component.rowDrafts) {\n                    editRow.components.forEach((comp) => comp.setPristine(false));\n                }\n                const errors = this.validateRow(editRow, true);\n                if (!errors.length || this.component.rowDrafts) {\n                    editRow.willBeSaved = true;\n                    dialog.close();\n                    this.saveRow(rowIndex, true);\n                }\n                else {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n            },\n        }, this.component.saveRow || 'Save'));\n        return this.attachComponents(modalContent, components);\n    }\n    showDialog(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow.state === EditRowState.New ? lodash_1.default.isEqual(this.emptyRow, editRow.data) : lodash_1.default.isEqual(editRow.backup, editRow.data)) {\n            return Promise.resolve();\n        }\n        const wrapper = this.ce('div', { ref: 'confirmationDialog' });\n        const dialogContent = this.component.dialogTemplate || this.defaultDialogTemplate;\n        wrapper.innerHTML = dialogContent;\n        wrapper.refs = {};\n        this.loadRefs.call(wrapper, wrapper, {\n            dialogHeader: 'single',\n            dialogCancelButton: 'single',\n            dialogYesButton: 'single',\n        });\n        const dialog = this.createModal(wrapper);\n        dialog.classList.add(`editgrid-row-modal-confirmation-${this.id}`);\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        let dialogResult;\n        const promise = new Promise((resolve, reject) => {\n            dialogResult = { resolve, reject };\n        });\n        this.addEventListener(wrapper.refs.dialogYesButton, 'click', (event) => {\n            close(event);\n            dialogResult.resolve();\n        });\n        this.addEventListener(wrapper.refs.dialogCancelButton, 'click', (event) => {\n            close(event);\n            dialogResult.reject();\n        });\n        editRow.confirmationDialog = dialog;\n        return promise;\n    }\n    editRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        const isAlreadyEditing = editRow.state === EditRowState.Editing || editRow.state === EditRowState.New;\n        if (!editRow || isAlreadyEditing) {\n            return Promise.resolve();\n        }\n        editRow.prevState = editRow.state;\n        editRow.state = this.options.readOnly ? EditRowState.Viewing : EditRowState.Editing;\n        if (this.lazyLoad && (editRow.components.length === 0)) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex);\n        }\n        const dataSnapshot = (0, utils_1.fastCloneDeep)(editRow.data);\n        if (this.inlineEditMode) {\n            editRow.backup = dataSnapshot;\n        }\n        else {\n            editRow.backup = (0, utils_1.fastCloneDeep)(editRow.data);\n            editRow.data = dataSnapshot;\n            this.restoreRowContext(editRow);\n        }\n        if (this.component.modal) {\n            return this.addRowModal(rowIndex);\n        }\n        return this.redraw();\n    }\n    clearErrors(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow && Array.isArray(editRow.components)) {\n            editRow.components.forEach((comp) => {\n                comp.setPristine(true);\n                comp.setCustomValidity('');\n            });\n        }\n    }\n    cancelRow(rowIndex) {\n        if (this.options.readOnly) {\n            return;\n        }\n        const editRow = this.editRows[rowIndex];\n        switch (editRow.state) {\n            case EditRowState.New: {\n                editRow.state = EditRowState.Removed;\n                this.clearErrors(rowIndex);\n                this.destroyComponents(false, rowIndex);\n                if (this.inlineEditMode) {\n                    this.splice(rowIndex);\n                }\n                this.editRows.splice(rowIndex, 1);\n                this.openWhenEmpty();\n                break;\n            }\n            case EditRowState.Editing: {\n                editRow.state = editRow.prevState;\n                if (this.inlineEditMode) {\n                    this.dataValue[rowIndex] = editRow.backup;\n                }\n                editRow.data = editRow.backup;\n                editRow.backup = null;\n                this.restoreRowContext(editRow);\n                this.clearErrors(rowIndex);\n                break;\n            }\n        }\n        this.emit('editGridCancelRow', {\n            instance: this,\n            component: this.component,\n            editRow,\n        });\n        this.checkValidity(null, true);\n        this.redraw();\n        if (this.component.rowDrafts) {\n            this.checkValidity(this.data, false);\n        }\n    }\n    saveRow(rowIndex, modified) {\n        var _a, _b;\n        const editRow = this.editRows[rowIndex];\n        if (this.options.readOnly) {\n            return;\n        }\n        // After an attempt to save, all the components inside the row should become not pristine\n        if (!this.component.rowDrafts) {\n            editRow.components.forEach((comp) => comp.setPristine(false));\n        }\n        const errors = this.validateRow(editRow, true);\n        if (!this.component.rowDrafts) {\n            if (errors.length) {\n                return false;\n            }\n        }\n        if (this.saveEditMode) {\n            const dataValue = this.dataValue;\n            if ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.component.typeChangeEnabled) {\n                this.root.focusedComponent = null;\n            }\n            switch (editRow.state) {\n                case EditRowState.New: {\n                    const newIndex = dataValue.length;\n                    dataValue.push(editRow.data);\n                    editRow.components.forEach(component => component.rowIndex = newIndex);\n                    if (rowIndex !== newIndex) {\n                        this.editRows.splice(rowIndex, 1);\n                        this.editRows.splice(newIndex, 0, editRow);\n                    }\n                    break;\n                }\n                case EditRowState.Editing: {\n                    dataValue[rowIndex] = editRow.data;\n                    break;\n                }\n            }\n        }\n        editRow.state = this.component.rowDrafts && errors.length ? EditRowState.Draft : EditRowState.Saved;\n        editRow.backup = null;\n        this.updateValue();\n        this.emit('editGridSaveRow', {\n            component: this.component,\n            row: editRow.data,\n            instance: this\n        });\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        if (this.component.rowDrafts) {\n            editRow.components.forEach(comp => comp.setPristine(this.pristine));\n        }\n        this.checkValidity(null, true);\n        this.redraw();\n        if (editRow.alerts) {\n            editRow.alerts = false;\n        }\n        return true;\n    }\n    beforeFocus(component) {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        const relativePath = this.getRelativePath(component.path);\n        const arrayPath = (0, utils_1.getArrayFromComponentPath)(relativePath);\n        const rowIndex = arrayPath[0];\n        let rowToEditIndex = arrayPath[0];\n        this.editRows.forEach((row, indexInArray) => {\n            if (row.rowIndex === rowIndex) {\n                rowToEditIndex = indexInArray;\n            }\n        });\n        if (lodash_1.default.isNumber(rowToEditIndex)) {\n            this.editRow(rowToEditIndex);\n        }\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.editRows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(row.components, rowIndex + index);\n        });\n    }\n    baseRemoveRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        editRow.state = EditRowState.Removed;\n        this.destroyComponents(false, rowIndex);\n        return editRow;\n    }\n    removeRow(rowIndex, modified) {\n        if (this.options.readOnly) {\n            return;\n        }\n        this.clearErrors(rowIndex);\n        this.baseRemoveRow(rowIndex);\n        this.splice(rowIndex);\n        this.emit('editGridDeleteRow', {\n            index: rowIndex\n        });\n        this.editRows.splice(rowIndex, 1);\n        this.openWhenEmpty();\n        this.updateRowsComponents(rowIndex);\n        this.updateValue();\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        this.checkValidity(null, true);\n        this.checkData();\n        this.redraw();\n    }\n    createRowComponents(row, rowIndex, recreatePartially) {\n        // Iterate through existing components and destroy the ones with the same rowIndex.\n        if (this.components) {\n            for (let i = 0; i < this.components.length; i++) {\n                if (this.components[i].rowIndex === rowIndex) {\n                    this.components[i].destroy();\n                    this.components.splice(i, 1);\n                }\n            }\n        }\n        const currentRowComponents = lodash_1.default.get(this.editRows, `[${rowIndex}].components`, null);\n        return this.component.components.map((col, colIndex) => {\n            var _a;\n            if (recreatePartially && currentRowComponents && this.variableTypeComponentsIndexes.length) {\n                const currentComp = currentRowComponents[colIndex];\n                const shouldRecreate = lodash_1.default.includes(this.variableTypeComponentsIndexes, colIndex) && (currentComp === null || currentComp === void 0 ? void 0 : currentComp.type) !== ((_a = currentComp === null || currentComp === void 0 ? void 0 : currentComp.component) === null || _a === void 0 ? void 0 : _a.type);\n                if (!shouldRecreate) {\n                    return currentComp;\n                }\n                col = currentComp.component;\n            }\n            const column = lodash_1.default.clone(col);\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            options.onChange = (flags = {}, changed, modified) => {\n                var _a, _b;\n                if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {\n                    changed.instance.root.triggerChange(flags, changed, modified);\n                }\n                else if (!this.component.modal) {\n                    this.triggerRootChange(flags, changed, modified);\n                }\n                if (this.inlineEditMode) {\n                    return;\n                }\n                const editRow = this.editRows[rowIndex];\n                if (editRow) {\n                    this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);\n                    this.validateRow(editRow, false);\n                }\n                if (this.variableTypeComponentsIndexes.length) {\n                    this.checkRowVariableTypeComponents(editRow, rowIndex);\n                    this.redraw();\n                }\n            };\n            const comp = this.createComponent(lodash_1.default.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);\n            comp.rowIndex = rowIndex;\n            comp.inEditGrid = true;\n            return comp;\n        });\n    }\n    hasOpenRows() {\n        return this.editRows.some(row => this.isOpen(row));\n    }\n    getAttachedData(data = null) {\n        const ourData = (0, utils_1.fastCloneDeep)(data || this._data || this.rootValue);\n        lodash_1.default.set(ourData, this.key, this.editRows.map((row) => row.data));\n        return ourData;\n    }\n    shouldValidateDraft(editRow) {\n        var _a, _b;\n        // Draft rows should be validated only when there was an attempt to submit a form\n        return (editRow.state === EditRowState.Draft &&\n            !this.pristine &&\n            !((_a = this.root) === null || _a === void 0 ? void 0 : _a.pristine) &&\n            !this.hasOpenRows()) ||\n            ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted);\n    }\n    shouldValidateRow(editRow, dirty) {\n        return this.shouldValidateDraft(editRow) ||\n            editRow.state === EditRowState.New ||\n            editRow.state === EditRowState.Editing ||\n            editRow.alerts ||\n            dirty;\n    }\n    validateRow(editRow, dirty, forceSilentCheck) {\n        var _a;\n        editRow.errors = [];\n        if (this.shouldValidateRow(editRow, dirty)) {\n            const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;\n            const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);\n            const editGridValue = lodash_1.default.get(rootValue, this.path, []);\n            editGridValue[editRow.rowIndex] = editRow.data;\n            lodash_1.default.set(rootValue, this.path, editGridValue);\n            const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });\n            editRow.errors = (0, process_1.processSync)({\n                components: (0, utils_1.fastCloneDeep)(this.component.components).map((component) => {\n                    component.parentPath = `${this.path}[${editRow.rowIndex}]`;\n                    return component;\n                }),\n                data: rootValue,\n                row: editRow.data,\n                process: 'validateRow',\n                instances: this.componentsMap,\n                scope: { errors: [] },\n                processors: [\n                    {\n                        process: validationProcessorProcess,\n                        processSync: validationProcessorProcess\n                    }\n                ]\n            }).errors;\n        }\n        // TODO: this is essentially running its own custom validation and should be moved into a validation rule\n        if (this.component.validate && this.component.validate.row) {\n            const valid = this.evaluate(this.component.validate.row, {\n                valid: (editRow.length === 0),\n                row: editRow.data\n            }, 'valid', true);\n            if (valid.toString() !== 'true') {\n                editRow.errors.push({\n                    type: 'error',\n                    rowError: true,\n                    message: valid.toString()\n                });\n            }\n            if (valid === null) {\n                editRow.errors.push({\n                    type: 'error',\n                    message: `Invalid row validation for ${this.key}`\n                });\n            }\n        }\n        if (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {\n            this.showRowErrorAlerts(editRow, editRow.errors);\n        }\n        return editRow.errors;\n    }\n    showRowErrorAlerts(editRow, errors) {\n        if (editRow.alerts) {\n            if (this.alert) {\n                if (errors.length) {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n                else {\n                    this.alert.clear();\n                    this.alert = null;\n                }\n            }\n        }\n    }\n    /**\n     * @returns {boolean} - Return that this component processes its own validation.\n     */\n    get processOwnValidation() {\n        return true;\n    }\n    checkComponentValidity(data, dirty, row, options = {}, errors = []) {\n        var _a, _b;\n        const { silentCheck } = options;\n        const superValid = super.checkComponentValidity(data, dirty, row, options, errors);\n        // If super tells us that component invalid and there is no need to update alerts, just return false\n        if (!superValid && (!this.alert && !this.hasOpenRows())) {\n            return false;\n        }\n        let rowsEditing = false;\n        const allRowErrors = [];\n        this.editRows.forEach((editRow, index) => {\n            // Trigger all errors on the row.\n            const rowErrors = this.validateRow(editRow, dirty, silentCheck);\n            errors.push(...rowErrors);\n            allRowErrors.push(...rowErrors);\n            if (this.rowRefs) {\n                const rowContainer = this.rowRefs[index];\n                if (rowContainer) {\n                    const errorContainer = rowContainer.querySelector('.editgrid-row-error');\n                    if (rowErrors.length && errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n                        const rowError = rowErrors.find(error => error.rowError);\n                        this.addClass(errorContainer, 'help-block');\n                        errorContainer.textContent = this.t(rowError ? rowError.message : this.errorMessage('invalidRowError'));\n                    }\n                    else if (errorContainer) {\n                        errorContainer.textContent = '';\n                    }\n                }\n            }\n            // If this is a dirty check, and any rows are still editing, we need to throw validation error.\n            rowsEditing |= (dirty && this.isOpen(editRow));\n        });\n        if (allRowErrors.length) {\n            if (!silentCheck && (dirty || this.dirty) && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {\n                this.setCustomValidity(this.t(this.errorMessage('invalidRowsError')), dirty);\n                this.removeClass(this.element, 'has-error');\n            }\n            return false;\n        }\n        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {\n            this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);\n            errors.push(...this._errors);\n            return false;\n        }\n        const message = this.invalid || this.invalidMessage(data, dirty, false, row);\n        if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n            this.root.showErrors([message]);\n        }\n        else {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n        }\n        return superValid;\n    }\n    setRowInvalid(ref, index) {\n        const editRow = this.editRows[index];\n        const errorContainer = ref.querySelector('.editgrid-row-error');\n        if (errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n            this.addClass(errorContainer, 'help-block');\n            errorContainer.textContent = this.t(this.errorMessage('invalidRowError'));\n        }\n        else if (errorContainer) {\n            errorContainer.textContent = '';\n        }\n    }\n    changeState(changed, flags) {\n        if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {\n            this.rebuild();\n        }\n        else {\n            this.redraw();\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            value = this.defaultValue;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                return false;\n            }\n        }\n        const changed = this.hasChanged(value, this.dataValue);\n        if (this.parent && !this.options.server) {\n            this.parent.checkComponentConditions();\n        }\n        this.dataValue = value;\n        // Refresh editRow data when data changes.\n        this.dataValue.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow) {\n                editRow.data = row;\n                this.restoreRowContext(editRow, flags);\n                editRow.state = EditRowState.Saved;\n                editRow.backup = null;\n                editRow.errors = [];\n            }\n            else {\n                this.editRows[rowIndex] = {\n                    components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                    data: row,\n                    state: EditRowState.Saved,\n                    backup: null,\n                    errors: [],\n                };\n            }\n        });\n        let { length: dataLength } = this.dataValue;\n        // If the last row is a new row, then do not remove it.\n        if (this.editRows[dataLength] && (this.editRows[dataLength].state === EditRowState.New)) {\n            dataLength = (dataLength + 1);\n        }\n        this.editRows.slice(dataLength).forEach((editRow, index) => this.baseRemoveRow(dataLength + index));\n        this.editRows = this.editRows.slice(0, dataLength);\n        this.openWhenEmpty();\n        this.updateOnChange(flags, changed);\n        // do not call checkData with server option, it is called when change is triggered in updateOnChange\n        if (!this.options.server) {\n            this.checkData();\n        }\n        this.changeState(changed, flags);\n        return changed;\n    }\n    openWhenEmpty() {\n        const shouldBeOpened = !this.dataValue.length && this.component.openWhenEmpty;\n        const hasNoRows = !this.editRows.length;\n        if (hasNoRows && shouldBeOpened && !this.builderMode) {\n            const dataObj = {};\n            this.createRow(dataObj, 0);\n        }\n    }\n    restoreRowContext(editRow, flags = {}) {\n        editRow.components.forEach((component) => {\n            component.data = editRow.data;\n            this.setNestedValue(component, editRow.data, flags);\n        });\n    }\n    emptyRows() {\n        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));\n        this.editRows = [];\n    }\n    resetValue() {\n        super.resetValue();\n        this.emptyRows();\n    }\n}\nexports[\"default\"] = EditGridComponent;\nEditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/editgrid/EditGrid.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst components_1 = __webpack_require__(/*! @formio/bootstrap/components */ \"./node_modules/@formio/bootstrap/lib/cjs/templates/components/index.js\");\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst Alert_1 = __importDefault(__webpack_require__(/*! ../alert/Alert */ \"./lib/cjs/components/alert/Alert.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst EditRowState = {\n    New: 'new',\n    Editing: 'editing',\n    Saved: 'saved',\n    Viewing: 'viewing',\n    Removed: 'removed',\n    Draft: 'draft',\n};\nclass EditGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            type: 'editgrid',\n            label: 'Edit Grid',\n            key: 'editGrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            removeRow: 'Cancel',\n            defaultOpen: false,\n            openWhenEmpty: false,\n            modal: false,\n            components: [],\n            inlineEdit: false,\n            templates: {\n                header: EditGridComponent.defaultHeaderTemplate,\n                row: EditGridComponent.defaultRowTemplate,\n                tableHeader: EditGridComponent.defaultTableHeaderTemplate,\n                tableRow: EditGridComponent.defaultTableRowTemplate,\n                footer: '',\n            },\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Edit Grid',\n            icon: 'tasks',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#edit-grid',\n            showPreview: false,\n            weight: 30,\n            schema: EditGridComponent.schema(),\n        };\n    }\n    static get defaultHeaderTemplate() {\n        return `<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (displayValue(component)) { %}\n          <div class=\"col-sm-2\">{{ t(component.label) }}</div>\n        {% } %}\n      {% }) %}\n    </div>`;\n    }\n    static get defaultTableHeaderTemplate() {\n        return `\n      <tr>\n        {% util.eachComponent(components, function(component) { %}\n          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n            <td class=\"editgrid-table-column\">{{ component.label }}</td>\n          {% } %}\n        {% }) %}\n        {% if (!instance.options.readOnly && !instance.disabled) { %}\n          <td class=\"editgrid-table-column\">Actions</td>\n        {% } %}\n      </tr>\n    `;\n    }\n    static get defaultRowTemplate() {\n        return `<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (displayValue(component)) { %}\n          <div class=\"col-sm-2\">\n            {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}\n          </div>\n        {% } %}\n      {% }) %}\n      {% if (!instance.options.readOnly && !instance.disabled) { %}\n        <div class=\"col-sm-2\">\n          <div class=\"btn-group pull-right\">\n            <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>`;\n    }\n    static get defaultTableRowTemplate() {\n        return `\n      {% util.eachComponent(components, function(component) { %}\n          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n            <td class=\"editgrid-table-column\">\n              {{ getView(component, row[component.key]) }}\n            </td>\n          {% } %}\n        {% }) %}\n        {% if (!instance.options.readOnly && !instance.disabled) { %}\n          <td class=\"editgrid-table-column\">\n            <div class=\"btn-group\">\n              <button class=\"btn btn-default btn-light btn-sm editRow\" aria-label=\"{{ t('Edit row') }}\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n              {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\" aria-label=\"{{ t('Remove row') }}\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n              {% } %}\n            </div>\n          </td>\n        {% } %}\n    `;\n    }\n    get defaultDialogTemplate() {\n        return `\n    <h3 ${this._referenceAttributeName}=\"dialogHeader\">${this.t('Do you want to clear data?')}</h3>\n    <div style=\"display:flex; justify-content: flex-end;\">\n      <button ${this._referenceAttributeName}=\"dialogCancelButton\" class=\"btn btn-secondary\" aria-label=\"${this.t('Cancel')}\">${this.t('Cancel')}</button>\n      <button ${this._referenceAttributeName}=\"dialogYesButton\" class=\"btn btn-danger\" aria-label=\"${this.t('Yes, delete it')}\">${this.t('Yes, delete it')}</button>\n    </div>\n  `;\n    }\n    get defaultRowTemplate() {\n        return this.displayAsTable\n            ? EditGridComponent.defaultTableRowTemplate\n            : EditGridComponent.defaultRowTemplate;\n    }\n    get defaultHeaderTemplate() {\n        return this.displayAsTable\n            ? EditGridComponent.defaultTableHeaderTemplate\n            : EditGridComponent.defaultHeaderTemplate;\n    }\n    get rowTemplate() {\n        let rowTemplate;\n        if (utils_1.Evaluator.noeval) {\n            rowTemplate = this.displayAsTable ?\n                components_1.editgrid.tableRow\n                : components_1.editgrid.row;\n        }\n        else {\n            rowTemplate = this.displayAsTable ?\n                lodash_1.default.get(this.component, 'templates.tableRow', this.defaultRowTemplate)\n                : lodash_1.default.get(this.component, 'templates.row', this.defaultRowTemplate);\n        }\n        return rowTemplate;\n    }\n    get headerTemplate() {\n        let headerTemplate;\n        if (utils_1.Evaluator.noeval) {\n            headerTemplate = this.displayAsTable ?\n                components_1.editgrid.tableHeader\n                : components_1.editgrid.header;\n        }\n        else {\n            headerTemplate = this.displayAsTable ?\n                lodash_1.default.get(this.component, 'templates.tableHeader', this.defaultHeaderTemplate)\n                : lodash_1.default.get(this.component, 'templates.header', this.defaultHeaderTemplate);\n        }\n        return headerTemplate;\n    }\n    /**\n     * @returns {boolean} - Returns true if the component has nested components which don't trigger changes on the root level\n     */\n    get hasScopedChildren() {\n        return !this.inlineEditMode;\n    }\n    get defaultSchema() {\n        return EditGridComponent.schema();\n    }\n    get emptyValue() {\n        return [];\n    }\n    get editgridKey() {\n        return `editgrid-${this.key}`;\n    }\n    get rowRef() {\n        return `${this.editgridKey}-row`;\n    }\n    get rowElements() {\n        return this.refs[this.rowRef];\n    }\n    get rowRefs() {\n        return this.refs[`editgrid-${this.component.key}-row`];\n    }\n    get addRowRef() {\n        return `${this.editgridKey}-addRow`;\n    }\n    get addRowElements() {\n        return this.refs[this.addRowRef];\n    }\n    get saveRowRef() {\n        return `${this.editgridKey}-saveRow`;\n    }\n    get saveRowElements() {\n        return this.refs[this.saveRowRef];\n    }\n    get cancelRowRef() {\n        return `${this.editgridKey}-cancelRow`;\n    }\n    get cancelRowElements() {\n        return this.refs[this.cancelRowRef];\n    }\n    get inlineEditMode() {\n        return this.component.inlineEdit;\n    }\n    get saveEditMode() {\n        return !this.inlineEditMode;\n    }\n    get minLength() {\n        return this.builderMode ? 0 : lodash_1.default.get(this.component, 'validate.minLength', 0);\n    }\n    get data() {\n        return this._data;\n    }\n    get dataValue() {\n        return super.dataValue || [];\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get displayAsTable() {\n        return this.component.displayAsTable;\n    }\n    set data(value) {\n        this._data = value;\n        const data = this.dataValue;\n        (this.editRows || []).forEach((row, index) => {\n            if (!data[index] && row.state !== EditRowState.New) {\n                data[index] = {};\n            }\n            const rowData = data[index] || {};\n            row.data = rowData;\n            row.components.forEach((component) => {\n                component.data = rowData;\n            });\n        });\n    }\n    get iteratableRows() {\n        return this.editRows;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        const defaultValue = Array.isArray(value) ? value : [];\n        lodash_1.default.times(this.minLength - defaultValue.length, () => defaultValue.push({}));\n        return defaultValue;\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'editgrid';\n    }\n    hasRemoveButtons() {\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    init() {\n        if (this.builderMode) {\n            this.editRows = [];\n            return super.init();\n        }\n        this.components = this.components || [];\n        const dataValue = this.dataValue;\n        const openWhenEmpty = !dataValue.length && this.component.openWhenEmpty;\n        if (openWhenEmpty) {\n            const dataObj = {};\n            this.editRows = [];\n            this.createRow(dataObj, 0);\n        }\n        else {\n            this.editRows = dataValue.map((row, rowIndex) => ({\n                components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                data: row,\n                state: EditRowState.Saved,\n                backup: null,\n                error: null,\n                rowIndex,\n            }));\n        }\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkData();\n        this.setVariableTypeComponents();\n        if (this.variableTypeComponentsIndexes.length) {\n            lodash_1.default.each(this.editRows || [], (editRow, rowIndex) => this.checkRowVariableTypeComponents(editRow, rowIndex));\n        }\n    }\n    checkRowVariableTypeComponents(editRow, rowIndex) {\n        const rowComponents = editRow.components;\n        if (lodash_1.default.some(this.variableTypeComponentsIndexes, (compIndex) => {\n            const variableTypeComp = rowComponents[compIndex];\n            return variableTypeComp.type !== variableTypeComp.component.type;\n        })) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex, true);\n        }\n    }\n    setVariableTypeComponents() {\n        //set components which type is changing within a row (e.g.,by mergeComponentSchema action)\n        this.variableTypeComponentsIndexes = [];\n        lodash_1.default.each(this.component.components, (comp, index) => {\n            if (comp.typeChangeEnabled) {\n                this.variableTypeComponentsIndexes.push(index);\n            }\n        });\n    }\n    isOpen(editRow) {\n        return [EditRowState.New, EditRowState.Editing, EditRowState.Viewing].includes(editRow.state);\n    }\n    isComponentVisibleInSomeRow(component) {\n        const rows = this.editRows;\n        const savedStates = [EditRowState.Saved, EditRowState.Editing, EditRowState.Draft];\n        const savedRows = rows.filter(row => lodash_1.default.includes(savedStates, row.state));\n        this.visibleInHeader = this.visibleInHeader || [];\n        const changeVisibleInHeader = (component, isVisible) => {\n            if (!isVisible) {\n                lodash_1.default.remove(this.visibleInHeader, (key) => key === component.key);\n            }\n            if (isVisible && !lodash_1.default.includes(this.visibleInHeader, component.key)) {\n                this.visibleInHeader.push(component.key);\n            }\n        };\n        if (lodash_1.default.isEmpty(rows)) {\n            const rowComponents = this.createRowComponents({}, 0);\n            let checkComponent;\n            (0, utils_1.eachComponent)(rowComponents, (comp) => {\n                if (comp.component.key === component.key) {\n                    checkComponent = comp;\n                }\n                comp.checkConditions();\n            });\n            const isVisible = checkComponent ? checkComponent.visible : true;\n            [...this.components].forEach((comp) => this.removeComponent(comp, this.components));\n            changeVisibleInHeader(component, isVisible);\n            return isVisible;\n        }\n        const isOpenRowWhenEmpty = lodash_1.default.get(this.component, 'openWhenEmpty') && rows.length === 1 && rows[0].state === EditRowState.New;\n        if (!lodash_1.default.isEmpty(rows) && lodash_1.default.isEmpty(savedRows) && !isOpenRowWhenEmpty) {\n            return lodash_1.default.includes(this.visibleInHeader, component.key);\n        }\n        return lodash_1.default.some(isOpenRowWhenEmpty ? rows : savedRows, (row, index) => {\n            const editingRow = row.state === EditRowState.Editing;\n            let isVisible;\n            if (!editingRow) {\n                const flattenedComponents = this.flattenComponents(index);\n                const instance = flattenedComponents[component.key];\n                isVisible = instance ? instance.visible : true;\n                changeVisibleInHeader(component, isVisible);\n            }\n            else {\n                isVisible = lodash_1.default.includes(this.visibleInHeader, component.key);\n            }\n            return isVisible;\n        });\n    }\n    render(children) {\n        if (this.builderMode) {\n            return super.render();\n        }\n        const dataValue = this.dataValue;\n        const headerTemplate = this.headerTemplate;\n        const t = this.t.bind(this);\n        const templateName = this.displayAsTable ? 'editgridTable' : 'editgrid';\n        return super.render(children || this.renderTemplate(templateName, {\n            ref: {\n                row: this.rowRef,\n                addRow: this.addRowRef,\n                saveRow: this.saveRowRef,\n                cancelRow: this.cancelRowRef,\n            },\n            header: this.renderString(headerTemplate, {\n                displayValue: (component) => this.displayComponentValue(component, true),\n                components: this.component.components,\n                value: dataValue,\n                t\n            }),\n            footer: this.renderString(lodash_1.default.get(this.component, 'templates.footer'), {\n                components: this.component.components,\n                value: dataValue,\n                t\n            }),\n            rows: this.editRows.map(this.renderRow.bind(this)),\n            openRows: this.editRows.map((row) => this.isOpen(row)),\n            errors: this.editRows.map((row) => row.error),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons: this.hasRemoveButtons(),\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        const templateName = this.displayAsTable && this.prevHasAddButton ? 'tableComponents' : 'components';\n        return this.renderTemplate(templateName, {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        this.loadRefs(element, {\n            [this.addRowRef]: 'multiple',\n            [this.saveRowRef]: 'multiple',\n            [this.cancelRowRef]: 'multiple',\n            [this.rowRef]: 'multiple',\n        });\n        this.addRowElements.forEach((addButton) => {\n            this.addEventListener(addButton, 'click', () => this.addRow());\n        });\n        let openRowCount = 0;\n        this.rowElements.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow === null || editRow === void 0 ? void 0 : editRow.isRowSelected) {\n                row.classList.add('selected');\n            }\n            if (this.isOpen(editRow)) {\n                this.attachComponents(row, editRow.components);\n                this.addEventListener(this.saveRowElements[openRowCount], 'click', () => this.saveRow(rowIndex, true));\n                this.addEventListener(this.cancelRowElements[openRowCount], 'click', () => this.cancelRow(rowIndex));\n                openRowCount++;\n            }\n            else {\n                // Attach edit and remove button events.\n                [\n                    {\n                        className: 'removeRow',\n                        event: 'click',\n                        action: () => this.removeRow(rowIndex, true),\n                    },\n                    {\n                        className: 'editRow',\n                        event: 'click',\n                        action: () => {\n                            this.editRow(rowIndex).then(() => {\n                                var _a;\n                                if (this.component.rowDrafts) {\n                                    const errors = this.validateRow(editRow, false);\n                                    const shouldShowRowErrorsAlert = this.component.modal && errors.length && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted);\n                                    if (shouldShowRowErrorsAlert) {\n                                        this.alert.showErrors(errors, false);\n                                        editRow.alerts = true;\n                                    }\n                                }\n                            });\n                        },\n                    },\n                    {\n                        className: 'row',\n                        event: 'click',\n                        action: () => {\n                            row.classList.toggle('selected');\n                            let eventName = 'editGridSelectRow';\n                            if (Array.from(row.classList).includes('selected')) {\n                                editRow.isRowSelected = true;\n                            }\n                            else {\n                                delete editRow.isRowSelected;\n                                eventName = 'editGridUnSelectRow';\n                            }\n                            this.emit(eventName, {\n                                component: this.component,\n                                data: this.dataValue[rowIndex]\n                            });\n                        },\n                    }\n                ].forEach(({ className, event, action, }) => {\n                    const elements = row.getElementsByClassName(className);\n                    Array.prototype.forEach.call(elements, (element) => {\n                        if (this.options.pdf && lodash_1.default.intersection(element.classList, ['editRow', 'removeRow']).length) {\n                            element.style.display = 'none';\n                        }\n                        else {\n                            this.addEventListener(element, event, action);\n                        }\n                    });\n                });\n            }\n        });\n        // Add open class to the element if any edit grid row is open\n        if (openRowCount) {\n            this.addClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n        }\n        else {\n            this.removeClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n        }\n        return super.attach(element);\n    }\n    flattenRowDataValue(dataValue) {\n        const flattened = {};\n        Object.keys(dataValue).forEach((key) => {\n            if (lodash_1.default.isObject(dataValue[key]) && !lodash_1.default.isNil(dataValue[key])) {\n                Object.assign(flattened, this.flattenRowDataValue(dataValue[key]));\n            }\n            else {\n                flattened[key] = dataValue[key];\n            }\n        });\n        return flattened;\n    }\n    isComponentVisibleInRow(component, flattenedComponents) {\n        const instance = flattenedComponents[component.key];\n        return instance ? instance.visible : true;\n    }\n    displayComponentValue(component, header) {\n        return !!((!component.hasOwnProperty('tableView') || component.tableView)\n            && header ? this.isComponentVisibleInSomeRow(component) : lodash_1.default.includes(this.visibleInHeader, component.key));\n    }\n    renderRow(row, rowIndex) {\n        const dataValue = this.dataValue;\n        if (this.isOpen(row)) {\n            return this.renderComponents(row.components);\n        }\n        else {\n            const flattenedComponents = this.flattenComponents(rowIndex);\n            const rowTemplate = this.rowTemplate;\n            return this.renderString(rowTemplate, {\n                row: dataValue[rowIndex] || {},\n                data: this.data,\n                rowIndex,\n                components: this.component.components,\n                flattenedComponents,\n                displayValue: (component) => this.displayComponentValue(component),\n                isVisibleInRow: (component) => this.isComponentVisibleInRow(component, flattenedComponents),\n                getView: (component, data) => {\n                    var _a, _b;\n                    const instance = flattenedComponents[component.key];\n                    const view = instance ? instance.getView(data || instance.dataValue) : '';\n                    // If there is an html tag in view, don't allow it to be injected in template\n                    const htmlTagRegExp = new RegExp('<(.*?)>');\n                    return typeof view === 'string' && view.length && !((_a = instance.component) === null || _a === void 0 ? void 0 : _a.template) && htmlTagRegExp.test(view) && ((_b = instance.component) === null || _b === void 0 ? void 0 : _b.inputFormat) !== 'html'\n                        ? `<input type=\"text\" value=\"${view.replace(/\"/g, '&quot;')}\" readonly/>`\n                        : view;\n                },\n                state: this.editRows[rowIndex].state,\n                t: this.t.bind(this)\n            });\n        }\n    }\n    eachComponent(fn, rowIndex) {\n        lodash_1.default.each(this.getComponents(rowIndex), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            var _a;\n            const rowData = this.dataValue[component.rowIndex];\n            const editRowData = (_a = this.editRows[component.rowIndex]) === null || _a === void 0 ? void 0 : _a.data;\n            component.data = rowData || editRowData;\n        });\n    }\n    flattenComponents(rowIndex) {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        }, rowIndex);\n        return result;\n    }\n    getComponents(rowIndex) {\n        var _a;\n        // Ensure editrows is set.\n        this.editRows = this.editRows || [];\n        return this.builderMode\n            ? super.getComponents()\n            : lodash_1.default.isNumber(rowIndex)\n                ? (((_a = this.editRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.components) || [])\n                : this.editRows.reduce((result, row) => result.concat(row.components || []), []);\n    }\n    destroy(all = false) {\n        this.calculatedValue = undefined;\n        super.destroy(all);\n    }\n    destroyComponents(all = false, rowIndex = 0) {\n        if (this.builderMode) {\n            return super.destroyComponents(all);\n        }\n        const components = this.getComponents(rowIndex).slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n    }\n    createRow(dataObj, rowIndex) {\n        const editRow = {\n            components: this.createRowComponents(dataObj, rowIndex),\n            data: dataObj,\n            state: EditRowState.New,\n            backup: null,\n            error: null,\n            rowIndex,\n        };\n        this.editRows.push(editRow);\n        if (this.inlineEditMode) {\n            this.dataValue.push(dataObj);\n        }\n        return editRow;\n    }\n    addRow() {\n        if (this.options.readOnly) {\n            return;\n        }\n        const dataObj = {};\n        const rowIndex = this.editRows.length;\n        const editRow = this.createRow(dataObj, rowIndex);\n        if (editRow.state === EditRowState.New) {\n            this.emptyRow = (0, utils_1.fastCloneDeep)(editRow.data);\n        }\n        if (this.inlineEditMode) {\n            this.triggerChange();\n        }\n        this.emit('editGridAddRow', {\n            component: this.component,\n            row: editRow,\n        });\n        this.processRow('checkData', null, {}, editRow.data, editRow.components);\n        if (this.component.modal) {\n            this.addRowModal(rowIndex);\n        }\n        else {\n            this.redraw();\n        }\n        return editRow;\n    }\n    addRowModal(rowIndex) {\n        const modalContent = this.ce('div');\n        const editRow = this.editRows[rowIndex];\n        editRow.willBeSaved = false;\n        const { components } = editRow;\n        modalContent.innerHTML = this.renderComponents(components);\n        const dialog = this.component.modal ? this.createModal(modalContent, {}, () => this.showDialog(rowIndex)) : undefined;\n        dialog.classList.add(`editgrid-row-modal-${this.id}`);\n        editRow.dialog = dialog;\n        if (this.alert) {\n            this.alert.clear();\n            this.alert = null;\n        }\n        this.alert = new Alert_1.default(dialog.refs.dialogContents, this);\n        this.addEventListener(dialog, 'close', () => {\n            if (!editRow.willBeSaved) {\n                if (this.editRows[rowIndex] && this.editRows[rowIndex].state !== EditRowState.New) {\n                    this.editRows[rowIndex].components.forEach((comp) => {\n                        comp.setPristine(true);\n                    });\n                }\n                this.cancelRow(rowIndex);\n            }\n            if (this.alert) {\n                this.alert.clear();\n                this.alert = null;\n            }\n            // Remove references to dialog elements to prevent possible in some cases memory leaks\n            delete editRow.confirmationDialog;\n            delete editRow.dialog;\n        });\n        dialog.refs.dialogContents.appendChild(this.ce('button', {\n            class: 'btn btn-primary',\n            onClick: () => {\n                // After an attempt to save, all the components inside the row should become not pristine\n                if (!this.component.rowDrafts) {\n                    editRow.components.forEach((comp) => comp.setPristine(false));\n                }\n                const errors = this.validateRow(editRow, true);\n                if (!errors.length || this.component.rowDrafts) {\n                    editRow.willBeSaved = true;\n                    dialog.close();\n                    this.saveRow(rowIndex, true);\n                }\n                else {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n            },\n        }, this.component.saveRow || 'Save'));\n        return this.attachComponents(modalContent, components);\n    }\n    showDialog(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow.state === EditRowState.New ? lodash_1.default.isEqual(this.emptyRow, editRow.data) : lodash_1.default.isEqual(editRow.backup, editRow.data)) {\n            return Promise.resolve();\n        }\n        const wrapper = this.ce('div', { ref: 'confirmationDialog' });\n        const dialogContent = this.component.dialogTemplate || this.defaultDialogTemplate;\n        wrapper.innerHTML = dialogContent;\n        wrapper.refs = {};\n        this.loadRefs.call(wrapper, wrapper, {\n            dialogHeader: 'single',\n            dialogCancelButton: 'single',\n            dialogYesButton: 'single',\n        });\n        const dialog = this.createModal(wrapper);\n        dialog.classList.add(`editgrid-row-modal-confirmation-${this.id}`);\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        let dialogResult;\n        const promise = new Promise((resolve, reject) => {\n            dialogResult = { resolve, reject };\n        });\n        this.addEventListener(wrapper.refs.dialogYesButton, 'click', (event) => {\n            close(event);\n            dialogResult.resolve();\n        });\n        this.addEventListener(wrapper.refs.dialogCancelButton, 'click', (event) => {\n            close(event);\n            dialogResult.reject();\n        });\n        editRow.confirmationDialog = dialog;\n        return promise;\n    }\n    editRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        const isAlreadyEditing = editRow.state === EditRowState.Editing || editRow.state === EditRowState.New;\n        if (!editRow || isAlreadyEditing) {\n            return Promise.resolve();\n        }\n        editRow.prevState = editRow.state;\n        editRow.state = this.options.readOnly ? EditRowState.Viewing : EditRowState.Editing;\n        if (this.lazyLoad && (editRow.components.length === 0)) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex);\n        }\n        const dataSnapshot = (0, utils_1.fastCloneDeep)(editRow.data);\n        if (this.inlineEditMode) {\n            editRow.backup = dataSnapshot;\n        }\n        else {\n            editRow.backup = (0, utils_1.fastCloneDeep)(editRow.data);\n            editRow.data = dataSnapshot;\n            this.restoreRowContext(editRow);\n        }\n        if (this.component.modal) {\n            return this.addRowModal(rowIndex);\n        }\n        return this.redraw();\n    }\n    clearErrors(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow && Array.isArray(editRow.components)) {\n            editRow.components.forEach((comp) => {\n                comp.setPristine(true);\n                comp.setCustomValidity('');\n            });\n        }\n    }\n    cancelRow(rowIndex) {\n        if (this.options.readOnly) {\n            return;\n        }\n        const editRow = this.editRows[rowIndex];\n        switch (editRow.state) {\n            case EditRowState.New: {\n                editRow.state = EditRowState.Removed;\n                this.clearErrors(rowIndex);\n                this.destroyComponents(false, rowIndex);\n                if (this.inlineEditMode) {\n                    this.splice(rowIndex);\n                }\n                this.editRows.splice(rowIndex, 1);\n                this.openWhenEmpty();\n                break;\n            }\n            case EditRowState.Editing: {\n                editRow.state = editRow.prevState;\n                if (this.inlineEditMode) {\n                    this.dataValue[rowIndex] = editRow.backup;\n                }\n                editRow.data = editRow.backup;\n                editRow.backup = null;\n                this.restoreRowContext(editRow);\n                this.clearErrors(rowIndex);\n                break;\n            }\n        }\n        this.emit('editGridCancelRow', {\n            instance: this,\n            component: this.component,\n            editRow,\n        });\n        this.checkValidity(null, true);\n        this.redraw();\n        if (this.component.rowDrafts) {\n            this.checkValidity(this.data, false);\n        }\n    }\n    saveRow(rowIndex, modified) {\n        var _a, _b;\n        const editRow = this.editRows[rowIndex];\n        if (this.options.readOnly) {\n            return;\n        }\n        // After an attempt to save, all the components inside the row should become not pristine\n        if (!this.component.rowDrafts) {\n            editRow.components.forEach((comp) => comp.setPristine(false));\n        }\n        const errors = this.validateRow(editRow, true);\n        if (!this.component.rowDrafts) {\n            if (errors.length) {\n                return false;\n            }\n        }\n        if (this.saveEditMode) {\n            const dataValue = this.dataValue;\n            if ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.component.typeChangeEnabled) {\n                this.root.focusedComponent = null;\n            }\n            switch (editRow.state) {\n                case EditRowState.New: {\n                    const newIndex = dataValue.length;\n                    dataValue.push(editRow.data);\n                    editRow.components.forEach(component => component.rowIndex = newIndex);\n                    if (rowIndex !== newIndex) {\n                        this.editRows.splice(rowIndex, 1);\n                        this.editRows.splice(newIndex, 0, editRow);\n                    }\n                    break;\n                }\n                case EditRowState.Editing: {\n                    dataValue[rowIndex] = editRow.data;\n                    break;\n                }\n            }\n        }\n        editRow.state = this.component.rowDrafts && errors.length ? EditRowState.Draft : EditRowState.Saved;\n        editRow.backup = null;\n        this.updateValue();\n        this.emit('editGridSaveRow', {\n            component: this.component,\n            row: editRow.data,\n            instance: this\n        });\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        if (this.component.rowDrafts) {\n            editRow.components.forEach(comp => comp.setPristine(this.pristine));\n        }\n        this.checkValidity(null, true);\n        this.redraw();\n        if (editRow.alerts) {\n            editRow.alerts = false;\n        }\n        return true;\n    }\n    beforeFocus(component) {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        const relativePath = this.getRelativePath(component.path);\n        const arrayPath = (0, utils_1.getArrayFromComponentPath)(relativePath);\n        const rowIndex = arrayPath[0];\n        let rowToEditIndex = arrayPath[0];\n        this.editRows.forEach((row, indexInArray) => {\n            if (row.rowIndex === rowIndex) {\n                rowToEditIndex = indexInArray;\n            }\n        });\n        if (lodash_1.default.isNumber(rowToEditIndex)) {\n            this.editRow(rowToEditIndex);\n        }\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.editRows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(row.components, rowIndex + index);\n        });\n    }\n    baseRemoveRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        editRow.state = EditRowState.Removed;\n        this.destroyComponents(false, rowIndex);\n        return editRow;\n    }\n    removeRow(rowIndex, modified) {\n        if (this.options.readOnly) {\n            return;\n        }\n        this.clearErrors(rowIndex);\n        this.baseRemoveRow(rowIndex);\n        this.removeSubmissionMetadataRow(rowIndex);\n        this.splice(rowIndex);\n        this.emit('editGridDeleteRow', {\n            index: rowIndex\n        });\n        this.editRows.splice(rowIndex, 1);\n        this.openWhenEmpty();\n        this.updateRowsComponents(rowIndex);\n        this.updateValue();\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        this.checkValidity(null, true);\n        this.checkData();\n        this.redraw();\n    }\n    createRowComponents(row, rowIndex, recreatePartially) {\n        // Iterate through existing components and destroy the ones with the same rowIndex.\n        if (this.components) {\n            for (let i = 0; i < this.components.length; i++) {\n                if (this.components[i].rowIndex === rowIndex) {\n                    this.components[i].destroy();\n                    this.components.splice(i, 1);\n                }\n            }\n        }\n        const currentRowComponents = lodash_1.default.get(this.editRows, `[${rowIndex}].components`, null);\n        return this.component.components.map((col, colIndex) => {\n            var _a;\n            if (recreatePartially && currentRowComponents && this.variableTypeComponentsIndexes.length) {\n                const currentComp = currentRowComponents[colIndex];\n                const shouldRecreate = lodash_1.default.includes(this.variableTypeComponentsIndexes, colIndex) && (currentComp === null || currentComp === void 0 ? void 0 : currentComp.type) !== ((_a = currentComp === null || currentComp === void 0 ? void 0 : currentComp.component) === null || _a === void 0 ? void 0 : _a.type);\n                if (!shouldRecreate) {\n                    return currentComp;\n                }\n                col = currentComp.component;\n            }\n            const column = lodash_1.default.clone(col);\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            options.onChange = (flags = {}, changed, modified) => {\n                var _a, _b;\n                if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {\n                    changed.instance.root.triggerChange(flags, changed, modified);\n                }\n                else if (!this.component.modal) {\n                    this.triggerRootChange(flags, changed, modified);\n                }\n                if (this.inlineEditMode) {\n                    return;\n                }\n                const editRow = this.editRows[rowIndex];\n                if (editRow) {\n                    this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);\n                    this.validateRow(editRow, false);\n                }\n                if (this.variableTypeComponentsIndexes.length) {\n                    this.checkRowVariableTypeComponents(editRow, rowIndex);\n                    this.redraw();\n                }\n            };\n            const comp = this.createComponent(lodash_1.default.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);\n            comp.rowIndex = rowIndex;\n            comp.inEditGrid = true;\n            return comp;\n        });\n    }\n    hasOpenRows() {\n        return this.editRows.some(row => this.isOpen(row));\n    }\n    getAttachedData(data = null) {\n        const ourData = (0, utils_1.fastCloneDeep)(data || this._data || this.rootValue);\n        lodash_1.default.set(ourData, this.key, this.editRows.map((row) => row.data));\n        return ourData;\n    }\n    shouldValidateDraft(editRow) {\n        var _a, _b;\n        // Draft rows should be validated only when there was an attempt to submit a form\n        return (editRow.state === EditRowState.Draft &&\n            !this.pristine &&\n            !((_a = this.root) === null || _a === void 0 ? void 0 : _a.pristine) &&\n            !this.hasOpenRows()) ||\n            ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted);\n    }\n    shouldValidateRow(editRow, dirty) {\n        return this.shouldValidateDraft(editRow) ||\n            editRow.state === EditRowState.New ||\n            editRow.state === EditRowState.Editing ||\n            editRow.alerts ||\n            dirty;\n    }\n    validateRow(editRow, dirty, forceSilentCheck) {\n        var _a;\n        editRow.errors = [];\n        if (this.shouldValidateRow(editRow, dirty)) {\n            const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;\n            const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);\n            const editGridValue = lodash_1.default.get(rootValue, this.path, []);\n            editGridValue[editRow.rowIndex] = editRow.data;\n            lodash_1.default.set(rootValue, this.path, editGridValue);\n            const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });\n            editRow.errors = (0, process_1.processSync)({\n                components: (0, utils_1.fastCloneDeep)(this.component.components).map((component) => {\n                    component.parentPath = `${this.path}[${editRow.rowIndex}]`;\n                    return component;\n                }),\n                data: rootValue,\n                row: editRow.data,\n                process: 'validateRow',\n                instances: this.componentsMap,\n                scope: { errors: [] },\n                processors: [\n                    {\n                        process: validationProcessorProcess,\n                        processSync: validationProcessorProcess\n                    }\n                ]\n            }).errors;\n        }\n        // TODO: this is essentially running its own custom validation and should be moved into a validation rule\n        if (this.component.validate && this.component.validate.row) {\n            const valid = this.evaluate(this.component.validate.row, {\n                valid: (editRow.length === 0),\n                row: editRow.data\n            }, 'valid', true);\n            if (valid.toString() !== 'true') {\n                editRow.errors.push({\n                    type: 'error',\n                    rowError: true,\n                    message: valid.toString()\n                });\n            }\n            if (valid === null) {\n                editRow.errors.push({\n                    type: 'error',\n                    message: `Invalid row validation for ${this.key}`\n                });\n            }\n        }\n        if (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {\n            this.showRowErrorAlerts(editRow, editRow.errors);\n        }\n        return editRow.errors;\n    }\n    showRowErrorAlerts(editRow, errors) {\n        if (editRow.alerts) {\n            if (this.alert) {\n                if (errors.length) {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n                else {\n                    this.alert.clear();\n                    this.alert = null;\n                }\n            }\n        }\n    }\n    /**\n     * @returns {boolean} - Return that this component processes its own validation.\n     */\n    get processOwnValidation() {\n        return true;\n    }\n    checkComponentValidity(data, dirty, row, options = {}, errors = []) {\n        var _a, _b;\n        const { silentCheck } = options;\n        const superValid = super.checkComponentValidity(data, dirty, row, options, errors);\n        // If super tells us that component invalid and there is no need to update alerts, just return false\n        if (!superValid && (!this.alert && !this.hasOpenRows())) {\n            return false;\n        }\n        let rowsEditing = false;\n        const allRowErrors = [];\n        this.editRows.forEach((editRow, index) => {\n            // Trigger all errors on the row.\n            const rowErrors = this.validateRow(editRow, dirty, silentCheck);\n            errors.push(...rowErrors);\n            allRowErrors.push(...rowErrors);\n            if (this.rowRefs) {\n                const rowContainer = this.rowRefs[index];\n                if (rowContainer) {\n                    const errorContainer = rowContainer.querySelector('.editgrid-row-error');\n                    if (rowErrors.length && errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n                        const rowError = rowErrors.find(error => error.rowError);\n                        this.addClass(errorContainer, 'help-block');\n                        errorContainer.textContent = this.t(rowError ? rowError.message : this.errorMessage('invalidRowError'));\n                    }\n                    else if (errorContainer) {\n                        errorContainer.textContent = '';\n                    }\n                }\n            }\n            // If this is a dirty check, and any rows are still editing, we need to throw validation error.\n            rowsEditing |= (dirty && this.isOpen(editRow));\n        });\n        if (allRowErrors.length) {\n            if (!silentCheck && (dirty || this.dirty) && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {\n                this.setCustomValidity(this.t(this.errorMessage('invalidRowsError')), dirty);\n                this.removeClass(this.element, 'has-error');\n            }\n            return false;\n        }\n        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {\n            this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);\n            errors.push(...this._errors);\n            return false;\n        }\n        const message = this.invalid || this.invalidMessage(data, dirty, false, row);\n        if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n            this.root.showErrors([message]);\n        }\n        else {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n        }\n        return superValid;\n    }\n    setRowInvalid(ref, index) {\n        const editRow = this.editRows[index];\n        const errorContainer = ref.querySelector('.editgrid-row-error');\n        if (errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n            this.addClass(errorContainer, 'help-block');\n            errorContainer.textContent = this.t(this.errorMessage('invalidRowError'));\n        }\n        else if (errorContainer) {\n            errorContainer.textContent = '';\n        }\n    }\n    changeState(changed, flags) {\n        if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {\n            this.rebuild();\n        }\n        else {\n            this.redraw();\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            value = this.defaultValue;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                return false;\n            }\n        }\n        const changed = this.hasChanged(value, this.dataValue);\n        if (this.parent && !this.options.server) {\n            this.parent.checkComponentConditions();\n        }\n        this.dataValue = value;\n        // Refresh editRow data when data changes.\n        this.dataValue.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow) {\n                editRow.data = row;\n                this.restoreRowContext(editRow, flags);\n                editRow.state = EditRowState.Saved;\n                editRow.backup = null;\n                editRow.errors = [];\n            }\n            else {\n                this.editRows[rowIndex] = {\n                    components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                    data: row,\n                    state: EditRowState.Saved,\n                    backup: null,\n                    errors: [],\n                };\n            }\n        });\n        let { length: dataLength } = this.dataValue;\n        // If the last row is a new row, then do not remove it.\n        if (this.editRows[dataLength] && (this.editRows[dataLength].state === EditRowState.New)) {\n            dataLength = (dataLength + 1);\n        }\n        this.editRows.slice(dataLength).forEach((editRow, index) => this.baseRemoveRow(dataLength + index));\n        this.editRows = this.editRows.slice(0, dataLength);\n        this.openWhenEmpty();\n        this.updateOnChange(flags, changed);\n        // do not call checkData with server option, it is called when change is triggered in updateOnChange\n        if (!this.options.server) {\n            this.checkData();\n        }\n        this.changeState(changed, flags);\n        return changed;\n    }\n    openWhenEmpty() {\n        const shouldBeOpened = !this.dataValue.length && this.component.openWhenEmpty;\n        const hasNoRows = !this.editRows.length;\n        if (hasNoRows && shouldBeOpened && !this.builderMode) {\n            const dataObj = {};\n            this.createRow(dataObj, 0);\n        }\n    }\n    restoreRowContext(editRow, flags = {}) {\n        editRow.components.forEach((component) => {\n            component.data = editRow.data;\n            this.setNestedValue(component, editRow.data, flags);\n        });\n    }\n    emptyRows() {\n        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));\n        this.editRows = [];\n    }\n    resetValue() {\n        super.resetValue();\n        this.emptyRows();\n    }\n}\nexports[\"default\"] = EditGridComponent;\nEditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/editgrid/EditGrid.js?");
 
 /***/ }),
 
@@ -5226,7 +5226,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\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\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"./node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"./node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof __webpack_require__.g !== 'undefined') {\n    htmlCanvasElement = __webpack_require__.g.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        }\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = (typeof FileReader !== 'undefined');\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        return this.fileService.downloadFile(fileInfo).then((result) => result.url);\n    }\n    get emptyValue() {\n        return [];\n    }\n    getValueAsString(value) {\n        if (lodash_1.default.isArray(value)) {\n            return lodash_1.default.map(value, 'originalName').join(', ');\n        }\n        return lodash_1.default.get(value, 'originalName', '');\n    }\n    getValue() {\n        return this.dataValue;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        return Array.isArray(value) ? value : [];\n    }\n    get hasTypes() {\n        return this.component.fileTypes &&\n            Array.isArray(this.component.fileTypes) &&\n            this.component.fileTypes.length !== 0 &&\n            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== '');\n    }\n    get fileDropHidden() {\n        return this._fileBrowseHidden;\n    }\n    set fileDropHidden(value) {\n        if (typeof value !== 'boolean' || this.component.multiple) {\n            return;\n        }\n        this._fileBrowseHidden = value;\n    }\n    get shouldSyncFiles() {\n        return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);\n    }\n    get autoSync() {\n        return lodash_1.default.get(this, 'component.autoSync', false);\n    }\n    get columnsSize() {\n        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;\n        const typeColumn = this.hasTypes ? 2 : 0;\n        const sizeColumn = 2;\n        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;\n        return {\n            name: nameColumn,\n            size: sizeColumn,\n            type: typeColumn,\n            actions: actionsColumn,\n        };\n    }\n    render() {\n        const { filesToDelete, filesToUpload } = this.filesToSync;\n        return super.render(this.renderTemplate('file', {\n            fileSize: this.fileSize,\n            files: this.dataValue || [],\n            filesToDelete,\n            filesToUpload,\n            disabled: this.disabled,\n            support: this.support,\n            fileDropHidden: this.fileDropHidden,\n            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),\n            isSyncing: this.isSyncing,\n            columns: this.columnsSize,\n        }));\n    }\n    getVideoStream(constraints) {\n        return navigator.mediaDevices.getUserMedia({\n            video: Object.assign({ width: { min: 640, ideal: 1920 }, height: { min: 360, ideal: 1080 }, aspectRatio: { ideal: 16 / 9 } }, constraints),\n            audio: false,\n        });\n    }\n    stopVideoStream(videoStream) {\n        videoStream.getVideoTracks().forEach((track) => track.stop());\n    }\n    getFrame(videoPlayer) {\n        return new Promise((resolve) => {\n            const canvas = document.createElement('canvas');\n            canvas.height = videoPlayer.videoHeight;\n            canvas.width = videoPlayer.videoWidth;\n            const context = canvas.getContext('2d');\n            context.drawImage(videoPlayer, 0, 0);\n            canvas.toBlob(resolve);\n        });\n    }\n    startVideo() {\n        this.getVideoStream()\n            .then((stream) => {\n            this.videoStream = stream;\n            const { videoPlayer } = this.refs;\n            if (!videoPlayer) {\n                console.warn('Video player not found in template.');\n                this.cameraMode = false;\n                this.redraw();\n                return;\n            }\n            videoPlayer.srcObject = stream;\n            const width = parseInt(this.component.webcamSize) || 320;\n            videoPlayer.setAttribute('width', width);\n            videoPlayer.play();\n        })\n            .catch((err) => {\n            console.error(err);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    stopVideo() {\n        if (this.videoStream) {\n            this.stopVideoStream(this.videoStream);\n            this.videoStream = null;\n        }\n    }\n    takePicture() {\n        const { videoPlayer } = this.refs;\n        if (!videoPlayer) {\n            console.warn('Video player not found in template.');\n            this.cameraMode = false;\n            this.redraw();\n            return;\n        }\n        this.getFrame(videoPlayer)\n            .then((frame) => {\n            frame.name = `photo-${Date.now()}.png`;\n            this.handleFilesToUpload([frame]);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    browseFiles(attrs = {}) {\n        return new Promise((resolve) => {\n            const fileInput = this.ce('input', Object.assign({ type: 'file', style: 'height: 0; width: 0; visibility: hidden;', tabindex: '-1' }, attrs));\n            document.body.appendChild(fileInput);\n            fileInput.addEventListener('change', () => {\n                resolve(fileInput.files);\n                document.body.removeChild(fileInput);\n            }, true);\n            // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n            // a click event on it.\n            if (typeof fileInput.trigger === 'function') {\n                fileInput.trigger('click');\n            }\n            else {\n                fileInput.click();\n            }\n        });\n    }\n    set cameraMode(value) {\n        this._cameraMode = value;\n        if (value) {\n            this.startVideo();\n        }\n        else {\n            this.stopVideo();\n        }\n    }\n    get cameraMode() {\n        return this._cameraMode;\n    }\n    get useWebViewCamera() {\n        return this.imageUpload && webViewCamera;\n    }\n    get imageUpload() {\n        return Boolean(this.component.image);\n    }\n    get browseOptions() {\n        const options = {};\n        if (this.component.multiple) {\n            options.multiple = true;\n        }\n        if (this.component.capture) {\n            options.capture = this.component.capture;\n        }\n        //use \"accept\" attribute only for desktop devices because of its limited support by mobile browsers\n        const filePattern = this.component.filePattern.trim() || '';\n        if (!this.isMobile.any) {\n            const imagesPattern = 'image/*';\n            if (this.imageUpload && (!filePattern || filePattern === '*')) {\n                options.accept = imagesPattern;\n            }\n            else if (this.imageUpload && !filePattern.includes(imagesPattern)) {\n                options.accept = `${imagesPattern},${filePattern}`;\n            }\n            else {\n                options.accept = filePattern;\n            }\n        }\n        // if input capture is set, we need the \"accept\" attribute to determine which device to launch\n        else if (this.component.capture) {\n            if (filePattern.includes('video')) {\n                options.accept = 'video/*';\n            }\n            else if (filePattern.includes('audio')) {\n                options.accept = 'audio/*';\n            }\n            else {\n                options.accept = 'image/*';\n            }\n        }\n        return options;\n    }\n    get actions() {\n        return {\n            abort: this.abortRequest.bind(this),\n        };\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            fileDrop: 'single',\n            fileBrowse: 'single',\n            galleryButton: 'single',\n            cameraButton: 'single',\n            takePictureButton: 'single',\n            toggleCameraMode: 'single',\n            videoPlayer: 'single',\n            fileLink: 'multiple',\n            removeLink: 'multiple',\n            fileToSyncRemove: 'multiple',\n            fileImage: 'multiple',\n            fileType: 'multiple',\n            fileProcessingLoader: 'single',\n            syncNow: 'single',\n            restoreFile: 'multiple',\n            progress: 'multiple',\n        });\n        // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.\n        this.refs.input = [];\n        const superAttach = super.attach(element);\n        if (this.refs.fileDrop) {\n            // if (!this.statuses.length) {\n            //   this.refs.fileDrop.removeAttribute('hidden');\n            // }\n            const _this = this;\n            this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n                this.className = 'fileSelector fileDragOver';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n                _this.handleFilesToUpload(event.dataTransfer.files);\n            });\n        }\n        this.addEventListener(element, 'click', (event) => {\n            this.handleAction(event);\n        });\n        if (this.refs.fileBrowse) {\n            this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n                event.preventDefault();\n                this.browseFiles(this.browseOptions)\n                    .then((files) => {\n                    this.handleFilesToUpload(files);\n                });\n            });\n        }\n        this.refs.fileLink.forEach((fileLink, index) => {\n            this.addEventListener(fileLink, 'click', (event) => {\n                event.preventDefault();\n                this.getFile(this.dataValue[index]);\n            });\n        });\n        this.refs.removeLink.forEach((removeLink, index) => {\n            this.addEventListener(removeLink, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.dataValue[index];\n                this.handleFileToRemove(fileInfo);\n            });\n        });\n        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {\n            this.addEventListener(fileToSyncRemove, 'click', (event) => {\n                event.preventDefault();\n                this.filesToSync.filesToUpload.splice(index, 1);\n                this.redraw();\n            });\n        });\n        this.refs.restoreFile.forEach((fileToRestore, index) => {\n            this.addEventListener(fileToRestore, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.filesToSync.filesToDelete[index];\n                delete fileInfo.status;\n                delete fileInfo.message;\n                this.filesToSync.filesToDelete.splice(index, 1);\n                this.dataValue.push(fileInfo);\n                this.triggerChange();\n                this.redraw();\n            });\n        });\n        if (this.refs.galleryButton && webViewCamera) {\n            this.addEventListener(this.refs.galleryButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.PHOTOLIBRARY,\n                });\n            });\n        }\n        if (this.refs.cameraButton && webViewCamera) {\n            this.addEventListener(this.refs.cameraButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.CAMERA,\n                    encodingType: webViewCamera.EncodingType.PNG,\n                    mediaType: webViewCamera.MediaType.PICTURE,\n                    saveToPhotoAlbum: true,\n                    correctOrientation: false,\n                });\n            });\n        }\n        if (this.refs.takePictureButton) {\n            this.addEventListener(this.refs.takePictureButton, 'click', (event) => {\n                event.preventDefault();\n                this.takePicture();\n            });\n        }\n        if (this.refs.toggleCameraMode) {\n            this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {\n                event.preventDefault();\n                this.cameraMode = !this.cameraMode;\n                this.redraw();\n            });\n        }\n        this.refs.fileType.forEach((fileType, index) => {\n            if (!this.dataValue[index]) {\n                return;\n            }\n            this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;\n            this.addEventListener(fileType, 'change', (event) => {\n                event.preventDefault();\n                const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);\n                this.dataValue[index].fileType = fileType.label;\n            });\n        });\n        this.addEventListener(this.refs.syncNow, 'click', (event) => {\n            event.preventDefault();\n            this.syncFiles();\n        });\n        const fileService = this.fileService;\n        if (fileService) {\n            const loadingImages = [];\n            this.filesReady = new Promise((resolve, reject) => {\n                this.filesReadyResolve = resolve;\n                this.filesReadyReject = reject;\n            });\n            this.refs.fileImage.forEach((image, index) => {\n                loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));\n            });\n            if (loadingImages.length) {\n                Promise.all(loadingImages).then(() => {\n                    this.filesReadyResolve();\n                }).catch(() => this.filesReadyReject());\n            }\n            else {\n                this.filesReadyResolve();\n            }\n        }\n        return superAttach;\n    }\n    /* eslint-disable max-len */\n    fileSize(a, b, c, d, e) {\n        return `${(b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;\n    }\n    /* eslint-enable max-len */\n    /* eslint-disable max-depth */\n    globStringToRegex(str) {\n        str = str.replace(/\\s/g, '');\n        let regexp = '', excludes = [];\n        if (str.length > 2 && str[0] === '/' && str[str.length - 1] === '/') {\n            regexp = str.substring(1, str.length - 1);\n        }\n        else {\n            const split = str.split(',');\n            if (split.length > 1) {\n                for (let i = 0; i < split.length; i++) {\n                    const r = this.globStringToRegex(split[i]);\n                    if (r.regexp) {\n                        regexp += `(${r.regexp})`;\n                        if (i < split.length - 1) {\n                            regexp += '|';\n                        }\n                    }\n                    else {\n                        excludes = excludes.concat(r.excludes);\n                    }\n                }\n            }\n            else {\n                if (str.startsWith('!')) {\n                    excludes.push(`^((?!${this.globStringToRegex(str.substring(1)).regexp}).)*$`);\n                }\n                else {\n                    if (str.startsWith('.')) {\n                        str = `*${str}`;\n                    }\n                    regexp = `^${str.replace(new RegExp('[.\\\\\\\\+*?\\\\[\\\\^\\\\]$(){}=!<>|:\\\\-]', 'g'), '\\\\$&')}$`;\n                    regexp = regexp.replace(/\\\\\\*/g, '.*').replace(/\\\\\\?/g, '.');\n                }\n            }\n        }\n        return { regexp, excludes };\n    }\n    /* eslint-enable max-depth */\n    translateScalars(str) {\n        if (typeof str === 'string') {\n            if (str.search(/kb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024);\n            }\n            if (str.search(/mb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024);\n            }\n            if (str.search(/gb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024 * 1024);\n            }\n            if (str.search(/b/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/s/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/m/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 60);\n            }\n            if (str.search(/h/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 3600);\n            }\n        }\n        return str;\n    }\n    validatePattern(file, val) {\n        if (!val) {\n            return true;\n        }\n        const pattern = this.globStringToRegex(val);\n        let valid = true;\n        if (pattern.regexp && pattern.regexp.length) {\n            const regexp = new RegExp(pattern.regexp, 'i');\n            valid = (!lodash_1.default.isNil(file.type) && regexp.test(file.type)) ||\n                (!lodash_1.default.isNil(file.name) && regexp.test(file.name));\n        }\n        valid = pattern.excludes.reduce((result, excludePattern) => {\n            const exclude = new RegExp(excludePattern, 'i');\n            return result && (lodash_1.default.isNil(file.type) || exclude.test(file.type)) &&\n                (lodash_1.default.isNil(file.name) || exclude.test(file.name));\n        }, valid);\n        return valid;\n    }\n    validateMinSize(file, val) {\n        return file.size + 0.1 >= this.translateScalars(val);\n    }\n    validateMaxSize(file, val) {\n        return file.size - 0.1 <= this.translateScalars(val);\n    }\n    abortRequest(id) {\n        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);\n        if (abortUpload) {\n            abortUpload.abort();\n        }\n    }\n    handleAction(event) {\n        const target = event.target;\n        if (!target.id) {\n            return;\n        }\n        const [action, id] = target.id.split('-');\n        if (!action || !id || !this.actions[action]) {\n            return;\n        }\n        this.actions[action](id);\n    }\n    getFileName(file) {\n        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());\n    }\n    getInitFileToSync(file) {\n        const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;\n        return {\n            id: createRandomString(),\n            // Get a unique name for this file to keep file collisions from occurring.\n            dir: this.interpolate(this.component.dir || ''),\n            name: this.getFileName(file),\n            originalName: escapedFileName,\n            fileKey: this.component.fileKey || 'file',\n            storage: this.component.storage,\n            options: this.component.options,\n            file,\n            size: file.size,\n            status: 'info',\n            message: this.t('Processing file. Please wait...'),\n            hash: '',\n        };\n    }\n    handleSubmissionRevisions(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.root.form.submissionRevisions !== 'true') {\n                return '';\n            }\n            const bmf = new browser_md5_file_1.default();\n            const hash = yield new Promise((resolve, reject) => {\n                this.emit('fileUploadingStart');\n                bmf.md5(file, (err, md5) => {\n                    if (err) {\n                        return reject(err);\n                    }\n                    return resolve(md5);\n                });\n            });\n            this.emit('fileUploadingEnd');\n            return hash;\n        });\n    }\n    validateFileName(file) {\n        // Check if file with the same name is being uploaded\n        const fileWithSameNameUploading = this.filesToSync.filesToUpload\n            .some(fileToSync => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });\n        const fileWithSameNameUploaded = lodash_1.default.some(this.dataValue, fileStatus => fileStatus.originalName === file.name);\n        return fileWithSameNameUploaded || fileWithSameNameUploading\n            ? {\n                status: 'error',\n                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),\n            }\n            : {};\n    }\n    validateFileSettings(file) {\n        // Check file pattern\n        if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {\n            return {\n                status: 'error',\n                message: this.t('File is the wrong type; it must be {{ pattern }}', {\n                    pattern: this.component.filePattern,\n                }),\n            };\n        }\n        // Check file minimum size\n        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too small; it must be at least {{ size }}', {\n                    size: this.component.fileMinSize,\n                }),\n            };\n        }\n        // Check file maximum size\n        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too big; it must be at most {{ size }}', {\n                    size: this.component.fileMaxSize,\n                }),\n            };\n        }\n        return {};\n    }\n    validateFileService() {\n        const { fileService } = this;\n        return !fileService\n            ? {\n                status: 'error',\n                message: this.t('File Service not provided.'),\n            }\n            : {};\n    }\n    validateFile(file) {\n        const fileServiceValidation = this.validateFileService();\n        if (fileServiceValidation.status === 'error') {\n            return fileServiceValidation;\n        }\n        const fileNameValidation = this.validateFileName(file);\n        if (fileNameValidation.status === 'error') {\n            return fileNameValidation;\n        }\n        return this.validateFileSettings(file);\n    }\n    getGroupPermissions() {\n        let groupKey = null;\n        let groupPermissions = null;\n        //Iterate through form components to find group resource if one exists\n        this.root.everyComponent((element) => {\n            var _a, _b;\n            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {\n                groupPermissions = !element.component.submissionAccess ? [\n                    {\n                        type: element.component.defaultPermission,\n                        roles: [],\n                    },\n                ] : element.component.submissionAccess;\n                groupPermissions.forEach((permission) => {\n                    groupKey = ['admin', 'write', 'create'].includes(permission.type) ? element.component.key : null;\n                });\n            }\n        });\n        return { groupKey, groupPermissions };\n    }\n    triggerFileProcessor(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            let processedFile = null;\n            if (this.root.options.fileProcessor) {\n                try {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'block';\n                    }\n                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, this.root.options.fileProcessor);\n                    processedFile = yield fileProcessorHandler(file, this.component.properties);\n                }\n                catch (err) {\n                    this.fileDropHidden = false;\n                    return {\n                        status: 'error',\n                        message: this.t('File processing has been failed.'),\n                    };\n                }\n                finally {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'none';\n                    }\n                }\n            }\n            return {\n                file: processedFile,\n            };\n        });\n    }\n    prepareFileToUpload(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const fileToSync = this.getInitFileToSync(file);\n            fileToSync.hash = yield this.handleSubmissionRevisions(file);\n            const { status, message } = this.validateFile(file);\n            if (status === 'error') {\n                fileToSync.isValidationError = true;\n                fileToSync.status = status;\n                fileToSync.message = message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.component.privateDownload) {\n                file.private = true;\n            }\n            const { groupKey, groupPermissions } = this.getGroupPermissions();\n            const processedFile = yield this.triggerFileProcessor(file);\n            if (processedFile.status === 'error') {\n                fileToSync.status === 'error';\n                fileToSync.message = processedFile.message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.autoSync) {\n                fileToSync.message = this.t('Ready to be uploaded into storage');\n            }\n            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));\n        });\n    }\n    prepareFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Only allow one upload if not multiple.\n            if (!this.component.multiple) {\n                files = Array.prototype.slice.call(files, 0, 1);\n            }\n            if (this.component.storage && files && files.length) {\n                this.fileDropHidden = true;\n                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {\n                    yield this.prepareFileToUpload(file);\n                    this.redraw();\n                })));\n            }\n            else {\n                return Promise.resolve();\n            }\n        });\n    }\n    handleFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            yield this.prepareFilesToUpload(files);\n            if (!this.autoSync) {\n                yield this.syncFiles();\n            }\n        });\n    }\n    prepareFileToDelete(fileInfo) {\n        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync\n                ? this.t('Ready to be removed from storage')\n                : this.t('Preparing file to remove') }));\n        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);\n        this.splice(index);\n        this.redraw();\n    }\n    handleFileToRemove(fileInfo) {\n        this.prepareFileToDelete(fileInfo);\n        if (!this.autoSync) {\n            this.syncFiles();\n        }\n    }\n    deleteFile(fileInfo) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const { options = {} } = this.component;\n            if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {\n                const { fileService } = this;\n                if (fileService && typeof fileService.deleteFile === 'function') {\n                    return yield fileService.deleteFile(fileInfo, options);\n                }\n                else {\n                    const formio = this.options.formio || (this.root && this.root.formio);\n                    if (formio) {\n                        return yield formio.makeRequest('', fileInfo.url, 'delete');\n                    }\n                }\n            }\n        });\n    }\n    delete() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToDelete.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                try {\n                    if (fileToSync.isValidationError) {\n                        return { fileToSync };\n                    }\n                    yield this.deleteFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('Succefully removed');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                count++;\n                fileToSync.status = 'progress';\n                fileToSync.progress = parseInt(100 * count / total);\n                delete fileToSync.message;\n                this.redraw();\n            }, changeMessage: (message) => {\n                fileToSync.message = message;\n                this.redraw();\n            } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, \n            // Abort upload callback\n            (abort) => this.abortUploads.push({\n                id: fileToSync.id,\n                abort,\n            }), this.getMultipartOptions(fileToSync));\n        });\n    }\n    upload() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToUpload.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                let fileInfo = null;\n                try {\n                    if (fileToSync.isValidationError) {\n                        return {\n                            fileToSync,\n                            fileInfo,\n                        };\n                    }\n                    fileInfo = yield this.uploadFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('Succefully uploaded');\n                    fileInfo.originalName = fileToSync.originalName;\n                    fileInfo.hash = fileToSync.hash;\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    delete fileToSync.progress;\n                    fileToSync.message = typeof response === 'string'\n                        ? response\n                        : response.type === 'abort'\n                            ? this.t('Request was aborted')\n                            : response.toString();\n                    this.emit('fileUploadError', {\n                        fileToSync,\n                        response,\n                    });\n                }\n                finally {\n                    delete fileToSync.progress;\n                    this.redraw();\n                }\n                return {\n                    fileToSync,\n                    fileInfo,\n                };\n            })));\n        });\n    }\n    syncFiles() {\n        return __awaiter(this, void 0, void 0, function* () {\n            this.isSyncing = true;\n            this.fileDropHidden = true;\n            this.redraw();\n            try {\n                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([this.delete(), this.upload()]);\n                this.filesToSync.filesToDelete = filesToDelete\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                this.filesToSync.filesToUpload = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                if (!this.hasValue()) {\n                    this.dataValue = [];\n                }\n                const data = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })\n                    .map(file => file.fileInfo);\n                this.dataValue.push(...data);\n                this.triggerChange();\n                return Promise.resolve();\n            }\n            catch (err) {\n                return Promise.reject();\n            }\n            finally {\n                this.isSyncing = false;\n                this.fileDropHidden = false;\n                this.abortUploads = [];\n                this.redraw();\n            }\n        });\n    }\n    getFile(fileInfo) {\n        const { options = {} } = this.component;\n        const { fileService } = this;\n        if (!fileService) {\n            return alert('File Service not provided');\n        }\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        fileService.downloadFile(fileInfo, options).then((file) => {\n            if (file) {\n                if (['base64', 'indexeddb'].includes(file.storage)) {\n                    (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);\n                }\n                else {\n                    window.open(file.url, '_blank');\n                }\n            }\n        })\n            .catch((response) => {\n            // Is alert the best way to do this?\n            // User is expecting an immediate notification due to attempting to download a file.\n            alert(response);\n        });\n    }\n    focus() {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (this.refs.fileBrowse) {\n            this.refs.fileBrowse.focus();\n        }\n    }\n    beforeSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (!this.autoSync) {\n                    return Promise.resolve();\n                }\n                yield this.syncFiles();\n                return this.shouldSyncFiles\n                    ? Promise.reject('Synchronization is failed')\n                    : Promise.resolve();\n            }\n            catch (error) {\n                return Promise.reject(error.message);\n            }\n        });\n    }\n    destroy(all) {\n        this.stopVideo();\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = FileComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/File.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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\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\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"./node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"./node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof __webpack_require__.g !== 'undefined') {\n    htmlCanvasElement = __webpack_require__.g.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        }\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = (typeof FileReader !== 'undefined');\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        return this.fileService.downloadFile(fileInfo).then((result) => result.url);\n    }\n    get emptyValue() {\n        return [];\n    }\n    getValueAsString(value) {\n        if (lodash_1.default.isArray(value)) {\n            return lodash_1.default.map(value, 'originalName').join(', ');\n        }\n        return lodash_1.default.get(value, 'originalName', '');\n    }\n    getValue() {\n        return this.dataValue;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        return Array.isArray(value) ? value : [];\n    }\n    get hasTypes() {\n        return this.component.fileTypes &&\n            Array.isArray(this.component.fileTypes) &&\n            this.component.fileTypes.length !== 0 &&\n            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== '');\n    }\n    get fileDropHidden() {\n        return this._fileBrowseHidden;\n    }\n    set fileDropHidden(value) {\n        if (typeof value !== 'boolean' || this.component.multiple) {\n            return;\n        }\n        this._fileBrowseHidden = value;\n    }\n    get shouldSyncFiles() {\n        return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);\n    }\n    get autoSync() {\n        // Disable autoSync for now\n        return false;\n        // return _.get(this, 'component.autoSync', false);\n    }\n    get columnsSize() {\n        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;\n        const typeColumn = this.hasTypes ? 2 : 0;\n        const sizeColumn = 2;\n        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;\n        return {\n            name: nameColumn,\n            size: sizeColumn,\n            type: typeColumn,\n            actions: actionsColumn,\n        };\n    }\n    render() {\n        const { filesToDelete, filesToUpload } = this.filesToSync;\n        return super.render(this.renderTemplate('file', {\n            fileSize: this.fileSize,\n            files: this.dataValue || [],\n            filesToDelete,\n            filesToUpload,\n            disabled: this.disabled,\n            support: this.support,\n            fileDropHidden: this.fileDropHidden,\n            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),\n            isSyncing: this.isSyncing,\n            columns: this.columnsSize,\n        }));\n    }\n    getVideoStream(constraints) {\n        return navigator.mediaDevices.getUserMedia({\n            video: Object.assign({ width: { min: 640, ideal: 1920 }, height: { min: 360, ideal: 1080 }, aspectRatio: { ideal: 16 / 9 } }, constraints),\n            audio: false,\n        });\n    }\n    stopVideoStream(videoStream) {\n        videoStream.getVideoTracks().forEach((track) => track.stop());\n    }\n    getFrame(videoPlayer) {\n        return new Promise((resolve) => {\n            const canvas = document.createElement('canvas');\n            canvas.height = videoPlayer.videoHeight;\n            canvas.width = videoPlayer.videoWidth;\n            const context = canvas.getContext('2d');\n            context.drawImage(videoPlayer, 0, 0);\n            canvas.toBlob(resolve);\n        });\n    }\n    startVideo() {\n        this.getVideoStream()\n            .then((stream) => {\n            this.videoStream = stream;\n            const { videoPlayer } = this.refs;\n            if (!videoPlayer) {\n                console.warn('Video player not found in template.');\n                this.cameraMode = false;\n                this.redraw();\n                return;\n            }\n            videoPlayer.srcObject = stream;\n            const width = parseInt(this.component.webcamSize) || 320;\n            videoPlayer.setAttribute('width', width);\n            videoPlayer.play();\n        })\n            .catch((err) => {\n            console.error(err);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    stopVideo() {\n        if (this.videoStream) {\n            this.stopVideoStream(this.videoStream);\n            this.videoStream = null;\n        }\n    }\n    takePicture() {\n        const { videoPlayer } = this.refs;\n        if (!videoPlayer) {\n            console.warn('Video player not found in template.');\n            this.cameraMode = false;\n            this.redraw();\n            return;\n        }\n        this.getFrame(videoPlayer)\n            .then((frame) => {\n            frame.name = `photo-${Date.now()}.png`;\n            this.handleFilesToUpload([frame]);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    browseFiles(attrs = {}) {\n        return new Promise((resolve) => {\n            const fileInput = this.ce('input', Object.assign({ type: 'file', style: 'height: 0; width: 0; visibility: hidden;', tabindex: '-1' }, attrs));\n            document.body.appendChild(fileInput);\n            fileInput.addEventListener('change', () => {\n                resolve(fileInput.files);\n                document.body.removeChild(fileInput);\n            }, true);\n            // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n            // a click event on it.\n            if (typeof fileInput.trigger === 'function') {\n                fileInput.trigger('click');\n            }\n            else {\n                fileInput.click();\n            }\n        });\n    }\n    set cameraMode(value) {\n        this._cameraMode = value;\n        if (value) {\n            this.startVideo();\n        }\n        else {\n            this.stopVideo();\n        }\n    }\n    get cameraMode() {\n        return this._cameraMode;\n    }\n    get useWebViewCamera() {\n        return this.imageUpload && webViewCamera;\n    }\n    get imageUpload() {\n        return Boolean(this.component.image);\n    }\n    get browseOptions() {\n        const options = {};\n        if (this.component.multiple) {\n            options.multiple = true;\n        }\n        if (this.component.capture) {\n            options.capture = this.component.capture;\n        }\n        //use \"accept\" attribute only for desktop devices because of its limited support by mobile browsers\n        const filePattern = this.component.filePattern.trim() || '';\n        if (!this.isMobile.any) {\n            const imagesPattern = 'image/*';\n            if (this.imageUpload && (!filePattern || filePattern === '*')) {\n                options.accept = imagesPattern;\n            }\n            else if (this.imageUpload && !filePattern.includes(imagesPattern)) {\n                options.accept = `${imagesPattern},${filePattern}`;\n            }\n            else {\n                options.accept = filePattern;\n            }\n        }\n        // if input capture is set, we need the \"accept\" attribute to determine which device to launch\n        else if (this.component.capture) {\n            if (filePattern.includes('video')) {\n                options.accept = 'video/*';\n            }\n            else if (filePattern.includes('audio')) {\n                options.accept = 'audio/*';\n            }\n            else {\n                options.accept = 'image/*';\n            }\n        }\n        return options;\n    }\n    get actions() {\n        return {\n            abort: this.abortRequest.bind(this),\n        };\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            fileDrop: 'single',\n            fileBrowse: 'single',\n            galleryButton: 'single',\n            cameraButton: 'single',\n            takePictureButton: 'single',\n            toggleCameraMode: 'single',\n            videoPlayer: 'single',\n            fileLink: 'multiple',\n            removeLink: 'multiple',\n            fileToSyncRemove: 'multiple',\n            fileImage: 'multiple',\n            fileType: 'multiple',\n            fileProcessingLoader: 'single',\n            syncNow: 'single',\n            restoreFile: 'multiple',\n            progress: 'multiple',\n        });\n        // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.\n        this.refs.input = [];\n        const superAttach = super.attach(element);\n        if (this.refs.fileDrop) {\n            // if (!this.statuses.length) {\n            //   this.refs.fileDrop.removeAttribute('hidden');\n            // }\n            const _this = this;\n            this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n                this.className = 'fileSelector fileDragOver';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n                _this.handleFilesToUpload(event.dataTransfer.files);\n            });\n        }\n        this.addEventListener(element, 'click', (event) => {\n            this.handleAction(event);\n        });\n        if (this.refs.fileBrowse) {\n            this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n                event.preventDefault();\n                this.browseFiles(this.browseOptions)\n                    .then((files) => {\n                    this.handleFilesToUpload(files);\n                });\n            });\n        }\n        this.refs.fileLink.forEach((fileLink, index) => {\n            this.addEventListener(fileLink, 'click', (event) => {\n                event.preventDefault();\n                this.getFile(this.dataValue[index]);\n            });\n        });\n        this.refs.removeLink.forEach((removeLink, index) => {\n            this.addEventListener(removeLink, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.dataValue[index];\n                this.handleFileToRemove(fileInfo);\n            });\n        });\n        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {\n            this.addEventListener(fileToSyncRemove, 'click', (event) => {\n                event.preventDefault();\n                this.filesToSync.filesToUpload.splice(index, 1);\n                this.redraw();\n            });\n        });\n        this.refs.restoreFile.forEach((fileToRestore, index) => {\n            this.addEventListener(fileToRestore, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.filesToSync.filesToDelete[index];\n                delete fileInfo.status;\n                delete fileInfo.message;\n                this.filesToSync.filesToDelete.splice(index, 1);\n                this.dataValue.push(fileInfo);\n                this.triggerChange();\n                this.redraw();\n            });\n        });\n        if (this.refs.galleryButton && webViewCamera) {\n            this.addEventListener(this.refs.galleryButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.PHOTOLIBRARY,\n                });\n            });\n        }\n        if (this.refs.cameraButton && webViewCamera) {\n            this.addEventListener(this.refs.cameraButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.CAMERA,\n                    encodingType: webViewCamera.EncodingType.PNG,\n                    mediaType: webViewCamera.MediaType.PICTURE,\n                    saveToPhotoAlbum: true,\n                    correctOrientation: false,\n                });\n            });\n        }\n        if (this.refs.takePictureButton) {\n            this.addEventListener(this.refs.takePictureButton, 'click', (event) => {\n                event.preventDefault();\n                this.takePicture();\n            });\n        }\n        if (this.refs.toggleCameraMode) {\n            this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {\n                event.preventDefault();\n                this.cameraMode = !this.cameraMode;\n                this.redraw();\n            });\n        }\n        this.refs.fileType.forEach((fileType, index) => {\n            if (!this.dataValue[index]) {\n                return;\n            }\n            this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;\n            this.addEventListener(fileType, 'change', (event) => {\n                event.preventDefault();\n                const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);\n                this.dataValue[index].fileType = fileType.label;\n            });\n        });\n        this.addEventListener(this.refs.syncNow, 'click', (event) => {\n            event.preventDefault();\n            this.syncFiles();\n        });\n        const fileService = this.fileService;\n        if (fileService) {\n            const loadingImages = [];\n            this.filesReady = new Promise((resolve, reject) => {\n                this.filesReadyResolve = resolve;\n                this.filesReadyReject = reject;\n            });\n            this.refs.fileImage.forEach((image, index) => {\n                loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));\n            });\n            if (loadingImages.length) {\n                Promise.all(loadingImages).then(() => {\n                    this.filesReadyResolve();\n                }).catch(() => this.filesReadyReject());\n            }\n            else {\n                this.filesReadyResolve();\n            }\n        }\n        return superAttach;\n    }\n    /* eslint-disable max-len */\n    fileSize(a, b, c, d, e) {\n        return `${(b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;\n    }\n    /* eslint-enable max-len */\n    /* eslint-disable max-depth */\n    globStringToRegex(str) {\n        str = str.replace(/\\s/g, '');\n        let regexp = '', excludes = [];\n        if (str.length > 2 && str[0] === '/' && str[str.length - 1] === '/') {\n            regexp = str.substring(1, str.length - 1);\n        }\n        else {\n            const split = str.split(',');\n            if (split.length > 1) {\n                for (let i = 0; i < split.length; i++) {\n                    const r = this.globStringToRegex(split[i]);\n                    if (r.regexp) {\n                        regexp += `(${r.regexp})`;\n                        if (i < split.length - 1) {\n                            regexp += '|';\n                        }\n                    }\n                    else {\n                        excludes = excludes.concat(r.excludes);\n                    }\n                }\n            }\n            else {\n                if (str.startsWith('!')) {\n                    excludes.push(`^((?!${this.globStringToRegex(str.substring(1)).regexp}).)*$`);\n                }\n                else {\n                    if (str.startsWith('.')) {\n                        str = `*${str}`;\n                    }\n                    regexp = `^${str.replace(new RegExp('[.\\\\\\\\+*?\\\\[\\\\^\\\\]$(){}=!<>|:\\\\-]', 'g'), '\\\\$&')}$`;\n                    regexp = regexp.replace(/\\\\\\*/g, '.*').replace(/\\\\\\?/g, '.');\n                }\n            }\n        }\n        return { regexp, excludes };\n    }\n    /* eslint-enable max-depth */\n    translateScalars(str) {\n        if (typeof str === 'string') {\n            if (str.search(/kb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024);\n            }\n            if (str.search(/mb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024);\n            }\n            if (str.search(/gb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024 * 1024);\n            }\n            if (str.search(/b/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/s/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/m/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 60);\n            }\n            if (str.search(/h/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 3600);\n            }\n        }\n        return str;\n    }\n    validatePattern(file, val) {\n        if (!val) {\n            return true;\n        }\n        const pattern = this.globStringToRegex(val);\n        let valid = true;\n        if (pattern.regexp && pattern.regexp.length) {\n            const regexp = new RegExp(pattern.regexp, 'i');\n            valid = (!lodash_1.default.isNil(file.type) && regexp.test(file.type)) ||\n                (!lodash_1.default.isNil(file.name) && regexp.test(file.name));\n        }\n        valid = pattern.excludes.reduce((result, excludePattern) => {\n            const exclude = new RegExp(excludePattern, 'i');\n            return result && (lodash_1.default.isNil(file.type) || exclude.test(file.type)) &&\n                (lodash_1.default.isNil(file.name) || exclude.test(file.name));\n        }, valid);\n        return valid;\n    }\n    validateMinSize(file, val) {\n        return file.size + 0.1 >= this.translateScalars(val);\n    }\n    validateMaxSize(file, val) {\n        return file.size - 0.1 <= this.translateScalars(val);\n    }\n    abortRequest(id) {\n        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);\n        if (abortUpload) {\n            abortUpload.abort();\n        }\n    }\n    handleAction(event) {\n        const target = event.target;\n        if (!target.id) {\n            return;\n        }\n        const [action, id] = target.id.split('-');\n        if (!action || !id || !this.actions[action]) {\n            return;\n        }\n        this.actions[action](id);\n    }\n    getFileName(file) {\n        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());\n    }\n    getInitFileToSync(file) {\n        const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;\n        return {\n            id: createRandomString(),\n            // Get a unique name for this file to keep file collisions from occurring.\n            dir: this.interpolate(this.component.dir || ''),\n            name: this.getFileName(file),\n            originalName: escapedFileName,\n            fileKey: this.component.fileKey || 'file',\n            storage: this.component.storage,\n            options: this.component.options,\n            file,\n            size: file.size,\n            status: 'info',\n            message: this.t('Processing file. Please wait...'),\n            hash: '',\n        };\n    }\n    handleSubmissionRevisions(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.root.form.submissionRevisions !== 'true') {\n                return '';\n            }\n            const bmf = new browser_md5_file_1.default();\n            const hash = yield new Promise((resolve, reject) => {\n                this.emit('fileUploadingStart');\n                bmf.md5(file, (err, md5) => {\n                    if (err) {\n                        return reject(err);\n                    }\n                    return resolve(md5);\n                });\n            });\n            this.emit('fileUploadingEnd');\n            return hash;\n        });\n    }\n    validateFileName(file) {\n        // Check if file with the same name is being uploaded\n        const fileWithSameNameUploading = this.filesToSync.filesToUpload\n            .some(fileToSync => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });\n        const fileWithSameNameUploaded = lodash_1.default.some(this.dataValue, fileStatus => fileStatus.originalName === file.name);\n        return fileWithSameNameUploaded || fileWithSameNameUploading\n            ? {\n                status: 'error',\n                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),\n            }\n            : {};\n    }\n    validateFileSettings(file) {\n        // Check file pattern\n        if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {\n            return {\n                status: 'error',\n                message: this.t('File is the wrong type; it must be {{ pattern }}', {\n                    pattern: this.component.filePattern,\n                }),\n            };\n        }\n        // Check file minimum size\n        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too small; it must be at least {{ size }}', {\n                    size: this.component.fileMinSize,\n                }),\n            };\n        }\n        // Check file maximum size\n        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too big; it must be at most {{ size }}', {\n                    size: this.component.fileMaxSize,\n                }),\n            };\n        }\n        return {};\n    }\n    validateFileService() {\n        const { fileService } = this;\n        return !fileService\n            ? {\n                status: 'error',\n                message: this.t('File Service not provided.'),\n            }\n            : {};\n    }\n    validateFile(file) {\n        const fileServiceValidation = this.validateFileService();\n        if (fileServiceValidation.status === 'error') {\n            return fileServiceValidation;\n        }\n        const fileNameValidation = this.validateFileName(file);\n        if (fileNameValidation.status === 'error') {\n            return fileNameValidation;\n        }\n        return this.validateFileSettings(file);\n    }\n    getGroupPermissions() {\n        let groupKey = null;\n        let groupPermissions = null;\n        //Iterate through form components to find group resource if one exists\n        this.root.everyComponent((element) => {\n            var _a, _b;\n            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {\n                groupPermissions = !element.component.submissionAccess ? [\n                    {\n                        type: element.component.defaultPermission,\n                        roles: [],\n                    },\n                ] : element.component.submissionAccess;\n                groupPermissions.forEach((permission) => {\n                    groupKey = ['admin', 'write', 'create'].includes(permission.type) ? element.component.key : null;\n                });\n            }\n        });\n        return { groupKey, groupPermissions };\n    }\n    triggerFileProcessor(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            let processedFile = null;\n            if (this.root.options.fileProcessor) {\n                try {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'block';\n                    }\n                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, this.root.options.fileProcessor);\n                    processedFile = yield fileProcessorHandler(file, this.component.properties);\n                }\n                catch (err) {\n                    this.fileDropHidden = false;\n                    return {\n                        status: 'error',\n                        message: this.t('File processing has been failed.'),\n                    };\n                }\n                finally {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'none';\n                    }\n                }\n            }\n            return {\n                file: processedFile,\n            };\n        });\n    }\n    prepareFileToUpload(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const fileToSync = this.getInitFileToSync(file);\n            fileToSync.hash = yield this.handleSubmissionRevisions(file);\n            const { status, message } = this.validateFile(file);\n            if (status === 'error') {\n                fileToSync.isValidationError = true;\n                fileToSync.status = status;\n                fileToSync.message = message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.component.privateDownload) {\n                file.private = true;\n            }\n            const { groupKey, groupPermissions } = this.getGroupPermissions();\n            const processedFile = yield this.triggerFileProcessor(file);\n            if (processedFile.status === 'error') {\n                fileToSync.status === 'error';\n                fileToSync.message = processedFile.message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.autoSync) {\n                fileToSync.message = this.t('Ready to be uploaded into storage');\n            }\n            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));\n        });\n    }\n    prepareFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Only allow one upload if not multiple.\n            if (!this.component.multiple) {\n                files = Array.prototype.slice.call(files, 0, 1);\n            }\n            if (this.component.storage && files && files.length) {\n                this.fileDropHidden = true;\n                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {\n                    yield this.prepareFileToUpload(file);\n                    this.redraw();\n                })));\n            }\n            else {\n                return Promise.resolve();\n            }\n        });\n    }\n    handleFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            yield this.prepareFilesToUpload(files);\n            if (!this.autoSync) {\n                yield this.syncFiles();\n            }\n        });\n    }\n    prepareFileToDelete(fileInfo) {\n        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync\n                ? this.t('Ready to be removed from storage')\n                : this.t('Preparing file to remove') }));\n        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);\n        this.splice(index);\n        this.redraw();\n    }\n    handleFileToRemove(fileInfo) {\n        this.prepareFileToDelete(fileInfo);\n        if (!this.autoSync) {\n            this.syncFiles();\n        }\n    }\n    deleteFile(fileInfo) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const { options = {} } = this.component;\n            if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {\n                const { fileService } = this;\n                if (fileService && typeof fileService.deleteFile === 'function') {\n                    return yield fileService.deleteFile(fileInfo, options);\n                }\n                else {\n                    const formio = this.options.formio || (this.root && this.root.formio);\n                    if (formio) {\n                        return yield formio.makeRequest('', fileInfo.url, 'delete');\n                    }\n                }\n            }\n        });\n    }\n    delete() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToDelete.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                try {\n                    if (fileToSync.isValidationError) {\n                        return { fileToSync };\n                    }\n                    yield this.deleteFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('Succefully removed');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                count++;\n                fileToSync.status = 'progress';\n                fileToSync.progress = parseInt(100 * count / total);\n                delete fileToSync.message;\n                this.redraw();\n            }, changeMessage: (message) => {\n                fileToSync.message = message;\n                this.redraw();\n            } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, \n            // Abort upload callback\n            (abort) => this.abortUploads.push({\n                id: fileToSync.id,\n                abort,\n            }), this.getMultipartOptions(fileToSync));\n        });\n    }\n    upload() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToUpload.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                let fileInfo = null;\n                try {\n                    if (fileToSync.isValidationError) {\n                        return {\n                            fileToSync,\n                            fileInfo,\n                        };\n                    }\n                    fileInfo = yield this.uploadFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('Succefully uploaded');\n                    fileInfo.originalName = fileToSync.originalName;\n                    fileInfo.hash = fileToSync.hash;\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    delete fileToSync.progress;\n                    fileToSync.message = typeof response === 'string'\n                        ? response\n                        : response.type === 'abort'\n                            ? this.t('Request was aborted')\n                            : response.toString();\n                    this.emit('fileUploadError', {\n                        fileToSync,\n                        response,\n                    });\n                }\n                finally {\n                    delete fileToSync.progress;\n                    this.redraw();\n                }\n                return {\n                    fileToSync,\n                    fileInfo,\n                };\n            })));\n        });\n    }\n    syncFiles() {\n        return __awaiter(this, void 0, void 0, function* () {\n            this.isSyncing = true;\n            this.fileDropHidden = true;\n            this.redraw();\n            try {\n                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([this.delete(), this.upload()]);\n                this.filesToSync.filesToDelete = filesToDelete\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                this.filesToSync.filesToUpload = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                if (!this.hasValue()) {\n                    this.dataValue = [];\n                }\n                const data = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })\n                    .map(file => file.fileInfo);\n                this.dataValue.push(...data);\n                this.triggerChange();\n                return Promise.resolve();\n            }\n            catch (err) {\n                return Promise.reject();\n            }\n            finally {\n                this.isSyncing = false;\n                this.fileDropHidden = false;\n                this.abortUploads = [];\n                this.redraw();\n            }\n        });\n    }\n    getFile(fileInfo) {\n        const { options = {} } = this.component;\n        const { fileService } = this;\n        if (!fileService) {\n            return alert('File Service not provided');\n        }\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        fileService.downloadFile(fileInfo, options).then((file) => {\n            if (file) {\n                if (['base64', 'indexeddb'].includes(file.storage)) {\n                    (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);\n                }\n                else {\n                    window.open(file.url, '_blank');\n                }\n            }\n        })\n            .catch((response) => {\n            // Is alert the best way to do this?\n            // User is expecting an immediate notification due to attempting to download a file.\n            alert(response);\n        });\n    }\n    focus() {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (this.refs.fileBrowse) {\n            this.refs.fileBrowse.focus();\n        }\n    }\n    beforeSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (!this.autoSync) {\n                    return Promise.resolve();\n                }\n                yield this.syncFiles();\n                return this.shouldSyncFiles\n                    ? Promise.reject('Synchronization is failed')\n                    : Promise.resolve();\n            }\n            catch (error) {\n                return Promise.reject(error.message);\n            }\n        });\n    }\n    destroy(all) {\n        this.stopVideo();\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = FileComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/File.js?");
 
 /***/ }),
 
@@ -5325,7 +5325,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass RadioComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'radio',\n            inputType: 'radio',\n            label: 'Radio',\n            key: 'radio',\n            values: [{ label: '', value: '' }],\n            data: {\n                url: '',\n            },\n            fieldSet: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Radio',\n            group: 'basic',\n            icon: 'dot-circle-o',\n            weight: 80,\n            documentation: '/userguide/form-building/form-components#radio',\n            schema: RadioComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                return {\n                    type: 'select',\n                    dataSrc: 'custom',\n                    valueProperty: 'value',\n                    dataType: classComp.dataType || '',\n                    data: {\n                        custom() {\n                            return classComp.values;\n                        }\n                    },\n                };\n            } });\n    }\n    static get serverConditionSettings() {\n        return Object.assign(Object.assign({}, super.serverConditionSettings), { valueComponent(classComp) {\n                return {\n                    type: 'select',\n                    dataSrc: 'custom',\n                    valueProperty: 'value',\n                    dataType: classComp.dataType || '',\n                    data: {\n                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,\n                    },\n                };\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.previousValue = this.dataValue || null;\n    }\n    get defaultSchema() {\n        return RadioComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultValue === false) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get inputInfo() {\n        var _a;\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.changeEvent = 'click';\n        info.attr.class = 'form-check-input';\n        info.attr.name = info.attr.name += `[${(_a = this.root) === null || _a === void 0 ? void 0 : _a.id}-${this.id}]`;\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get isRadio() {\n        return this.component.inputType === 'radio';\n    }\n    get optionSelectedClass() {\n        return 'radio-selected';\n    }\n    get listData() {\n        const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});\n        return lodash_1.default.get(listData, this.path);\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.//\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.optionsLoaded = false;\n        this.loadedOptions = [];\n        // Get the template keys for this radio component.\n        this.getTemplateKeys();\n    }\n    render() {\n        return super.render(this.renderTemplate('radio', {\n            input: this.inputInfo,\n            inline: this.component.inline,\n            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,\n            value: this.dataValue,\n            row: this.row,\n        }));\n    }\n    attach(element) {\n        this.loadRefs(element, { input: 'multiple', wrapper: 'multiple' });\n        this.refs.input.forEach((input, index) => {\n            this.addEventListener(input, this.inputInfo.changeEvent, () => {\n                this.updateValue(null, {\n                    modified: true,\n                });\n            });\n            if (this.component.values[index]) {\n                this.addShortcut(input, this.component.values[index].shortcut);\n            }\n            if (this.isRadio) {\n                let dataValue = this.dataValue;\n                if (!lodash_1.default.isString(this.dataValue)) {\n                    dataValue = lodash_1.default.toString(this.dataValue);\n                }\n                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {\n                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;\n                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);\n                }\n                else {\n                    input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));\n                }\n                this.addEventListener(input, 'keyup', (event) => {\n                    if (event.key === ' ' && dataValue === input.value) {\n                        event.preventDefault();\n                        this.updateValue(null, {\n                            modified: true,\n                        });\n                    }\n                });\n            }\n        });\n        this.triggerUpdate();\n        this.setSelectedClasses();\n        return super.attach(element);\n    }\n    detach(element) {\n        if (element && this.refs.input) {\n            this.refs.input.forEach((input, index) => {\n                if (this.component.values[index]) {\n                    this.removeShortcut(input, this.component.values[index].shortcut);\n                }\n            });\n        }\n        super.detach();\n    }\n    getValue() {\n        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        // If the input type of the component is checkbox the value should be determined by the checkboxes checked property\n        let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;\n        this.refs.input.forEach((input, index) => {\n            if (input.checked) {\n                value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?\n                    this.loadedOptions[index].value :\n                    input.value;\n            }\n        });\n        return value;\n    }\n    validateValueProperty() {\n        if (this.component.dataSrc === 'values') {\n            return true;\n        }\n        return !lodash_1.default.some(this.refs.wrapper, (wrapper, index) => this.refs.input[index].checked && this.loadedOptions[index].invalid);\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.values;\n        if (values) {\n            return values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    getValueAsString(value, options = {}) {\n        if (lodash_1.default.isObject(value)) {\n            value = JSON.stringify(value);\n        }\n        else if (!lodash_1.default.isString(value)) {\n            value = lodash_1.default.toString(value);\n        }\n        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';\n        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {\n            return value;\n        }\n        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;\n        const option = lodash_1.default.find(values, (v) => v.value === value);\n        if (!value) {\n            return lodash_1.default.get(option, 'label', '');\n        }\n        return lodash_1.default.get(option, 'label', '');\n    }\n    setValueAt(index, value) {\n        if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {\n            const inputValue = this.refs.input[index].value;\n            this.refs.input[index].checked = (inputValue === value.toString());\n        }\n    }\n    loadItems(url, search, headers, options, method, body) {\n        if (this.optionsLoaded) {\n            return;\n        }\n        if (!this.shouldLoad && this.listData) {\n            this.loadItemsFromMetadata();\n            return;\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response);\n            this.optionsLoaded = true;\n            this.redraw();\n        })\n            .catch((err) => {\n            this.handleLoadingError(err);\n        });\n    }\n    loadItemsFromMetadata() {\n        this.listData.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                label: this.itemTemplate(item)\n            };\n            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n                this.loadedOptions[i].value = this.dataValue;\n            }\n        });\n        this.optionsLoaded = true;\n        this.redraw();\n    }\n    setItems(items) {\n        const listData = [];\n        items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                value: this.component.valueProperty ? item[this.component.valueProperty] : item,\n                label: this.component.valueProperty ? this.itemTemplate(item, item[this.component.valueProperty]) : this.itemTemplate(item, item, i)\n            };\n            listData.push(this.templateData[this.component.valueProperty ? item[this.component.valueProperty] : i]);\n            if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(item[this.component.valueProperty]) ||\n                (!this.isRadio && lodash_1.default.isObject(item[this.component.valueProperty])) ||\n                (!this.isRadio && lodash_1.default.isBoolean(item[this.component.valueProperty])))) {\n                this.loadedOptions[i].invalid = true;\n            }\n        });\n        if (this.isSelectURL) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.listData) {\n                submission.metadata.listData = {};\n            }\n            lodash_1.default.set(submission.metadata.listData, this.path, listData);\n        }\n    }\n    setSelectedClasses() {\n        if (this.refs.wrapper) {\n            //add/remove selected option class\n            const value = this.dataValue;\n            this.refs.wrapper.forEach((wrapper, index) => {\n                const input = this.refs.input[index];\n                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());\n                if (checked) {\n                    //add class to container when selected\n                    this.addClass(wrapper, this.optionSelectedClass);\n                    //change \"checked\" attribute\n                    input.setAttribute('checked', 'true');\n                }\n                else {\n                    this.removeClass(wrapper, this.optionSelectedClass);\n                    input.removeAttribute('checked');\n                }\n            });\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed) {\n            this.setSelectedClasses();\n        }\n        if (!flags || !flags.modified || !this.isRadio) {\n            if (changed) {\n                this.previousValue = this.dataValue;\n            }\n            return changed;\n        }\n        // If they clicked on the radio that is currently selected, it needs to reset the value.\n        this.currentValue = this.dataValue;\n        const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;\n        if (shouldResetValue) {\n            this.resetValue();\n            this.triggerChange(flags);\n            this.setSelectedClasses();\n        }\n        this.previousValue = this.dataValue;\n        return changed;\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        const dataType = this.component.dataType || 'auto';\n        if (value === this.emptyValue) {\n            return value;\n        }\n        switch (dataType) {\n            case 'auto':\n                if (!isNaN(parseFloat(value)) && isFinite(value) && lodash_1.default.toString(value) === Number(value).toString()) {\n                    value = +value;\n                }\n                if (value === 'true') {\n                    value = true;\n                }\n                if (value === 'false') {\n                    value = false;\n                }\n                break;\n            case 'number':\n                value = +value;\n                break;\n            case 'string':\n                if (typeof value === 'object') {\n                    value = JSON.stringify(value);\n                }\n                else {\n                    value = String(value);\n                }\n                break;\n            case 'boolean':\n                value = !(!value || value.toString() === 'false');\n                break;\n        }\n        if (this.isSelectURL && this.templateData && this.templateData[value]) {\n            const submission = this.root.submission;\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);\n        }\n        return super.normalizeValue(value);\n    }\n}\nexports[\"default\"] = RadioComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/radio/Radio.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass RadioComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'radio',\n            inputType: 'radio',\n            label: 'Radio',\n            key: 'radio',\n            values: [{ label: '', value: '' }],\n            data: {\n                url: '',\n            },\n            fieldSet: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Radio',\n            group: 'basic',\n            icon: 'dot-circle-o',\n            weight: 80,\n            documentation: '/userguide/form-building/form-components#radio',\n            schema: RadioComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';\n                return isValuesSrc\n                    ? {\n                        type: 'select',\n                        dataSrc: 'custom',\n                        valueProperty: 'value',\n                        dataType: classComp.dataType || '',\n                        data: {\n                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,\n                        }\n                    }\n                    : Object.assign(Object.assign({}, classComp), { type: 'select' });\n            } });\n    }\n    static get serverConditionSettings() {\n        return RadioComponent.conditionOperatorsSettings;\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.previousValue = this.dataValue || null;\n    }\n    get defaultSchema() {\n        return RadioComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultValue === false) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get inputInfo() {\n        var _a;\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.changeEvent = 'click';\n        info.attr.class = 'form-check-input';\n        info.attr.name = info.attr.name += `[${(_a = this.root) === null || _a === void 0 ? void 0 : _a.id}-${this.id}]`;\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get isRadio() {\n        return this.component.inputType === 'radio';\n    }\n    get optionSelectedClass() {\n        return 'radio-selected';\n    }\n    get listData() {\n        const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});\n        return lodash_1.default.get(listData, this.path);\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.//\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.optionsLoaded = false;\n        this.loadedOptions = [];\n        // Get the template keys for this radio component.\n        this.getTemplateKeys();\n    }\n    render() {\n        return super.render(this.renderTemplate('radio', {\n            input: this.inputInfo,\n            inline: this.component.inline,\n            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,\n            value: this.dataValue,\n            row: this.row,\n        }));\n    }\n    attach(element) {\n        this.loadRefs(element, { input: 'multiple', wrapper: 'multiple' });\n        this.refs.input.forEach((input, index) => {\n            this.addEventListener(input, this.inputInfo.changeEvent, () => {\n                this.updateValue(null, {\n                    modified: true,\n                });\n            });\n            if (this.component.values[index]) {\n                this.addShortcut(input, this.component.values[index].shortcut);\n            }\n            if (this.isRadio) {\n                let dataValue = this.dataValue;\n                if (!lodash_1.default.isString(this.dataValue)) {\n                    dataValue = lodash_1.default.toString(this.dataValue);\n                }\n                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {\n                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;\n                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);\n                }\n                else {\n                    input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));\n                }\n                this.addEventListener(input, 'keyup', (event) => {\n                    if (event.key === ' ' && dataValue === input.value) {\n                        event.preventDefault();\n                        this.updateValue(null, {\n                            modified: true,\n                        });\n                    }\n                });\n            }\n        });\n        this.triggerUpdate();\n        this.setSelectedClasses();\n        return super.attach(element);\n    }\n    detach(element) {\n        if (element && this.refs.input) {\n            this.refs.input.forEach((input, index) => {\n                if (this.component.values[index]) {\n                    this.removeShortcut(input, this.component.values[index].shortcut);\n                }\n            });\n        }\n        super.detach();\n    }\n    getValue() {\n        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        // If the input type of the component is checkbox the value should be determined by the checkboxes checked property\n        let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;\n        this.refs.input.forEach((input, index) => {\n            if (input.checked) {\n                value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?\n                    this.loadedOptions[index].value :\n                    input.value;\n            }\n        });\n        return value;\n    }\n    validateValueProperty() {\n        if (this.component.dataSrc === 'values') {\n            return true;\n        }\n        return !lodash_1.default.some(this.refs.wrapper, (wrapper, index) => this.refs.input[index].checked && this.loadedOptions[index].invalid);\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.values;\n        if (values) {\n            return values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    getValueAsString(value, options = {}) {\n        if (lodash_1.default.isObject(value)) {\n            value = JSON.stringify(value);\n        }\n        else if (!lodash_1.default.isString(value)) {\n            value = lodash_1.default.toString(value);\n        }\n        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';\n        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {\n            return value;\n        }\n        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;\n        const option = lodash_1.default.find(values, (v) => v.value === value);\n        if (!value) {\n            return lodash_1.default.get(option, 'label', '');\n        }\n        return lodash_1.default.get(option, 'label', '');\n    }\n    setValueAt(index, value) {\n        if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {\n            const inputValue = this.refs.input[index].value;\n            this.refs.input[index].checked = (inputValue === value.toString());\n        }\n    }\n    loadItems(url, search, headers, options, method, body) {\n        if (this.optionsLoaded) {\n            return;\n        }\n        if (!this.shouldLoad && this.listData) {\n            this.loadItemsFromMetadata();\n            return;\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response);\n            this.optionsLoaded = true;\n            this.redraw();\n        })\n            .catch((err) => {\n            this.handleLoadingError(err);\n        });\n    }\n    loadItemsFromMetadata() {\n        this.listData.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                label: this.itemTemplate(item)\n            };\n            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n                this.loadedOptions[i].value = this.dataValue;\n            }\n        });\n        this.optionsLoaded = true;\n        this.redraw();\n    }\n    setItems(items) {\n        const listData = [];\n        items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                value: this.component.valueProperty ? item[this.component.valueProperty] : item,\n                label: this.component.valueProperty ? this.itemTemplate(item, item[this.component.valueProperty]) : this.itemTemplate(item, item, i)\n            };\n            listData.push(this.templateData[this.component.valueProperty ? item[this.component.valueProperty] : i]);\n            if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(item[this.component.valueProperty]) ||\n                (!this.isRadio && lodash_1.default.isObject(item[this.component.valueProperty])) ||\n                (!this.isRadio && lodash_1.default.isBoolean(item[this.component.valueProperty])))) {\n                this.loadedOptions[i].invalid = true;\n            }\n        });\n        if (this.isSelectURL) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.listData) {\n                submission.metadata.listData = {};\n            }\n            lodash_1.default.set(submission.metadata.listData, this.path, listData);\n        }\n    }\n    setSelectedClasses() {\n        if (this.refs.wrapper) {\n            //add/remove selected option class\n            const value = this.dataValue;\n            this.refs.wrapper.forEach((wrapper, index) => {\n                const input = this.refs.input[index];\n                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());\n                if (checked) {\n                    //add class to container when selected\n                    this.addClass(wrapper, this.optionSelectedClass);\n                    //change \"checked\" attribute\n                    input.setAttribute('checked', 'true');\n                }\n                else {\n                    this.removeClass(wrapper, this.optionSelectedClass);\n                    input.removeAttribute('checked');\n                }\n            });\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed) {\n            this.setSelectedClasses();\n        }\n        if (!flags || !flags.modified || !this.isRadio) {\n            if (changed) {\n                this.previousValue = this.dataValue;\n            }\n            return changed;\n        }\n        // If they clicked on the radio that is currently selected, it needs to reset the value.\n        this.currentValue = this.dataValue;\n        const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;\n        if (shouldResetValue) {\n            this.resetValue();\n            this.triggerChange(flags);\n            this.setSelectedClasses();\n        }\n        this.previousValue = this.dataValue;\n        return changed;\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        const dataType = this.component.dataType || 'auto';\n        if (value === this.emptyValue) {\n            return value;\n        }\n        switch (dataType) {\n            case 'auto':\n                if (!isNaN(parseFloat(value)) && isFinite(value) && lodash_1.default.toString(value) === Number(value).toString()) {\n                    value = +value;\n                }\n                if (value === 'true') {\n                    value = true;\n                }\n                if (value === 'false') {\n                    value = false;\n                }\n                break;\n            case 'number':\n                value = +value;\n                break;\n            case 'string':\n                if (typeof value === 'object') {\n                    value = JSON.stringify(value);\n                }\n                else {\n                    value = String(value);\n                }\n                break;\n            case 'boolean':\n                value = !(!value || value.toString() === 'false');\n                break;\n        }\n        if (this.isSelectURL && this.templateData && this.templateData[value]) {\n            const submission = this.root.submission;\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);\n        }\n        return super.normalizeValue(value);\n    }\n}\nexports[\"default\"] = RadioComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/radio/Radio.js?");
 
 /***/ }),
 
@@ -5336,7 +5336,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/*globals grecaptcha*/\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst get_1 = __importDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nconst debounce_1 = __importDefault(__webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\"));\nclass ReCaptchaComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            type: 'recaptcha',\n            key: 'recaptcha',\n            label: 'reCAPTCHA'\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {};\n    }\n    static savedValueTypes() {\n        return [];\n    }\n    render() {\n        this.recaptchaResult = null;\n        if (this.builderMode) {\n            return super.render('reCAPTCHA');\n        }\n        else {\n            return super.render('', true);\n        }\n    }\n    createInput() {\n        if (this.builderMode) {\n            // We need to see it in builder mode.\n            this.append(this.text(this.name));\n        }\n        else {\n            const siteKey = (0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey');\n            if (siteKey) {\n                const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;\n                this.recaptchaApiReady = Formio_1.Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);\n            }\n            else {\n                console.warn('There is no Site Key specified in settings in form JSON');\n            }\n        }\n    }\n    createLabel() {\n        return;\n    }\n    get skipInEmail() {\n        return true;\n    }\n    verify(actionName) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const siteKey = (0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey');\n            if (!siteKey) {\n                console.warn('There is no Site Key specified in settings in form JSON');\n                return;\n            }\n            if (!this.recaptchaApiReady) {\n                const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${(0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey')}`;\n                this.recaptchaApiReady = Formio_1.Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);\n            }\n            try {\n                yield this.recaptchaApiReady;\n                this.recaptchaVerifiedPromise = new Promise((resolve, reject) => {\n                    if (!this.isLoading) {\n                        this.isLoading = true;\n                        grecaptcha.ready((0, debounce_1.default)(() => __awaiter(this, void 0, void 0, function* () {\n                            try {\n                                const token = yield grecaptcha.execute(siteKey, { action: actionName });\n                                const verificationResult = yield this.sendVerificationRequest(token);\n                                this.recaptchaResult = Object.assign(Object.assign({}, verificationResult), { token });\n                                this.updateValue(this.recaptchaResult);\n                                this.isLoading = false;\n                                return resolve(verificationResult);\n                            }\n                            catch (err) {\n                                this.isLoading = false;\n                                reject(err);\n                            }\n                        }), 1000));\n                    }\n                });\n            }\n            catch (err) {\n                this.loading = false;\n            }\n        });\n    }\n    beforeSubmit() {\n        if (this.recaptchaVerifiedPromise) {\n            return this.recaptchaVerifiedPromise\n                .then(() => super.beforeSubmit());\n        }\n        return super.beforeSubmit();\n    }\n    sendVerificationRequest(token) {\n        return Formio_1.Formio.makeStaticRequest(`${Formio_1.Formio.projectUrl}/recaptcha?recaptchaToken=${token}`);\n    }\n    checkComponentValidity(data, dirty, row, options = {}, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        const { async = false } = options;\n        // Verification could be async only (which for now is only the case for server-side validation)\n        if (!async) {\n            return super.checkComponentValidity(data, dirty, row, options, errors);\n        }\n        const componentData = row[this.component.key];\n        if (!componentData || !componentData.token) {\n            this.setCustomValidity(this.t('reCaptchaTokenNotSpecifiedError'));\n            return Promise.resolve(false);\n        }\n        if (!componentData.success) {\n            this.setCustomValidity(this.t('reCaptchaTokenValidationError'));\n            return Promise.resolve(false);\n        }\n        // Any further validation will 100% not run on the client\n        return Promise.resolve(true);\n    }\n    normalizeValue(newValue) {\n        // If a recaptcha result has already been established, then do not allow it to be reset.\n        return this.recaptchaResult ? this.recaptchaResult : newValue;\n    }\n}\nexports[\"default\"] = ReCaptchaComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/recaptcha/ReCaptcha.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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/*globals grecaptcha*/\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst get_1 = __importDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nconst debounce_1 = __importDefault(__webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\"));\nclass ReCaptchaComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            type: 'recaptcha',\n            key: 'recaptcha',\n            label: 'reCAPTCHA'\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {};\n    }\n    static savedValueTypes() {\n        return [];\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static get serverConditionSettings() {\n        return ReCaptchaComponent.conditionOperatorsSettings;\n    }\n    render() {\n        this.recaptchaResult = null;\n        if (this.builderMode) {\n            return super.render('reCAPTCHA');\n        }\n        else {\n            return super.render('', true);\n        }\n    }\n    createInput() {\n        if (this.builderMode) {\n            // We need to see it in builder mode.\n            this.append(this.text(this.name));\n        }\n        else {\n            const siteKey = (0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey');\n            if (siteKey) {\n                const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;\n                this.recaptchaApiReady = Formio_1.Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);\n            }\n            else {\n                console.warn('There is no Site Key specified in settings in form JSON');\n            }\n        }\n    }\n    createLabel() {\n        return;\n    }\n    get skipInEmail() {\n        return true;\n    }\n    verify(actionName) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const siteKey = (0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey');\n            if (!siteKey) {\n                console.warn('There is no Site Key specified in settings in form JSON');\n                return;\n            }\n            if (!this.recaptchaApiReady) {\n                const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${(0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey')}`;\n                this.recaptchaApiReady = Formio_1.Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);\n            }\n            try {\n                yield this.recaptchaApiReady;\n                this.recaptchaVerifiedPromise = new Promise((resolve, reject) => {\n                    if (!this.isLoading) {\n                        this.isLoading = true;\n                        grecaptcha.ready((0, debounce_1.default)(() => __awaiter(this, void 0, void 0, function* () {\n                            try {\n                                const token = yield grecaptcha.execute(siteKey, { action: actionName });\n                                const verificationResult = yield this.sendVerificationRequest(token);\n                                this.recaptchaResult = Object.assign(Object.assign({}, verificationResult), { token });\n                                this.updateValue(this.recaptchaResult);\n                                this.isLoading = false;\n                                return resolve(verificationResult);\n                            }\n                            catch (err) {\n                                this.isLoading = false;\n                                reject(err);\n                            }\n                        }), 1000));\n                    }\n                });\n            }\n            catch (err) {\n                this.loading = false;\n            }\n        });\n    }\n    beforeSubmit() {\n        if (this.recaptchaVerifiedPromise) {\n            return this.recaptchaVerifiedPromise\n                .then(() => super.beforeSubmit());\n        }\n        return super.beforeSubmit();\n    }\n    sendVerificationRequest(token) {\n        return Formio_1.Formio.makeStaticRequest(`${Formio_1.Formio.projectUrl}/recaptcha?recaptchaToken=${token}`);\n    }\n    checkComponentValidity(data, dirty, row, options = {}, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        const { async = false } = options;\n        // Verification could be async only (which for now is only the case for server-side validation)\n        if (!async) {\n            return super.checkComponentValidity(data, dirty, row, options, errors);\n        }\n        const componentData = row[this.component.key];\n        if (!componentData || !componentData.token) {\n            this.setCustomValidity(this.t('reCaptchaTokenNotSpecifiedError'));\n            return Promise.resolve(false);\n        }\n        if (!componentData.success) {\n            this.setCustomValidity(this.t('reCaptchaTokenValidationError'));\n            return Promise.resolve(false);\n        }\n        // Any further validation will 100% not run on the client\n        return Promise.resolve(true);\n    }\n    normalizeValue(newValue) {\n        // If a recaptcha result has already been established, then do not allow it to be reset.\n        return this.recaptchaResult ? this.recaptchaResult : newValue;\n    }\n}\nexports[\"default\"] = ReCaptchaComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/recaptcha/ReCaptcha.js?");
 
 /***/ }),
 
@@ -5358,7 +5358,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Radio_1 = __importDefault(__webpack_require__(/*! ../radio/Radio */ \"./lib/cjs/components/radio/Radio.js\"));\nclass SelectBoxesComponent extends Radio_1.default {\n    static schema(...extend) {\n        return Radio_1.default.schema({\n            type: 'selectboxes',\n            label: 'Select Boxes',\n            key: 'selectBoxes',\n            inline: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select Boxes',\n            group: 'basic',\n            icon: 'plus-square',\n            weight: 60,\n            documentation: '/userguide/form-building/form-components#select-box',\n            schema: SelectBoxesComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectBoxesComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                return {\n                    type: 'select',\n                    dataSrc: 'custom',\n                    valueProperty: 'value',\n                    dataType: 'string',\n                    data: {\n                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`\n                    },\n                };\n            } });\n    }\n    static savedValueTypes(schema) {\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    constructor(...args) {\n        super(...args);\n    }\n    init() {\n        super.init();\n        this.component.inputType = 'checkbox';\n    }\n    get defaultSchema() {\n        return SelectBoxesComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.attr.name += '[]';\n        info.attr.type = 'checkbox';\n        info.attr.class = 'form-check-input';\n        return info;\n    }\n    get emptyValue() {\n        return this.component.values.reduce((prev, value) => {\n            if (value.value) {\n                prev[value.value] = false;\n            }\n            return prev;\n        }, {});\n    }\n    get defaultValue() {\n        let defaultValue = this.emptyValue;\n        if (!lodash_1.default.isEmpty(this.component.defaultValue)) {\n            defaultValue = this.component.defaultValue;\n        }\n        if (this.component.customDefaultValue && !this.options.preview) {\n            defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');\n        }\n        return defaultValue;\n    }\n    /**\n     * Only empty if the values are all false.\n     * @param {any} value - The value to check if empty.\n     * @returns {boolean} - If the value is empty.\n     */\n    isEmpty(value = this.dataValue) {\n        let empty = true;\n        for (const key in value) {\n            if (value.hasOwnProperty(key) && value[key]) {\n                empty = false;\n                break;\n            }\n        }\n        return empty;\n    }\n    getValue() {\n        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        const value = {};\n        lodash_1.default.each(this.refs.input, (input) => {\n            value[input.value] = !!input.checked;\n        });\n        return value;\n    }\n    /**\n     * Normalize values coming into updateValue.\n     * @param {any} value - The value to normalize.\n     * @returns {*} - The normalized value\n     */\n    normalizeValue(value) {\n        value = value || {};\n        if (typeof value !== 'object') {\n            if (typeof value === 'string') {\n                value = {\n                    [value]: true\n                };\n            }\n            else {\n                value = {};\n            }\n        }\n        if (Array.isArray(value)) {\n            lodash_1.default.each(value, (val) => {\n                value[val] = true;\n            });\n        }\n        const checkedValues = lodash_1.default.keys(lodash_1.default.pickBy(value, (val) => val));\n        if (this.isSelectURL && this.templateData && lodash_1.default.every(checkedValues, (val) => this.templateData[val])) {\n            const submission = this.root.submission;\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            const selectData = [];\n            checkedValues.forEach((value) => selectData.push(this.templateData[value]));\n            lodash_1.default.set(submission.metadata.selectData, this.path, selectData);\n        }\n        return value;\n    }\n    /**\n     * Set the value of this component.\n     * @param {any} value - The value to set.\n     * @param {any} flags - Flags to apply to this update.\n     * @returns {boolean} - If the value has changed.\n     */\n    setValue(value, flags = {}) {\n        const changed = this.updateValue(value, flags);\n        value = this.dataValue;\n        if (this.isHtmlRenderMode()) {\n            if (changed) {\n                this.redraw();\n            }\n        }\n        else {\n            lodash_1.default.each(this.refs.input, (input) => {\n                if (lodash_1.default.isUndefined(value[input.value])) {\n                    value[input.value] = false;\n                }\n                input.checked = !!value[input.value];\n            });\n        }\n        return changed;\n    }\n    getValueAsString(value, options = {}) {\n        if (!value) {\n            return '';\n        }\n        if (this.isSelectURL) {\n            if (options.modalPreview && this.loadedOptions) {\n                return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');\n            }\n            return (0, lodash_1.default)(value).pickBy((val) => val).keys().join(', ');\n        }\n        return (0, lodash_1.default)(this.component.values || [])\n            .filter((v) => value[v.value])\n            .map('label')\n            .join(', ');\n    }\n    setSelectedClasses() {\n        if (this.refs.wrapper) {\n            //add/remove selected option class\n            const value = this.dataValue;\n            const valuesKeys = Object.keys(value);\n            this.refs.wrapper.forEach((wrapper, index) => {\n                let key = valuesKeys[index];\n                const input = this.refs.input[index];\n                if ((input === null || input === void 0 ? void 0 : input.value.toString()) !== key) {\n                    key = valuesKeys.find((k) => (input === null || input === void 0 ? void 0 : input.value.toString()) === k);\n                }\n                const isChecked = value[key];\n                if ((isChecked && key) || (this.isSelectURL && !this.shouldLoad && this.listData && lodash_1.default.findIndex(this.selectData, this.listData[index]) !== -1)) {\n                    //add class to container when selected\n                    this.addClass(wrapper, this.optionSelectedClass);\n                    //change \"checked\" attribute\n                    input.setAttribute('checked', 'true');\n                }\n                else if (!isChecked && key) {\n                    this.removeClass(wrapper, this.optionSelectedClass);\n                    input.removeAttribute('checked');\n                }\n            });\n        }\n    }\n    setInputsDisabled(value, onlyUnchecked) {\n        if (this.refs.input) {\n            this.refs.input.forEach(item => {\n                if (onlyUnchecked && !item.checked || !onlyUnchecked) {\n                    item.disabled = value;\n                }\n            });\n        }\n    }\n    checkComponentValidity(data, dirty, rowData, options, errors = []) {\n        const minCount = this.component.validate.minSelectedCount;\n        const maxCount = this.component.validate.maxSelectedCount;\n        if (!this.shouldSkipValidation(data, rowData, options)) {\n            const isValid = this.isValid(data, dirty);\n            if ((maxCount || minCount)) {\n                const count = Object.keys(this.validationValue).reduce((total, key) => {\n                    if (this.validationValue[key]) {\n                        total++;\n                    }\n                    return total;\n                }, 0);\n                // Disable the rest of inputs if the max amount is already checked\n                if (maxCount && count >= maxCount) {\n                    this.setInputsDisabled(true, true);\n                }\n                else if (maxCount && !this.shouldDisabled) {\n                    this.setInputsDisabled(false);\n                }\n                if (!isValid && maxCount && count > maxCount) {\n                    const message = this.t(this.component.maxSelectedCountMessage || 'You may only select up to {{maxCount}} items', { maxCount });\n                    this.errors.push({ message });\n                    this.setCustomValidity(message, dirty);\n                    return false;\n                }\n                else if (!isValid && minCount && count < minCount) {\n                    this.setInputsDisabled(false);\n                    const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items', { minCount });\n                    this.errors.push({ message });\n                    this.setCustomValidity(message, dirty);\n                    return false;\n                }\n            }\n        }\n        return super.checkComponentValidity(data, dirty, rowData, options, errors);\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.values;\n        const availableValueKeys = (values || []).map(({ value: optionValue }) => optionValue);\n        const valueKeys = Object.keys(value);\n        return valueKeys.every((key) => availableValueKeys.includes(key));\n    }\n}\nexports[\"default\"] = SelectBoxesComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/selectboxes/SelectBoxes.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Radio_1 = __importDefault(__webpack_require__(/*! ../radio/Radio */ \"./lib/cjs/components/radio/Radio.js\"));\nclass SelectBoxesComponent extends Radio_1.default {\n    static schema(...extend) {\n        return Radio_1.default.schema({\n            type: 'selectboxes',\n            label: 'Select Boxes',\n            key: 'selectBoxes',\n            inline: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select Boxes',\n            group: 'basic',\n            icon: 'plus-square',\n            weight: 60,\n            documentation: '/userguide/form-building/form-components#select-box',\n            schema: SelectBoxesComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectBoxesComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';\n                return isValuesSrc\n                    ? {\n                        type: 'select',\n                        dataSrc: 'custom',\n                        valueProperty: 'value',\n                        dataType: 'string',\n                        data: {\n                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`\n                        },\n                    }\n                    : Object.assign(Object.assign({}, classComp), { dataType: 'string', type: 'select' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    constructor(...args) {\n        super(...args);\n    }\n    init() {\n        super.init();\n        this.component.inputType = 'checkbox';\n    }\n    get defaultSchema() {\n        return SelectBoxesComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.attr.name += '[]';\n        info.attr.type = 'checkbox';\n        info.attr.class = 'form-check-input';\n        return info;\n    }\n    get emptyValue() {\n        return this.component.values.reduce((prev, value) => {\n            if (value.value) {\n                prev[value.value] = false;\n            }\n            return prev;\n        }, {});\n    }\n    get defaultValue() {\n        let defaultValue = this.emptyValue;\n        if (!lodash_1.default.isEmpty(this.component.defaultValue)) {\n            defaultValue = this.component.defaultValue;\n        }\n        if (this.component.customDefaultValue && !this.options.preview) {\n            defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');\n        }\n        return defaultValue;\n    }\n    /**\n     * Only empty if the values are all false.\n     * @param {any} value - The value to check if empty.\n     * @returns {boolean} - If the value is empty.\n     */\n    isEmpty(value = this.dataValue) {\n        let empty = true;\n        for (const key in value) {\n            if (value.hasOwnProperty(key) && value[key]) {\n                empty = false;\n                break;\n            }\n        }\n        return empty;\n    }\n    getValue() {\n        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        const value = {};\n        lodash_1.default.each(this.refs.input, (input) => {\n            value[input.value] = !!input.checked;\n        });\n        return value;\n    }\n    /**\n     * Normalize values coming into updateValue.\n     * @param {any} value - The value to normalize.\n     * @returns {*} - The normalized value\n     */\n    normalizeValue(value) {\n        value = value || {};\n        if (typeof value !== 'object') {\n            if (typeof value === 'string') {\n                value = {\n                    [value]: true\n                };\n            }\n            else {\n                value = {};\n            }\n        }\n        if (Array.isArray(value)) {\n            lodash_1.default.each(value, (val) => {\n                value[val] = true;\n            });\n        }\n        const checkedValues = lodash_1.default.keys(lodash_1.default.pickBy(value, (val) => val));\n        if (this.isSelectURL && this.templateData && lodash_1.default.every(checkedValues, (val) => this.templateData[val])) {\n            const submission = this.root.submission;\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            const selectData = [];\n            checkedValues.forEach((value) => selectData.push(this.templateData[value]));\n            lodash_1.default.set(submission.metadata.selectData, this.path, selectData);\n        }\n        return value;\n    }\n    /**\n     * Set the value of this component.\n     * @param {any} value - The value to set.\n     * @param {any} flags - Flags to apply to this update.\n     * @returns {boolean} - If the value has changed.\n     */\n    setValue(value, flags = {}) {\n        const changed = this.updateValue(value, flags);\n        value = this.dataValue;\n        if (this.isHtmlRenderMode()) {\n            if (changed) {\n                this.redraw();\n            }\n        }\n        else {\n            lodash_1.default.each(this.refs.input, (input) => {\n                if (lodash_1.default.isUndefined(value[input.value])) {\n                    value[input.value] = false;\n                }\n                input.checked = !!value[input.value];\n            });\n        }\n        return changed;\n    }\n    getValueAsString(value, options = {}) {\n        if (!value) {\n            return '';\n        }\n        if (this.isSelectURL) {\n            if (options.modalPreview && this.loadedOptions) {\n                return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');\n            }\n            return (0, lodash_1.default)(value).pickBy((val) => val).keys().join(', ');\n        }\n        return (0, lodash_1.default)(this.component.values || [])\n            .filter((v) => value[v.value])\n            .map('label')\n            .join(', ');\n    }\n    setSelectedClasses() {\n        if (this.refs.wrapper) {\n            //add/remove selected option class\n            const value = this.dataValue;\n            const valuesKeys = Object.keys(value);\n            this.refs.wrapper.forEach((wrapper, index) => {\n                let key = valuesKeys[index];\n                const input = this.refs.input[index];\n                if ((input === null || input === void 0 ? void 0 : input.value.toString()) !== key) {\n                    key = valuesKeys.find((k) => (input === null || input === void 0 ? void 0 : input.value.toString()) === k);\n                }\n                const isChecked = value[key];\n                if ((isChecked && key) || (this.isSelectURL && !this.shouldLoad && this.listData && lodash_1.default.findIndex(this.selectData, this.listData[index]) !== -1)) {\n                    //add class to container when selected\n                    this.addClass(wrapper, this.optionSelectedClass);\n                    //change \"checked\" attribute\n                    input.setAttribute('checked', 'true');\n                }\n                else if (!isChecked && key) {\n                    this.removeClass(wrapper, this.optionSelectedClass);\n                    input.removeAttribute('checked');\n                }\n            });\n        }\n    }\n    setInputsDisabled(value, onlyUnchecked) {\n        if (this.refs.input) {\n            this.refs.input.forEach(item => {\n                if (onlyUnchecked && !item.checked || !onlyUnchecked) {\n                    item.disabled = value;\n                }\n            });\n        }\n    }\n    checkComponentValidity(data, dirty, rowData, options, errors = []) {\n        const minCount = this.component.validate.minSelectedCount;\n        const maxCount = this.component.validate.maxSelectedCount;\n        if (!this.shouldSkipValidation(data, rowData, options)) {\n            const isValid = this.isValid(data, dirty);\n            if ((maxCount || minCount)) {\n                const count = Object.keys(this.validationValue).reduce((total, key) => {\n                    if (this.validationValue[key]) {\n                        total++;\n                    }\n                    return total;\n                }, 0);\n                // Disable the rest of inputs if the max amount is already checked\n                if (maxCount && count >= maxCount) {\n                    this.setInputsDisabled(true, true);\n                }\n                else if (maxCount && !this.shouldDisabled) {\n                    this.setInputsDisabled(false);\n                }\n                if (!isValid && maxCount && count > maxCount) {\n                    const message = this.t(this.component.maxSelectedCountMessage || 'You may only select up to {{maxCount}} items', { maxCount });\n                    this.errors.push({ message });\n                    this.setCustomValidity(message, dirty);\n                    return false;\n                }\n                else if (!isValid && minCount && count < minCount) {\n                    this.setInputsDisabled(false);\n                    const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items', { minCount });\n                    this.errors.push({ message });\n                    this.setCustomValidity(message, dirty);\n                    return false;\n                }\n            }\n        }\n        return super.checkComponentValidity(data, dirty, rowData, options, errors);\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.values;\n        const availableValueKeys = (values || []).map(({ value: optionValue }) => optionValue);\n        const valueKeys = Object.keys(value);\n        return valueKeys.every((key) => availableValueKeys.includes(key));\n    }\n}\nexports[\"default\"] = SelectBoxesComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/selectboxes/SelectBoxes.js?");
 
 /***/ }),
 
@@ -5413,7 +5413,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 utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst choices_js_1 = __importDefault(__webpack_require__(/*! @formio/choices.js */ \"./node_modules/@formio/choices.js/public/assets/scripts/choices.js\"));\nclass TagsComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'tags',\n            label: 'Tags',\n            key: 'tags',\n            delimeter: ',',\n            storeas: 'string',\n            maxTags: 0\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Tags',\n            icon: 'tags',\n            group: 'advanced',\n            documentation: '/userguide/form-building/advanced-components#tags',\n            weight: 30,\n            schema: TagsComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TagsComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string];\n    }\n    init() {\n        super.init();\n    }\n    get emptyValue() {\n        return (this.component.storeas === 'string') ? '' : [];\n    }\n    get defaultSchema() {\n        return TagsComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'text';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get delimiter() {\n        return this.component.delimeter || ',';\n    }\n    attachElement(element, index) {\n        super.attachElement(element, index);\n        if (!element) {\n            return;\n        }\n        if (this.i18next) {\n            element.setAttribute('dir', this.i18next.dir());\n        }\n        if (this.choices) {\n            this.choices.destroy();\n        }\n        if (!choices_js_1.default) {\n            return;\n        }\n        const hasPlaceholder = !!this.component.placeholder;\n        this.choices = new choices_js_1.default(element, {\n            delimiter: this.delimiter,\n            editItems: true,\n            allowHTML: true,\n            maxItemCount: this.component.maxTags,\n            removeItemButton: true,\n            duplicateItemsAllowed: false,\n            shadowRoot: this.root ? this.root.shadowRoot : null,\n            placeholder: hasPlaceholder,\n            placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,\n        });\n        this.choices.itemList.element.tabIndex = element.tabIndex;\n        this.addEventListener(this.choices.input.element, 'blur', () => {\n            // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked\n            element.dispatchEvent(new Event('blur'));\n            const value = this.choices.input.value;\n            const maxTagsNumber = this.component.maxTags;\n            const valuesCount = this.choices.getValue(true).length;\n            const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());\n            if (value) {\n                if (maxTagsNumber && valuesCount === maxTagsNumber) {\n                    this.choices.addItems = false;\n                    this.choices.clearInput();\n                }\n                else if (isRepeatedValue) {\n                    this.choices.clearInput();\n                }\n                else {\n                    this.choices.setValue([value]);\n                    this.choices.clearInput();\n                    this.choices.hideDropdown(true);\n                    this.updateValue(null, {\n                        modified: true\n                    });\n                }\n            }\n        });\n    }\n    detach() {\n        if (this.choices) {\n            this.choices.destroy();\n            this.choices = null;\n        }\n        super.detach();\n    }\n    normalizeValue(value) {\n        if (this.component.storeas === 'string' && Array.isArray(value)) {\n            return value.join(this.delimiter);\n        }\n        else if (this.component.storeas === 'array' && typeof value === 'string') {\n            return value.split(this.delimiter).filter(result => result);\n        }\n        return value;\n    }\n    setValue(value, flags = {}) {\n        const changed = super.setValue(value, flags);\n        if (this.choices) {\n            let dataValue = this.dataValue;\n            this.choices.removeActiveItems();\n            if (dataValue) {\n                if (typeof dataValue === 'string') {\n                    dataValue = dataValue.split(this.delimiter).filter(result => result);\n                }\n                const value = Array.isArray(dataValue) ? dataValue : [dataValue];\n                this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));\n            }\n        }\n        return changed;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.choices.disable();\n        }\n        else {\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    focus() {\n        if (this.refs.input && this.refs.input.length) {\n            this.refs.input[0].parentNode.lastChild.focus();\n        }\n    }\n    getValueAsString(value) {\n        if (!value) {\n            return '';\n        }\n        if (Array.isArray(value)) {\n            return value.join(`${this.delimiter || ','} `);\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue, this.shouldSanitizeValue);\n    }\n}\nexports[\"default\"] = TagsComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/tags/Tags.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 utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst choices_js_1 = __importDefault(__webpack_require__(/*! @formio/choices.js */ \"./node_modules/@formio/choices.js/public/assets/scripts/choices.js\"));\nclass TagsComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'tags',\n            label: 'Tags',\n            key: 'tags',\n            delimeter: ',',\n            storeas: 'string',\n            maxTags: 0\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Tags',\n            icon: 'tags',\n            group: 'advanced',\n            documentation: '/userguide/form-building/advanced-components#tags',\n            weight: 30,\n            schema: TagsComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TagsComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string];\n    }\n    init() {\n        super.init();\n    }\n    get emptyValue() {\n        return (this.component.storeas === 'string') ? '' : [];\n    }\n    get defaultSchema() {\n        return TagsComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'text';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get delimiter() {\n        return this.component.delimeter || ',';\n    }\n    attachElement(element, index) {\n        super.attachElement(element, index);\n        if (!element) {\n            return;\n        }\n        if (this.i18next) {\n            element.setAttribute('dir', this.i18next.dir());\n        }\n        if (this.choices) {\n            this.choices.destroy();\n        }\n        if (!choices_js_1.default) {\n            return;\n        }\n        const hasPlaceholder = !!this.component.placeholder;\n        this.choices = new choices_js_1.default(element, {\n            delimiter: this.delimiter,\n            editItems: true,\n            allowHTML: true,\n            maxItemCount: this.component.maxTags,\n            removeItemButton: true,\n            duplicateItemsAllowed: false,\n            shadowRoot: this.root ? this.root.shadowRoot : null,\n            placeholder: hasPlaceholder,\n            placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,\n        });\n        this.choices.itemList.element.tabIndex = element.tabIndex;\n        this.addEventListener(this.choices.input.element, 'blur', () => {\n            // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked\n            element.dispatchEvent(new Event('blur'));\n            const value = this.choices.input.value;\n            const maxTagsNumber = this.component.maxTags;\n            const valuesCount = this.choices.getValue(true).length;\n            const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());\n            if (value) {\n                if (maxTagsNumber && valuesCount === maxTagsNumber) {\n                    this.choices.addItems = false;\n                    this.choices.clearInput();\n                }\n                else if (isRepeatedValue) {\n                    this.choices.clearInput();\n                }\n                else {\n                    this.choices.setValue([value]);\n                    this.choices.clearInput();\n                    this.choices.hideDropdown(true);\n                    this.updateValue(null, {\n                        modified: true\n                    });\n                }\n            }\n        });\n    }\n    detach() {\n        if (this.choices) {\n            this.choices.destroy();\n            this.choices = null;\n        }\n        super.detach();\n    }\n    normalizeValue(value) {\n        if (this.component.storeas === 'string' && Array.isArray(value)) {\n            return super.normalizeValue(value.join(this.delimiter));\n        }\n        else if (this.component.storeas === 'array' && typeof value === 'string') {\n            return super.normalizeValue(value.split(this.delimiter).filter(result => result));\n        }\n        return super.normalizeValue(value);\n    }\n    setValue(value, flags = {}) {\n        const changed = super.setValue(value, flags);\n        if (this.choices) {\n            let dataValue = this.dataValue;\n            this.choices.removeActiveItems();\n            if (dataValue) {\n                if (typeof dataValue === 'string') {\n                    dataValue = dataValue.split(this.delimiter).filter(result => result);\n                }\n                const value = Array.isArray(dataValue) ? dataValue : [dataValue];\n                this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));\n            }\n        }\n        return changed;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.choices.disable();\n        }\n        else {\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    focus() {\n        if (this.refs.input && this.refs.input.length) {\n            this.refs.input[0].parentNode.lastChild.focus();\n        }\n    }\n    getValueAsString(value) {\n        if (!value) {\n            return '';\n        }\n        if (Array.isArray(value)) {\n            return value.join(`${this.delimiter || ','} `);\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue, this.shouldSanitizeValue);\n    }\n}\nexports[\"default\"] = TagsComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/tags/Tags.js?");
 
 /***/ }),
 
@@ -5446,7 +5446,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst TextField_1 = __importDefault(__webpack_require__(/*! ../textfield/TextField */ \"./lib/cjs/components/textfield/TextField.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst defaultDataFormat = 'HH:mm:ss';\nclass TimeComponent extends TextField_1.default {\n    static schema(...extend) {\n        return TextField_1.default.schema({\n            type: 'time',\n            label: 'Time',\n            key: 'time',\n            inputType: 'time',\n            format: 'HH:mm',\n            dataFormat: defaultDataFormat,\n        }, ...extend);\n    }\n    static get serverConditionSettings() {\n        return Object.assign(Object.assign({}, super.serverConditionSettings), { valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'time' });\n            } });\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        const { edge: isEdgeBrowser, version: edgeVersion } = (0, utils_1.getBrowserInfo)();\n        this.component.inputMask = this.getInputMaskFromFormat(this.component.format);\n        this.component.inputType = isEdgeBrowser && edgeVersion <= 18\n            ? 'text'\n            : (this.component.inputType || 'time');\n        // If default value is given then the raw data needs to be set\n        this.rawData = this.component.multiple ? [] : this.getValueAsString(this.defaultValue) || this.emptyValue;\n    }\n    static get builderInfo() {\n        return {\n            title: 'Time',\n            icon: 'clock-o',\n            group: 'advanced',\n            documentation: '/userguide/form-building/advanced-components#time-1',\n            weight: 55,\n            schema: TimeComponent.schema(),\n        };\n    }\n    get dataFormat() {\n        return this.component.dataFormat || defaultDataFormat;\n    }\n    get defaultSchema() {\n        return TimeComponent.schema();\n    }\n    get defaultValue() {\n        let value = super.defaultValue;\n        if (this.component.multiple && Array.isArray(value)) {\n            value = value.map(item => item ? this.getStringAsValue(item) : item);\n        }\n        else {\n            if (value) {\n                value = this.getStringAsValue(value);\n            }\n        }\n        return value;\n    }\n    get validationValue() {\n        if ((Array.isArray(this.rawData) && !this.rawData.length) || !this.rawData) {\n            return this.dataValue;\n        }\n        return this.rawData;\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.attr.type = this.component.inputType;\n        return info;\n    }\n    get skipMaskValidation() {\n        return true;\n    }\n    isNotCompleteInput(value) {\n        return value.includes('_');\n    }\n    removeValue(index) {\n        this.rawData = Array.isArray(this.rawData) ? [...this.rawData.slice(0, index), ...this.rawData.slice(index + 1)] : this.emptyValue;\n        super.removeValue(index);\n    }\n    resetRawData(index) {\n        if (index) {\n            this.setRawValue(this.emptyValue, index);\n        }\n        else {\n            this.rawData = [];\n        }\n    }\n    setRawValue(value, index) {\n        if (Array.isArray(this.rawData)) {\n            this.rawData[index] = value;\n        }\n        else {\n            this.rawData = value;\n        }\n    }\n    getRawValue(index) {\n        if (index && Array.isArray(this.rawData)) {\n            return this.rawData[index] || this.emptyValue;\n        }\n        else {\n            return this.rawData;\n        }\n    }\n    getValueAt(index) {\n        if (!this.refs.input.length || !this.refs.input[index]) {\n            return this.emptyValue;\n        }\n        const { value } = this.refs.input[index];\n        if (!value) {\n            this.resetRawData(index);\n            return this.emptyValue;\n        }\n        this.setRawValue(value, index);\n        return this.getStringAsValue(value);\n    }\n    setValueAt(index, value) {\n        this.setRawValue(value ? this.getValueAsString(value) : value, index);\n        this.refs.input[index].value = this.getRawValue(index);\n    }\n    getStringAsValue(view) {\n        return view ? (0, moment_1.default)(view, this.component.format).format(this.component.dataFormat) : view;\n    }\n    getValueAsString(value) {\n        if (Array.isArray(value) && this.component.multiple) {\n            return value.map(item => (0, moment_1.default)(item, this.component.dataFormat).format(this.component.format)).join(', ');\n        }\n        return (value ? (0, moment_1.default)(value, this.component.dataFormat).format(this.component.format) : value) || '';\n    }\n    getInputMaskFromFormat(format) {\n        if (format === 'LT') {\n            return '99:99 AA';\n        }\n        if (format === 'LTS') {\n            return '99:99:99 AA';\n        }\n        return format.replace(/[hHmMsSk]/g, '9')\n            .replace(/[aA]/, 'AA');\n    }\n    addFocusBlurEvents(element) {\n        super.addFocusBlurEvents(element);\n        this.addEventListener(element, 'blur', () => {\n            element.value = this.getValueAsString(element.value);\n        });\n    }\n}\nexports[\"default\"] = TimeComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/time/Time.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst TextField_1 = __importDefault(__webpack_require__(/*! ../textfield/TextField */ \"./lib/cjs/components/textfield/TextField.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst defaultDataFormat = 'HH:mm:ss';\nclass TimeComponent extends TextField_1.default {\n    static schema(...extend) {\n        return TextField_1.default.schema({\n            type: 'time',\n            label: 'Time',\n            key: 'time',\n            inputType: 'time',\n            format: 'HH:mm',\n            dataFormat: defaultDataFormat,\n        }, ...extend);\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        const { edge: isEdgeBrowser, version: edgeVersion } = (0, utils_1.getBrowserInfo)();\n        this.component.inputMask = this.getInputMaskFromFormat(this.component.format);\n        this.component.inputType = isEdgeBrowser && edgeVersion <= 18\n            ? 'text'\n            : (this.component.inputType || 'time');\n        // If default value is given then the raw data needs to be set\n        this.rawData = this.component.multiple ? [] : this.getValueAsString(this.defaultValue) || this.emptyValue;\n    }\n    static get builderInfo() {\n        return {\n            title: 'Time',\n            icon: 'clock-o',\n            group: 'advanced',\n            documentation: '/userguide/form-building/advanced-components#time-1',\n            weight: 55,\n            schema: TimeComponent.schema(),\n        };\n    }\n    get dataFormat() {\n        return this.component.dataFormat || defaultDataFormat;\n    }\n    get defaultSchema() {\n        return TimeComponent.schema();\n    }\n    get defaultValue() {\n        let value = super.defaultValue;\n        if (this.component.multiple && Array.isArray(value)) {\n            value = value.map(item => item ? this.getStringAsValue(item) : item);\n        }\n        else {\n            if (value) {\n                value = this.getStringAsValue(value);\n            }\n        }\n        return value;\n    }\n    get validationValue() {\n        if ((Array.isArray(this.rawData) && !this.rawData.length) || !this.rawData) {\n            return this.dataValue;\n        }\n        return this.rawData;\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.attr.type = this.component.inputType;\n        return info;\n    }\n    get skipMaskValidation() {\n        return true;\n    }\n    isNotCompleteInput(value) {\n        return value.includes('_');\n    }\n    removeValue(index) {\n        this.rawData = Array.isArray(this.rawData) ? [...this.rawData.slice(0, index), ...this.rawData.slice(index + 1)] : this.emptyValue;\n        super.removeValue(index);\n    }\n    resetRawData(index) {\n        if (index) {\n            this.setRawValue(this.emptyValue, index);\n        }\n        else {\n            this.rawData = [];\n        }\n    }\n    setRawValue(value, index) {\n        if (Array.isArray(this.rawData)) {\n            this.rawData[index] = value;\n        }\n        else {\n            this.rawData = value;\n        }\n    }\n    getRawValue(index) {\n        if (index && Array.isArray(this.rawData)) {\n            return this.rawData[index] || this.emptyValue;\n        }\n        else {\n            return this.rawData;\n        }\n    }\n    getValueAt(index) {\n        if (!this.refs.input.length || !this.refs.input[index]) {\n            return this.emptyValue;\n        }\n        const { value } = this.refs.input[index];\n        if (!value) {\n            this.resetRawData(index);\n            return this.emptyValue;\n        }\n        this.setRawValue(value, index);\n        return this.getStringAsValue(value);\n    }\n    setValueAt(index, value) {\n        this.setRawValue(value ? this.getValueAsString(value) : value, index);\n        this.refs.input[index].value = this.getRawValue(index);\n    }\n    getStringAsValue(view) {\n        return view ? (0, moment_1.default)(view, this.component.format).format(this.component.dataFormat) : view;\n    }\n    getValueAsString(value) {\n        if (Array.isArray(value) && this.component.multiple) {\n            return value.map(item => (0, moment_1.default)(item, this.component.dataFormat).format(this.component.format)).join(', ');\n        }\n        return (value ? (0, moment_1.default)(value, this.component.dataFormat).format(this.component.format) : value) || '';\n    }\n    getInputMaskFromFormat(format) {\n        if (format === 'LT') {\n            return '99:99 AA';\n        }\n        if (format === 'LTS') {\n            return '99:99:99 AA';\n        }\n        return format.replace(/[hHmMsSk]/g, '9')\n            .replace(/[aA]/, 'AA');\n    }\n    addFocusBlurEvents(element) {\n        super.addFocusBlurEvents(element);\n        this.addEventListener(element, 'blur', () => {\n            element.value = this.getValueAsString(element.value);\n        });\n    }\n}\nexports[\"default\"] = TimeComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/time/Time.js?");
 
 /***/ }),
 
@@ -8841,7 +8841,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.75';\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.77';\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?");
 
 /***/ }),
 
@@ -8852,7 +8852,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.75';\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.77';\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?");
 
 /***/ }),